《基于B/S结构项目实训》设计报告

《基于B/S结构项目实训》设计报告

摘 要

现如今网络的飞速发展，在网络上展示、分享自己的知识越来越流行，我生出了自己建立一个个人文章管理系统的想法。这个系统可以用来展示使我们的生活、分享技术文章、结识更多志同道合的朋友。本系统采用Java语言开发，用到的开发编辑器为：IDEA，项目管理使用git，采用SpringBoot+SpringJPA+SpringMVC框架，用到的数据库是线下流行的MySQL，缓存采用的Redis。本系统权限采用Shiro框架管理，搜索引擎采用ElasticSearch，项目部署采用Docker，服务器采用阿里云服务器，负载均衡采用Nginx。本系统分为前台用户部分和后台管理员部分，在前台用户部分中，包括用户在线注册、首页展示文章、分类展示、标签展示、文章归档、个人介绍、文章搜索等操作；后台管理员部分包括用户管理、角色管理、权限管理、文章管理、分类管理、标签管理等操作。

关键词： Thymeleaf Spring MVC SpringBoot Maven JPA Maven ElasticSearch Redis Shiro Docker Nginx

文章目录

• 第1章 绪 论
• • 1.1 个人文章管理系统现状分析
  • 1.2 选题的目的和意义
• 第2章 系统需求分析
• • 2.1 系统的设计目标
  • 2.2 功能需求
  • 2.3 需求获取与建模
  • • 2.3.1 用例图
    • 2.3.2 用例规约
• 第3章 数据库设计
• • 3.1 逻辑结构设计要点
  • • 3.1.1 E-R图
• 第4章 系统设计
• 第5章 功能实现
• 第6章 系统测试
• • 6.1 测试方法和工具
  • 6.2 用户模块测试
  • • 6.2.1 首页
    • 6.2.2 文章详情页面
    • 6.2.3 搜索页面
    • 6.2.4 后台文章管理页面

第1章 绪 论

博客成为网络各类运用的最终指向。博客和个人、组织及其关系的同一性，使得网络的经济和社会效益最终全部在博客中得以体现，企业经济利益最终在网络中全部落实到博客上，“服务博客”成为企业在网络中的第一目标。博客成为网络新经济腾飞的加速器。博客使得个人通过网络机制将自身生产、消费、营销、学习、教育、传播、接受等综合性的角色统一化，将本来对立统一的一对对矛盾身份系统集中化和有形化，可以最大程度的激发个人在网络中的参与意识和创造潜能，同时博客的不同层次的杠杆效应共同作用，会形成网络新经济大爆发的全新前景。
个人文章管理系统，采用的主要技术是基于服务器端的SpringBoot框架搭建整个代码结构，结合Thymeleaf 和JPA来编写。

1.1 个人文章管理系统现状分析

中国的独立博客是一群特殊的群体，和BSP托管博客不同，独立博客不仅仅需要具有域名、主机、博客程序等各种知识和技术，还要和BSP博客那样坚持不断地更新，每天花费大量时间码字，这的确是一个门槛较高的领域。和BSP博客不同的是，独立博客是个人媒体（大部分是非常小的个人媒体），以前的媒体是垄断行业的天下，网络上门户网站放什么信息，你就得看什么信息，现实社会中，是书刊、报纸、电视等媒体高度发达的社会，我们普通人的话语权简直微不足道。掌握话语权的是那些媒体巨头，他们想让你看什么，你就得看什么，我们草民的声音显无足轻重。

1.2 选题的目的和意义

博客的出现改变了这一切，我们终于不需要向别人表示唯唯诺诺，跟在别人后面人云亦云，我们有了表达自己思想的权利，我们终于可以发出我们自己的声音了，写出那些垄断媒体、门户网站不想让你知道的事情。现在，随着博客的迅速普及和大众化，人人都可以成为博客，通过每个人这一点点的努力，人人都是个人媒体的现象正在中国四处开花。

第2章 系统需求分析

2.1 系统的设计目标

本系统分为前台用户部分和后台管理员部分，在前台用户部分中，包括用户在线注册、首页展示文章、分类展示、标签展示、文章归档、个人介绍、文章搜索等操作；后台管理员部分包括用户管理、角色管理、权限管理、文章管理、分类管理、标签管理等操作。

2.2 功能需求

