springboot博客系统

基于springboot+vue实现的博客系统（源码+L文+ppt）4-031

4 系统设计

博客系统的整体结构设计主要分为两大部分：管理员和博主。他们的权限不同，于是操作功能也有所不同。整体结构设计如图4-2所示。

图4-2 系统结构图

4.3 数据库设计

该系统基于MySQL数据库来管理信息，一旦系统运行完毕，所有的数据获取都将直接从数据库执行。这规定了无论是数据的新增、修改还是删除，任何引起数据变动的行为都需与数据库进行沟通。因而，数据库承载着系统的所有数据，必须确保在未得到许可的状态下，数据库不能执行诸如删除表结构之类的高风险操作，并且要保障表格字段的精确性。

4.3.1 数据库设计原则

1.从上而下

2.从下至上

3.逐渐扩大

4.结合方法

4.3.2 数据库实体

实体-关系图（E-R图）是一种概念模型表示手法，它利用图形符号来表示现实世界的实体及其相互关系。通过将实例转化为抽象形式，E-R图能够清晰地描绘出数据库的设计蓝图。在需求分析阶段，绘制E-R图有助于直观地揭示各个数据表之间的关联。

博主的详细信息包括博主账号、博主的昵称、性别、手机号码、电子邮件地址以及头像等元素，这些在E-R图中如图4-3所示。

图4-3博主E-R图

每日分享包括标题、标签、日期、心情、博主账号、博主昵称、评论数等属性，E-R图如图4-4所示。

图4-4每日分享E-R图

博客信息包括博客标题、博客类型、博客来源、发表时间、博客图片、博主账号、博主昵称、点击次数、评论数、收藏数等信息，E-R图如图4-5所示。

图4-5博客信息E-R图

博主信息包括博主账号、博主昵称、性别、博客类型、关注人数、作品量、浏览量、电子邮箱、社交媒体链、注册时间、头像、点击次数等属性，E-R图如图4-6所示。

图4-6博主信息E-R图

博客系统总体E-R图如图4-7所示。

图4-7博客系统E-R图

4.3.3 数据库表设计

数据库的核心功能在于保管和管控系统内的全部数据资源。这些数据需在确保独立性与安全性的基础上，实现一定程度的协作使用，允许在特定条件下对部分信息进行共享。关键在于确保数据库内的各个表格存储的信息受到安全保护，非授权用户无法访问或利用。在构建数据库时，设计过程应依据实际需求，实行定制化的数据库开发与规划。接下来将概述主要的数据库表结构。

表4-1：博客信息评论表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		关联表id
userid	bigint		用户id
avatarurl	longtext	4294967295	头像
nickname	varchar	200	用户名
content	longtext	4294967295	评论内容
reply	longtext	4294967295	回复内容

表4-2：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值
url	varchar	500	url

表4-3：博主信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
bozhuzhanghao	varchar	200	博主账号
bozhunicheng	varchar	200	博主昵称
xingbie	varchar	200	性别
bokeleixing	varchar	200	博客类型
guanzhurenshu	int		关注人数
zuopinliang	int		作品量
liulanliang	int		浏览量
youxiang	varchar	200	电子邮箱
shejiaomeitilianjie	varchar	200	社交媒体链接
zhuceshijian	date		注册时间
gerenjianjie	longtext	4294967295	个人简介
touxiang	longtext	4294967295	头像
thumbsupnum	int		赞		0
crazilynum	int		踩		0
clicktime	datetime		最近点击时间
clicknum	int		点击次数		0

表4-4：博主

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
bozhuzhanghao	varchar	200	博主账号
mima	varchar	200	密码
bozhunicheng	varchar	200	博主昵称
xingbie	varchar	200	性别
shouji	varchar	200	手机
youxiang	varchar	200	邮箱
touxiang	longtext	4294967295	头像

表4-5：博客信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
bokebiaoti	varchar	200	博客标题
bokeleixing	varchar	200	博客类型
bokelaiyuan	varchar	200	博客来源
bokeneirong	longtext	4294967295	博客内容
fabiaoshijian	date		发表时间
boketupian	longtext	4294967295	博客图片
bozhuzhanghao	varchar	200	博主账号
bozhunicheng	varchar	200	博主昵称
thumbsupnum	int		赞		0
crazilynum	int		踩		0
clicktime	datetime		最近点击时间
clicknum	int		点击次数		0
discussnum	int		评论数		0
storeupnum	int		收藏数		0

表4-6：博客类型

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
bokeleixing	varchar	200	博客类型

表4-7：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
image	varchar	200	头像
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

表4-8：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表4-9：收藏表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
refid	bigint		商品id
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型		1
inteltype	varchar	200	推荐类型
remark	varchar	200	备注

