个人博客系统.doc

个人博客系统

武 汉 科 技 大 学 城 市 学 院

课 程 设 计 报 告

课程设计 web应用开发
题目 个人博客系统
院系 信息工程学部
专业 计算机应用与技术
班级 2014计应一班
姓名 王思远
姓名 杨文
指导老师 石义良

2016
年
11
月
8
日

课程设计评分表

评分标准：
1. 学生是否严格遵守课程设计纪律，按照规定时间完成设计任务(占30%)
2. 课程设计报告书质量：(占40%)
(1)是否采用了良好的设计方法，独立完成课程设计。
(2)课程设计各分段的任务是否按时完成及完成的质量。
(3)是否完成课程设计任务书指定的全部要求。
3. 课程设计报告书的撰写规范 (占30%)
课程设计报告书的撰写规范要求与毕业设计（论文）的要求相同。

序号
学号
姓名
等级
1
201010207130
王思远

2
201410207117
杨文

教师评语：

根据该生课程设计期间表现及提交的课程设计报告，综合成绩为 。

教师签名：

日期： 年 月 日

目 录

1 引言 6
2 系统分析 7
2.1 需求分析 7
2.1.1 功能需求分析 7
2.1.2 可行性分析 8
2.2 开发工具简介 8
2.2.2 Oracle 10g 9
3 系统设计 11
3.1 总体设计原则 11
3.2 架构概述 11
3.3 系统模块设计 11
3.4数据库结构设计 12
4 系统实现 14
4.1 系统的开发环境 14
4.2 登录模块的实现 14
4.2.1 功能描述 14
4.2.2 模块实现 14
4.3 博文管理模块实现 16
4.3.1 功能描述 16
4.3.2 模块实现 16
4.3.3 分类管理模块实现 17
4.3.4 用户管理模块实现 17
4.3.5 评论管理模块实现 18
4.3.6 首页管理模块实现 19
4.3.7 其它功能模块实现 19
5 部分代码展示： 20
----------- 32
6 总结与展望 32
7 参考文献 34

V

1 引言
现在越来越多的人都拥有了自己的私人博客，而且很多公司，单位也都有自己的博客，在这些博客中每个都有自己独立的特点，都有自己的风格，为自身树立了一个与众不同的形象，博客也变得越来越普遍，它逐渐成为一个随时可以记录自己以及身边发生的一切的地方，在这里可以发表自己的观点，谈自己的想法，也可以和别人交流，学习到更多东西，研究博客具有很大的价值
博客是继Email、BBS、ICQ之后出现的第四种网络交流方式。
博客是网络时代的个人“读者文摘”。
博客是以超级链接为武器的网络日记。
博客是信息时代的麦哲伦。
博客代表着新的生活方式和新的工作方式，更代表着新的学习方式。通过博客，让自己学到很多，让别人学到更多。
总之，博客是一个正处于快速发展和快速演变中的互联网新应用。在《市场术语》中对博客的定义为：一种表达个人思想和网络链接，内容按照时间顺序排列，并且不断更新的出版方式。Pyra创始人EvanWilliams认为博客概念主要体现在三个方面：频繁更新（Frequency）、简洁明了（Brevity）和个性化（Personality）。
在网络上发表Blog的构想始于1998年，但到了2000年才真正开始流行。而2000年博客开始进入中国，并迅速发展，但都业绩平平。直到2004年木子美事件，才让中国民众了解到了博客，并运用博客。2005年，国内各门户网站，如新浪、搜狐，原不看好博客业务，也加入博客阵营，开始进入博客春秋战国时代。目前网络上数以千计的Bloggers发表和张贴Blog的目的有很大的差异。不过，由于沟通方式比电子邮件、讨论群组更简单和容易，Blog已成为家庭、公司、部门和团队之间越来越盛行的沟通工具，因为它也逐渐被应用在企业内部网络（Intranet）。 博客正在改变社会交流方式。
2 系统分析
2.1 需求分析
2.1.1 功能需求分析
登录个人博客
个人
发表过的博客
个人
分类管理
分类信息
博 客 管 理

外部实体（人或部门）
数据处理

数据存储
数据流向
评论管理
评论信息
注册新用户
用户信息

图 2-1 系统数据流程图
注册新用户——没有博客账号的用户，可以通过此功能注册一个新的博客。
用户登录——用户填写正确的用户名和密码，否则提示相应信息。
博客管理——用户登录博客后，可以发表属于自己的博文，还能对发表的博文进行管理，包括编辑、删除等。
分类管理——用户可以为博文添加自己喜欢的分类，还能对已添加的分类进行编辑、删除等操作！
评论管理——用户登录博客后，可以对自己感兴趣的其他人的博文进行评论，当然，对于其他人对自己博文的评论，用户可以删除。
退出——用户操作完毕后，点击退出，将重新返回登录页面！
2.1.2 可行性分析
(1) 技术可行性：
(2) 经济可行性：
(3) 法律可行性：
(4) 社会可行性：
(5) 操作可行性
2.2 开发工具简介
一、工具/原料
1.vs：版本为:vs2013
  下载地址