前台实现的功能如下。
（1）登录注册功能：登录时可以对用户名和密码进行简单的验证；注册时可以对用户输入的信息进行验证。
（2）首页博客展示功能：分页显示博客简要信息，显示顶部分类，显示标签，显示推荐博客。
（3）分类标签展示功能：按分类展示博客，按标签展示博客
（4）归档，关于个人展示功能：归档展示博客，个人技能展示
（5）搜索功能：搜索博客标红展示
后台实现的功能如下。
（1）用户管理：查看用户状态，为用户分配角色。
（2）角色管理：增加、编辑、删除角色，为角色分配权限。
（3）权限管理：增加、编辑、删除权限。
（4）文章管理：管理员可以查询博客信息，可以增加博客，可以修改博客信息，可以删除博客。
（5）文章分类管理：管理员可以增加文章类别，删除文章类别，修改文章类别。
（6）文章标签管理：管理员可以增加文章标签，删除文章标签，修改文章标签。

2.3 需求获取与建模

2.3.1 用例图

（1）后台管理员登录用例图如图2-1所示。

图2-1管理员登录用例图

（2）后台角色管理如图2-2所示，主要功能有管理角色信息。

图2-2管理员角色管理用例图

（3）权限管理如图2-3所示，超级管理员权限管理。

图2-3用户权限管理用例图
（4）管理员博客管理如图2-4所示，管理员查询发布博客。

图2-4 管理员博客管理
（5）管理员分类标签管理如图2-5所示，管理员管理博客类别。

图2-5 管理员类别管理图
（6）用户首页查看如图2-6所示，用户进入首页。

图2-6 用户查看图

2.3.2 用例规约

（1）管理员登录用例规约表如表2-1所示。管理员登录主要对管理员登录进行描述，管理员进入登录页面，输入相关信息，输入正确后进入主界面，若输入错误，则会有相关提示错误信息。

表2-1 管理员登录表

用例编号：1	用例名称：管理员登录
用例描述	管理员登录网站
参与者	管理员
副参与者	无
前置条件	管理员进入登录界面，本用例开始
后置条件	进入主界面，用例结束
基本路径	进入登陆界面，登录
备选路径一	无

（2）管理员用户管理用例规约如表2-2所示。管理员对用户管理主要由查看用户信息，分配用户角色，修改用户权限三个方面，管理员进入用户管理员界面，对相应用户进行相应操作。
表2-2 管理员用户管理表

用例编号：2	用例名称：用户管理
用例描述	用户管理员管理用户，可以查看用户信息，启用用户，禁用用户
参与者 用	户管理员
相关用例	无
前置条件	用户管理员进入用户管理界面，本用例开始
后置条件	用户表信息进行更新
基本路径	（1） 进入用户管理界面（2） 输入关键字查询用户信息（3）点击禁用用户，禁止非法用户使用本网站 （4）点击分配角色，给与用户对应角色（4）点击分配权限，给予角色访问权限
备选路径一	无

（3）管理员角色管理用例规约如表2-3所示。管理员进入角色管理界面，可以新增角色，可以修改管理员权限。

表2-3 管理员角色管理表

用例编号：3	用例名称：角色管理
用例描述	超级管理员对管理员角色进行管理：查看角色信息，新增角色，删除角色 ,角色授权
参与者	超级管理员
相关用例	无
前置条件	超级管理员进入角色管理界面，本用例开始
后置条件	管理员表信息进行更新，用例结束
基本路径	（1）进入角色管理界面，点击新增角色添加新的角色 （2）进入角色管理界面，点击删除角色删除已有的角色（3）进入角色管理界面，点击授权（下拉列表），为角色添加，修改或删除授权
备选路径一	无

（4）管理员博客管理用例规约如表2-4，表2-4，表2-5，所示。管理员进入博客管理界面，可以查看文章信息，修改文章信息以及删除文章。
表2-4 管理员文章管理表1

用例编号：4	用例名称：浏览博客
用例描述	浏览全部博客
参与者	管理员
前置条件	管理员进入文章管理界面
后置条件	显示全部用户的所有文章
基本路径	点击查看全部文章
备选路径一	没有文章，显示未找到文章信息

表2-5 管理员文章管理表2

