（附源码）node.js自我展示博客网站毕业设计 231547

╰+哭是因爲堅強的太久メ 2024-04-06 11:59 106阅读 0赞

自我展示博客网站的设计与实现

摘 要

个人博客网站是当今网络的热点，个人博客技术的出现使得每个人可以零成本、零维护地创建自己的网络媒体，Blog站点所形成的网状结构促成了不同于以往社区的Blog文化，Blog技术缔造了“博客”文化。

本文课题研究的“自我展示博客网站”，网站的主要功能模块包括博文展示、博客资讯、照片分享、博文收藏、公告浏览，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取MySQL作为后台数据的主要存储单元，采用JavaEE框架、JSP技术、Ajax技术进行业务系统的编码及其开发，实现了本系统的全部功能。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。针对博客论坛系统的各项需求以及技术问题进行分析，证明了系统的必要性和技术可行性，然后对设计系统需要使用的技术软件以及设计思想做了基本的介绍，最后来实现博客论坛系统和部署运行使用它。

关键词：博客论坛；JavaEE框架；MySQL数据库

**Design and Implementation of Blog BBS System**

**Abstract**

In the information society, targeted ways of obtaining information are needed, but the expansion of ways is basically the direction of people's efforts. Due to the deviation of the perspective, people can often obtain different types of information, which is also the most difficult topic for technology to overcome. In view of the Blog BBS system and other problems, the Blog BBS system is studied and analyzed, and then the Blog BBS system is developed and designed to solve the problems.

Blog, BBS system main function modules including communicating BBS, blog browsing, add comments, messages, post collection, announcement, development to face up to the object model for software development and hardware construction, can well meet the needs of actual use, improve the set up and the corresponding software program coding work, take the MySQL as the main storage unit of the background data, using JavaEE framework, JSP technology, Ajax technology to coding and the development of the business system, realize the whole function of this system. In this report, firstly, the background, function and significance of the research are analyzed, which lays a foundation for the rationality of the research work. This paper analyzes the requirements and technical problems of Blog BBS system, proves the necessity and technical feasibility of the system, and then introduces the technical software and design ideas needed to design the system, and finally realizes the Blog BBS system and deploys and runs it.

**Key words**:Blog BBS; JavaEE framework; The MySQL database

目 录

第1章 绪论

1.1 研究背景与意义

1.2 开发现状

1.3 研究方法

1.4 论文组成结构

第2章 相关技术介绍

2.1 koa框架介绍

2.2 Vue.js主要功能

2.3 koa框架优点

2.4 B/S体系工作原理

2.5 Mysql数据库

2.6 JavaScript 运行模式

2.7 Ajax 应用

第3章 系统分析

3.1 可行性分析

3.2 功能需求分析

3.2.1 前台用户功能

3.2.2 后台管理员功能

3.3 数据流程分析

第4章 系统设计

4.1 系统架构设计

4.2 系统总体设计

4.3 系统功能设计

4.4 数据库设计

4.4.1 数据需求分析

4.4.2 数据库表设计

第5章 系统实现

5.1 数据库访问层的实现

5.2 注册模块的实现

5.3 登录模块的实现

5.4 用户资料修改模块的实现

5.5 公告数据管理模块的实现

5.6 点赞模块的实现

5.7 照片分享模块的实现

5.8 博文管理模块的实现

5.9 博客资讯管理模块的实现

5.10分页模块的实现

第6章 系统测试

6.1 测试目的

6.2 功能测试

6.3 性能测试

第7章 总结与展望

参考文献

致谢

1.   绪论
    
    1.   研究背景与意义

互联网发展日益迅速，据统计截至2015年12月底，我国网民规模达到4.57亿，较2014年底增加7330万人。互联网普及率攀升至34.3%，较2014年提高5.4个百分点。目前为止互联网已经成为推动当今世界经济发展和社会进步的重要信息基础设施，网络通过它把各个点、面、体的信息联系到一起，从而实现这些资源的共享。它是人们信息交流、使用的一个工具。作为工具，它一定会越来越好用，功能也会越来越多，内容也会越来越丰富。因此网站建设在互联网应用上的地位显而易见，倍受人们的重视。为了树立个人在网络上的形象，博客作为一个新的生活方式和工作方式应运而生，博客网站可以成为个人推荐、展现自我的一个平台。常见的博客网站都是单用户的，这使得用户在博客上缺少了与其他人之间的交流、互动。而设计一个多用户的博客网站可以让每个用户对其他人的博客进行浏览，增加了博客用户之间的交流性。

不同于只有博客主人的个人博客网站，多用户博客网站作为一个多用户交流平台，它可让不同的用户进行登录，并管理自己的博客空间。这就要求在网站建设时考虑到不同用户的不同需求，因此对数据库的要求更严苛，网站的权限更严谨。由于网站开发的高要求，成功考验了网站开发者的知识与技术功底。

博客网站作为一个展示个人观点、兴趣、爱好、经历的平台，已广泛成为人们熟悉的交流工具。多用户博客网站上的每个用户和其他人进行互动，不仅可以增长自己的知识，还可以品味其他人的生活经历与见解，认识各种有独特吸引力的网友，对自己的生活履历也是一种积累。不论是从事文学、艺术、设计还是软、硬件开发，你都会有许多个人作品，我们需要将作品展示出来，与他人交流、沟通才能不断进步。多用户博客网站绝对是一个展示个人作品的最佳平台。由于网站的交流性特点，可以对不同用户收集不同的见解，发现自己所需要改进的地方，从而不断提高自己的知识储备。

1.  1.   开发现状

博客，这种以网络日志和超文本链接作为基本构成元素的网页，成为一种以燎原之势发展的社会现象与社会行为。在2008年中外博客发展现状比较分析中大概一半的人拥有不止一个博客，而超过80%的人写博客超过了1年。可以看到，博客已经成为互联网的一种基础设施，它也不再是新事物。按照存在方式分类，目前人们主要使用的博客种类有：托管博客、自建独立网站的博客和附属博客。托管博客，只需用户免费注册申请即可拥有自己的博客空间，是一种“多快好省”的方式，但其博客内容只限注册者进行发布和管理，除博客主人外，其他用户只能进行浏览和评论。博客布局也只由网站开发者决定，缺少了自己的风格。自建的博客网站，拥有自己的域名、空间和页面风格，可是要求自己会网页的制作并懂得网络知识。附属博客，将自己的博客作为某一个网站的一部分，如一个栏目、一个地址。这种博客方式往往会被其他内容所填充，使用户不集中于博客的某个讨论话题，不能体现博客是一种展现个人特点的最佳平台。开发一个多用户的博客网站，使所有用户都集中于一个网站，注册后就能拥有自己的空间，发表自己的作品，同时还能对其他博主的发布内容进行浏览，发表自己的见解。在拥有自己独立空间的同时还能进行公共性的交流。

