1.1開發(fā)背景

隨著工作和生活節(jié)奏的不斷加快，屬于自己的私人時間越來越少，日記這種傳統(tǒng)的傾訴方式也逐漸被人們淡忘，取而代之的是各種各樣的網(wǎng)絡(luò)日志。最近網(wǎng)絡(luò)中又出現(xiàn)了一種全新的日記方式一九宮格日記，它由9個方方正正的格子組成，讓用戶可以像做填空題那樣對號入座，填寫相應(yīng)的內(nèi)容，從而完成一篇日記，整個過程不過幾分鐘，非常適合在快節(jié)奏的生活中，留下自己的心靈足跡。

(資料圖片)

1.2 需求分析

通過實(shí)際調(diào)查，要求九宮格日記網(wǎng)具有以下功能:

1.為了更好地體現(xiàn)九宮格日記的特點(diǎn)，需要以圖片的形式保存每篇日記，并且日記的內(nèi)容寫在九宮格中。

2.為了便于瀏覽，默認(rèn)情況下，只顯示日記的縮略圖。

3.對于每篇日記需要提供查看原圖、左轉(zhuǎn)和右轉(zhuǎn)功能。

4.需要提供分頁瀏覽日記列表功能。

5.寫日記時，需要提供預(yù)覽功能。

6.在保存日記時，需要生成日記圖片和對應(yīng)的縮略圖。

1.3 系統(tǒng)設(shè)計(jì)

1.3.1系統(tǒng)目標(biāo)

根據(jù)需求分析的描述及與用戶的溝通，現(xiàn)制定網(wǎng)站實(shí)現(xiàn)目標(biāo)如下: 界面友好、美觀。區(qū)

2.日記內(nèi)容靈活多變，既可以做選擇題，也可以做填空題。

3.采用Ajax實(shí)現(xiàn)無刷新數(shù)據(jù)驗(yàn)證。

4.網(wǎng)站運(yùn)行穩(wěn)定可靠。

5.具有多瀏覽器兼容性，既要保證在Google Chrome上正常運(yùn)行，又要保證在IE瀏覽器上正常運(yùn)行。

1.3.2功能結(jié)構(gòu)

九宮格記憶網(wǎng)的功能結(jié)構(gòu)如下所示。

1.3.3功能結(jié)構(gòu)

九宮格記憶網(wǎng)的系統(tǒng)流程如下所示：

1.3.4開發(fā)環(huán)境

系統(tǒng)開發(fā)環(huán)境要求 1.操作系統(tǒng)：Windows 10。 2.JDK環(huán)境：Java SE Development Kit(JDK) version 8。 3.開發(fā)工具：Eclipse。 4.Web服務(wù)器：Tomcat 9.0。 5.開發(fā)技術(shù)：Java Web + Ajax + jQuery。 6.數(shù)據(jù)庫：MySQL 8.0數(shù)據(jù)庫。

1.3.5系統(tǒng)預(yù)覽

九宮格記憶網(wǎng)中有多個頁面，下面列出網(wǎng)站中幾個典型頁面的預(yù)覽。

1.主頁面如下

當(dāng)用戶訪問九宮格記憶網(wǎng)時，首先進(jìn)入的是網(wǎng)站的主界面。九宮格記憶網(wǎng)的主界面主要包括以下4部分內(nèi)容。 1.1 Banner信息欄:主要用于顯示網(wǎng)站的Logo。 1.2 導(dǎo)航欄:主要用于顯示網(wǎng)站的導(dǎo)航信息及歡迎信息。其中導(dǎo)航目將根據(jù)是否登錄而顯示不同的內(nèi)容。 1.3主顯示區(qū):主要用于分頁顯示九宮格日記列表。 1.4版權(quán)信息欄:主要用于顯示版權(quán)信息。 2.登錄頁面如下： 3.寫日記頁面如下，該頁面用于填寫日記信息，允許用戶選擇并預(yù)覽自己喜歡的模板，以及選擇預(yù)覽日記內(nèi)容等等。 1.4 數(shù)據(jù)庫設(shè)計(jì) 1.4.1數(shù)據(jù)庫設(shè)計(jì) 1.4.2 tb_user(用戶信息表) 1.4.3 tb_diary(日記表) 1.4.4 tb_comments(評論記錄表) 1.4.5 tb_likes(點(diǎn)贊記錄表)

1.5部分源碼

文件夾組織結(jié)構(gòu)

