【项目实战】博客系统设计与实现

前端：展示文章，文章分类，评论，用户登录。后端：系统管理：用户管理，菜单管理，角色管理。内容管理：文章管理，分类管理，标签管理数据库：mysql8.0.28项目结构：maven数据库连接池：Druid前端框架：Vue后端框架：SpringBoot，SpringSecurity语言：Javajdk版本：17编写的IDE：IDEA。

但许星辰静月

4862人浏览 · 2023-06-01 18:06:54

但许星辰静月 · 2023-06-01 18:06:54 发布

一、项目概述

项目地址：Blog: 博客项目 (gitee.com)

最新博客做了优化升级，欢迎访问体验：首页 (junlty.top)，项目地址：https://gitee.com/guo-_jun/JavaCove

1.项目需求

前端：展示文章，文章分类，评论，用户登录。
后端：系统管理：用户管理，菜单管理，角色管理。内容管理：文章管理，分类管理，标签管理

2.总述

此项目为Springboot项目，前后端分离，典型的单体架构，主要功能是对文章，分类评论等业务进行管理，同时有权限管理的功能，能够进行权限分配。

3.技术栈选择

前端：Vue、ElementUI
后端：SpringBoot、MybatisPlus、SpringSecurity、EasyExcel、Swagger2、Redis、 OSS

4.环境介绍

数据库：mysql8.0.28
项目结构：maven
数据库连接池：Druid
前端框架：Vue
后端框架：SpringBoot，SpringSecurity
语言：Java
jdk版本：17
编写的IDE：IDEA

5.效果图展示

二、设计思路

一般项目三层架构

由上图可以看到单体项目中大致的组成。
一般的单体应用都会分三层——数据库层，业务层，控制层，而我们这个博客系统也是如此。

2.前后端交互示意图

3.博客系统架构设计图

在看完了单体项目一般是如何架构之后，再来看看我们的系统架构图（由于业务比较少，所以这里可以直接把各个类写到上面）

项目前端分前端页面和后端页面

和上面的差不多，只不过这里利用SpringSecurity实现了token机制来进行权限控制，同时用了点spring的aop来处理日志信息，以及利用自定义异常处理器来处理全局异常信息，返回对应的错误响应。

4.响应格式

对于前后端分离的项目，响应格式必定是前后端交流非常重要的一环。

5.日志记录机制

利用spring的aop机制，我们可以轻松的在controller接口处理请求之前打印请求的相关信息到日志文件中。

6.鉴权服务设计与实现

关于此系统的鉴权服务，也就是我们常说的注册登录，我用的是SpringSecurity实现的一套简单的token机制，示意图如下：

验证机制

认证过滤器设计与实现

SpringSecurity认证授权异常处理设计与实现

认证失败处理器器，实现AccessDeniedHandler

授权失败处理器器，实现AuthenticationEntryPoint

配置异常处理器

三、数据库设计

1.文章表（sg_article）

描述：文章表，存储文章

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是
2	title	VARCHAR(256)	否	否		标题
3	content	LONGTEXT	否	否		文章内容
4	summary	VARCHAR(1024)	否	否		文章摘要
5	category_id	BIGINT(19)	否	否		所属分类id
6	thumbnail	VARCHAR(256)	否	否		缩略图
7	is_top	CHAR(1)	否	否	0	是否置顶（0否，1是）
8	status	CHAR(1)	否	否	1	状态（0已发布，1草稿）
9	view_count	BIGINT(19)	否	否	0	访问量
10	is_comment	CHAR(1)	否	否	1	是否允许评论 1是，0否
11	create_by	BIGINT(19)	否	否
12	create_time	DATETIME	否	否
13	update_by	BIGINT(19)	否	否
14	update_time	DATETIME	否	否
15	del_flag	INT(10)	否	否	0	删除标志（0代表未删除，1代表已删除）

2.文章标签关联表（sg_article_tag）

描述：文章标签关联表

序号	字段名	数据类型	主键	非空	默认值	描述
1	article_id	BIGINT(19)	是	是		文章id
2	tag_id	BIGINT(19)	是	是	0	标签id

3.分类表（sg_category）

描述：文章分类表

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是
2	name	VARCHAR(128)	否	否		分类名
3	pid	BIGINT(19)	否	否	-1	父分类id，如果没有父分类为-1
4	description	VARCHAR(512)	否	否		描述
5	status	CHAR(1)	否	否	0	状态0:正常,1禁用
6	create_by	BIGINT(19)	否	否
7	create_time	DATETIME	否	否
8	update_by	BIGINT(19)	否	否
9	update_time	DATETIME	否	否
10	del_flag	INT(10)	否	否	0	删除标志（0代表未删除，1代表已删除）

4.评论表（sg_comment）

描述：评论表

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是
2	type	CHAR(1)	否	否	0	评论类型（0代表文章评论，1代表友链评论）
3	article_id	BIGINT(19)	否	否		文章id
4	root_id	BIGINT(19)	否	否	-1	根评论id
5	content	VARCHAR(512)	否	否		评论内容
6	to_comment_user_id	BIGINT(19)	否	否	-1	所回复的目标评论的userid
7	to_comment_id	BIGINT(19)	否	否	-1	回复目标评论id
8	create_by	BIGINT(19)	否	否
9	create_time	DATETIME	否	否
10	update_by	BIGINT(19)	否	否
11	update_time	DATETIME	否	否
12	del_flag	INT(10)	否	否	0	删除标志（0代表未删除，1代表已删除）