用例编号：5	用例名称：查询文章 作者
用例描述	管理员根据不同条件查找文章
参与者	管理员
前置条件	进入文章管理界面
后置条件	界面显示相应查询结果
基本路径	（1）输入查询内容（文章编号或者文章名称）（2）点击查询按钮
备选路径一	没有相应文章信息，显示“搜索结果为空”

（5）管理员文章管理用例规约如表2-4，所示。管理员进入文章管理界面，修改文章信息，增加新文章以及删除文章。
表2-7 管理员文章管理表1

用例编号：7	用例名称：增加文章类别
参与者	文章管理员
用例描述	该用例描述了文章管理员增加文章类别的过程
前置条件	管理员有增加权限
后置条件	添加成功后可以正常显示新类别
基本路径	管理员点击类别管理，选择增加类比,管理员输入新类别的详情，点击增加,系统验证合法,存入DB,返回新类别结果视图
备选路径一	无

表2-8 管理员文章管理表2

用例编号：8	用例名称：删除文章类别
参与者	文章管理员
用例描述	该用例描述了文章管理员删除文章类别的过程
前置条件	管理员有删除权限
后置条件	删除成功后无法在添加文章页选择该类别
基本路径	管理员点击类别管理，选择删除类别，点击删除,选择是否递归删除类下文章，或对该类下文章设置默认类别,更新DB,反馈结果视图，完成删除
备选路径一	无

表2-9 管理员文章管理表3

用例编号：9	用例名称：修改文章类别
参与者	文章管理员
用例描述	该用例描述了文章管理员修改文章类别的过程
前置条件	管理员有修改权限
后置条件	修改成功后该类下文章的类也对应改变
基本流程	管理员点击类别管理，选择对应类别，点击修改按钮。输入更新的信息.系统验证合法.更新DB.反馈结果，返回结果视图
备选路径一	无

表2-10 管理员文章管理表4

用例编号：10	用例名称：查找文章
参与者	文章管理员
用例描述	该用例描述了文章管理员查找文章的过程
前置条件	管理员有管理文章权限
后置条件	无
基本路径	管理员点击文章管理，选择查找文章,管理员可以选择对应类进行查找，也可以在顶栏进行全局模糊搜索,根据所选操作，在DB中索引,返回结果视图
备选路径一	无

表2-11 管理员文章管理表5

用例编号：11	用例名称：增加文章
参与者	文章管理员
用例描述	该用例描述了文章管理员增加文章的过程
前置条件	管理员有增加文章权限
后置条件	在前台页面有新增文章上架
基本路径	管理员点击文章管理，选择增加文章,选择文章对应类，输入文章详情,系统验证文章合法，更新DB,反馈结果，返回文章视图
备选路径一	无

表2-12 管理员文章管理表6

用例编号：12	用例名称：删除文章
参与者	文章管理员
用例描述	该用例描述了文章管理员删除文章的过程
前置条件	管理员有删除文章权限
后置条件	前台页面下架该文章
基本路径	1、管理员点击文章管理，选择删除文章,2、可根据类别手动查找所选文章，也可在顶栏全局查询文章，筛选出目标文章,3、进入文章详情，点击删除,4、确认删除,5、更新DB,6、反馈结果
备选路径一	无

表2-13 管理员文章管理表7

用例编号：13	用例名称：修改文章
参与者	文章管理员
用例描述	该用例描述了文章管理员修改文章的过程
前置条件	管理员有修改文章权限
后置条件	前台页面会自动更新该文章详情
基本路径	管理员在修改页面可根据文章类别手动筛选出目标文章，也可以在顶栏全局搜索筛选出目标文章,进入文章详情页面，点击修改,输入更新信息,系统验证合法,更新DB,反馈结果，返回文章视图
备选路径一	无

（6）用户查看文章用例规约如表2-22，所示，用户浏览文章详情。
表2-22用户浏览文章表3

用例编号：22	用例名称：浏览文章
用例描述	用户浏览文章：浏览全部文章或按文章状态浏览
参与者	用户
前置条件
后置条件	更新文章显示界面，可以点击具体文章进入详情界面
基本路径	（1）用户浏览产生的全部文章；
备选路径一	无

第3章 数据库设计

3.1 逻辑结构设计要点

3.1.1 E-R图

系统E-R图如图3-1所示。

