基于JavaWeb的博客网站的设计计算机科学和技术专业

1、基于JavaWeb的博客网站的设计摘要: 博客网站是通过互联网作为传播基础的综合性网站。本设计是基于JavaWeb实现的网站,通过应用WEB基础知识和Java语言进行功能开发,以MySql为数据中心进行数据交互,全文共分为绪论、系统分析、系统概述、系统的总体设计、系统的数据库设计、系统实现、结论、参考文献等章节.绪论介绍了网站进行研发的原因以及系统要实现的目标,系统概述详细地介绍了网站的整体架构和功能模块,网站的设计描述了网站的设计思想和数据库的设计,文中详细介绍了开发过程中网站的实现过程和方法,和具有开发阶段积累的经验教训以及心得等.关键词：Blog JavaWeb WEBJava MySq

2、lThe design of the Blog Site Based On JavaWebAbstract: The blog is a comprehensive platform based on the web as a carrier. This design is based on the JavaWeb website, through the application of WEB basic knowledge and Java language function development, MySql data center for data interaction, the f

3、ull text is divided into introduction, system analysis, System overview, system's overall design, system database design, system implementation, conclusions, references, etc. The introduction explains the system's development background and objectives. The system overview describes the overa

4、ll architecture and function modules of the website in detail. Describes the design ideas of the website and the design of the database. The article describes in detail the process and method of the system in the development process, as well as the experiences and experiences in the development proc

5、ess.Key words: Blog; JavaWeb; WEB; Java; MySql 目录引 言1第1章 绪论21.1开发背景21.2系统目标2第2章 系统分析32.1需求分析32.1.1 功能性需求32.1.2 非功能性需求32.2可行性分析32.2.1 技术可行性32.2.2 经济可行性4第3章 技术介绍53.1 MVC介绍53.2 Spring简介53.3 Hibernate技术63.4 JavaScript技术6第4章 系统概述84.1系统的介绍84.2系统的主要功能84.3 网站的主要功能模块84.3.1 博客网站的主页面84.3.2 博客网站后台登录模块94.3.3 博客网

6、站的大小模块104.3.4博客网站标题模块104.3.5 博客网站文章发布模块114.3.6 博客网站的评论模块11第5章 系统设计125.1 系统的总体设计125.1.1 前台功能结构125.1.2 后台功能结构125.1.3系统的总体流程图135.2博客网站登陆的设计13第6章 系统数据库的设计146.1数据库的需求分析146.2数据库设计146.3数据库连接的操作17第7章 系统的功能实现187.1 主要相关代码18结论25致谢26参考文献27引 言博客网站的兴起是人们快速获取、发布和传递信息的重要途径。它在国家的政治、经济、科技生活中充当着重要的作用，同时它已经慢慢的渗入人们的生活中，

7、成为人们日常工作和生活的一种学习交流工具，越来越多的网络社交用户可以通过该网站进行信息传递，学习与分享.同时一定程度上加强了用户与用户之间的联系，减少了一系列不必要的交流方式，把一些复杂的过程更简单化的展现出来，提高了信息传递的效率.本博客网站主要运用Web基础知识来实现页面效果，Java语言实现业务逻辑并提供接口，以MySQL为中心为页面提供动态数据来完成微博平台的主要功能开发.同时也反映了现代化人们工作和生活的一种趋向，也标志着信息技术的快速普及以及互联网行业的迅猛发展。第1章 绪论1.1开发背景当今社会，随着互联网发展速度越来越快，逐步遍及了个人生活的方方面面，过去的信息流通手段也急需进

8、行变革，而使用博客则是沟通变革的一个关键手段。博客网站目前已经发展成为信息社会人们进行沟通交流获取外界信息重要的方式之一，博客，又可以被翻译为网络日志，属于一种交由少量管理员进行管理，不定时间段内发布较新的内容的浏览性网站，发布在博客上面的内容一般按照信息发布的时间，使用倒序的方法，现如今有很多个人博客网站以个人生活日记的形式出现. 博客网站一般公布了用户在个人生活的当中出现的事情或者介绍自身爱好的事务，发博者能够将自身的思想、所拥有的知识与其他人进行沟通。由于当前数目众多的知识技术在博客网站当中被发布，我们了解到博客网站当中所包含的数目宏大的信息；定位不同的博客网站需要进行选择具有差别的内容