5.友链（sg_link）

描述：友链

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是
2	name	VARCHAR(256)	否	否
3	logo	VARCHAR(256)	否	否
4	description	VARCHAR(512)	否	否
5	address	VARCHAR(128)	否	否		网站地址
6	status	CHAR(1)	否	否	2	审核状态 (0代表审核通过，1代表审核未通过，2代表未审核)
7	create_by	BIGINT(19)	否	否
8	create_time	DATETIME	否	否
9	update_by	BIGINT(19)	否	否
10	update_time	DATETIME	否	否
11	del_flag	INT(10)	否	否	0	删除标志（0代表未删除，1代表已删除）

6.标签（sg_tag）

描述：文章标签

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是
2	name	VARCHAR(128)	否	否		标签名
3	create_by	BIGINT(19)	否	否
4	create_time	DATETIME	否	否
5	update_by	BIGINT(19)	否	否
6	update_time	DATETIME	否	否
7	del_flag	INT(10)	否	否	0	删除标志（0代表未删除，1代表已删除）
8	remark	VARCHAR(500)	否	否		备注

7.菜单权限表（sys_menu）

描述：菜单权限表

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是		菜单ID
2	menu_name	VARCHAR(50)	否	是		菜单名称
3	parent_id	BIGINT(19)	否	否	0	父菜单ID
4	order_num	INT(10)	否	否	0	显示顺序
5	path	VARCHAR(200)	否	否		路由地址
6	component	VARCHAR(255)	否	否		组件路径
7	is_frame	INT(10)	否	否	1	是否为外链（0是 1否）
8	menu_type	CHAR(1)	否	否		菜单类型（M目录 C菜单 F按钮）
9	visible	CHAR(1)	否	否	0	菜单状态（0显示 1隐藏）
10	status	CHAR(1)	否	否	0	菜单状态（0正常 1停用）
11	perms	VARCHAR(100)	否	否		权限标识
12	icon	VARCHAR(100)	否	否	#	菜单图标
13	create_by	BIGINT(19)	否	否		创建者
14	create_time	DATETIME	否	否		创建时间
15	update_by	BIGINT(19)	否	否		更新者
16	update_time	DATETIME	否	否		更新时间
17	remark	VARCHAR(500)	否	否		备注
18	del_flag	CHAR(1)	否	否	0

8.角色信息表（sys_role）

描述：角色信息表

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是		角色ID
2	role_name	VARCHAR(30)	否	是		角色名称
3	role_key	VARCHAR(100)	否	是		角色权限字符串
4	role_sort	INT(10)	否	是		显示顺序
5	status	CHAR(1)	否	是		角色状态（0正常 1停用）
6	del_flag	CHAR(1)	否	否	0	删除标志（0代表存在 1代表删除）
7	create_by	BIGINT(19)	否	否		创建者
8	create_time	DATETIME	否	否		创建时间
9	update_by	BIGINT(19)	否	否		更新者
10	update_time	DATETIME	否	否		更新时间
11	remark	VARCHAR(500)	否	否		备注

9.角色和菜单关联表（sys_role_menu）

描述：角色和菜单关联表

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	role_id	BIGINT(19)	是	是		角色ID
2	menu_id	BIGINT(19)	是	是		菜单ID

10.用户表（sys_user）

描述：用户表

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	id	BIGINT(19)	是	是		主键
2	user_name	VARCHAR(64)	否	是	NULL	用户名
3	nick_name	VARCHAR(64)	否	是	NULL	昵称
4	password	VARCHAR(64)	否	是	NULL	密码
5	type	CHAR(1)	否	否	0	用户类型：0代表普通用户，1代表管理员
6	status	CHAR(1)	否	否	0	账号状态（0正常 1停用）
7	email	VARCHAR(64)	否	否		邮箱
8	phonenumber	VARCHAR(32)	否	否		手机号
9	sex	CHAR(1)	否	否		用户性别（0男，1女，2未知）
10	avatar	VARCHAR(128)	否	否		头像
11	create_by	BIGINT(19)	否	否		创建人的用户id
12	create_time	DATETIME	否	否		创建时间
13	update_by	BIGINT(19)	否	否		更新人
14	update_time	DATETIME	否	否		更新时间
15	del_flag	INT(10)	否	否	0	删除标志（0代表未删除，1代表已删除）

11.用户和角色关联表（sys_user_role）

描述：用户和角色关联表

表结构：

序号	字段名	数据类型	主键	非空	默认值	描述
1	user_id	BIGINT(19)	是	是		用户ID
2	role_id	BIGINT(19)	是	是		角色ID

四、功能设计与展示

1、前台

首页进行文章的展示

注册功能，注册只是简单的注册，密码会进行MD5加密

登录功能

评论功能

2、后台

写文章

用户管理，这里可以对用户进行增删改查，还可以进行授予一定权限

角色管理，可以对角色进行增删改查，还可以更改角色对应的权限信息

菜单管理，对系统的菜单和一些按钮的增删改查，以及修改路由地址

文章管理，对文章的增删改查

分类管理，对分类的增删改查

友链管理，对友链的增删改查

标签管理，对标签的增删改查

五、心得体会

通过本次项目我学到了很多东西，对规范的项目开发流程有了更加深入的了解，对SpringSecurity安全框架的认证和授权流程有了全新的认识。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^