1.  1.   研究方法

首先，通过引擎搜索或者查阅相关文献资料，了解了本系统开发的背景以及设计系统的意义所在，收集用户需求信息。其次，在开发工具上，最终确定是基于Mysql数据库，在node.js的koa技术程序设计的基础上实现，设计出系统大致的功能模块。主要从方便系统用户和系统管理员的角度进行分析，明确该系统应该具有的功能。最终是测试系统，通过用例测试发现存在的问题并找到解决的方案。利用现有的开发平台，结合自己所学的知识，在老师的指导帮助下来完成该设计，确保系统的可用性、实用性。

1.  1.  论文组成结构

根据市场调研得到的信息数据，结合国内外前沿研究，利用相关系统开发和设计方法，最终设计出自我展示博客网站。

本文共有七章，如下所示。

第一章概述了自我展示博客网站的研究目的和意义；精炼地总结了国内外在内的领域研究情况和未来的研究趋势，最后给出了论文的组成结构。

第二章简要概述了本文所用的开发技术和工具。

第三章简要对系统各业务流程进行需求分析、可行性分析。

第四章对自我展示博客网站进行设计。

第五章对自我展示博客网站进行实现，并贴出相关页面截图，语言描述出具体功能实现的操作方法。

第六章对自我展示博客网站采用测试用例的方式来对一些主要功能模块测试，最后得出测试结果。

第七章总结全文并对未来的研究做出展望。

1.   相关技术介绍
    
    1.  koa框架介绍

Node.js是一个异步的世界，官方API支持的都是callback形式的异步编程模型，这会带来许多问题，例如:1、callback嵌套问题；2、异步函数中可能同步调用callback返回数据，带来不一致性。为了解决以上问题Koa出现了。

koa是由Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的Web框架。使用koa编写web应用，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写Web应用变得得心应手。开发思路和express差不多，最大的特点就是可以避免异步嵌套。

阿里内部就在使用Koa框架，并在Koa基础上面做了一些扩展和封装。并且基于koa开发了一个开源框架egg。

1.  1.  Vue.js 主要功能

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。

1.  1.  koa框架优点

首先，借助promise和generator的能力，丢掉了callback，完美解决异步组合问题和异步异常捕获问题。

其次，koa 把express中内置的router、view 等功能都移除了，使得框架本身更轻量化。该设计有如下好处：1、把express各种中间件移植到koa是很简单的一件事；2、express 中内置的功能件未必好，比如view，想添加自己的view engine进入得做较深层次的hack，又比如router，它的效率不是最好的。koa没有内置这些，给了开发者很大的自由度，开发者都能自由发挥制作出更精细更专业的中间件。

1.  1.   B/S体系工作原理：

B/S架构采取浏览器请求，服务器响应的工作模式。

用户可以通过浏览器去访问Internet上由Web服务器产生的文本、数据、图片、动画、视频点播和声音等信息；

而每一个Web服务器又可以通过各种方式与数据库服务器连接，大量的数据实际存放在数据库服务器中；

从[Web服务][Web]器上下载程序到本地来执行，在下载过程中若遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户。在这种结构中，将许许多多的网连接到一块，形成一个巨大的网，即全球网。而各个企业可以在此结构的基础上建立自己的Internet。

在 B/S 模式中，用户是通过浏览器针对许多分布于网络上的服务器进行请求访问的，浏览器的请求通过服务器进行处理，并将处理结果以及相应的信息返回给浏览器，其他的数据加工、请求全部都是由Web Server完成的。通过该框架结构以及植入于操作系统内部的浏览器，该结构已经成为了当今软件应用的主流结构模式。

### ![60f1dbb8d031440cb62939d076ec38b0.png][] ###

1.  1.  Mysql数据库

Mysql 经过多次的更新，功能层面已经非常的丰富和完善了，从Mysql4版本到5版本进行了比较大的更新，在商业的实际使用中取得了很好的实际应用效果。最新版本的Mysql支持对信息的压缩，同时还能进行加密能更好的满足对信息安全性的需求。同时经过系统的多次更新，数据库自身的镜像功能也得到了很大的增强，运行的流畅度和易用性方面有了不小的进步，驱动的使用和创建也更加的高效快捷。最大的变动还是进行了空间信息的显示优化，能更加方便的在应用地图上进行坐标的标注和运算。强大的备份功能也保证了用户使用的过程会更加安心，同时支持的Office特性还支持用户的自行安装和使用。在信息的显示形式上也进行了不小的更新，增加了两个非常使用的显示区，一个是信息区，对表格和文字进行了分类处理，界面的显示更加清爽和具体。第二是仪表的信息控件，能在仪表信息区进行信息的显示，同时还能进行多个信息的比对，为用户的实际使用带来了很大的便捷。

针对本文中设计的自我展示博客网站在实际的实现过程中，最终选择Mysql数据库的主要原因在于在系统应用及开发的过程中会存在大量的数据库比较频繁的操作，而且数据的安全性要求也是非常的高。综合这些因素，最终选择安全性系数比较高的Mysql来对自我展示博客网站后台数据进行存储操作。

1.  1.  JavaScript 运行模式

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.8.1是一种解释性脚本语言（代码不进行[预编译][Link 1]）。

1.8.2主要用来向[HTML][]（[标准通用标记语言][Link 2]下的一个应用）页面添加交互行为。

1.8.3可以直接嵌入HTML页面，但写成单独的[js][]文件有利于结构和行为的[分离][Link 3]。

1.8.4跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如[Windows][]、[Linux][]、[Mac][]、[Android][]、[iOS][]等）。

1.8.5 JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和[算术运算符][Link 4]及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

1.  1.  Ajax 应用

该技术在 1998 年前后得到了应用。允许客户端脚本发送[HTTP][]请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组件原属于微软 Exchange Server，并且迅速地成为了 Internet Explorer 4.0 的一部分。部分观察家认为，Outlook Web Access 是第一个应用了 Ajax 技术的成功的商业应用程序，并成为包括Oddpost 的网络邮件产品在内的许多产品的领头羊。但是，2005 年初，许多事件使得 Ajax 被大众所接受。Google 在它著名的交互应用程序中使用了异步通讯，如[Google][]、Google 地图、Google 搜索建议、[Gmail][]等。Ajax 这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速传播加强了人们使用该项技术的意识。另外，对Mozilla/Gecko 的支持使得该技术走向成熟，变得更为易用。

