毕业设计（论文）-个人日志系统的设计与实现.docx

盐 城 师 范 学 院毕 业 设 计个人日志系统的设计与实现 学生姓名 学 院 信息工程学院 专 业 软件工程 班 级 12(4) 学 号 指导教师 2016年 5月16日盐城师范院毕业设计个人日志系统的设计与实现摘 要进入信息时代，随着计算机和网络的发展，我们不仅可以把生活点滴记录在纸质笔记本上，现如今也可记录在网络中，计算机或者移动设备上。个人日志系统由此应运而生，并且其更为简洁、易于携带，可更好的满足人们记录日志的需求。个人日志系统基于Java语言开发，使用MVC设计模式使代码层进行分离，利于以后的维护和更新。界面使用Bootstrap框架，给用户美观友好的体验感受，最后完成前后台的交互。本系统记录日志时可以插入图片，表格，改变字体，使之更人性化；可以方便的对日志进行打包分类，可以便捷的查改日志。有了此系统后，我们可以在网络中记录我们的成长经历，插入照片来表现成长变化；可以记录我们的学习、工作及每日的收获；可以记录一些生活，如爱好、趣事及感悟心得。【关键词】日志；Java；MySQL；Bootstrap；jQuery全套设计加扣 3012250582The design and implementation ofpersonal diary system AbstractEnter the information age, with the development of computer and network, we can not only record our life in notebook, We can also record it in the network using computer or mobile device. So personal diary system come into being, and it is more easy to carry and better meet the needs of people to record our life.Personal diary system is based on the Java language development system, using the MVC design pattern to separate the code , which is convenient for future update. The front page use bootstrap framework, giving users a beautiful and friendly experience. And I will combine the front and the back to finish the system at last. If using the diary system ,you can insert pictures, tables or change font to make it more humane ,The diary can be convenient to package and be operated simply.With this system, we can easily record our growth experience and insert photos to show growth changes; We can record our study and work as well as the daily harvest; We can record life such as fun , hobbies and experiences we get in life.【Key words】Diary,Java,MySQL,Bootstrap,jQuery盐城师范院毕业设计目 录1 前言11.1 系统背景与意义11.1.1 背景11.1.2意义11.2 课题的主要内容12 系统分析12.1 系统需求分析12.1.1系统功能需求分析12.1.2系统性能需求分析22.1.3开发环境需求分析22.2系统可行性分析32.2.1技术可行性32.2.2经济可行性43系统设计43.1系统功能设计43.2数据库设计53.2.1 数据库需求设计53.2.2数据库概念结构设计53.2.3数据库逻辑结构设计63.3系统架构设计73.4主要流程设计83.4.1记录日志流程图83.4.2日志管理流程图93.4.3个人中心流程图104 系统实现114.1系统登录模块114.2个人主页模块114.3记录日志模块134.4日志管理模块164.5个人中心模块184.6 安卓客户端模块195系统测试215.1 测试目的215.2 测试环境215.3 具体测试21结 束 语23参考文献24致谢251 前言1.1 系统背景与意义1.1.1 背景 互联网在日新月异的进步着，各种各样的web系统方便着人们的生活，每日写日志成为许多人的生活需求，为了更贴切时代，所以做出了此电子日志。此系统可以更方便快捷的记录人的生活，当回顾昨日时，这些日志可成为某人成长的一个缩影。1.1.2意义 有了此系统后，我们可以在网络中记录我们的成长经历，插入照片来表现成长变化；可以记录我们的学习、工作及每日的收获；可以记录一些生活，如爱好、趣事及感悟和心得。1.2 课题的主要内容课题的主要内容是提供给用户一个电子版的日志，采用MyEclipse工具在Java环境中编写出来日志代码。开发完成之后用户可以在web浏览器中使用此系统，在其中书写出自己的每日生活。2 系统分析2.1 系统需求分析在开发日志系统准备过程中，要先分析，写出其需求报告。将整个系统先拆分出各个细小的模块，分成几部分来进行编写。然后再一步步整合起来，逐步完善此系统。2.1.1系统功能需求分析本系统主要针对的是个人用户。用户登陆页面浏览日志，点击进行详细的日志浏览，根据自需求进行修改，删除。 用户可以分类日志，定义所需类名称，可以增添图片，改变字体格式来丰富日志，使日志更美观。用户可以根据类别，日期或关键字搜索自己想浏览的日志，不必要一篇篇去翻阅。用户可以在个人中心更改每日状态。2.1.2系统性能需求分析本系统需具备以下四个特性。(1)易操作性易操作性体现在用户从整个界面上可以看出该如何操作，基本不需要查找文档。(2)易维护性易维护性主要表现在代码分页显示，功能具体明显。利用分层原理将各个模块明显的区分开来，将各个数据层明显的区分开来，便于其后的更新。(3)稳定性高稳定性代表着系统出错的概率很低，经过测试后应基本上能够正常使用。(4)高安全性高安全性主要代码安全，用户信息用MD5或其他方式进行验证。2.1.3开发环境需求分析（1）网站开发环境操作系统：Windows 10操作系统 . 前台框架：Bootstrape. 数据库：MySQL. 开发语言：Java. （2）服务器端环境 操作系统：Win7或以上的版本. 数据库服务器：MySQL. （3）客户端环境 浏览器：IE,火狐等. 分辨率：1920*1680像素.（4）开发工具 MyEclipse提供了许多插件，更便于代码编写。 MySQL Workbench是MySQL数据库自带的一种测试SQL代码的一种工具，能够更直观的创建数据表，观察出数据的变化动态。2.2系统可行性分析2.2.1技术可行性(1)Java本系统采用Java语言开发，其是目前比较流行的面向对象语言，其支持JVM，可以让开发的代码完好的迁移到其他的平台之上。其主要语言特点是提供了继承与接口，可以将类中的属性，方法封装起来，在开发中更友好的实现所需求的功能，并且增强了安全性。(2)AndriodAndriod用于开发移动设备上的应用，本系统使其与web开发结合，使手机或平板也可访问该日志系统。(3)BootstrapBootstrap是基于HTML5，CSS3和Javascript开发的一种前台框架，可以使前台页面的布局更灵活，它提供了分页标签，字体图标等各种布局组件；提供过渡效果，折叠等各种插件，其封装了用户所需求的效果。其是现如今一种较为流行的一种前端框架，基本满足了开发者的需求，能为一个系统提供精美的布局。(4)jQueryjQuery 是一种对Javascript的封装框架。可以用一个简单的方法就可以生成简单的动画；还可以对键盘鼠标等各种事件进行相应处理；以及遍历DOM文档获取节点信息等。jQuery可以使开发人员更方便的对前台页面进行动态效果的开发，极大的提高了开发者的效率。(5)MySQL数据库使用的MySQL，在开发项目时，许多开发者都乐于使用此数据库，因为其体积小，速度快，使项目企业在经济方面承受较小的压力。MySQL同Java语言一样是开源的，可移植的。人日志系统在数据方面的操作主要是CURD，对数据库的连接使用等，当进行数据处理时，需要我们会基本的数据库工具,以及基本的数据库查询语言，其未有太大的难度。(6)JSPJSP是Java开发企业型项目的一种重要组成成分，JSP定义了较多对基本web应用有作用的标准元素，如可以访问模型层的JavaBeans组件，页面之间可以传递控制和共享请求。 (7)B/S架构 由这些技术基本便可以开发出这套B/S架构日志系统。其架构主要可以分为三层。第一种是表现层，或者可以说是视图层，他是给用户一种界面上的直观体现，离用户的距离是最近的，可以收放用户的各种数据；第二种是业务逻辑层，也可被叫做领域层，是架构层的核心部分，其是利用各种方法对我们所需要实现的结果所进行一种处理；最后一种是数据访问层，也被称作是持久层，本系统就是对MySQL中数据表中的数据进行操作，如查找，修改等。一个客户，通常是web浏览器发送出一个请求，服务器接收以后，便会反应相当一部分资源反应，当然也有可能因为某些原因延迟或者未能反应信息。这些资源可以是文字，图片，视频等，用户可以存取和获得这些所需要的资源，这样便可以进行浏览器与服务器的交互。2.2.2经济可行性在网络日益发达的今天，各种方便用户使用的系统比比皆是，同样个人日志是因为人们对记录日志的需求应运而生。其使用的数据库较小，硬件要求低，界面简洁方便，资源服务器中很小的一部分就可以实现。可以满足用户的基本需求，很容易让用户接受，在使用效果上是完全值得的。3系统设计3.1系统功能设计系统功能主要分为如下5个部分。 用户登录：系统对某个账户都有一个独特的username和password，当输入账户时，需要通过验证。个人主页：显示日志列表，对日志详细浏览，编辑存在的日志。可以通过关键字，类别，日期查询出所需日志。记录日志：用户可以在这里输入所想要记录的日志；在其中添加网络上的图片，表格，美观字体；可以选择所建的分类。日志管理：用户可以自行增加，修改或者删除日志分类。个人中心：更改用户的头像，昵称或者是心情，表现出今日的状态。 功能设计图如3-1所示。图3-1 系统功能设计图3.2数据库设计3.2.1 数据库需求设计该日志系统主要用于个人，其中diary表保存日志数据，user表保存用户名，diary-type表保存日志的类别。3.2.2数据库概念结构设计记录日志是本系统的首要部分，用于用户书写生活。日志记录实体图如3-2所示。图0-2日志记录实体图为了更好地对日志系统的管理，录入时有具体的名称，每个日志都需要对应一个类别，将日志打包起来，所以要增加一个类别表。日志类别实体图如3-3所示图0-3日志类别实体图 本系统需要用户进行登录，所以建立一个用户表，除了常用的用户名，密码等，还具有心情，昵称等字段。用户信息的实体图如3-4所示。图0-4用户信息实体图3.2.3数据库逻辑结构设计本系统主要数据表如下。（1）日志记录表日志记录表主要用于提交个人书写的日志内容，其字段类型是比较多的。其中text类型用于保存字节数较大的content文本字段。releaseDate是日期字段被取出在前台页面显示时要转换对应的显示格式，避免产生乱码。其设计结构如表3-1所示。表3-1 日志记录表字段名字段类型长度字段含义允许空diaryIdint11日志编号否Titlevarchar60日志标题否ContentText10日志内容否TypeIdInt11日志类别编号否releaseDateDateTime日志发布日期否（2）日志类别表日志类别表主要保存分类名称。其设计结构如表3-2所示。表3-2日志类别表字段名字段类型长度字段含义允许空DiaryTypeIdint11日志类别编号否typeNamevarchar30日志类别名称否（3）用户信息表用户信息表Users用于保存个人信息，字段主要应用的是int和varchar类型，且各个字段设置为不可为空。其设计结构如表3-3所示。表3-3用户信息表字段名字段类型长度字段含义允许空userIdint11用户编号否userNamevarchar20用户名否Passwordvarchar50用户密码否nickNamevarchar20用户昵称否ImageNamevarchar40图片名称否Moodvarchar200用户心情否3.3系统架构设计 该系统采用MVC设计模式编写代码，控制层servlet放置于web包中，获取前台页面的request请求。javabean放置于model层中，通过数据库来获取数据，然后再通过response向前台jsp页面进行视图输出。此设计模式将模型层和数据层进行分离，使代码层更清晰，更简洁，利于开发者的查看，修改，提高软件的性能。并且以后对代码的更新和维护会起到不错的效果。MVC的设计实现如3-4所示。图3-5 MVC的设计实现图 该系统需完成web服务器端和Andriod客户端的交互，其设计实现图如3-5所示。图3-6 系统设计交互图3.4主要流程设计3.4.1记录日志流程图该模块功能主要是记录日志，是系统功能的一个主体部分。用户在该模块页面 并且标题和类别选项可以作为参数方便以后的搜索。且其各项数据在数据库中的设定都是不可为空，否则不能保存到数据库中，并提示对应的错误。记录日志流程图如图3-7所示。图3-7记录日志流程图3.4.2日志管理流程图该模块功能是日志类别管理，类似一个文件夹。用户在其中建立自己想要的分类，这样就可以很好进行分类。该模块主要是对日志类别CRUD的操作。当所删除的日志类别中含有日志时，会提示其类别下有日志不可删除的错误信息。日志类别流程图如3-8所示。图3-8日志分类流程图3.4.3个人中心流程图 该模块功能是保存显示用户个人的相关信息，如qq，微博类似的一些昵称，心情等，表现出当天的状态；可以更换头像，通过upload插件上传图片，并通过日期名称对其进行重新命名，防止图片名称重复。个人中心流程图如3-9所示。图3-9 个人中心模块流程图4 系统实现4.1系统登录模块用户首先登录到系统网站，输入用户名以及密码进行登陆。系统登录页面如图4-1所示。图4-1 系统登录页面 首先进行验证登录，比对数据库中的账号名和密码。若登录验证成功则通过RemeberMe方法保存一个7天的cookies，在客户端中保存其登录信息，方便下次登录。其中以MD5算法进行登录数据验证，这是为了用户账号的安全。4.2 个人主页模块用户登录后进入个人主页，显示出所记录的日志列表，用户可以通过点击日志标题来查看日志详细信息，个人主页页面显示图如4-2所示。图4-2 个人主页页面当点击个人主页时，将页面show.jsp通过定义的main变量传值给主页面，并通过控制器DiaryServlet来将数据库中的日志数据进行查询显示得到上图左侧效果。其中右侧按日志日期查询和按类别查询模块，都是先通过控制器调用类与方法，取得日期分类和类别分类以及它们具体的数目。其效果如图4-3和图4-4所示。 图4-3按日志日期查询图 图4-4按日志类别查询图按日期类别，按日志日期和搜索框，以及页码选项都是传递一个可被控制层获取的参数到对应的类方法，在数据库中查询到其下的日志。其中页码是通过GenPageAction算法根据日志总数，每页显示数目两个条件得到一个StringBuffer流，利用此将日志进行分页显示。当点击页码时，传递页码值查询出对应日志。当在搜索框输入内容并点击时，其传递的是一个all=true的值。其是根据数据库中的某个字段，用like方式模糊查询，当输入enter键时，取得相关日志。当点击日志日期时，其传递s_releaseDateStr日期值，来向数据库查询到本日期日志。其中日志日期先转换为数据库对应格式yyyyMMddhhmmss，否则会因为格式问题查询不出结果，或提示404错误，所以首先要得到其对应的日期格式。当点击日志类别时，通过typeName字段在数据库中精确查找。 其关键代码如下。/按日志类别显示代码c:foreach var=diaryTypeCount items=$diaryTypeCountList lispanahref=main?s_typeId=$diaryTypeCount.diaryTypeId $diaryTypeCount.typeName ($diaryTypeCount.diaryCount )/a/span/li/c:foreach/按日志日期显示代码c:foreach var=diaryCountitems=$diaryCountList lispanahref=main?s_releaseDateStr=$diaryCount.releaseDateStr $diaryCount.releaseDateStr ($diaryCount.diaryCount )/a/span/li/c:foreachprotected void doPost() String all=request.getParameter(all); /参数allString page=request.getParameter(page); /页码Diary diary=new Diary();if(true.equals(all)if(StringUtil.isNotEmpty(s_title)diary.setTitle(s_title);session.removeAttribute(s_releaseDateStr);session.removeAttribute(s_typeId);session.setAttribute(s_title, s_title);elseif(StringUtil.isNotEmpty()session.setAttribute(s_typeId, s_typeId);session.removeAttribute(s_releaseDateStr);session.removeAttribute(s_title);if(StringUtil.isNotEmpty(s_releaseDateStr)/s_releaseDateStr=new String(s_releaseDateStr.getBytes(ISO-8859-1),UTF-8);diary.setReleaseDateStr(s_releaseDateStr);session.setAttribute(s_releaseDateStr, s_releaseDateStr);session.removeAttribute(s_typeId);session.removeAttribute(s_title); Connection con=null; try con=dbUtil.getCon();ListDiary diaryList=diaryDao.diaryList(con,pageBean,diary); /得到日志标题 日期 int total=diaryDao.diaryCount(con,diary); /得到日志总数request.setAttribute(diaryList, diaryList); /日志标题日期session.setAttribute(diaryTypeCountList, diaryTypeDao.diaryTypeCountList(con);/日志类别session.setAttribute(diaryCountList, diaryDao.diaryCountList(con);/日志日期request.setAttribute(mainPage, diary/diaryList.jsp); 4.3记录日志模块 此页面是记录日志，用户在此书写日志，其中包含标题，内容，与日志分类。当某个选项为空或错误时，导入的JavaScript类库会提示所对应的错误。用户可以插入表格，根据url插入网络图片以及改变字体等方式来丰富日志内容。记录日志页面如图4-5所示。图4-5记录日志页面在主页点击记录日志时，传递一个diary?action=preSave的参数到DiaryServlet中，通过类方法将DiarySave.jsp（如上图）页面赋值给定义的main变量，通过request.getRequestDispacher方法将其值传递给主页进行显示。当书写完成点击保存时，通过控制层中对应方法使日志内容保存到数据库中。 当用户查看此日志时，会显示包括标题，时间，类别，内容等详细信息，日志显示页面如图4-6所示。图4-6日志显示页面 如果点击修改日志，也会跳转到图4-6所示的页面，与前者查看日志共用一套代码，只需对控制层代码进行些许修改即可。其操作是先通过类方法将Title，Content以及DiaryTypeId字段内容查询出来，再将内容显示到其页面。 其关键代码如下。Override /根据参数name调用对应方法protected void doPost()if(show.equals(name)diaryShow(request,response);else if(preSave.equals(action)diaryPreSave(request,response);else if(save.equals(action)diarySave(request,response);else if()diaryDelete(request,response);/日志保存private void diarySave() String diaryId=request.getParameter(diaryId);Diary diary=new Diary(title,content);try if()saveNums=diaryDao.diaryUpdate(con, diary); elsesaveNums=diaryDao.diaryAdd(con, diary);/添加日志if(saveNums0)elserequest.setAttribute(diary, diary);request.setAttribute(mainPage, diary/diarySave.jsp);/日志列表显示private void diaryShow() tryDiary diary=diaryDao.diaryShow(con, diaryId); /显示日志详细内容request.setAttribute(diary, diary);request.setAttribute(mainPage, diary/diaryShow.jsp);/日志修改private void diaryPreSave()tryif(StringUtil.isNotEmpty(diaryId)con=dbUtil.getCon();Diary diary=diaryDao.diaryShow(con, diaryId);request.setAttribute(diary, diary);request.setAttribute(mainPage, diary/diarySave.jsp);/日志删除private void diaryDelete() trydiaryDao.diaryDelete(con, diaryId);4.4日志管理模块此页面功能是对日志进行分类，用户可通过各个分类快速检索删改日志，便于用户的使用。日志分类显示页面如下图4-7所示。图 4-7 日志管理页面在主页点击日志管理选项卡时，传递一个action=list的值到MainServlet并通过对应类方法查询出各个日志类别，并将DiaryTypeList.jsp（如上图）页面赋值给定义的main变量，通过request.getRequestDispacher方法将其值传递给主页进行显示。当点击添加日志类别时用户输入所需的类别，然后点击保存即可。其是通过DiaryTypeServlet来调用类对应方法，将日志类别添加到数据库中。当点击删除按钮时,则还需先通过DiaryDao类的existDiaryWithTypeId方法判断其下是否含有日志，若有则返回false并进行错误信息提示。若无则调用类中diaryTypeDelete方法来删除日志类别。 其关键代码如下。Override /根据参数name调用不同方法protected void doPost()if(list.equals(name)diaryTypeList(request,response);else if(preSave.equals(action)diaryTypePreSave(request,response);else if(save.equals(action)diaryTypeSave(request,response);else diaryTypeDelete(request,response);/日志类别的保存private void diaryTypeSave() if(saveNum0)request(diaryType?action=list);elserequest.setAttribute(diaryType, diaryType);request.setAttribute(mainPage, diaryType/diaryTypeSave.jsp); /进行主体页面显示 /类别列表显示private void diaryTypeList() Connection con=null;trycon=dbUtil.getCon();/显示日志列表if(diaryDao.existDiaryWithTypeId(con, diaryTypeId)request.setAttribute(error,错误);/类别修改private void diaryTypePreSave() String diaryTypeId=request.getParameter(diaryTypeId);request.setAttribute(mainPage, diaryType/diaryTypeSave.jsp); /类别删除private void diaryTypeDelete() String diaryTypeId=request.getParameter(diaryTypeId);Connection con=null;trycon=dbUtil.getCon(); /判断该类别下是否有日志if(diaryDao.existDiaryWithTypeId(con, diaryTypeId)request.setAttribute(error, 日志类别下有日志，不能删除该类别！);elsediaryTypeDao.diaryTypeDelete(con, diaryTypeId);4.5个人中心模块该页面保存的是用户信息，用户可自由的修改头像，昵称，心情等。个人中心页面如图4-8所示。图4-8个人中心页面当点击日志管理选项卡时，传递一个user?Action=preSave的值到UserServlet并调用对应的类方法查询出个人信息，将userSave.jsp（如上图）页面赋值给定义的main变量，通过request.getRequestDispacher方法将其值传递给主页进行显示。用户在其中书写相关信息，然后将其中内容通过UserServlet提交给UserDao类中的userUpdate方法进行保存。当修改图片时，会获取相应的系统时间来为该图片进行命名，防止图片名称重复以及方便管理，通过后再提交给数据库。其关键代码如下。private void userSave()FileItemFactory factory=new DiskFileItemFactory(); /新建文件工厂类 items=upload.parseRequest(new ServletRequestContext(request);while(itr.hasNext() /信息修改if(item.isFormField()String fieldName=item.getFieldName();if(nickName.equals(fieldName)user.setNickName(item.getString(utf-8);else if(!.equals(item.getName()try user.setImageName(imageName); String filePath=PropertiesUtil.getValue(imagePath)+imageName /为图片进行重命名if(!imageChange) user.setImageName(user.getImageName().replaceFirst (PropertiesUtil.getValue(imageFile), );Connection con=null;try int saveNums=userDao.userUpdate(con, user);if(saveNums0) user.setImageName(PropertiesUtil.getValue(imageFile) +user.getImageName();elserequest.setAttribute(mainPage, user/userSave.jsp);/页面显示4.6 安卓客户端模块 该系统同时使用Andriod开发移动客户端，使用户也可从手机或平板等设备登录及查看日志信息。其实现如图4-9和图4-10所示。 图4-9 日志列表图 图4-10 日志详情图 其通过webService完成安卓客户端与web服务器端的交互，通过Json从数据库中取出数据。其关键代码如下。private void initViews() TextView tv = (TextView) findViewById(R.id.id_article_details_top).findViewById(R.id.id_top_banner_title);tv.setText(日志详情);mContentTv = (TextView) this.findViewById(R.id.id_home_article_details_content_tv);mWaittingBtn = (LinearLayout) findViewById(R.id.id_home_article_details_waitting_annimation_ll);mContentTitleTv = (TextView) findViewById(R.id.id_home_article_details_title_tv);mWrapperLL = (LinearLayout) findViewById(R.id.id_home_article_details_wrapper_ll);mContentTv.setMovementMethod(ScrollingMovementMethod.getInstance();/ 滚动mWrapperLL.setVisibility(View.GONE);mWaittingBtn.setVisibility(View.VISIBLE);Log.i(articleDetails, 执行完initViews);public void initEvents(final Diary diary) mWrapperLL.setVisibility(View.VISIBLE);mWaittingBtn.setVisibility(View.GONE);mContentTitleTv.setText(diary.getTitle();Thread t = new Thread(new Runnable() Message msg = Message.obtain();Overridepublic void run() ImageGetter imageGetter = new ImageGetter() public Drawable getDrawable(String source) URL url;Drawable drawable = null;try url = new URL(source);drawable = Drawable.createFromStream(url.openStream()drawable.setBounds(0, 0, drawable.getIntrinsicWidth() return drawable;CharSequence content = Html.fromHtml(diary.getContent(), imageGetter, null);msg.what = INIT_COMPLETE;msg.obj = content;myHandler.sendMessage(msg););t.start();5系统测试5.1 测试目的 测试系统是为了在发布之前发现和修改其中的错误。5.2 测试环境数据库：MySQL。操作系统：win7版本以上。浏览器：Internet Explorer 11，谷歌。5.3 具体测试 测试一：前台浏览页面测试。具体操作：点击各个选项功能，观看页面布局是否发生跳转，能否正常的进行显示。结论：页面布局正常，能进行友好的显示，能兼容主流浏览器。 测试二：后台管理测试具体操作：点击各个选项功能，看是否能进行的进行增删改查等。结论：各部分功能正常，能支持关键字查询，模糊查询。可以显示数据库中的数据，可以进行友好的分页等。测试三：系统总体测试具体操作：进行各个部分的测试，包扩link测试，form测试，cookies测试，design language测试，datab