9、，进行专业信息的收集以及交流促进这些网站发展为专业博客，当前大量的人员进行资料的收集主要来自于博客网站。本课题主要探究的是关于个人博客网站的开发.本文详细地阐述了博客网站的总体架构，第一，进行介绍博客网站进行研发的基础以及系统要实现目标，其次介绍了网站的需求分析和可行性分析，然后围绕网站的主要的功能模块进行概述，以网站的设计为主要目标对功能模块结构和数据库结构进行分析设计.利用JavaWeb技术开展功能板块的研发，以MySQL为数据中心进行数据交互.1.2系统目标本博客网站的开发主要是为吸引大部分IT技术学习者,达到一种以IT技术为交流目的的个人博客网站.系统开发的主要任务目标是实现博客网站前

10、台功能展示,后台文章的发表,文章留言的回复,实现标签栏目的配置.系统的开发主要应用于两大类用户:普通用户和系统用户, 普通用户进行访问该博客网站,进行技术学习与留言交流.系统用户可以对后台的站点信息的维护用户模块和帖子模块进行修改与删除.第2章 系统分析2.1需求分析博客网站的开发是为广大IT用户提供一个信息交流的平台，形成一种信息资源交流与问题探讨的网站.因此本博客网站基本功能有:2.1.1 功能性需求(1)通过WEB浏览器对网站进行访问;(2)博客网站用户角色的权限划分，普通用户、系统用户;(3)博客网站主题文章的发表以及对主题文章的回复评论;(4)系统管理员能够对后台具有公告、文章、模块

11、管理等权限;(5)博客网站公告的发布与修改;(6)博客网站的菜单配置与主次排序、超链接的配置等;(7)博客网站后台用户的添加及权限设置;(8)热评文章与精华文章的设置与筛选;(9)博客用户主页面的搜索功能;2.1.2 非功能性需求(1)操作系统:Windows 7.0 64位;(2)开发语言: JSP、JAVA、JQuery、MySql 编程语言;(3)数据库的版本: MySql 5.7;(4)浏览器: IE、Firefox、Google;(5)开发工具: EditPlus、Eclipse;2.2可行性分析2.2.1 技术可行性主要指当前网站的开发用到的技术是否能保证网站顺利开发完成,硬件方面

12、或者软件方面的要求.本课题对博客网站的开发运用Java语言和当前最新的WEB浏览器开发模式相结合,摆脱了传统的开发模式,提供了一系列新自定义函数和方法,提高了博客网站的性能与开发的效率.2.2.2 经济可行性主要是指对当前网站开发的经济效益做分析,而本文所阐述的系统开发是博客网站的基本功能进行开发,为用户创建一个信息交流的平台,提供一个资源查询,问题探讨,解决问题,聊天分享，公告发布的个人博客平台.本网站的开发是作为个人的毕业论文的设计,不存在经济因素,因此本博客网站开发的经济性不考虑.第3章 技术介绍3.1 Spring简介Spring是开源框架的一种，选择Spring框架中基础的JavaB

13、ean能够实现在此之前仅仅能够利用EJB实现的功能.对于Spring框架的应用并不止局限于服务器端的研发.从简单性、可测试性和松耦合的角度而言，任何Java应用程序都可以从Spring中受益.Spring的初衷：1、J2EE实现能够非常简便.2、Spring框架利用接口的难度基本上下降到零.3、帮助JavaBean带来相对最优的应用配置架构.4、更加集中于面向对象的开发，而不仅局限于当前使用的技术如J2EE.5、极力避免多余的异常捕捉.6、使应用程序非常利于测试.Spri的目标：1、可以令人方便愉快的使用Spring.2、应用程序不依赖于Spring APIs.3、Spring的目标是把其他框