Ajax 前景非常乐观，可以提高系统性能，优化用户界面。Ajax 现有直接框架 AjaxPro，可以引入 AjaxPro.2.dll 文件，可以直接在前台页面 JavaScript 调用后台页面的方法。但此框架与[表单验证][Link 5]有冲突。另外[微软][Link 6]也引入了 Ajax 组件，需要添加AjaxControlToolkit.dll 文件，可以在控件列表中出现相关控件。

![5dc961ef7f494e47ac10d8f06c98103e.png][]

1.   系统分析
    
    1.   可行性分析

技术性方面，采用当前主流的Koa框架进行系统主体框架的搭建，实现前台页面的设计与美观调整，以上技术，均由本人经过系统学习，并且都是在课程设计中实践过的，可以使得开发更加便捷和系统。从技术角度看，这个系统是完全可以实现的。

实用性方面，本次设计的主要任务是在自我展示博客网站内￥发布会员卡等，符合当前潮流的发展。从用户角度出发，同时也考虑系统运营成本和人力资源，采用网络上的便捷方式，实现线上业务，使得业务流程更系统，也更方便用户的体验，比较实用。

经济性方面，由于本课题中设计的自我展示博客网站的主要目的是为了能够更加方便及快捷的进行信息的查询管理及检索服务，也就是能够可以直接投入使用的信息化软件。系统的主要成本主要是集中在对使用数据后期继续维护及其管理更新这个操作上。但是一旦系统投入到实际的运行及使用之后就能够很好的提高信息查询检索的效率，同时也需要有效的保证查询者的信息方面的安全性，同时这个自我展示博客网站所带来的实际应用方面的价值是远远的超过了实际系统进行开发与维护方面的成本，因此，从经济上来说开发这个软件是可行的。

1.  1.   功能需求分析

自我展示博客网站的功能主要分为前台用户根据自己的需求进行注册登录，浏览博文信息并对选中的博文进行发布操作。后台系统管理员因职责的不同，分为普通管理员和超级管理员，普通管理员主要对博文发布进行审核，而超级管理员主要对注册用户，公告数据，博文展示信息进行处理。

系统用例图如下所示。

![806502174af44e90a489cd95281f53e9.png][]

图3-1 系统用例图

1.  1.  1.   前台用户功能

前台用户可分为未注册用户需求和以注册用户需求。

未注册用户的功能如下：

注册账号：用户填写个人信息，并验证手机号码。

浏览公告数据：用户可以浏览主页面的公告数据来了解系统的最新公告数据。

浏览博文：用户可以根据博文类型浏览博文的信息，并选中某个博文查看详情，例如：博文编号、博文名称、博文类型、发布人、博文图片等。

浏览评论信息：选中某个博文可查看其用户的评论。

已注册用户的功能如下：

维护个人信息：用户因个人信息的变更可以随时修改自己注册信息。

浏览评论信息：选中某间博文可查看其用户的评论。

博文发布：用户根据自己的需求选中某个博文进行发布操作。

查看历史发布博文：用户可以查看自己以往发布的博文信息。

博客资讯：用户可以在线浏览系统发布的博客资讯信息。

1.  1.  1.   后台管理员功能

管理员功能如下：

修改密码：管理员可以随时修改自己进入系统的登录密码，以保证系统的安全性。

管理普通管理员：对普通管理员进行管理。调动相关工作人员时可以添加或删除普通管理员。

博文展示管理：对博文信息进行维护，添加、删除、修改信息。

公告数据信息管理：发布、删除相关的公告数据信息。

评论信息管理：可以查看用户的评论，及时了解用户发起的建议。

用户管理：可以查看注册用户的信息，并对其进行管理。

照片分享管理：管理博主发布的照片。

博客资讯管理：对博客资讯信息进行分类发布。

1.  1.   数据流程分析

对系统的数据流进行分析，系统的使用者分为二类，一般用户，管理员。系统主要对界面信息传送，登录信息的验证，注册信息的接收，用户各种操作的响应做处理。

系统顶层数据流图如下图所示。

![dab8aa40f63f4ebaaa0c928cff95dfd1.png][]

图3-2 顶层数据流图

要判断用户是是什么身份，是根据登录的数据来判断后，跳转到对应的功能界面。在系统的内部用户就可以对数据进行操作，数据库中心就可以接收到系统传输的有效数据流来对数据sql语句进行对应操作。

系统底层数据流图如下图所示。

![da3a4033b48c46b4b9b819f61fd5a6b4.png][] 图3-3 底层数据流图

系统可以分为前台和后台两部分，每一种操作后系统都返回操作结果。前台和后台的数据连接主要通过数据库，既分别对数据库做不同的操作。

1.   系统设计
    
    1.   系统架构设计

本自我展示博客网站的架构设计主要分为可以3层，主要有Web层，业务层，Model层。其中web层还包括View层和Controller层，Model层包括元数据扩展层和数据访问层。

系统架构如下图所示。

![6e26a28195004fc8b983d65622d96829.png][]

图4-1 系统架构

1.  1.   系统总体设计

自我展示博客网站总体分为前台用户模块和后台管理员模块。

两个模块表现上是分别独立存在，但是访问的数据库是一样的。每一个模块的功能都是根据先前完成的需求分析，并查阅相关资料后整理制作的。

综上所述，系统功能结构图如下图所示。

![3a9db2fe42f34d1294bfccd1f32dc0b0.png][]

图4-2 系统功能结构图

1.  1.   系统功能设计

登录模块：登录模块是进入系统的入口，所有用户必须登录后才能访问系统。登录需要输入用户名和密码，如果多次尝试登录需要输入验证码。登录时需要选择用户的角色，是一般用户还是管理员登录等。登录成功后，会通过数据库获取用户的权限，并跳转至用户的主页面。

评价模块：评价模块促进用户对博文进行点评，查看某个博文已存在的评价，发表评价可以达到真实描述博文的效果。

公告数据模块：可分为公告数据浏览、公告数据检索、公告数据维护三个模块，管理员对公告数据有维护的权限，发布新的公告数据、更新已有的公告数据等。

博文管理模块：博文管理分为博文添加、修改和博文发布。博文信息由管理员进行修改、添加、删除操作；博文发布由普通用户来执行。

1.  1.   数据库设计
        
        1.   数据需求分析

从前面可以分析到数据库中最重要的是博文信息，用户信息。分析可以得到如下数据描述：