2.sqlserver：版本为sqlserver2010
  下载地址
3.windows7 64位
二、方法/步骤
1.安装vs2013和sqlserver2010
（1）安装vs2013：直接运行vs2013.exe可执行程序，默认安装即可。
备注：路径可以其他盘符，不建议路径包含中文名及特殊符号。
（2）安装sqlserver2010：直接解压缩下载文件“sqlserver2010”到C盘下。安装路径建议修改为：c:\ sqlserver2010。
备注：如下载的是可执行文件，双击运行，默认安装即可。
三、配置vs2013环境变量（在步骤查看如何配置环境变量）
1.新建变量名：vs2013，变量值：C:\Program Files\Java\vs2013
备注：
1..表示当前路径，%JAVA_HOME%就是引用前面指定的JAVA_HOME；
2.JAVA_HOME指明JDK安装路径，此路径下包括lib，bin，jre等文件夹，tomcat，eclipse等的运行都需要依靠此变量。
3.PATH使得系统可以在任何路径下识别java命令。
4.CLASSPATH为java加载类(class or lib)路径，只有类在classpath中，java命令才能识别。
四、测试JDK
在CMD命令下输入javac，java，javadoc命令：出现图示界面，表示安装成功
五、配置Tomcat环境变量
1.新建变量名：CATALINA_BASE，变量值：C:\tomcat
2.新建变量名：CATALINA_HOME，变量值：C:\tomcat
3.打开PATH，添加变量值：%CATALINA_HOME%\lib;%CATALINA_HOME%\bin
六、启动Tomcat服务
方法两种：
方法一：在CMD命令下输入命令：startup，出现如下对话框，表明服务启动成功。
方法二：右键点击桌面上的“我的电脑”->“管理”->“服务和应用程序”->“服务”，找到“Apache     Tomcat”服务，右键点击该服务，选择“属性”，将“启动类型”由“手动”改成“自动”。
七、测试Tomcat
打开浏览器，在地址栏中输入http://localhost:8080回车，如果看到Tomcat自带的一个JSP页面，说明你的JDK和Tomcat已搭建成功。
八、注意事项
1.JAVA_HOME中的路径不能用分号结尾，C:\Program     Files\Java\jdk1.7.0。
2.CATALINA_BASE，CATALINA_HOME，TOMCAT_HOME中的路径不能以“\”结尾。
3.JAVA_HOME的路径一定不要写成了JRE的路径。
4.在环境变量中修改添加变量时，一定要注意分号、空格，是否有多余的字母。作者就是因为path路径中多了一个字母，怎么都配置不成功。如果配置不成功，一定要反复检查。
   以上错误，非常容易出现错误：CATALINA_HOME或是JAVA_HOME没有配置好。如错误提示“The CATALINA_HOME environment variable is not defined correctly
它是功能丰富的Java EE集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML，Struts2，JSP，CSS，JavaScript，Spring，SQL，Hibernate。
2.2.2 Oracle 10g
这个版本的 Oracle 的一个引人注目之处就是管理上的极大简化。大量复杂的配置和部署设置被取消或者简化。常见的操作过程被自动化。对不同区域的大多数调整和管理操作的到简化。以前的版本中， DBA 更多时候要手工对 SQL 语句进行优化调整。这里引入了一些新的工具，从此 DBA 无需手工做这些累人的事情。10G也极大的简化了备份与恢复操作。这个改进被称作Disk based Recovery Area ，可以被一个联机Disk Cache 用来进行备份与恢复操作。备份可以调度成自动化操作，自动化优化调整。备份失败的时候，可以自动重启，以确保 Oracle 能够有一个一致的环境使
10

3 系统设计
系统设计主要对系统的总体功能如何设计，如何划分模块，系统的数据库如何设计进行研究，它为系统的实现做铺垫。在系统的设计过程中起着非常重要的作用。
3.1 总体设计原则
(1) 开放性、可扩充性、可靠性原则
(2) 安全性原则
(3) 良好的用户操作界面
(4) 实用性原则
3.2 架构概述
本项目涉及关系数据库理论的规范化，以解决函数依赖和数据依赖问题。整个系统基于SSH（Struts2 + Spring + Hibernate）技术[10]，不但可以有效提高系统开发效率，而且在系统安全性、稳定性和健壮性上都有良好的改进。表现层使用了Struts2框架[11]，实现了视图控制分离。业务层使用了Spring框架[12]。Spring是一个业务层框架，一个整合的框架，能够很好地黏合表示层与持久层。
Hibernate框架[13]是JDBC的轻量级的对象封装，它是一个独立的对象持久层框架。Hibernate的强大缓存机制能一定程度上的缓解服务器端频繁读取数据库的压力，这也是Hibernate被广泛使用的重要原因之一。
3.3 系统模块设计
(1) 根据第2章的功能需求分析用户模块用例图，如图3-1所示。

