基于javascript的个人博客系统的设计与实现

基于JavaScript的个人博客系统的设计与实现
摘要：个人博客已经成为重要的媒体和信息传播平台。

为了让用户加强感情交流和进行知识分享，我设计并制作了用来展示用户情感态度、生活观点、学习经验的个人博客。

该设计使用了JavaScript、MySQL、B/S等语言和技术，搭建了平台的总体框架，实现了用户注册、登录和个人信息管理、博客日历、热门文章、文章分类、好友链接等主要功能。

达到了构建网络交流平台的目的。

关键词:个人博客；MySQL；JavaScript
Abstract: The personal blog has become an important platform for media and information dissemination. For enhancing emotional communication and knowledge sharing with users，I have designed and made this personal blog which is about attitudes, values and learning experiences of users. This design used Java development language, MySQL database and B/S technology for making system frame and realizing the user registration, the user login and the personal information management, the blog calendar, the hot article, the article classification, the friend link and other functions. And then,the purpose of constructing network communication platform has been achieved.
Keywords:Personal blog; MySQL;JavaScript
目录
摘要 (Ⅰ)
Abstract (Ⅰ)
目录 (Ⅱ)
1 绪论 (1)
1.1 选题目的和意义 (1)
1.2 选题依据 (1)
2 系统开发技术的介绍 (2)
2.1 Java介绍 (2)
2.2 JavaScript介绍 (2)
2.3 数据库介绍 (3)
2.4 B/S介绍 (3)
3 系统分析 (3)
3.1 系统功能需求分析 (3)
3.2 前台功能需求分析 (4)
3.3 后台管理需求分析 (4)
4 系统设计 (5)
4.1 运行架构 (5)
4.2 博客系统设计 (5)
4.2.1 前台模块设计 (5)
4.2.2 后台模块设计 (6)
4.2.3 数据库结构设计 (6)
5 系统实现 (9)
5.1 系统前台功能的具体实现 (9)
5.1.1 登陆界面 (9)
5.1.2 系统的主界面 (11)
5.1.3 用户留言界面 (13)
5.1.4 留言列表设计界面 (13)
5.2 系统后台功能的具体实现 (14)
5.2.1 前台展示修改界面 (15)
5.2.2 修改密码界面 (15)
6 系统测试 (16)
6.1 系统测试目的 (16)
6.2 测试范围 (16)
总结....................................................................................... 错误！未定义书签。

参考文献................................................................................. 错误！未定义书签。

致谢....................................................................................... 错误！未定义书签。

1 绪论
1.1选题目的和意义
个人博客有自己的用户群，有巨大的潜在用户。

但个人博客的特点是随机性和丰富度，包括文字、图片、声音、图片、视频。

个人博客系统将为用户提供一个浏览器书签工具，实现一键共享功能[1]。

因此，建立一个轻量级的个人博客系统不仅会成为一个个人想法，而且很少有非纸质的成长记录也会影响到人们的传统学习和社会模式。

为人们交流、学习、交际提供了新的途径和平台。

博客比微博更小众，更适合小型社交网络，更适合校园的实现，例如，感兴趣的旅行在同一学校可以加入个人博客的主题旅行看到什么样的最新旅游信息，在他们的环境，他们最近去过的地方,什么是有趣的和美味的东西,也可以组织一起去旅游[2]。

个人博客有一个更明确的定位来加入用户，他们都有一个明确的目标。

他们想找徒步旅行者一起旅行，找骑自行车的人一起骑车，和高成就的人谈论学习困难的问题。

可以在一个轻松的博客上相互交流。

调查显示，目前高校校园论坛系统主要实现师生间的沟通与交流。

市场上没有一个专门的校园发展的个人博客平台[3]。

虽然市场上比较小众，但可以推动其他成熟的应用平台免费使用，在这些知名的平台上也可以建立更广泛的兴趣主题。

1.2 选题依据
个人博客是一个开放又便捷的平台，在校园生活中很受欢迎，主要微博是为大家提供一种全新的交流工具，可以在任何时间任何地点将自己日常生活的经验，生活动态，学习经验，兴趣爱好，喜欢的音乐和视频，旅游的照片，个人成果等通过个人博客上传。

让周围的人了解你，扩大交流范围，加强师生的互动，学生与学生之间的联系，有助于学习经验的交流，让生活更加多姿多彩[]。