平台用户：用于记录用户的各种信息，包括用户名、密码、姓名、性别、地址、邮箱、联系方式等数据项。

管理员：记录管理员的登录信息。包括用户名，密码，权限等数据项。

博文：存放给博文的内容，包括博文编号、标题、文章类型、图片、发布人等数据项。

留言：存储用户的留言。包括留言内容，留言的信息，留言人，时间等数据项。

公告数据：存储平台内的公告数据内容。包括标题，公告数据内容，时间等数据项。

1.  1.  1.   数据库表设计

自我展示博客网站所拥有的数据表有以下：用户信息表，博文展示表，照片分享表，博文分类表，博客资讯表、资讯分类表。

由于数据表较多，只展示系统主要数据表，如下表所示。

<table style="margin-left:4.8pt;width:443.15pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#aeaaaa;width:109.8pt;"> 名称 </td> 
 <td style="background-color:#aeaaaa;width:60.3pt;"> 类型 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 长度 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 不是null </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 主键 </td> 
 <td style="background-color:#aeaaaa;width:129.05pt;"> 注释 </td> 
 </tr> 
 <tr> 
 <td> registered_user_id </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 是 </td> 
 <td style="width:129.05pt;"> 注册用户ID </td> 
 </tr> 
 <tr> 
 <td> user_name </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:129.05pt;"> 用户名 </td> 
 </tr> 
 <tr> 
 <td> examine_state </td> 
 <td> varchar </td> 
 <td> 16 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:129.05pt;"> 审核状态 </td> 
 </tr> 
 <tr> 
 <td> recommend </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:129.05pt;"> 智能推荐 </td> 
 </tr> 
 <tr> 
 <td> user_id </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:129.05pt;"> 用户ID </td> 
 </tr> 
 <tr> 
 <td> create_time </td> 
 <td> datetime </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:129.05pt;"> 创建时间 </td> 
 </tr> 
 <tr> 
 <td> update_time </td> 
 <td> timestamp </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:129.05pt;"> 更新时间 </td> 
 </tr> 
 </tbody> 
</table>

<table style="margin-left:4.8pt;width:441.3pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#aeaaaa;width:98.8pt;"> 名称 </td> 
 <td style="background-color:#aeaaaa;width:60.3pt;"> 类型 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 长度 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 不是null </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 主键 </td> 
 <td style="background-color:#aeaaaa;width:138.2pt;"> 注释 </td> 
 </tr> 
 <tr> 
 <td> photo_sharing_id </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 是 </td> 
 <td style="width:138.2pt;"> 照片分享ID </td> 
 </tr> 
 <tr> 
 <td> theme </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 主题 </td> 
 </tr> 
 <tr> 
 <td> picture </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 图片 </td> 
 </tr> 
 <tr> 
 <td> blogger_number </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 博主编号 </td> 
 </tr> 
 <tr> 
 <td> share_mood </td> 
 <td> text </td> 
 <td> 0 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 分享心情 </td> 
 </tr> 
 <tr> 
 <td> hits </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 点击数 </td> 
 </tr> 
 <tr> 
 <td> praise_len </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 点赞数 </td> 
 </tr> 
 <tr> 
 <td> examine_state </td> 
 <td> varchar </td> 
 <td> 16 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 审核状态 </td> 
 </tr> 
 <tr> 
 <td> recommend </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 智能推荐 </td> 
 </tr> 
 <tr> 
 <td> create_time </td> 
 <td> datetime </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 创建时间 </td> 
 </tr> 
 <tr> 
 <td> update_time </td> 
 <td> timestamp </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:138.2pt;"> 更新时间 </td> 
 </tr> 
 </tbody> 
</table>

<table style="margin-left:4.8pt;width:442.2pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#aeaaaa;width:94.8pt;"> 名称 </td> 
 <td style="background-color:#aeaaaa;width:60.3pt;"> 类型 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 长度 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 不是null </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 主键 </td> 
 <td style="background-color:#aeaaaa;width:143.1pt;"> 注释 </td> 
 </tr> 
 <tr> 
 <td> blog_show_id </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 是 </td> 
 <td style="width:143.1pt;"> 博文展示ID </td> 
 </tr> 
 <tr> 
 <td> title </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 标题 </td> 
 </tr> 
 <tr> 
 <td> blog_category </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 博文类别 </td> 
 </tr> 
 <tr> 
 <td> cover </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 封面 </td> 
 </tr> 
 <tr> 
 <td> blogger_number </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 博主编号 </td> 
 </tr> 
 <tr> 
 <td> blogger_name </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 博主姓名 </td> 
 </tr> 
 <tr> 
 <td> blog_link </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 博客链接 </td> 
 </tr> 
 <tr> 
 <td> details </td> 
 <td> longtext </td> 
 <td> 0 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 详情 </td> 
 </tr> 
 <tr> 
 <td> hits </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 点击数 </td> 
 </tr> 
 <tr> 
 <td> praise_len </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 点赞数 </td> 
 </tr> 
 <tr> 
 <td> examine_state </td> 
 <td> varchar </td> 
 <td> 16 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 审核状态 </td> 
 </tr> 
 <tr> 
 <td> recommend </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 智能推荐 </td> 
 </tr> 
 <tr> 
 <td> create_time </td> 
 <td> datetime </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 创建时间 </td> 
 </tr> 
 <tr> 
 <td> update_time </td> 
 <td> timestamp </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:143.1pt;"> 更新时间 </td> 
 </tr> 
 </tbody> 
</table>

<table style="margin-left:4.8pt;width:441.75pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#aeaaaa;width:131.8pt;"> 名称 </td> 
 <td style="background-color:#aeaaaa;width:60.3pt;"> 类型 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 长度 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 不是null </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 主键 </td> 
 <td style="background-color:#aeaaaa;width:105.65pt;"> 注释 </td> 
 </tr> 
 <tr> 
 <td> blog_classification_id </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 是 </td> 
 <td style="width:105.65pt;"> 博文分类ID </td> 
 </tr> 
 <tr> 
 <td> blog_category </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:105.65pt;"> 博文类别 </td> 
 </tr> 
 <tr> 
 <td> examine_state </td> 
 <td> varchar </td> 
 <td> 16 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:105.65pt;"> 审核状态 </td> 
 </tr> 
 <tr> 
 <td> recommend </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:105.65pt;"> 智能推荐 </td> 
 </tr> 
 <tr> 
 <td> create_time </td> 
 <td> datetime </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:105.65pt;"> 创建时间 </td> 
 </tr> 
 <tr> 
 <td> update_time </td> 
 <td> timestamp </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:105.65pt;"> 更新时间 </td> 
 </tr> 
 </tbody> 