數(shù)據(jù)庫連接（ConnDB）：package com.mr.tools;import java.io.InputStream; //導(dǎo)入java.io.InputStream類import java.sql.*; //導(dǎo)入java.sql包中的所有類import java.util.Properties; //導(dǎo)入java.util.Properties類public class ConnDB {public Connection conn = null; // 聲明Connection對象的實(shí)例   public Statement stmt = null; // 聲明Statement對象的實(shí)例   public ResultSet rs = null; // 聲明ResultSet對象的實(shí)例   private static String propFileName = "connDB.properties"; // 指定資源文件保存的位置   private static Properties prop = new Properties(); // 創(chuàng)建并實(shí)例化Properties對象的實(shí)例   private static String dbClassName = "com.mysql.jdbc.Driver"; // 定義保存數(shù)據(jù)庫驅(qū)動的變量   private static String dbUrl = "jdbc:mysql://localhost:3306/db_9griddiary?user=root&password=123456&useUnicode=true&";   public ConnDB() {// 構(gòu)造方法      try {// 捕捉異常         // 將Properties文件讀取到InputStream對象中         InputStream in = getClass().getResourceAsStream(propFileName);         prop.load(in); // 通過輸入流對象加載Properties文件         dbClassName = prop.getProperty("DB_CLASS_NAME"); // 獲取數(shù)據(jù)庫驅(qū)動         // 獲取連接的URL         dbUrl = prop.getProperty("DB_URL", dbUrl);      } catch (Exception e) {e.printStackTrace(); // 輸出異常信息      }   }   /**    * 功能：獲取連接的語句    *     * @return    */   public static Connection getConnection() {Connection conn = null;      try {// 連接數(shù)據(jù)庫時可能發(fā)生異常因此需要捕捉該異常         Class.forName(dbClassName).newInstance(); // 裝載數(shù)據(jù)庫驅(qū)動         conn = DriverManager.getConnection(dbUrl); // 建立與數(shù)據(jù)庫URL中定義的數(shù)據(jù)庫的連接      } catch (Exception ee) {ee.printStackTrace(); // 輸出異常信息      }      if (conn == null) {System.err               .println("警告: DbConnectionManager.getConnection() 獲得數(shù)據(jù)庫鏈接失敗.\r\n\r\n鏈接類型:"                     + dbClassName + "\r\n鏈接位置:" + dbUrl); // 在控制臺上輸出提示信息      }      return conn; // 返回?cái)?shù)據(jù)庫連接對象   }   /*    * 功能：執(zhí)行查詢語句    */   public ResultSet executeQuery(String sql) {try {// 捕捉異常         conn = getConnection(); // 調(diào)用getConnection()方法構(gòu)造Connection對象的一個實(shí)例conn         stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,               ResultSet.CONCUR_READ_ONLY);         rs = stmt.executeQuery(sql);      } catch (SQLException ex) {System.err.println(ex.getMessage()); // 輸出異常信息      }      return rs; // 返回結(jié)果集對象   }   /*    * 功能:執(zhí)行更新操作    */   public int executeUpdate(String sql) {int result = 0; // 定義保存返回值的變量      try {// 捕捉異常         conn = getConnection(); // 調(diào)用getConnection()方法構(gòu)造Connection對象的一個實(shí)例conn         stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,               ResultSet.CONCUR_READ_ONLY);         result = stmt.executeUpdate(sql); // 執(zhí)行更新操作      } catch (SQLException ex) {result = 0; // 將保存返回值的變量賦值為0      }      return result; // 返回保存返回值的變量   }   /*    * 功能:關(guān)閉數(shù)據(jù)庫的連接    */   public void close() {try {// 捕捉異常         if (rs != null) {// 當(dāng)ResultSet對象的實(shí)例rs不為空時            rs.close(); // 關(guān)閉ResultSet對象         }         if (stmt != null) {// 當(dāng)Statement對象的實(shí)例stmt不為空時            stmt.close(); // 關(guān)閉Statement對象         }         if (conn != null) {// 當(dāng)Connection對象的實(shí)例conn不為空時            conn.close(); // 關(guān)閉Connection對象         }      } catch (Exception e) {e.printStackTrace(System.err); // 輸出異常信息} }}配置中文亂碼的過濾器（CharacterEncodingFilter）package com.mr.filter;import java.io.IOException;import javax.servlet.*;public class CharacterEncodingFilter implements Filter {protected String encoding = null; // 定義編碼格式變量   protected FilterConfig filterConfig = null; // 定義過濾器配置對象   public void init(FilterConfig filterConfig) throws ServletException {this.filterConfig = filterConfig; // 初始化過濾器配置對象      this.encoding = filterConfig.getInitParameter("encoding"); // 獲取配置文件中指定的編碼格式   }   // 過濾器的接口方法，用于執(zhí)行過濾業(yè)務(wù)   public void doFilter(ServletRequest request, ServletResponse response,         FilterChain chain) throws IOException, ServletException {if (encoding != null) {request.setCharacterEncoding(encoding); // 設(shè)置請求的編碼         // 設(shè)置應(yīng)答對象的內(nèi)容類型（包括編碼格式）         response.setContentType("text/html; charset=" + encoding);      }      chain.doFilter(request, response); // 傳遞給下一個過濾器   }   public void destroy() {this.encoding = null;      this.filterConfig = null;   }}編寫實(shí)體類User.javapackage com.mr.model;public class User {private int id = 0;// 用戶ID   private String username = "";// 用戶名   private String pwd = "";// 密碼   private String email = "";// E-mail地址   private String question = "";// 密碼提示問題   private String answer = "";// 密碼提示問題答案   private String city = "";// 所在地   public String getEmail() {return email;   }   public void setEmail(String email) {this.email = email;   }   public String getQuestion() {return question;   }   public void setQuestion(String question) {this.question = question;   }   public String getAnswer() {return answer;   }   public void setAnswer(String answer) {this.answer = answer;   }   public String getCity() {return city;   }   public void setCity(String city) {this.city = city;   }   public int getId() {return id;   }   public void setId(int id) {this.id = id;   }   public String getUsername() {return username;   }   public void setUsername(String username) {this.username = username;   }   public String getPwd() {return pwd;   }   public void setPwd(String pwd) {this.pwd = pwd;   }}Diary.javapackage com.mr.model;import java.util.Date;import java.util.LinkedList;import java.util.List;/** * 日記類 * */public class Diary {private int id = 0;// 日記ID號   private String title = "";// 日記標(biāo)題   private String address = "";// 日記圖片地址   private Date writeTime = null;// 寫日記的時間   private int userid = 0;// 用戶ID   private String username = "";// 用戶名   private Listcomments;// 日志評論   private int likes;// 點(diǎn)贊數(shù)   public Diary() {super();   }   public String getUsername() {return username;   }   public void setUsername(String username) {this.username = username;   }   public int getId() {return id;   }   public void setId(int id) {this.id = id;   }   public String getTitle() {return title;   }   public void setTitle(String title) {this.title = title;   }   public String getAddress() {return address;   }   public void setAddress(String address) {this.address = address;   }   public Date getWriteTime() {return writeTime;   }   public void setWriteTime(Date writeTime) {this.writeTime = writeTime;   }   public int getUserid() {return userid;   }   public void setUserid(int userid) {this.userid = userid;   }   public ListgetComments() {return comments;   }   public void setComments(Listcomments) {this.comments = comments;   }   public int getLikes() {return likes;   }   public void setLikes(int likes) {this.likes = likes;   }}Comment.javapackage com.mr.model;/** * 評論類 * */public class Commnet {private int id;// 留言編號   private String fromUserName;// 留言人   private String content;// 留言內(nèi)容   private String create_time;// 留言時間   private boolean valid;// 是否有效   public Commnet() {super();   }   public int getId() {return id;   }   public void setId(int id) {this.id = id;   }   public String getContent() {return content;   }   public void setContent(String content) {this.content = content;   }   public String getFromUserName() {return fromUserName;   }   public void setFromUserName(String fromUserName) {this.fromUserName = fromUserName;   }   public String getCreate_time() {return create_time;   }   public void setCreate_time(String create_time) {this.create_time = create_time;   }   public boolean isValid() {return valid;   }   public void setValid(boolean valid) {this.valid = valid;   }}

1.6小 結(jié) 以上介紹的九宮格記憶網(wǎng)中，應(yīng)用到了很多關(guān)鍵的技術(shù)，這些技術(shù)在開發(fā)過程中都是比較常用的技術(shù)。例如，采用了DIV+CSS布局、用戶注冊功能是通過Ajax實(shí)現(xiàn)的、在Servlet中生成日記圖片技術(shù)和生成縮略圖技術(shù)等，