图 3-1用户模块用例图

3.4数据库结构设计
用户表：记录用户名和密码，用于管理员的登录。
博文表：记录发表过博文的一些属性：如博文名和发布日期等。
分类表：记录博文所属分类的表，包括分类名，用户ID等属性。
评论表：记录用户对博文所发评论的表，包括评论内容，评论日期等属性。

3.4.1 数据库的设计
数据库的概念设计[15]，即利用数据模型进行概念数据库的模式设计。根据个人博客管理系统的需求，设计出以下的实体-属性模型图。
(1) 用户实体-属性如图3-8所示。
用户名
用户
用户ID
用户密码
图 3-8 用户实体-属性图
(2) 博文实体-属性如图3-9所示。
博文内容
博文
发布日期
分类ID
博文ID
博文标题
用户ID
图 3-9 博文实体-属性图
(3) 评论实体-属性如图3-10所示。
评论
博文标题
评论时间
评论内容
评论ID
评论标题
评论人

图 3-10 评论实体-属性图
(4) 分类实体-属性如图3-11所示。
分类等级
分类
用户ID
分类ID
分类名

图 3-11 分类实体-属性图

4 系统实现
4.1 系统的开发环境
(1) 服务器端：
① 操作系统平台：Windows、Linux、Unix；
② 系统开发平台；
③ Web服务器；
④ 数据库：sqlserver2010；
⑤ 开发语言：Java、JavaScript。
(2) 客户端：
① 操作系统：Windows、Linux、Unix；
② 浏览器：IE。
4.2 登录模块的实现
4.2.1 功能描述
个人博客管理系统的用户登录模块，可以实现用户的安全登录，其中Radio Button和Submit按钮均是采用JQuery UI中的主题。使用HTML5的required进行客户端数据的验证。其中用户的密码不是直接传送到服务器上的，而是经过浏览器JavaScript[17]的MD5加密再上传至服务器，目的是为了防止用户密码的明文被截获而造成用户账号的安全问题。该登录模块实现了国际化。
4.2.2 模块实现
如图4-1所示，为程序运行时，用户登录个人博客管理系统的截图：

图 4-1 用户登录图

16
用户登录流程如图4-2所示。
在数据库中查找该用户ID
登录页面
用户ID和密码空？
用户ID存在？
密码正确？
登录成功
提示用户
是
是
否
是
是
否
否

图 4-2 用户登录流程图
用户登录代码片段如下所示。
ApplicationContext wctx = WebApplicationContextUtils.getWebApplicationContext(request.getSession().getServletContext());
IUserDao userDao = (IUserDao)wctx.getBean("userDao");

response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
userName = URLDecoder.decode(userName,"UTF-8");
if(userName == null || userName.length() == 0){
out.println("<font color='red'>用户名不能为空</font>");
} else{
User user = userDao.getUserByName(userName);
if(user != null){
out.println("对不起，您输入的用户名&nbsp;&nbsp;[&nbsp;&nbsp;<font color='red'>" + userName + "</font>&nbsp;&nbsp;]&nbsp;&nbsp;已经存在，请从新输入");
} else{
out.println("恭喜，您输入的用户名&nbsp;&nbsp;[&nbsp;&nbsp;<font color='red'>"+ userName + "</font>&nbsp;&nbsp;]&nbsp;&nbsp;不存在，你可以注册!");
}
}
4.3 博文管理模块实现
4.3.1 功能描述
博客管理模块主要包含以下几个功能模块：编辑博文、删除博文、添加博文。
4.3.2 模块实现
博客管理模块如图4-3所示。

图 4-3 博客管理模块

4.3.3 分类管理模块实现
单击“分类管理”，用户可以对博客的分类进行编辑、删除和添加，如下图所示，用户执行分类管理操作。

图 4-4 编辑博文分类

图 4-5 分类管理
4.3.4 用户管理模块实现
博客系统秉着公平的原则，一旦用户注册以后，将不能再修改用户名，本系统提供了修改用户密码、修改每页显示博文信息数、修改每页显示评论数等功能。

图 4-6修改用户资料

图 4-7修改用户密码