</table>

<table style="margin-left:4.8pt;width:441.3pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#aeaaaa;width:94.8pt;"> 名称 </td> 
 <td style="background-color:#aeaaaa;width:60.3pt;"> 类型 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 长度 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 不是null </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 主键 </td> 
 <td style="background-color:#aeaaaa;width:142.2pt;"> 注释 </td> 
 </tr> 
 <tr> 
 <td> collect_id </td> 
 <td> int </td> 
 <td> 10 </td> 
 <td> 是 </td> 
 <td> 是 </td> 
 <td style="width:142.2pt;"> 收藏ID： </td> 
 </tr> 
 <tr> 
 <td> user_id </td> 
 <td> int </td> 
 <td> 10 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 收藏人ID： </td> 
 </tr> 
 <tr> 
 <td> source_table </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 来源表： </td> 
 </tr> 
 <tr> 
 <td> source_field </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 来源字段： </td> 
 </tr> 
 <tr> 
 <td> source_id </td> 
 <td> int </td> 
 <td> 10 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 来源ID： </td> 
 </tr> 
 <tr> 
 <td> title </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 标题： </td> 
 </tr> 
 <tr> 
 <td> img </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 封面： </td> 
 </tr> 
 <tr> 
 <td> create_time </td> 
 <td> timestamp </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 创建时间： </td> 
 </tr> 
 <tr> 
 <td> update_time </td> 
 <td> timestamp </td> 
 <td> 0 </td> 
 <td> 是 </td> 
 <td> 否 </td> 
 <td style="width:142.2pt;"> 更新时间： </td> 
 </tr> 
 </tbody> 
</table>

<table style="margin-left:4.8pt;width:441.75pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#aeaaaa;width:94.8pt;"> 名称 </td> 
 <td style="background-color:#aeaaaa;width:49.3pt;"> 类型 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 长度 </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 不是null </td> 
 <td style="background-color:#aeaaaa;width:48pt;"> 主键 </td> 
 <td style="background-color:#aeaaaa;width:153.65pt;"> 注释 </td> 
 </tr> 
 <tr> 
 <td> upload_id </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 是 </td> 
 <td> 是 </td> 
 <td style="width:153.65pt;"> 上传ID </td> 
 </tr> 
 <tr> 
 <td> name </td> 
 <td> varchar </td> 
 <td> 64 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:153.65pt;"> 文件名 </td> 
 </tr> 
 <tr> 
 <td> path </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:153.65pt;"> 访问路径 </td> 
 </tr> 
 <tr> 
 <td> file </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:153.65pt;"> 文件路径 </td> 
 </tr> 
 <tr> 
 <td> display </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:153.65pt;"> 显示顺序 </td> 
 </tr> 
 <tr> 
 <td> father_id </td> 
 <td> int </td> 
 <td> 11 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:153.65pt;"> 父级ID </td> 
 </tr> 
 <tr> 
 <td> dir </td> 
 <td> varchar </td> 
 <td> 255 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:153.65pt;"> 文件夹 </td> 
 </tr> 
 <tr> 
 <td> type </td> 
 <td> varchar </td> 
 <td> 32 </td> 
 <td> 否 </td> 
 <td> 否 </td> 
 <td style="width:153.65pt;"> 文件类型 </td> 
 </tr> 
 </tbody> 
</table>

1.   系统实现
    
    1.   数据库访问层的实现

该系统是通过jdbc和MySQL达成连接的，新建一个jdbc.properties文件来填写与数据库连接所需要的驱动和参数。

jdbc.driverClass=com.MySQL.jdbc.Driver

jdbc.url=jdbc:MySQL://localhost:3306/tsi

jdbc.username=root

jdbc.password=123

第一个参数代表MySQL数据库的驱动，第二个参数代表要连接的数据库，第三个和第四个参数代表数据库连接名和密码。

后台与数据库访问主要是通过HQL语句来进行查询的，查询语句中的表名是表格的实体类名，在这种查询语句中\*是不允许使用的，除非适合聚合函数一起使用才可以。

1.  1.   注册模块的实现

用户在填写数据的时候必须与注册页面上的验证相匹配否则会注册失败，注册页面的表单验证是通过JavaScript进行验证的，用户名的长度必须在6到18之间，邮箱必须带有@符号，密码和密码确认必须相同，你输入的密码，系统会根据你输入密码的强度给出指定的值，电话号码和身份证号码必须要求输入格式与生活相符合，当你前台验证通过的时候你点击注册，表单会将你输入的值通过name值传递给后台并保存到数据库中。

用户注册流程图如下图所示。

![32db49e536164852ac609d7f96b7f213.png][]

图5-1用户注册流程图

用户注册界面如下图所示。

![b85dbd4059e24f3c84be1184be7ddee4.png][]

图5-2用户注册界面

1.  1.   登录模块的实现

主要由两部分组成，登录前的登录界面以及登录后的用户功能界面。登录界面，要求用户输入用户名和密码，当用户名和密码其中一个输入为空时，给出提示“用户名，密码不能为空”。获取用户名和密码后到数据库中查找，如果用户名存在，以及对应的密码正确，则登录成功，否则登录失败。登录失败后给出提示，并把焦点停在文本框中。登录成功后将该次会话的全局变量username设置为用户名。登录成功后进入会员的功能模块，主要有会员基本信息修改，已经发布博文信息管理，发布信息，和退出功能。退出功能是清除全局变量username的值，并跳回到首页。

登录流程图如下图所示。

![c0f39e7af90c4f28bb36ce0144bd3e6d.png][]

图5-4登录流程图

用户登录界面如下图所示。

![c3727437e59a445fb7d3db2262d5d3eb.png][]

图5-5用户登录界面

1.  1.   用户资料修改模块的实现

用户登录/注册成功之后可以修改自己的基本信息。修改页面的表单中每一个input的name值都要与实体类中的参数相匹配，在用户点击修改页面的时候，如果改后用户名与数据库里面重复了，页面会提示该用户名已经存在了，否则通过Id来查询用户，并将用户的信息修改为表单提交的数据。

1.  1.   公告数据管理模块的实现

如果公告数据的信息需要修改，管理员可以通过查询公告数据的基本信息来查询公告数据，查询公告数据是通过ajax技术来进行查询的，需要传递公告数据的标题、编号等参数然后在返回到该页面中,可以选中要修改或删除的那条信息，如果选中了超过一条数据，页面会挑一个窗口提醒只能选择一条数，如果没有选中数据会挑一个窗口题型必须选择一条数据。当选择确认修改的时候，后台会根据传过来的id到数据库查询，并将结果返回到修改页面中，可以在修改页面中修改刚刚选中的信息当点击确认的时候from表单会将修改的数据提交到后台并保存到数据库中，就是说如果提交的数据数据库中存在就修改，否则就保存。