14、架和其结合在一起.Spring的基本组成：1、最完善的轻量级核心框架.2、通用的事务管理抽象层.3、JDBC抽象层.5、AOP功能.6、方便的MVC Web使用框架.3.2 Hibernate技术  Hibernate属于使用开发源代码的对象关系映射框架，它对JDBC开展极为轻量级的对象封装，从而大幅度减轻程序员所需要进行的工作，使编程者能够便捷的利用对象编程思维进行控制数据库.Hibernate能够在应用到JDBC的多个场合进行使用，一方面需要在使用Java代码的客户端程序中应用，同时还能够在Servlet以及JSP的Web应用当中使用中.总而言之，能够表述为Hibernate以J

15、DBC技术为依托发展而来的新型技术，并在这个前提下促进之前对于数据库进行直接使用转化为直接对于映射数据表进行操作形成Java类，进一步完成对象编程思维进行使用数据库.3.3 JavaScript技术JavaScript是应用于web前端的一直描述语言，同样是应用于对象（object）以及事件驱动（Event Driven）的，具有非常高的安全性的一类脚本语言.它在客户端进行运行进一步降低了服务器运行的压力。JavaScript所具备的特点：1. JavaScript一般是用于对于html页面增加交互行为.2. JavaScript也属于脚本语言的一种，所使用的语法和c语言所应用的语法较为相似，

16、都归属于弱语言类.3. JavaScript大量使用在进行客户端脚本的编写上，如node.js例外.4. JavaScript属于解释型的语言，也就是在进行脚本执行的同时解释不需要进行另外的编译.JavaScript的用途:JavaScript主要应用在处理好页面交互以及数据传递，其核心目标是完善客户端所实现的效果同时进行信息的高速的传递.1. 进行页面交互，增强用户体验度完善页面效果。也就是js操作html的dom结构以及操作样式.2. 在客户端进行表单验证也就是在信息传递到服务端以前对于使用者上传的信息开展快速的验证，尽量降低服务器的工作量.即数据交互. 第4章 系统概述4.1系

17、统的介绍本博客网站具有后台入口、友情链接、文章归档、关于本站、公告展示、主题博客页面、网站概述、热评文章、所有标签、近期评论等功能.帮助使用者带来了进行信息后台的综合网站.4.2系统的主要功能(1)博客网站前台主页面;(2)博客网站的后台登录模块,对博客网站前台页面进行管理;(3)博客网站前台的大模块与小模块,详细展示给访问人员博客主页面;(4)博客网站标题模块,固定板块的文章标题以及该文章标题对应的相关信息;(5)文章发布模块,发表主题文章;利用对博客网站开展需求分析研究，按照开发的流程对博客网站的功能模块进行介绍,有：(6)评论模块,对主题文章的评论进行回复;(7)用户个人中心模块,用户的

18、个人信息;(8)后台管理模块,文章,用户以及链接管理模块;(9)文章的筛选模、热评文章、近期评论等;(10)搜索功能模块,对发表的文章进行搜索;4.3 网站的主要功能模块4.3.1 博客网站的主页面博客网站的主页面就是博客网站前台首页面,相当于博客网站的入口,所有的HTTP网络请求都通过主页面处理以后才能访问其他的页面,主页面显示的有博客网站后台登录入口、网站主页的大板块与小版块、每个版块所拥有的版主、文章总数、用户头像及其个人信息、站点信息.博客首页的运行效果见图4.1 .图4.1-博客网站主页面运行图4.3.2 博客网站后台登录模块对博客网站所拥有的全部功能模块开展管理,首先对用户模块进行

19、管理,管理员登录系统时会判断当前要登录的用户名唯一,用户名的唯一性使得用户分配有不同的权限,同时也使用户在发表文章时不用再重新填写用户名,以方便用户之间的交流识别.在登录过程中要遵循博客网站设计的基本准则，用户名及密码都不能为空,只有二者同时正确时才能登陆成功.当选中记住密码时,下次会不再输入用户名和密码直接进入博客网站后台管理系统.博客网站的后台登录模块的运行效果见图4.2.图4.2-博客网站后台登录运行图4.3.3 博客网站的大小模块博客网站的版块是博客网站的重要组成部分,该博客网站的版块分大模块和小模块,通过无限级分类的思想原理,大模块作为父级,小模块做为子级,二者表现为从属关系,博客文

