基于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所示。
图5-10博主信息管理界面图
管理员点击博客信息;在博客信息页面通过对博客标题、博客类型、博客来源、发表时间、博客图片、博主账号、博主昵称、点击次数、评论数、收藏数等信息,进行搜索或删除班级等操作;如图5-11所示。
图5-11博客信息界面图
管理员点击博客类型;在博客类型页面通过对博客类型等信息,进行搜索、增加或删除博客类型等操作;如图5-12所示。
图5-12博客类型界面图
管理员点击每日分享;在每日分享页面通过对标题、标签、日期、心情、博主账号、博主昵称、评论数等信息,进行搜索或者删除每日分享等操作;如图5-13所示。
图5-13每日分享界面图