公告数据展示界面如下图所示。

![548c6720a5dc4ff0bf4103f347c31237.png][]

图5-6公告数据展示界面

公告数据管理界面如下图所示。

![eb0e2ff56ee04521baae762dbd2e06e2.png][]

图5-7公告数据管理界面

1.  1.   点赞模块的实现

用户对博文内容进行点赞。将页面session中的用户账号userId和点赞框内容传入控制层LiuyanAction，调用addLiuyan方法，通过LiuyanDAOImp向数据库点赞插入，将结果返回lyb.jsp界面。

点赞界面如下所示。

![54e58beebaf941a0b645112a763c0542.png][]

图5-1点赞界面

1.  1.   照片分享模块的实现

用户可以在博客网站中进行照片分享。点击按钮之后会跳转至照片分享页面，上传照片提交之后，后台通过PinglunController的publish方法将相关照片信息保存到数据库系统。

照片分享流程图如下图所示。

![0bcfcd9afe674dae98646a459ed90a41.png][]

图5-10照片分享流程图

照片分享界面如下图所示。

![501d76c41dd542c9862bcd801501ca16.png][]

图5-11照片分享界面

照片分享管理界面如下图所示。

![419fe2049c70407d96d832ab6fc5f4cd.png][]

图5-12照片分享管理界面

1.  1.   博文管理模块的实现

此页面的关键是编写博文信息，包括博文标题，名称，内容等。单击提交按钮以完成信息的添加。如果未写入完整的博文信息，例如，如果未写入博文标题，系统将给出相应的错误提示，并且无法成功输入。数据以概念的形式以onsubmit =“return checkForm（）”的形式写入以进行检查，checkForm（）函数是一种用于写入数据的不同类型的校对方法，是不是为空也是经过form表单中的οnsubmit=”return checkForm()来检查。

管理员点击左侧菜单“博文管理”，页面跳转到博文信息管理外观，调用后台博文查询所有博文信息。并将信息密封到数据集合List，绑定到请求对象，然后页面跳转到相应的jsp，显示出博文信息，单击删除按钮完成博文信息的删除。

博文管理流程图如下图所示。

![3057884c6c8744efa9b4248ee6e1d6d0.png][]

图5-17博文管理流程图

博文添加界面如下图所示。

![86c3658a2e5e4c678dd885fc17432bae.png][]

图5-18博文添加界面

博文管理界面如下图所示。

![9bf16f71025142dea340dff911989cb8.png][]

图5-19博文管理界面

1.  1.   博客资讯管理模块的实现

博客资讯管理提供系统所有最新博客资讯信息，管理员负责发布资讯内容版块，用户可以在线浏览资讯信息。管理员新增资讯版块，在bankuai\_add.jsp请求添加资讯版块，响应到dao层的insert()方法，完成资讯的新增与发布。

博客资讯添加界面如下图所示。

![8d267cd19901487d858d6150e6649dcb.png][]

图5-20博客资讯添加界面

博客资讯展示界面如下图所示。

![74be6fe4bd6e4283a725770fc921c137.png][]

图5-21博客资讯展示界面

1.  1.   分页模块的实现

本系统单独编写一个Pager类用于分页技术的实现，在该类中确定每一个页面显示记录的总数pageSize，同时定义总记录数totalSize、当前页currentPage和总页数totalPage这几个属性，声明一个带两个参数的构造函数，获取数据库记录的时候传入记录总数给pageSize，通过记录总数和pageSize这两个变量计算出总页数，在查询数据的时候需要通过Pager类的pageSize设置每次取出数据的最大记录数和设置起始取出记录的位置。该类中还定义了几个boolean类型的变量，用于判断是否有上一页、下一页、最后一页等等，在jsp页面显示数据的时候通过标签显示记录是否有上一页或者下一页。

1.   系统测试
    
    1.   测试目的

对任何系统而言，测试都是必不可少的环节，测试可以发现系统存在的很多问题，所有的软件上线之前，都应该进行充足的测试之后才能保证上线后不会Bug频发，或者是功能不满足需求等问题的发生。下面分别从单元测试，功能测试和用例测试来对系统进行测试以保证系统的稳定性和可靠性。

1.  1.   功能测试

下表是系统登录功能测试用例，检测了用户名和密码的不同的输入情况，观察系统的响应情况。得出该功能达到了设计目标。

表6-1 系统登录功能测试用例

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 功能描述 </td> 
 <td colspan="2" style="vertical-align:top;width:302pt;"> 用于系统登录 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 测试目的 </td> 
 <td colspan="2" style="vertical-align:top;width:302pt;"> 检测登录时的合法性检查 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 测试数据以及操作 </td> 
 <td style="vertical-align:top;width:151pt;"> 预期结果 </td> 
 <td style="vertical-align:top;width:151pt;"> 实际结果 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 输入的用户名和密码带有非法字符 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示用户名或者密码错误 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 输入的用户名或者密码为空 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示用户名或者密码错误 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 输入的用户名和密码不存在 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示用户名或者密码错误 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 输入正确的用户名和密码 </td> 
 <td style="vertical-align:top;width:151pt;"> 登录成功 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 </tbody> 
</table>

下表是注册功能测试用例，检测了各种数据的输入情况，观察系统的响应情况。得出该功能达到了设计目标。

表6-2 注册功能测试用例

下表是博文管理功能的测试用例，检测了博文管理中对博文信息的增加，删除，修改，查询操作是否成功运行。观察系统的响应情况，得出该功能也达到了设计目标，系统运行正确。

前置条件；用户登录系统。

表6-3 博文管理的测试用例

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 功能描述 </td> 
 <td colspan="2" style="vertical-align:top;width:302pt;"> 用于博文管理 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 测试目的 </td> 
 <td colspan="2" style="vertical-align:top;width:302pt;"> 检测博文管理时的各种操作的运行情况 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 测试数据以及操作 </td> 
 <td style="vertical-align:top;width:151pt;"> 预期结果 </td> 
 <td style="vertical-align:top;width:151pt;"> 实际结果 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击添加博文，必填项合法输入，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示添加成功 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击添加博文，必填项输入不合法，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示必填项不能为空 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击修改博文，必填项修改为空，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示必填项不能为空 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击修改博文，必填项输入不合法，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示必填项不能为空 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击删除博文，选择博文删除 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示删除成功 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击搜索博文，输入存在的博文名 </td> 
 <td style="vertical-align:top;width:151pt;"> 查找出博文 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击搜索博文，输入不存在的博文名 </td> 
 <td style="vertical-align:top;width:151pt;"> 不显示博文 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 </tbody> 