人们可以有选择地关注某一部门的信息。

例如，一名大四学生可能只关注就业信息、论文信息、研究生考试信息，而教师更注重科研项目的信息。

个人博客也共享互动，人
们不注意信息的有关部门不害怕错过有效信息,人们可以检查时刻的动态是否有任何其他学生都关心的重要信息。

教务处也可以发布投票和讨论会议，系统上通过学生满意各种政策、舆论监测，收集各方意见,以便理解教师的真实思想和学生的想法,加上各种提议修改有关规定为学校的发展做出更好的决策。

基于JavaScript平台和MySQL数据库开发，实现了基于JavaScript的个人博客系统的设计，及时处理所有用户的信息，体现了高端智能[10]。

作为新时代的网络平台，Java平台为网络时代提供了高效的开发工具。

2 系统开发技术的介绍
本博客系统的的主要开发环境是基于JavaScript以及MySQL数据库，下面简单介绍一下JSP和MySQL数据库。

2.1 Java介绍
Java是一种的程序语言，被广泛应用于程序的开发。

他采用模块化和组件化的方式来运行和进行开发，是目前大多数开发人员必须掌握的一种常用的程序开发技术框架。

Java可以在Eclipse开发平台采用微软开发的程序，程序开发平台提供的各种框架，各种控件，各种各样的基础支撑，是可视化的集成开发环境，使程序开发变得清晰，使开发过程是非常简单和方便。

此外，Java在通用语言运行库运行。

它是目前唯一能够同时支持多种编程语言的综合开发框架。

Java架构为编程人员提供了极大的方便。

Java技术进行管理和控制的一种先进的组件数据库。

它使软件开发人员能够查询、更新和删除数据库。

可以为网络程序的开发提供支持。

本文也是的基于Java的系统与Java的开发框架。

2.2 JavaScript介绍
JavaScript是一种脚本语言，是基于原型的语言，JavaScript脚本语言是一个有自己的数据类型，有自己的算术运算符，有自己的表达式和程序的程序框架，它提供了数据类型，以便用于处理数据和文本[10]。

变量提供了一个用于存储信息的
字段，而表达式通常会执行更复杂的信息处理。

JavaScript是一种网络，支持各种用户和终端平台环境的开发，大力推动新一代网络的发展，真正使人们获取需要的信息。

2.3 数据库介绍
数据库是数据管理的有效技术，数据库管理系统是位于用户与操作系统之间的一层数据管理软件。

它的功能很强大，用户可以通过它对数据进行定义，用户使用它操作数据，进行基本的操作，如查询、插入、删除和修改等。

它们统一管理，保证安全性。

它的特点包括：数据结构化、共享性高、冗长度低且易扩充、独立性高、有管理系统统一管理。

2.4 B/S介绍
B/S结构是一种基于Internet系统的程序开发体系结构，是程序开发中非常广泛的程序结构。

目前，B/S结构得到了广泛的应用，打破了C/S结构模式，为基于网络的程序系统提供了良好的支持。

个人博客网站的总体结构图如图2-1所示。

图2-1 博客网站总体结构
3 系统分析
3.1系统功能需求分析
博客系统总目标：在Java、数据库和一些开发平台上，用已有的软件和配置硬件，构成一个开放式的模式，容易扩展和维护的个人博客网站，加强人与人之间的联系，并通过你的个人博客网站表达更多的想法。

它可以随时发布文章，及时回复和留言。

3.2 前台功能需求分析
博客系统前台功能如下：（1）文章查询：被访问次数，转载评论次数。

（2）信息处理：文章显示的推荐热门文章。

（3）留言处理：访问者或用户可以评论或评论系统。

在此基础上，我将个人博客网站分为三个方面：游客，用户还有博主。

博客信息管理系统用例图如图3-1所示：
图3-1 博客信息管理系统用例图
3.3 后台管理需求分析
博客系统后台功能是用户通过连接前台和后台数据库的计算机网络，从前台获取详细资料进行处理，实现文章管理，信息管理，个人相册管理等。

（1）文章管理：用户在网站上更新自己的文章。

（2）个人相册管理：更新博客相册中的图片。

（3）信息管理：发布和更改个人信息。

（4）评论：删除其他人对自己做出的不恰当评论。

（5）收集日志：可以收集好的日志文章。

