JSP应用开发与实践第14章--综合案例——九宫格日记网

本章要求：第14章综合案例——九宫格日记网九宫格日记网的基本开发流程九宫格日记网的功能结构及系统流程九宫格日记网的数据库设计编写数据库连接及操作的类配置解决中文乱码的过滤器九宫格日记网主界面的实现显示九宫格日记列表模块的实现写九宫格日记模块的实现九宫格日记网的编译与发布主要内容1.需求分析2.总体设计3.数据库设计4.公共模块设计5.网站主要模块开发6.网站编译与发布第14章综合案例——九宫格日记网14.1需求分析随着工作和生活节奏的不断加快，属于自己的私人时间也越来越少，日记这种传统的倾诉方式也逐渐被人们所淡忘，取而代之的是各种各样的网络日志。不过，最近网络中又出现了一种全新的日记方式，九宫格日记，它由九个方方正正的格子组成，让用户可以像做填空题那样对号入座，填写相应的内容，从而完成一篇日记，整个过程不过几分钟。九宫格日记因其便捷、省时等优点在网上迅速风行开来，倍受学生、年轻上班族青睐。通过实际调查，要求九宫格日记网具有以下功能：为了更好的体现九宫格日记的特点，需要以图片的形式保存每篇日记，并且日记的内容写在九宫格中。为了便于浏览，默认情况下，只显示日记的缩略图。对于每篇日记需要提供查看原图、左转和右转功能。需要提供分页浏览日记列表功能。写日记时，需要提供预览功能。在保存日记时，需要生成日记图片和对应的缩略图。14.2.1系统目标14.2.2构建开发环境14.2.3网站功能结构14.2.4系统流程图14.2总体设计根据需求分析的描述及与用户的沟通，现制定网站实现目标如下：界面友好、美观。日记内容灵活多变，即可以做选择题，也可以做填空题。采用Ajax实现无刷新数据验证。网站运行稳定可靠。具有多浏览器兼容性，即要保证在IE9下正常运行，又要保证在火狐浏览器下正常运行。14.2.1系统目标1．网站开发环境开发工具：EclipseIDEforJavaEE。开发技术：JSP+Ajax+HTML5+JavaScript。后台数据库：MySQL。开发平台：WindowsXP（SP2）/WindowsServer2003（SP2）/Windows7。Java开发包：JavaSEDevelopmentKET(JDK)version7Update3。2．服务器端操作系统：WindowsXP（SP2）/WindowsServer2003（SP2）/Windows7。Web服务器：Tomcat7.0.27。数据库服务器：MySQL。3．客户端浏览器：IE9.0以上版本、Firefox等。分辨率：最佳效果1680×1050像素。14.2.2构建开发环境根据九宫格日记网的特点，可以将其分为用户模块、显示九宫格日记列表和写九宫格日记3个部分设计。下面分别进行介绍。显示九宫格日记列表模块显示九宫格日记列表主要用于分页显示全部九宫格日记、分页显示我的日记、展开和收缩日记图片、显示日记原图、对日记图片进行左转和右转以及删除自己的日记等。写九宫格日记模块写九宫格日记主要用于填写日记信息、预览生成的日记图片和保存日记图片。其中，在填写日记信息时，允许用户选择并预览自己喜欢的模板，以及选择预置日记内容等。用户模块用户模块又需要包括用户注册、用户登录、退出登录和找回密码等4个子功能。其中，用户注册主要用于新用户注册。在进行用户注册；用户登录主要用于用户登录网站，登录后的用户可以查看自己的日记、删除自己的日记以及写九宫格日记等；退出登录主要用于登录用户退出当前登录状态；找回密码主要用于当用户忘记密码时，根据密码提示问题和答案找回密码。14.2.3网站功能结构根据以上说明，我们可以得出如图14-1所示的九宫格日记网的功能结构图。图14-1九宫格日记网的功能结构图说明：在图14-1中，用虚线框起来的部分为只有用户登录后，才可以有的功能。访问者显示九宫格日记列表分页显示全部九宫格日记展开和收缩日记图片显示日记原图对日记图片进行左转和右转分页显示我的日记删除自己的日记用户登录用户注册检测用户名是否被注册Ajax验证注册信息保存注册信息写九宫格日记填写日记信息预览生成的日记图片保存日记图片找回密码九宫格日记网的系统流程如图14-2所示。图14-2九宫格日记网的系统流程图14.2.4系统流程图14.3数据库设计14.3.1数据库概要说明14.3.2数据库实体图14.3.3数据表结构从读者角度出发，为了使读者对本网站数据库中的数据表有更清晰的认识，笔者在此设计了数据表树形结构图，如图14-3所示，其中包含了对系统中所有数据表的相关描述。图14-3清爽夏日九宫格日记网的数据库14.3.1数据库概要说明根据对网站所做的需求分析、流程设计及系统功能结构的确定，规划出满足用户需求的各种实体及它们之间的关系，本网站规划出的数据库实体对象只有两个，分别为用户实体和日记实体。用户实体包括用户编号、用户名、密码、E-mail、密码提示问题、提示问题答案和所在地等属性。用户实体的实体图如图14-4所示。图14-4用户信息实体图14.3.2数据库实体图用户信息用户编号用户名密码E-mail密码提示问题提示问题答案所在地日记实体包括日记编号、标题、日记保存的地址、写日记的时间和用户ID等属性。日记实体的实体图如图14-5所示。图14-5日记信息实体图日记信息日记编号标题日记保存的地址写日记时间用户ID在设计完数据库实体E-R图之后，根据相应的实体E-R图设计数据表，下面分别介绍本网站中的用到的两张数据表的数据结构和用途。tb_user（用户信息表）用户信息表主要用于存储用户的注册信息。该数据表的结构如表14-1所示。表14-1tb_user表14.3.3数据表结构字段名称数据类型是否为空是否主键默认值说明idINT(10)NoNullYes自动编号IDusernameVARCHAR(50)NoNull用户名pwdVARCHAR(50)NoNull密码emailVARCHAR(100)NullNullE-mailquestionVARCHAR(45)NullNull密码提示问题answerVARCHAR(45)NullNull提示问题答案cityVARCHAR(30)NullNull所在地tb_diary（日记表）日记表主要用于存储日记的相关信息。该数据表的结构如图14-2所示。表14-2tb_diary表字段名称数据类型是否为空是否主键默认值说明idINT(10)NoNullYes自动编号IDtitleVARCHAR(60)NoNull标题addressVARCHAR(50)NoNull日记保存的地址writeTimeTIMESTAMPNoNullCURRENT_TIMESTAMP写日记时间useridINT(10)NoNull用户ID14.4公共模块设计14.4.1编写数据库连接及操作的类14.4.2编写保存分页代码的JavaBean14.4.3配置解决中文乱码的过滤器14.4.4编写实体类数据库连接及操作类通常包括连接数据库的方法getConnection()、执行查询语句的方法execute-Query()、执行更新操作的方法executeUpdate()、关闭数据库连接的方法close()。下面将详细介绍如何编写清爽夏日九宫格日记网的数据库连接及操作的类ConnDB。（1）指定类ConnDB保存的包，并导入所需的类包，本例将其保存到com.wgh.tools包中，代码如下：packagecom.wgh.tools;//将该类保存到com.wgh.tools包中importjava.io.InputStream;//导入java.io.InputStream类importjava.sql.*;//导入java.sql包中的所有类importjava.util.Properties;//导入java.util.Properties类注意：包语句以关键字package后面紧跟一个包名称，然后以分号“;”结束；包语句必须出现在import语句之前；一个.java文件只能有一个包语句。14.4.1编写数据库连接及操作的类（2）定义ConnDB类，并定义该类中所需的全局变量及构造方法，代码如下：publicclassConnDB{publicConnectionconn=null;//声明Connection对象的实例publicStatementstmt=null;//声明Statement对象的实例publicResultSetrs=null;//声明ResultSet对象的实例privatestaticStringpropFileName=connDB.properties;//指定资源文件保存的位置privatestaticPropertiesprop=newProperties();//创建并实例化Properties对象的实例//定义保存数据库驱动的变量privatestaticStringdbClassName=com.mysql.jdbc.Driver;privatestaticStringdbUrl=jdbc:mysql://127.0.0.1:3306/db_9griddiary?user=root&password=root&useUnicode=true;publicConnDB(){//构造方法try{//捕捉异常//将Properties文件读取到InputStream对象中InputStreamin=getClass().getResourceAsStream(propFileName);prop.load(in);//通过输入流对象加载Properties文件dbClassName=prop.getProperty(DB_CLASS_NAME);//获取数据库驱动//获取连接的URLdbUrl=prop.getProperty(DB_URL,dbUrl);}catch(Exceptione){e.printStackTrace();//输出异常信息（3）为了方便程序移植，这里将数据库连接所需信息保存到properties文件中，并将该文件保存在com.wgh.tools包中。connDB.properties文件的内容如下：DB_CLASS_NAME=com.mysql.jdbc.DriverDB_URL=jdbc:mysql://127.0.0.1:3306/db_9griddiary?user=root&password=root&useUnicode=true说明：properties文件为本地资源文本文件，以“消息/消息文本”的格式存放数据。使用Properties对象时，首先需创建并实例化该对象，代码如下：privatestaticPropertiesprop=newProperties();再通过文件输入流对象加载Properties文件，代码如下：prop.load(newFileInputStream(propFileName));最后通过Properties对象的getProperty方法读取properties文件中的数据。（4）创建连接数据库的方法getConnection()，该方法返回Connection对象的一个实例。getConnection()方法的代码如下：/***功能：获取连接的语句**@return*/publicstaticConnectiongetConnection(){Connectionconn=null;try{//连接数据库时可能发生异常因此需要捕捉该异常Class.forName(dbClassName).newInstance();//装载数据库驱动//建立与数据库URL中定义的数据库的连接conn=DriverManager.getConnection(dbUrl);}catch(Exceptionee){ee.printStackTrace();//输出异常信息}if(conn==null){System.err.println(警