</table>

下表是博文分类功能的测试用例，检测了博文分类中对博文分类的增加，删除，修改，查询操作是否成功运行。观察系统的响应情况，得出该功能也达到了设计目标，系统运行正确。

前置条件；用户登录系统。

表6-3 博文分类的测试用例

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 功能描述 </td> 
 <td colspan="2" style="vertical-align:top;width:302pt;"> 用于博文分类 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 测试目的 </td> 
 <td colspan="2" style="vertical-align:top;width:302pt;"> 检测博文分类时的各种操作的运行情况 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 测试数据以及操作 </td> 
 <td style="vertical-align:top;width:151pt;"> 预期结果 </td> 
 <td style="vertical-align:top;width:151pt;"> 实际结果 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击添加博文分类，必填项合法输入，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示添加成功 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击添加博文分类，必填项输入不合法，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示必填项不能为空 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击修改博文分类，必填项修改为空，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示必填项不能为空 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击修改博文分类，必填项输入不合法，点击保存 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示必填项不能为空 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击删除博文分类，选择博文分类删除 </td> 
 <td style="vertical-align:top;width:151pt;"> 提示删除成功 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击搜索博文分类，输入存在的博文分类名 </td> 
 <td style="vertical-align:top;width:151pt;"> 查找出博文分类 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:151pt;"> 点击搜索博文分类，输入不存在的博文分类名 </td> 
 <td style="vertical-align:top;width:151pt;"> 不显示博文分类 </td> 
 <td style="vertical-align:top;width:151pt;"> 与预期结果一致 </td> 
 </tr> 
 </tbody> 
</table>

1.  1.   性能测试

使用阿里云PTS（Performance Testing Service）性能测试服务对线上系统进行压力测试。线上服务器环境为：1核心CPU，1G内存，1Mbps公网带宽，Centos7.0操作系统。

压测过程中使用了2台并发机器，每台机器20个用户并发，对系统主页，登录，数据查询和数据维护等模块进行并发访问，测试结果是有40个用户并发时，数据管理相关页面的响应时间甚至达到了7s，通过查看服务器出网流量发现已经达到1381kb/s，可以看出服务器的带宽已经达到峰值，如果系统使用5Mbps的带宽，系统的响应时间和TPS将会大大增加。在整个测试的过程中，CPU的使用率占用仅8%，也提现出带宽瓶颈对系统的影响非常严重。

1.   总结与展望

此时项目已经完成，即使实施的时间不是很长，但是这个过程中需要准备很长的一段时间去对系统设计开发所实际到的技术进行学习。在学习的过程中，我逐渐认识得到了我自身存在的一些不足。对于一些控制是必要的应用技能，能够理解，整个过程中仅仅是一个掌握了常用的性能和控制方法，我觉得挺容易的。从该系统中，系统的分析和设计的调查数据，并且已经经历了几个月，并努力几个月，该系统已经完成。很显然，该系统仍有很多不成熟，在系统设计过程中有许多技术缺陷存在。在设计的过程中也涉及到了很多自己无法解决的问题，主要通过找专业的网站和论坛来解决这些问题，对于圆满完成我的毕业设计，他们也贡献了很大一部分力量。系统的开发环境和配置都是可以自行安装的，系统使用VUE.js开发工具，使用比较成熟的Mysql数据库进行对系统前台及后台的数据交互，根据技术语言对数据库，结合需求进行修改维护，可以使得系统运行更具有稳定性和安全性，从而完成实现系统的开发。

系统投入运行时，各功能均运行正常。系统的每个界面的操作符合常规逻辑，对使用者来说操作简单，界面友好。整个系统的各个功能设计合理，体现了人性化。

自我展示博客网站的主要特点有：

（1）简单大方，易于操作的 Web 页面；

（2）利用 Ajax 技术使页面进行无刷新更新；

（3）根据用户的浏览和搜索记录，向用户推荐可能感兴趣的博文信息和博文资讯；

（4）照片分享功能可以帮助用户进行照片上传；

（5）有良好的安全性和可扩展性，增强了系统的可靠性，使系统保持持久的生命力。

由于时间限制和本人能力条件有限，该系统还存在一些不足，今后也会出现许多新的开发技术，未来还可以对系统做出如下改进：

（1）优化系统页面，使页面更加美观且方便操作；

（2）优化搜索功能，提供多条件选择查询搜索；

（3）优化资讯推荐功能，提高资讯推荐的精准度；

（5）进一步提高系统的安全性，使系统更加健壮；

（6）优化数据和代码，提升软件效率，方便系统维护和扩展。

##  ##

## 参考文献 ##

\[1\]卢云霞.浅谈个人博客网站的设计与实现\[J\].内蒙古科技与经济,2021(17):78-79+81.

\[2\]唐榜. 基于Node.js的Web服务端框架研究与实现\[D\].西南科技大学,2021.

\[3\]钟怡旸,郭昱君.基于Springboot的博客管理系统设计与实现\[J\].现代信息科技,2021,5(07):18-20+24.

\[4\]李雅楠. 基于Node.js的协同可视化工具的设计与实现\[D\].北方民族大学,2020.

\[5\]一种基于LoadVars与XML结合的Flash博客网站设计\[J\].科技创新与品牌,2019(10):77-78.

\[6\]刘庆芳,刘桂贤.基于ASP.NET的个人博客网站的实现\[J\].无线互联科技,2019(02):37-38+47.

\[7\]李浩. 基于评论的博客搜索引擎的设计与实现\[D\].重庆大学,2019.

\[8\]王颖,司占军,郭宗伟.基于WEB2.0技术的网站博客系统的设计与制作\[J\].电脑知识与技术,2019,12(02):61-62+71.

\[9\]郑萌萌. 基于新媒体的社会主义核心价值观传播研究\[D\].苏州大学,2019.

\[10\]刘霞.国内外自媒体的比较分析——以博客为例\[J\].新闻传播,2019(14):26-27.

\[11\]方兴东,张笑容.媒体融合战略下的博客发展路径\[J\].传媒评论,2018(03):76-79.

\[12\]饶徐.一个基于WEB的博客网站系统设计\[J\].科技广场,2018(06):35-37.