图3-1 系统E-R图
3.1.2 关系模式
（1）用户表（t_user）如表3-1所示。
用户包括属性（用户编号,用户名，密码，邮箱）
表3-1 用户表

字段名称	类型	主键	外键	注释
user_id	int(10)	是		用户表id(自动递增)
username	varchar(20)			用户名
password	varchar(32)			用户密码
type	varchar(20)			用户类别
email	varchar(30)			邮箱

（2）用户角色表表（t_role）如表3-2所示。
表3-2 角色表

字段名称	类型	主键	外键	注释
id	int(10)	是		角色表id(自动递增)
desription	int(20)			角色描述
name	double(20)			角色名称

（3）权限表(t_permission)如表 3-3所示。
表3-3 权限表

字段名称	类型	主键	外键	注释
id	Int(10)	是		id（自动递增）
desription	Varchar(20)			权限描述
name	Double(20)			权限名称
source_url	Int()			连接
parent_id	Int()			父母id

（4）文章类别表（t_type）如图 3-4所示。
文章类别表包含属性（文章类别编号 ，文章类别名，文章数量）
表3-4 文章类别表

字段名称	类型	主键	外键	注释
id	Int(10)	是		id（自动递增）
name	Varchar(20)			名称
blog_count	Int(10)			数量

（5）标签表（t_tag）如表 3-5所示。
表3-5 标签表

字段名称	类型	主键	外键	注释
id	Int(10)	是		id（自动递增）
name	Varchar(20)			名称
blog_count	Int(10)			数量

（6）文章表(t_blog)如表3-6 所示。
表3-6 文章表

字段名称	类型	主键	外键	注释
id	int（10）	是		id(自动递增)
content	varchar（255）			简介
description	varchar（255）			内容
flag	int（10）			文章标签
first_picture	varchar（255）			首图
title	varchar（255）			标题
Views	Int(10)			访客人数
Type_id	Int(10)		是	文章类表
User_id	Int(10)		是	用户id

（7）评论表(t_comment)如表3-7所示。
表3-7 文章表

字段名称	类型	主键	外键	注释
id	int(10)	是		评论表id(自动递增)
Avator	int(20)			作者
Content	Varchar(255)			评论
Email	Varchar(255)			电子邮件
Blog_id	int(10)		是	博客id
Parent_comment_id	int(10)		是	父亲id

3.3 数据结构与程序的关系
数据结构为关系型数据库，所以在程序中可以用标准的SQL语句与数据结构进行交互，交互过程中采用通用的数据反间接口。为了保持良好的程序架构，对数据库访问采用DA0。设计模式实现，提高维护性和扩张性。

第4章 系统设计

（1）前台功能模块结构设计如图4-1所示。

图 4-1 前台功能模块结构设计图
（2）后台管理系统功能模块结构设计如图4-2所示。

图 4-2 后台管理系统功能模块设计图

第5章 功能实现

5.1 登录功能
用户通过登陆界面登陆到主界面如图5-1所示。

图 5-1 登录图
5.2 首页功能
本系统首页如图5-2所示，主要功能有通过查库显示文章信息，并将最新前八名进行显示作为文章推荐。

图 5-2 系统首页图
5.3 搜索功能
搜索功能按照文章名称模糊查询符合要求的文章，方便可以更快选出自己喜欢的文章，如图5-3所示：

图 5-3 系统搜索页面
5.4 文章详情功能
文章详情页面为用户点击文章图片或者文章名称是跳转的页面，主要显示文章详细信息，在此页面可以选择赞赏也可以选择留言，如图5-4所示：

图5-4 文章详情图

第6章 系统测试

6.1 测试方法和工具

方法：黑盒测试，白盒测试
条件覆盖，对程序模块中的每个判断的每个条件执行一遍
工具：eclipse、vscode

6.2 用户模块测试

6.2.1 首页

（1）选中一个文章，查看文章详情。
（3）输入条件，点击查询相应文章。
（4）显示符合条件的文章。
（5）按类别显示文章，点击类别名称，显示相应类别所有文章。

6.2.2 文章详情页面

（1）点击文章，进入详情页面。
（2）显示文章的详细信息。

6.2.3 搜索页面

（1）输入查询信息，跳到搜索界面。
（2）搜索界面显示相应文章。

6.2.4 后台文章管理页面

（1）用户点击文章管理。
（2）点击删除文章，会提示是否删除。