1.1開發背景

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

(資料圖片)

1.2 需求分析

通過實際調查，要求九宮格日記網具有以下功能:

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

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

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

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

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

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

1.3 系統設計

1.3.1系統目標

根據需求分析的描述及與用戶的溝通，現制定網站實現目標如下: 界面友好、美觀。區

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

3.采用Ajax實現無刷新數據驗證。

4.網站運行穩定可靠。

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

1.3.2功能結構

九宮格記憶網的功能結構如下所示。

1.3.3功能結構

九宮格記憶網的系統流程如下所示：

1.3.4開發環境

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

1.3.5系統預覽

九宮格記憶網中有多個頁面，下面列出網站中幾個典型頁面的預覽。

1.主頁面如下

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

1.5部分源碼

文件夾組織結構

數據庫連接（ConnDB）：package com.mr.tools;import java.io.InputStream; //導入java.io.InputStream類import java.sql.*; //導入java.sql包中的所有類import java.util.Properties; //導入java.util.Properties類public class ConnDB {public Connection conn = null; // 聲明Connection對象的實例   public Statement stmt = null; // 聲明Statement對象的實例   public ResultSet rs = null; // 聲明ResultSet對象的實例   private static String propFileName = "connDB.properties"; // 指定資源文件保存的位置   private static Properties prop = new Properties(); // 創建并實例化Properties對象的實例   private static String dbClassName = "com.mysql.jdbc.Driver"; // 定義保存數據庫驅動的變量   private static String dbUrl = "jdbc:mysql://localhost:3306/db_9griddiary?user=root&password=123456&useUnicode=true&";   public ConnDB() {// 構造方法      try {// 捕捉異常         // 將Properties文件讀取到InputStream對象中         InputStream in = getClass().getResourceAsStream(propFileName);         prop.load(in); // 通過輸入流對象加載Properties文件         dbClassName = prop.getProperty("DB_CLASS_NAME"); // 獲取數據庫驅動         // 獲取連接的URL         dbUrl = prop.getProperty("DB_URL", dbUrl);      } catch (Exception e) {e.printStackTrace(); // 輸出異常信息      }   }   /**    * 功能：獲取連接的語句    *     * @return    */   public static Connection getConnection() {Connection conn = null;      try {// 連接數據庫時可能發生異常因此需要捕捉該異常         Class.forName(dbClassName).newInstance(); // 裝載數據庫驅動         conn = DriverManager.getConnection(dbUrl); // 建立與數據庫URL中定義的數據庫的連接      } catch (Exception ee) {ee.printStackTrace(); // 輸出異常信息      }      if (conn == null) {System.err               .println("警告: DbConnectionManager.getConnection() 獲得數據庫鏈接失敗.\r\n\r\n鏈接類型:"                     + dbClassName + "\r\n鏈接位置:" + dbUrl); // 在控制臺上輸出提示信息      }      return conn; // 返回數據庫連接對象   }   /*    * 功能：執行查詢語句    */   public ResultSet executeQuery(String sql) {try {// 捕捉異常         conn = getConnection(); // 調用getConnection()方法構造Connection對象的一個實例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; // 返回結果集對象   }   /*    * 功能:執行更新操作    */   public int executeUpdate(String sql) {int result = 0; // 定義保存返回值的變量      try {// 捕捉異常         conn = getConnection(); // 調用getConnection()方法構造Connection對象的一個實例conn         stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,               ResultSet.CONCUR_READ_ONLY);         result = stmt.executeUpdate(sql); // 執行更新操作      } catch (SQLException ex) {result = 0; // 將保存返回值的變量賦值為0      }      return result; // 返回保存返回值的變量   }   /*    * 功能:關閉數據庫的連接    */   public void close() {try {// 捕捉異常         if (rs != null) {// 當ResultSet對象的實例rs不為空時            rs.close(); // 關閉ResultSet對象         }         if (stmt != null) {// 當Statement對象的實例stmt不為空時            stmt.close(); // 關閉Statement對象         }         if (conn != null) {// 當Connection對象的實例conn不為空時            conn.close(); // 關閉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"); // 獲取配置文件中指定的編碼格式   }   // 過濾器的接口方法，用于執行過濾業務   public void doFilter(ServletRequest request, ServletResponse response,         FilterChain chain) throws IOException, ServletException {if (encoding != null) {request.setCharacterEncoding(encoding); // 設置請求的編碼         // 設置應答對象的內容類型（包括編碼格式）         response.setContentType("text/html; charset=" + encoding);      }      chain.doFilter(request, response); // 傳遞給下一個過濾器   }   public void destroy() {this.encoding = null;      this.filterConfig = null;   }}編寫實體類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 = "";// 日記標題   private String address = "";// 日記圖片地址   private Date writeTime = null;// 寫日記的時間   private int userid = 0;// 用戶ID   private String username = "";// 用戶名   private Listcomments;// 日志評論   private int likes;// 點贊數   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;// 留言內容   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小 結 以上介紹的九宮格記憶網中，應用到了很多關鍵的技術，這些技術在開發過程中都是比較常用的技術。例如，采用了DIV+CSS布局、用戶注冊功能是通過Ajax實現的、在Servlet中生成日記圖片技術和生成縮略圖技術等，