4.3.5 评论管理模块实现
单击评论管理，用户可以对自己的评论内容进行管理，包括添加评论，删除评论等。

图 4-8 评论管理

图 4-9 发表评论

4.3.6 首页管理模块实现
博客的首页给人一种简洁舒服的感觉，并且实现了国际化和文字滚动效果，用户可以不用登陆，直接搜索其他人的博客进行观看，也可以直接从下方滚动的账号中选择一个观看。

图 4-10 首页管理
4.3.7 其它功能模块实现
用户密码修改流程如4-11所示。
原始密码是否正确？
开始

输入原来的密码，修改密码和确认密码
修改密码是否等于确认密码？
确定？
输出密码修改成功！
结束

否
否
是
是
是
否

图 4-11 管理员密码修改
当用户单击“退出”时，用户则安全退出了管理模块，同时系统销毁所有的Session。
用户注销代码片段如下所示。
private User user;
private Map session;

public String execute() throws Exception {
user = (User)session.get("SESSION_USER");
session.remove("SESSION_USER");
return SUCCESS;
}

5 部分代码展示：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Blog.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="Content/index.css" rel="stylesheet" />
<link href="Content/style.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<!--header start-->
<div id="header">
<h1>个人博客</h1>
<p>青春是打开了,就合不上的书。人生是踏上了，就回不了头的路，爱情是扔出了，就收不回的赌注。</p>
</div>
<!--header end-->
<!--nav-->
<div id="nav">
<ul>
<li><a href="index.aspx">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="shuo.html">碎言碎语</a></li>
<li><a href="diary.aspx">个人日记</a></li>
<li><a href="album.aspx">相册展示</a></li>
<li><a href="learn.html">学无止境</a></li>
<li><a href="guestbook.html">留言板</a></li>
<div class="clear"></div>
</ul>
</div>
<!--nav end-->
<!--content start-->
<div id="content">
<!--left-->
<div class="left" id="c_left">
<div class="s_tuijian">
<h2>文章<span>推荐</span></h2>
</div>
<div class="content_text">
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：html5和html的区别</a></h3>
<dl>
<dt>
<img src="Content/images/s.jpg" width="200" height="123" alt="" /></dt>
<dd>

<p class="dd_text_1">
最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词。可能有人会问，这两者有什么关系呢？随着这移动互联
网快速发展的时代，尤其是4G时代已经来临的时刻，加上微软对"XP系统"不提供更新补丁、维护的情况下。
html5+css3也逐渐的成为新一代web前端技术.....
</p>
<p class="dd_text_2">
<span class="left author">段亮</span><span class="left sj">时间:2014-8-9</span>
<span class="left fl">分类:<a href="#" title="学无止境">学无止境</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：html5和html的区别</a></h3>
<dl>
<dt>
<img src="Content/images/s1.jpg" width="200" height="123" alt="" /></dt>
<dd>
<p class="dd_text_1">
最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词。可能有人会问，这两者有什么关系呢？随着这移动互联
网快速发展的时代，尤其是4G时代已经来临的时刻，加上微软对"XP系统"不提供更新补丁、维护的情况下。
html5+css3也逐渐的成为新一代web前端技术.....
</p>
<p class="dd_text_2">
<span class="left author">段亮</span><span class="left sj">时间:2014-8-9</span>
<span class="left fl">分类:<a href="#" title="学无止境">学无止境</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：html5和html的区别</a></h3>
<dl>
<dt>
<img src="Content/images/s2.jpg" width="200" height="123" alt=""></dt>
<dd>
<p class="dd_text_1">
最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词。可能有人会问，这两者有什么关系呢？随着这移动互联
网快速发展的时代，尤其是4G时代已经来临的时刻，加上微软对"XP系统"不提供更新补丁、维护的情况下。
html5+css3也逐渐的成为新一代web前端技术.....
</p>
<p class="dd_text_2">
<span class="left author">段亮</span><span class="left sj">时间:2014-8-9</span>
<span class="left fl">分类:<a href="#" title="学无止境">学无止境</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：html5和html的区别</a></h3>
<dl>
<dt>
<img src="Content/images/s3.jpg" width="200" height="123" alt=""></dt>
<dd>
<p class="dd_text_1">
最近看群里聊天聊得最火热的莫过于手机网站和html5这两个词。可能有人会问，这两者有什么关系呢？随着这移动互联
网快速发展的时代，尤其是4G时代已经来临的时刻，加上微软对"XP系统"不提供更新补丁、维护的情况下。
html5+css3也逐渐的成为新一代web前端技术.....
</p>
<p class="dd_text_2">
<span class="left author">段亮</span><span class="left sj">时间:2014-8-9</span>
<span class="left fl">分类:<a href="#" title="学无止境">学无止境</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>