1. Project Overview
1. Project requirements
Front-end: display articles, article classification, comments, user login.
Backend: System management: user management, menu management, role management. Content management: article management, category management, tag management
2.Overview
This project is a Springboot project, with front-end and back-end separation, and a typical monolithic architecture. Its main function is to manage articles, classified comments and other businesses. It also has permission management functions and can allocate permissions.
3. Technology stack selection
Front-end: Vue, ElementUI
Back-end: SpringBoot , MybatisPlus , SpringSecurity , EasyExcel , Swagger2 , Redis , OSS
4.Environment introduction
Database: mysql8.0.28
Project structure: maven
database Connection pool: Druid
Front-end framework: Vue
Back-end framework: SpringBoot, SpringSecurity
Language: Java
jdk version: 17
IDE written by: IDEA
5. Effect picture display
2. Design ideas
General project three-tier architecture
From the picture above you can see the rough composition of a single project.
Generally, single applications are divided into three layers - database layer, business layer, and control layer, and the same is true for our blog system.
2. Schematic diagram of front-end and back-end interaction
3. Blog system architecture design diagram
After looking at how a single project is generally structured, let’s take a look at our system architecture diagram (since the business is relatively small, we can write each class directly on it)
The front-end of the project is divided into front-end page and back-end page
It is similar to the above, except that SpringSecurity is used here to implement the token mechanism for permission control , and spring's aop is used to process log information , and a custom exception handler is used to process global exception information and return the corresponding error response.
4.Response format
For projects with separate front-end and back-end, response format must be a very important part of front-end and back-end communication.
5. Logging mechanism
Using spring's AOP mechanism, we can easily print request-related information to the log file before the controller interface processes the request.
6. Authentication service design and implementation
Regarding the authentication service of this system, which is what we often call registration and login, I use a simple token mechanism implemented by SpringSecurity. The schematic diagram is as follows:
Verification mechanism
Authentication filter design and implementation
Design and implementation of SpringSecurity authentication and authorization exception handling
Authentication failure handler, implements AccessDeniedHandler
Authorization failure handler, implements AuthenticationEntryPoint
Configure exception handler
3. Database design
1. Article table (sg_article)
Description: Article table, stores articles
Table Structure:
| serial number |
Field name |
type of data |
primary key |
non empty |
default value |
describe |
| 1 |
id |
BIGINT(19) |
yes |
yes |
||
| 2 |
title |
VARCHAR(256) |
no |
no |
title |
|
| 3 |
content |
LONGTEXT |
no |
no |
Article content |
|
| 4 |
summary |
VARCHAR(1024) |
no |
no |
Article Summary |
|
| 5 |
category_id |
BIGINT(19) |
no |
no |
Category id |
|
| 6 |
thumbnail |
VARCHAR(256) |
no |
no |
thumbnail |
|
| 7 |
is_top |
CHAR(1) |
no |
no |
0 |
Whether to pin it to the top (0 no, 1 yes) |
| 8 |
status |
CHAR(1) |
no |
no |
1 |
Status (0 Published, 1 Draft) |
| 9 |
view_count |
BIGINT(19) |
no |
no |
0 |
Views |
| 10 |
is_comment |
CHAR(1) |
no |
no |
1 |
Whether comments are allowed 1 yes, 0 no |
| 11 |
create_by |
BIGINT(19) |
no |
no |
||
| 12 |
create_time |
DATETIME |
no |
no |
||
| 13 |
update_by |
BIGINT(19) |
no |
no |
||
| 14 |
update_time |
DATETIME |
no |
no |
||
| 15 |
del_flag |
INT(10) |
no |
no |
0 |
Deletion flag (0 means not deleted, 1 means deleted) |
2. Article tag association table (sg_article_tag)
Description: Article tag association table
| serial number |
Field name |
type of data |
primary key |
non empty |
default value |
describe |
| 1 |
article_id |
BIGINT(19) |
yes |
yes |
Article id |
|
| 2 |
tag_id |
BIGINT(19) |
yes |
yes |
0 |
tag id |
3. Category table (sg_category)
Description: Article classification table
Table Structure:
| serial number |
Field name |
type of data |
primary key |
non empty |
default value |
describe |
| 1 |
id |
BIGINT(19) |
yes |
yes |
||
| 2 |
name |
VARCHAR(128) |
no |
no |
Category name |
|
| 3 |
pid |
BIGINT(19) |
no |
no |
-1 |
Parent category id, if there is no parent category, it is -1 |
| 4 |
description |
VARCHAR(512) |
no |
no |
describe |
|
| 5 |
status |
CHAR(1) |
no |
no |
0 |
Status 0: normal, 1 disabled |
| 6 |
create_by |
BIGINT(19) |
no |
no |
||
| 7 |
create_time |
DATETIME |
no |
no |
||
| 8 |
update_by |
BIGINT(19) |
no |
no |
||
| 9 |
update_time |
DATETIME |
no |
no |
||
| 10 |
del_flag |
INT(10) |
no |
no |
0 |
Deletion flag (0 means not deleted, 1 means deleted) |
4. Comment form (sg_comment)
Description: Comment form
Table Structure:
| serial number |
Field name |
type of data |
primary key |
non empty |
default value |
describe |
| 1 |
id |
BIGINT(19) |
yes |
yes |
||
| 2 |
type |
CHAR(1) |
no |
no |
0 |
Comment type (0 represents article comments, 1 represents friend link comments) |
| 3 |
article_id |
BIGINT(19) |
no |
no |
Article id |
|
| 4 |
root_id |
BIGINT(19) |
no |
no |
-1 |
root comment id |
| 5 |
content |
VARCHAR(512) |
no |
no |
comments |
|
| 6 |
to_comment_user_id |
BIGINT(19) |
no |
no |
-1 |
The userid of the target comment being replied to |
| 7 |
to_comment_id |
BIGINT(19) |
no |
no |
-1 |
Reply target comment id |
| 8 |
create_by |
BIGINT(19) |
no |
no |
||
| 9 |
create_time |
DATETIME |
no |
no |
||
| 10 |
update_by |
BIGINT(19) |
no |
no |
||
| 11 |
update_time |
DATETIME |
no |
no |
||
| 12 |
del_flag |
INT(10) |
no |
no |
0 |
Deletion flag (0 means not deleted, 1 means deleted) |
5. Friendly link (sg_link)
Description: Friendly link
Table Structure:
| serial number |
Field name |
type of data |
primary key |
non empty |
default value |
describe |
| 1 |
id |
BIGINT(19) |
yes |
yes |
||
| 2 |
name |
VARCHAR(256) |
no |
no |
||
| 3 |
logo |
VARCHAR(256) |
no |
no |
||
| 4 |
description |
VARCHAR(512) |
no |
no |
||
| 5 |
address |
VARCHAR(128) |
no |
no |
website address |
|
| 6 |
status |
CHAR(1) |
no |
no |
2 |
Review status (0 represents the review passed, 1 represents the review failed, 2 represents not reviewed) |
| 7 |
create_by |
BIGINT(19) |
no |
no |
||
| 8 |
create_time |
DATETIME |
no |
no |
||
| 9 |
update_by |
BIGINT(19) |
no |
no |
||
| 10 |
update_time |
DATETIME |
no |
no |
||
| 11 |
del_flag |
INT(10) |
no |
no |
0 |
Deletion flag (0 means not deleted, 1 means deleted) |
6. Tag (sg_tag)
Description: Article tags
Table Structure:
| serial number |
Field name |
type of data |
primary key |
non empty |
default value |
describe |
| 1 |
id |
BIGINT(19) |
yes |
yes |
||
| 2 |
name |
VARCHAR(128) |
no |
no |
tag name |
|
| 3 |
create_by |
BIGINT(19) |
no |
no |
||
| 4 |
create_time |
DATETIME |
no |
no |
||
| 5 |
update_by |
BIGINT(19) |
no |
no |
||
| 6 |
update_time |
DATETIME |
no |
no |
||
| 7 |
del_flag |
INT(10) |
no |
no |
0 |
Deletion flag (0 means not deleted, 1 means deleted) |
| 8 |
remark |
VARCHAR(500) |
no |
no |
Remark |
7. Menu permission table (sys_menu)
Description: Menu permission table
Table Structure:
| serial number |
Field name |
type of data |
primary key |
non empty |
default value |
describe |
| 1 |
id |
BIGINT(19) |
yes |
yes |
Menu ID |
|
| 2 |
menu_name |
VARCHAR(50) |
no |
yes |
Menu name |
|
| 3 |
parent_id |
BIGINT(19) |
no |
no |
0 |
Parent menu ID |
| 4 |
order_num |
INT(10) |
no |
no |
0 |
display order |
| 5 |
path |
VARCHAR(200) |
no |
no |
routing address |
|
| 6 |
component |
VARCHAR(255) |
no |
no |
component path |
|
| 7 |
is_frame |
INT(10) |
no |
no |
1 |
Whether it is an external link (0 yes, 1 no) |
| 8 |
menu_type |
CHAR(1) |
no |
no |
菜单类型（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 |
|
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安全框架的认证和授权流程有了全新的认识。