20、章的发表首先确定在哪个大模块区域,在确定属于哪个小模块区域.博客网站的分级见图4.3.图4.3-博客网站大小模块运行图4.3.4博客网站标题模块博客网站的标题模块是博客网站的重要组成部分,该博客网站的标题是以列表形式展示出来的，每页显示10条数据.并且每个标题对应显示出博客文章标题、博客文章对应图片、博客文章部分内容、博客文章发布时间、博客文章查看次数、博客文章评论条数等. 博客文章标题是超链接，点击可以查看文章详情内容.博客网站标题模块见图4.4.图4.4-博客网站标题模块运行图4.3.5 博客网站文章发布模块博客网站的文章发布模块是博客网站后台管理系统里的小模块,该模块是系统用户用于发布、

21、修改、删除、维护博客文章的主要模块，该模块包括用户发布文章的添加博客文章的功能.博客发布的运行界面见图4.5.图4.5-博客文章发布运行图4.3.6 博客网站的评论模块博客网站的评论模块是普通用户浏览完博主文章之后发表自己的观点及意见的模块.博客网站的评论模块的运行界面见图4.6. .图4.6-评论模块运行图第5章 系统设计5.1 系统的总体设计5.1.1 前台功能结构博客网站的前台是对博客网站主要功能的展示,通过首页选择不同模块区域进行发文章评论,主要的功能模块分为大模块、小模块、主题文章模块、评论模块、关于本站模块、公告展示模块、热评文章模块、网站概况模块等,本博客网站的前台页面所有用户在

22、浏览器输入网站地址即可访问到.前台的功能结构图见5.1.博客网站前台功能结构图关于本站随机文章大模块小模块公告展示文章列表热评文章近期评论网站概况图5.1-前台结构图5.1.2 后台功能结构博客网站的后台管理是对前台的操作模块的管理,本后台管理系统分为文章模块、用户模块、链接模块、评论模块、页面模块、公告模块以及各个子模块等. 博客网站的后台管理系统的功能结构图如图5.2.博客网站后台功能结构图用户模块设置模块评论模块公告模块链接模块页面模块文章模块图5.2-后台结构图5.1.3系统的总体流程图博客网站后台功能流程图见图5.3.文章模块板页面模块用户登录链接模块管理员后台页面 公告模块评论模块

23、用户模块图5.3-系统后台流程图5.2博客网站后台登陆的设计博客网站后台管理平台的登陆模块通过输入用户名和密码进行验证识别当前的用户是否具有登录权限.如果输入登录信息有误则会报相关错误信息.具体的流程见图5.4.用户登录口显示错误xin否是信息验证登录成功后台模块图5.4-用户登录流程图第6章 系统数据库的设计6.1数据库的需求分析对于博客网站在进行研发前，开展博客网站的功能需求分析，根据博客网站的需求对页面进行设计.该博客网站的设计主要分为用户模块、板块模块、概况模块、热评模块、友情链接模块、菜单模块、近期评论模块等.通过对系统的需求分析和功能分析数据库的设计可分为用户表、菜单表、帖子表、友

24、情链接表等表信息.6.2数据库设计(1) 博客网站的用户表(user)的设计见表6.1.名称中文名称类型是否为空长度备注(C)user_id主键Int否10主键user_name用户名Varchar否255用户名user_pass用户密码Varchar否255用户密码user_nickname用户昵称Varchar否255用户昵称user_avatar用户头像Varchar否255用户头像地址user_last_login_ip用户ip地址Varchar否255用户最后登录的ipuser_register_time注册时间Datetime是0用户注册时间user_last_login_time

25、登录时间Datetime是0用户最后登录时间user_status用户状态Int否2用户状态表6.1- 用户表(2) 博客网站的板块表(category)的设计见表6.2.名称中文名称类型是否为空长度备注(C)category_id主键int否10主键category_name板块名称varchar否255板块名称category_pid板块外键int否10板块外键category_description板块描述varchar否255板块描述category_order排序标识int否2排序标识category_icon板块图标varchar否255板块图标category_status板块状