\[13\]陈淑芳.让网络成为我们飞翔的翅膀\[J\].河北教育(综合版),2018(09):46.

\[14\]孙朝云,张羽.基于B/S结构博客论坛系统设计与实现.计算机应用与软件,2018,29(3):183-186.

\[15\]李海海.基于Spring框架的博客论坛系统的设计与实现.湖南大学,2018.

\[16\]MartinM,LamMS.AutomaticGenerationofXSSandSQLInjectionAttackswithGoal-directedModelCheckingUsenixSecuritySymposium,July28-August1,2008,SanJose,Ca,Usa.2018:31-44.

\[17\]BeckK,GammaE.Test-infected:programmerslovewritingtestsMoreJavagems.CambridgeUniversityPress,2018:357-376.

\[18\]GuptaP,GovilMC.SpringWebMVCFrameworkforrapidopensourceJ2EEapplicationdevelopment:acasestudy.InternationalJournalofEngineeringScience&Technology,2018,2(6).

\[18\]BruceRich;TheoderJ.Shrader;AthonyJ.Nadalin,JavaandInternet\[J\].IntelligentInformation Management.,2018,(10):210-230

\[19\]ElizabethAWilliamson,DavidKHarrison,MikeJordan.Informationsystemsdevelopmentwithinsupplychainmanagement\[J\].InternationalJournalofInformationManagement,2018,(5):25-32.

\[20\]MattBishop.Trendsinacademicresearch:vulnerabilitiesanalysisandintrusiondetection\[J\]. Computers&Security,2018,(7)56-78.

## 致谢 ##

本次设计历时3个月。在这个毕业设计中，它离不开指导教师的指导，使事情基本顺利。指导老师无论是在毕业设计历经中，还是在论文做完中都给了了我特别大的助益。另1个方面，教师认真负责的工作姿态，谨慎的教学精神厚重的理论水准都使我获益匪浅。他勤恳谨慎的教学育人学习姿态也给我留下了特别特别深的感觉。我从老师那里学到了很多东西。在理论和实践中，我的技能得到了特别大的提高。在此，特向教师表示由衷的感激。

经过对该毕业设计的全部研究和开发，我的系统研发经历了从需求分析到实现详细功能，再到最终测试和维护的特殊进展。让我对系统研发有了更深层次的认识。如今我的动手本领单独处理疑惑的本领也获取到了特别大的演练学习增多，这是这次毕业设计最好的收获。

最后，在整个系统开发过程中，我周围的同学和朋友给了我很多意见，所以我很快就确认了系统的商业思想。在次，我由衷的向他们表示感激。

> **免费领取本源代码，请关注点赞＋私信**

[Web]: https://baike.baidu.com/item/Web%E6%9C%8D%E5%8A%A1/2837593
[60f1dbb8d031440cb62939d076ec38b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/af0d6f9bb58c42f5a0c184d0016585a9.png
[Link 1]: https://baike.baidu.com/item/%E9%A2%84%E7%BC%96%E8%AF%91
[HTML]: https://baike.baidu.com/item/HTML
[Link 2]: https://baike.baidu.com/item/%E6%A0%87%E5%87%86%E9%80%9A%E7%94%A8%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80
[js]: https://baike.baidu.com/item/js/10687961
[Link 3]: https://baike.baidu.com/item/%E5%88%86%E7%A6%BB
[Windows]: https://baike.baidu.com/item/Windows
[Linux]: https://baike.baidu.com/item/Linux
[Mac]: https://baike.baidu.com/item/Mac/173
[Android]: https://baike.baidu.com/item/Android/60243
[iOS]: https://baike.baidu.com/item/iOS/45705
[Link 4]: https://baike.baidu.com/item/%E7%AE%97%E6%9C%AF%E8%BF%90%E7%AE%97%E7%AC%A6/9324947
[HTTP]: https://baike.baidu.com/item/HTTP
[Google]: https://baike.baidu.com/item/Google
[Gmail]: https://baike.baidu.com/item/Gmail
[Link 5]: https://baike.baidu.com/item/%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81
[Link 6]: https://baike.baidu.com/item/%E5%BE%AE%E8%BD%AF
[5dc961ef7f494e47ac10d8f06c98103e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/41073a49615d472d972ad213517f06b1.png
[806502174af44e90a489cd95281f53e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4270f3a5cfbc40db84cc475c72fe2f0c.png
[dab8aa40f63f4ebaaa0c928cff95dfd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a8d9b02504be45bcaff3f1bb4c7bb1b8.png
[da3a4033b48c46b4b9b819f61fd5a6b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ea1c68afc0144748bae19c364abccc3c.png
[6e26a28195004fc8b983d65622d96829.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/aca9773b9b4542668cf41efdb971695d.png
[3a9db2fe42f34d1294bfccd1f32dc0b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3df09672cfb04273bd595cd67d358faf.png
[32db49e536164852ac609d7f96b7f213.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/308951f4b86b49ba9541bd2ca48a8cb8.png
[b85dbd4059e24f3c84be1184be7ddee4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9be96a794f0c4c2f9add323b3dc7747b.png
[c0f39e7af90c4f28bb36ce0144bd3e6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5c31f5bcf0d3467da3427e740e30803b.png
[c3727437e59a445fb7d3db2262d5d3eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/570278b1f621494aacb6ce0e71ae14d7.png
[548c6720a5dc4ff0bf4103f347c31237.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/eec48de45e354b55825573f4267d38c5.png
[eb0e2ff56ee04521baae762dbd2e06e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6371c2a3e8534c759875cd18dc6110c8.png
[54e58beebaf941a0b645112a763c0542.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/43142ca9de304adbb619adaed119cb3b.png
[0bcfcd9afe674dae98646a459ed90a41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/23e3c7bc80a74c73a235f5373b299d93.png
[501d76c41dd542c9862bcd801501ca16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8a6ee03032854c339da40a46ca75ed16.png
[419fe2049c70407d96d832ab6fc5f4cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a1397a0da78c442da0874ec6ddc49a01.png
[3057884c6c8744efa9b4248ee6e1d6d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f52a49f4369f440598b8ecac57ca16ec.png
[86c3658a2e5e4c678dd885fc17432bae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/783c82c06d8e4a599904fc5a1318f9cf.png
[9bf16f71025142dea340dff911989cb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/07974319ef17428fb2764ee7043ad1c0.png
[8d267cd19901487d858d6150e6649dcb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0f89d4110af14d74b5dbc8429620a2fc.png
[74be6fe4bd6e4283a725770fc921c137.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2b679a342b4646eca343beda186decc8.png