Java项目实战之九宫格记忆网

九宫格日记是一种全新的日记方式。它由9个方方正正的格子组成，9个格子9个主题，用户只需要在每个格子中填写或选择相应的内容就能完成一篇日记，整个过程不过几分钟。九宫格日记因其便捷、省时等优点在网上迅速流行开来，备受学生、年轻上班族的青睐，很多公司白领也在写九宫格日记。本章将介绍如何应用Java Web+Ajax+jQuery+ MySQL实现九宫格记忆网。

本项目利用Java Web+Ajax+jQuery+MySQL实现，通过本项目，可以学习到：

• 了解如何应用DIV+CSS进行网站布局
• 掌握如何实现Ajax重构
• 掌握图片的展开和收缩的方法
• 掌握如何进行图片的左转和右转
• 掌握如何根据指定内容生成PNG图片
• 掌握生成图片缩略图的技术
• 掌握如何弹出灰色半透明背景的无边框窗口

开发背景

随着工作和生活节奏的不断加快，属于自己的私人时间也越来越少，日记这种传统的倾诉方式也逐渐被人们淡忘，取而代之的是各种各样的网络日志。九宫格日记是一种全新的日记方式，它由9个方方正正的格子组成，让用户可以像做填空题那样对号入座，填写相应的内容，从而完成一篇日记，整个过程不过几分钟，非常适合在快节奏的生活中留下自己的心灵足迹。

需求分析

通过实际调查，要求九宫格记忆网具有以下功能。

☑ 为了更好地体现九宫格日记的特点，需要以图片的形式保存每篇日记，并且日记的内容写在九宫格中。

☑ 为了便于浏览，默认情况下，只显示日记的缩略图。

☑ 对于每篇日记需要提供查看原图、左转和右转功能。

☑ 需要提供分页浏览日记列表功能。

☑ 写日记时，需要提供预览功能。

☑ 在保存日记时，需要生成日记图片和对应的缩略图。

系统目标

根据需求分析的描述及与用户的沟通，制定网站实现目标如下。

☑ 界面友好、美观。

☑ 日记内容灵活多变，既可以做选择题，也可以做填空题。

☑ 采用Ajax实现无刷新数据验证。

☑ 网站运行稳定可靠。

☑ 具有多浏览器兼容性，既要保证在Google Chrome浏览器上正常运行，又要保证在IE浏览器上正常运行。

功能结构

九宫格记忆网的功能结构如图所示。 

系统流程

九宫格记忆网的系统流程如图所示。 

开发环境

本系统的软件开发及运行环境具体如下。

☑　操作系统：Windows 7。

☑　JDK环境：Java SE Development Kit（JDK）version 8。

☑　开发工具：Eclipse for Java EE 4.7（Oxygen）。

☑　Web服务器：Tomcat 9.0。

☑　数据库：MySQL 5.7数据库。

☑　浏览器：推荐Google Chrome浏览器。

☑　分辨率：最佳效果为1440×900像素。

系统预览

九宫格记忆网中有多个页面，下面列出网站中几个典型页面的预览，其他页面可以通过运行资源包中本系统的源程序进行查看。

分页显示九宫格日记列表如图所示。该页面用于分页显示日记列表，包括展开和收缩日记图片、显示日记原图、对日记图片进行左转和右转等功能。当用户登录后，还可以查看和删除自己的日记。 

写九宫格日记页面如图所示，该页面用于填写日记信息，允许用户选择并预览自己喜欢的模板，以及选择预置日记内容等。

预览九宫格日记页面如图所示，该页面主要用于预览日记图片，如果用户满意，可以单击“保存”超链接保存日记图片，否则可以单击“再改改”超链接返回填写九宫格日记页面进行修改。

用户注册页面如图所示，该页面用于实现用户注册。在该页面中输入用户名后，将光标移出该文本框，系统将自动检测输入的用户名是否合法（包括用户名长度及是否被注册），如果不合法，将给出错误提示，同样，输入其他信息时，系统也将实时检测输入的信息是否合法。

文件夹组织结构

在进行九宫格记忆网开发之前，要对系统整体文件夹组织架构进行规划。对系统中使用的文件进行合理的分类，分别放置于不同的文件夹下。通过对文件夹组织架构的规划，可以确保系统文件目录明确、条理清晰，同样也便于系统的更新和维护，本项目的文件夹组织架构规划如图所示。 

对本项目感兴趣的读者，请「转到这里」下载源码和解析。