26、态int否2板块状态表6.2 -板块表(3) 博客网站的帖子模块表(article)的设计见表6.3. 名称中文名称类型是否为空长度备注(C)article_id帖子主键Int否10主键article_user_id帖子用户外键Int否10帖子对应用户外键article_title帖子标题Varchar否255帖子标题article_content帖子内容Varchar否255帖子内容article_tag_ids帖子对应标签外键Int否10帖子对应标签外键article_view_count帖子展示数量Int否10帖子展示数量article_post_time帖子提交时间Datetime是0

27、帖子提交时间article_update_time帖子更新时间Datetime是0帖子更新时间article_is_comment帖子对应评论外键Int否10帖子对应评论外键article_status帖子状态Int否10帖子状态article_order帖子排序字段Int否10帖子排序字段表6.3 -模块表(4.4)博客网站的友情链接表(links)的设计见表6.4.名称中文名称类型是否为空长度备注(C)link_id主键Int否10主键link_url链接地址Varchar否255链接地址link_name链接名称Varchar否255链接名称link_image链接对应图片Varchar

28、否255链接对应图片link_description链接描述Varchar否255链接描述link_create_time链接创建时间Datetime是0链接创建时间link_status链接状态Int否10链接状态表6.4 -友情链接表(5) 博客网站的标签表(tag)的设计见表6.5.名称中文名称类型是否为空长度备注(C)tag_id主键Int否10主键tag_name标签名称Varchar否255标签名称tag_description标签描述Varchar否255标签描述tag_status标签状态Int否10标签状态表6.5-标签表(6) 博客网站的菜单（menu）的设计见表6.6.名

29、称中文名称类型是否为空长度备注(C)menu_id主键Int否10主键menu_name菜单名称Varchar否255菜单名称menu_url菜单地址Varchar否255菜单地址menu_icon菜单图标Varchar否255菜单图标menu_order菜单排序状态Int否10菜单排序状态menu_status菜单状态Int否10菜单状态表6.6-菜单表6.3数据库连接的操作该博客网站是通过Java语言来实现与MySql5.7数据库的连接。数据库的资源文件配置perties如下： jdbc_url=jdbc:mysql:/:3306/myblog?charact

30、erEncoding=utf-8&useUnicode=truejdbc_user=adminjdbc_password=123456(1)数据库端口号为3306、数据库账号为admin、数据库密码为123456;(2)如果连接成功返回true,连接失败返回false;(3)选择要连接的数据库blog;(4)设置字符集 UTF-8;(5)准备SQL语句 sql = ;(6)执行SQL语句;(7)返回增、删、改的之后受影响行数;(8) 关闭数据库链接;第7章 系统的功能实现7.1 主要相关代码(1) 登录模块的相关代码前端页面form表单注册信息提交模块<body class=&q

31、uot;login login-action-login wp-core-ui locale-zh-cn"><div id="login"> <h1><a href="/" title="欢迎您光临本站！" tabindex="-1">$options.optionSiteTitle</a></h1> <% String name= "" String pwd= "" /获取当前站点的所有Coo