博客后台管理系统流程图如图3-2所示：
图3-2 博客后台管理流程图
4 系统设计
4.1运行架构
为了提高个人博客系统的工作效率，提高处理用户请求的数量，并且系统使用IBM服务器作为主机。

在数据库处理的情况下，不让在存储过程的数据层和数据库服务器中承受负重，因此数据库系统选择复杂的MySQL。

如果需要将在线博客系统服务器分配给其他主机。

4.2 博客系统设计
4.2.1 前台模块设计
博客信息管理系统的特点表示，它分为两个板块：前台浏览和后台管理。

前台浏览主要用于用户查看文章信息; 后台管理主要用于博客管理员对用户的管理，文章的管理，修改密码的管理。

博客系统的前台用户浏览流程图如图4-1所示。

图4-1 前台用户浏览模块流程图
4.2.2 后台模块设计
前台浏览主要用于用户查询文章信息，比如文章类型，文章内容，发布时间，访问次数等。

当进入后台管理平台时，先进行用户名，密码以及验证码登录。

登录成功后，进入个人博客后台管理平台。

博客系统的后台用户管理流程图如图4-2所示。

图4-2 后台用户管理模块流程图
4.2.3 数据库结构设计
前台浏览主要用于用户查询文章信息，比如文章类型，文章内容，发布时间，访问次数等。

当进入后台管理平台时，先进行用户名，密码以及验证码登录。

登录成功后，进入个人博客后台管理平台。

博客系统的后台用户管理流程图如图4-2
所示。

数据库是目前应用软件系统的不可或缺的部分，因此，本系统的数据库设计基于以下考虑：数据库规范化和非标准化; 数据查询优化和索引建立; 存储过程和意见。

ER模型，在数据库设计领域获得了大多数的认可，但在生活中使用率低。

设计数据库也是具有挑战性的。

许多数据库设计会使用ER模型帮助进行数据库设计，ER数据库设计工具提供了ER图，绘图工具帮助创建ER图来获得数据，以下是系统数据表。

（1）用户表，此表主要用于保存用户的信息。

如表4.1所示。

（2）登录表，此表用于博主进行登录，输入自己的用户名，登录密码就可以登
录成功。

如表4.2所示。

表4.2 用户登录表
（2）部分后台管理表，用于管理员对用户信息进行操作，对好友，陌生人查找自己的相册及文章，还有好友，陌生人对自己文章的评论以及回复。

如下表4.3；表4.4；表4.5；表4.5所示。

表4.3 相册管理表
表4.6 信息处理表
以下为博客总ER图，清晰的表达了博主，管理员，还有游客之间的联系，包括相册管理，留言管理，还有文章管理的各个功能。

图4-7 博客总E-R图
5 系统实现
5.1 系统前台功能的具体实现
5.1.1 登陆界面
系统的界面是按照常规的Web界面进行设计，设计的原则是界面清晰，贴切用户实际生活，每一位用户都可以进入博客首页实行注册、登录。

通过身份认证的用户名，可以在个人博客页面发表文章。

该板块实现新用户的注册及登录。

当新用户进行注册，填写个人详细资料，并输入验证码，注册成功后，进行登录，输入正确的设置密码，用户名，验证码。

就可以进去自己的博客界面，发表文章留言以及评语，和好友互动。

登陆界面如图5-1；注册界面如图5-2。