表4-10：每日分享

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
biaoti	varchar	200	标题
biaoqian	varchar	200	标签
riqi	date		日期
xinqing	varchar	200	心情
zhengwen	longtext	4294967295	正文
tupian	longtext	4294967295	图片
bozhuzhanghao	varchar	200	博主账号
bozhunicheng	varchar	200	博主昵称
thumbsupnum	int		赞		0
crazilynum	int		踩		0
discussnum	int		评论数		0

表4-11：每日分享评论表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		关联表id
userid	bigint		用户id
avatarurl	longtext	4294967295	头像
nickname	varchar	200	用户名
content	longtext	4294967295	评论内容
reply	longtext	4294967295	回复内容

5界面设计与功能实现

5.1 前台博主功能模块的实现

当游客打开系统的网址后，首先看到的就是首页界面。在这里，游客能够看到博客系统的导航条显示系统首页、博主信息、博客信息、每日分享、个人中心。系统首页界面如图5-1所示：

图5-1系统首页界面

在注册流程中，博主在Vue前端填写必要信息（如用户名、密码等）并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息，检查用户名是否唯一，并将新博主数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知博主完成注册。这个过程实现了新博主的数据收集、验证和存储。如图5-2所示：

图5-2博主注册界面图

在登录流程中，博主首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求，通过与MySQL数据库交互验证博主凭证。如果认证成功，后端会返回给前端，允许博主访问系统。这个过程涵盖了从博主输入到系统验证和响应的全过程。如图5-3所示：

图5-3博主登录界面

博主点击博主信息，在博主信息页面的搜索栏输入博主昵称，进行搜索，然后查看博主账号、博主昵称、性别、博客类型、关注人数、作品量、浏览量、电子邮箱、社交媒体链接、注册时间、头像、点击次数，还可以点击关注、点赞等操作；如图5-4所示：

图5-4博主信息页面

博主点击博客信息，在博客信息页面的搜索栏输入博客标题，进行搜索，然后查看博客标题、博客类型、博客来源、发表时间、博客图片、博主账号、博主昵称、点击次数、评论数、收藏数等信息；还可以进行点赞、收藏等操作；如图5-5所示：

图5-5博客信息页面

在个人中心页面可以输入个人详细信息，进行信息更新操作，还可以对博客信息、每日分享、我的收藏、我的关注、浏览历史进行详细操作，如图5-6所示：

图5-6个人中心界面

5.2 后台管理员功能模块的实现

管理员打开博客系统后，首先要填写本人的登录信息，后端会搜索数据库信息，若用户名、密码，全部正确会自动跳转到系统功能主页面，否则需要重新输入登录信息，界面如图5-7所示

图5-7管理员登录界面

管理员登录博客系统可以增加、修改或者删除首页、博主、博主信息、博客信息、博客类型、每日分享、轮播图管理、我的信息等。其界面如图5-8所示。

图5-8 管理员功能界面

在界面展示层（view层），用户可以通过点击“添加”按钮或者填充博主详情表单来触发交互。这些关于博主信息的操作在这一层被记录下来，并转化为指令发送至控制层（controller层）。控制层接收到这些指令后，会调用业务逻辑层(service层)进行处理，例如检查输入数据的正确性以及与数据库的沟通。业务逻辑层完成相关处理后，会与数据访问对象层(DAO层)协作，这个层级专注于具体的数据操作，如查找、新增、修改或删除博主信息，并将这些操作的结果传回给控制层。最后，控制层依据这些结果来更新用户界面的状态，以便博主信息功能可以看到最新的信息或相应的操作反馈。在博主信息页面的输入栏中输入博主账号、博主昵称进行搜索，可以查看到博主详细信息，并根据需要进行修改或者删除等操作；如图5-9所示。

图5-9博主管理界面图

在用户界面的呈现层（view层），用户可以通过互动元素如按下“添加”按钮或填充博主信息表单来触发操作。这些行为在视图层被捕捉，并转化为请求发送至对应的控制层(controller层)。控制器接收到这些请求后，会调用业务逻辑层(service层)进行处理。此层主要负责验证输入信息的正确性以及与数据库的交互。在业务逻辑处理完毕后，它会与数据访问对象层(DAO层)沟通，这个层专门负责博主信息的具体数据库操作，包括查找、新增、修改或删除等。DAO层完成任务后，会将操作结果反馈回控制器，控制器据此更新用户界面的状态，以便博主信息功能可以看到最新的信息或相应的操作反馈。在博主信息页面的输入栏中输入博主昵称、博客类型进行搜索，可以查看到博主详细信息，并根据需要进行修改或者删除等操作；如图5-10所示。