32、kie Cookie cks= request.getCookies(); for (int i = 0; i < cookies.length; i+) /对cks中的数据进行遍历，找到用户名、密码的数据 if ("name".equals(cksi.getName() name= cksi.getValue(); else if ("pwd".equals(cksi.getName() pwd= cksi.getValue(); %> <form name="loginForm" id="loginFo

33、rm" method="post"> <p> <label for="user_login">用户名或电子邮件地址<br /> <input type="text" name="username" id="user_login" class="input" value="<%=username%>" size="20" required/></label&

34、gt; </p> <p> <label for="user_pass">密码<br /> <input type="password" name="password" id="user_pass" class="input" value="<%=password%>" size="20" required/> </label> </p> <p class=

35、"forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="1" checked /> 记住密码</label></p> <p class="submit"> <input type="button" name="

36、wp-submit" id="submit-btn" class="button button-primary button-large" value="登录" /> </p> </form> <script type="text/javascript"> function wp_attempt_focus() setTimeout( function() try d = document.getElementById('user_login');

37、 d.focus(); d.select(); catch(e) , 200); wp_attempt_focus(); if(typeof toload='function') toload(); </script> <p class="returntoblog"><a href="/">&larr; 返回到阿南博客</a></p></div><div class="clear"></div><script

38、src="/js/jquery.min.js"></script><script type="text/javascript"> <%-登录验证-%> $("#submit-btn").alive(function () var name= $("#user_name").val(); var pwd = $("#user_pwd").val(); if(user="") alert("用户名不可为空!"); el

39、se if(password="") alert("密码不可为空!"); else $.ajax( async: false,/同步，待请求完毕后再执行后面的代码 type: "POST", url: '/loginVerify', data: $("#form").serialize(), dataType: "json", success: function (data) if(data.code=0) alert(data.msg); else window.locatio

40、n.href="/admin" , error: function () alert("数据获取失败") ) )</script></body>后台的业务处理逻辑:/登录验证 RequestMapping(value = "/loginToVerify",method = RequestMethod.POST) ResponseBody public String loginVerify(HttpServletRequest request, HttpServletResponse response) thro

41、ws Exception Map<String, Object> returnMap = new HashMap<String, Object>(); String name = request.getParameter("username"); String pwd = request.getParameter("pwd"); String rmb = request.getParameter("rememberme"); BaseUser baseUser = userService.getUserByNa

42、meOrEmail(name); if(user=null) map.put("code",0); map.put("msg","用户名无效！"); else if(!user.getPassword().equals(pwd) map.put("code",0); map.put("msg","密码错误！"); else /登录成功 map.put("code",1); map.put("msg",""); /添加

43、session request.getSession().setAttribute("baseUser", baseUser); /添加cookie if(rmb!=null) /创建两个Cookie对象 Cookie cookieName = new Cookie("name", name); /设置Cookie的有效期为3天 cookieName.setMaxAge(60 * 60 * 24 * 3); Cookie cookiePwd = new Cookie("pwd", pwd); cookiePwd.setMaxAge(6

44、0 * 60 * 24 * 3); response.addCookie(cookieName ); response.addCookie(cookiePwd); baseUser.setLastLoginDate(new Date(); user.setLastLoginIpAddr(getIpAddr(request); userService.updateUser(user); String data= new JSONObject(returnMap).toString(); return data; (2)帖子添加模块前端form表单<form class="layu

45、i-form" method="post" id="myForm" action="/admin/article/insertSubmit"> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <div class="layui-input-block"> <input type="text"

46、 name="articleTitle" lay-verify="title" id="title" autocomplete="off" placeholder="请输入标题" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label

47、">内容</label> <div class="layui-input-block"> <textarea class="layui-textarea layui-hide" name="articleContent" lay-verify="content" id="content"></textarea> </div> </div> <div class="layui-form-item

48、"> <label class="layui-form-label">分类</label> <div class="layui-input-inline"> <select name="articleParentCategoryId" id="articleParentCategoryId" lay-filter="articleParentCategoryId" required> <option value="&

49、quot; selected="">一级分类</option> <c:forEach items="$categoryCustomList" var="c"> <c:if test="$c.pid=0"> <option >$c.categoryName</option> </c:if> </c:forEach> </select> </div> <div class="layui-in

50、put-inline"> <select name="articleChildCategoryId" id="articleChildCategoryId"> <option value="" selected>二级分类</option> </select> </div> </div> <div class="layui-form-item" pane=""> <label class=&q

51、uot;layui-form-label">标签</label> <div class="layui-input-block"> <c:forEach items="$tagCustomList" var="t"> <input type="checkbox" name="articleTagIds" lay-skin="primary" title="$" value="$t

52、.id" onchange="change()"> </c:forEach> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="radio" name="articleS

53、tatus" value="1" title="发布" checked> <input type="radio" name="articleStatus" value="0" title="草稿" > </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary" onclick="getCateIds()">重置</button> </div> </div> <blockquote clas