图5-1 登陆界面
图5-2 用户注册界面
以下是登录界面实现的部分代码：
用户登录
// 用户登录操作
public String checkUser() {
objectDao = new ObjectDao<UserInfo>();
hql = "from UserInfo where account = '" + userInfo.getAccount() + "'";
UserInfo user = objectDao.queryFrom(hql);
request.setAttribute("sign", "6");
request.getSession().setAttribute("account", user.getAccount());
request.getSession().setAttribute("freeze", user.getFreeze());
return "operationUser";
}
public void validateCheckUserPWD() {
if (userInfo.getCode().equals("")) {
this.addFieldError("code", "输入校验码！");
以下是登录流程图;用户输入自己的用户名，密码，通过验证就可以进入博主主页进行管理和查阅。

图5-3 登录流程图
5.1.2 系统的主界面
以下是博客系统的主界面，用户注册成功后自动跳转此界面，一进去就可以看到自己主页的内容，用户名，热门文章和点击率。

主界面实现了如下几个功能:好友查看功能、相册浏览功能、留言功能。

在该模块中还展示了博客的个人信息，热门文章、文章分类，效果图如下：
图5-4 系统主界面
以下是主界面实现的部分代码：
public String BlogMain() {
// 以下上判断博客推荐
List<UserInfo> userCommned = userDao.queryList(hql_user_commend);
if (userCommned.size() > 5) {
userCommned = userCommned.subList(0, 5);
}
request.setAttribute("userCommned", userCommned);
// 以下是热门博客
List<UserInfo> userVistor = userDao.queryList(hql_user_vistor);
if (userVistor.size() > 5) {
userVistor = userVistor.subList(0, 5);
}
request.setAttribute("userVistor", userVistor);
以下是请求好友和用户文章处理流程图，通过申请用户ID，通过植入新的关系，成为好友。

以及注册登录查看文章，游客也可以访问其内容。

图5-4 好友添加流程图
图5-5 文章处理流程图
5.1.3 用户留言界面
用户在看到个人博客的文章或者有趣的信息的时候，可在页面的底部的留言框中给博主留言。

有了这个板块的设计，用户就可以很好的进行沟通交流。

如果没有登录，则显示“匿名”
留言，效果图如图5-6 所示：
图5-6 用户留言界面
5.1.4 留言列表设计界面
在博客日历的下方有一个留言列表，用户可选择留言列表这一选项，即可看到留言板块中留言记录，其中用户可以参与到沟通交流当中，操作简单便捷，用
户易学易上手，其效果如图5-7；5-8所示：
图5-7 留言界面
图5-8 留言列表界面
5.2 系统后台功能的具体实现
此界面为本博客的后台功能主界面，用于实现用户对博客个人资料及相关信息的了解。

它的具体功能：个人管理、文章管理、好友管理、留言管理。

用户可以对个人主页中的资料进行修改，文章信息的处理以及好友管理和留言管理，为用
户提供了方便。

如图5-9所示。

图5-9 后台主界面
5.2.1 前台展示修改界面
此界面是博主对前台公告、文章等信息的修改页面，博主进行相关操作后，相应内容第一时间显示到前台主界面上，用户可以浏览到最新信息，如图5-10所示。

图5-10 修复界面
5.2.2 修改密码界面
这一界面是博主对自己博客遇到安全性问题做出的措施，如果遇到盗号，密码泄露等问题。

如图5-11所示。

图5-11 修改界面
以上所有内容是个人博客系统的各个功能的实现情况，成功实现了增、删、改、查各主要功能，主要使用Java的表现形式，结合数据库技术来实现，这也恰恰说明了数据库在开发Web应用程序中的优势，使得整个系统设计思路比较清晰，充分展示了博客系统的精美与方便。

6 系统测试
6.1 系统测试目的
为了方便用户使用“个人博客系统”，以及尽可能少的使“个人博客系统”的测试错误的发生。

这是博客网站的设计过程中的最后一个步骤，也是最重要的一步，因为它的准确与否关系到了软件能否稳定良好的运行，这一步可以发现软件在设计过程中缺陷问题、在编写中的BUG代码问题以及功能之间的各个子系统之间的相互影响等方面的不良影响，发现这些问题后可以及时的对相关的不良影响进行修改和完善，使得软件能够正常良好的运行下去，避免客户进行询问和售后问题。

当涉及到软件测试时，它实际上与我们进行软件开发时的情况相同。

他们都必须遵守软件工程的基本原则和管理知识的原则。

6.2 测试范围
测试安排如下：
对该系统的总体质量进行了测试，系统的功能和性能完全可以实现，必须做到以下几点：
（1）为每个系统的模块进行功能测试，单功能测试，集成测试；
（2）对各个模块进行整合操作；
（3）确保所有的模块测试用例已经实现并且没有问题；
（4）通过执行所有的自动化测试脚本；
（5）所有重要的等级问题是与测试和验证完成；
（6）测试的每个部分是验证完成的水平；
（7）重要特点不是问题；
测试项目及结果如表6.1、6.2、6.3所示：
（1）用户登录测试结果如表所示：
表 6.1 登录功能测试结果
（2）用户密码修改测试结果如表所示：
表6.2 用户密码修改测试结果
（3）博客测试项目结果如表所示：。