基于java+springboot+vue实现的个人博客系统（文末源码+Lw）200

摘  要

随着国内市场经济这几十年来的蓬勃发展，突然遇到了从国外传入国内的互联网技术，互联网产业从开始的群众不信任，到现在的离不开，中间经历了很多挫折。本次开发的个人博客系统，有管理员，用户，博主三个角色。管理员功能有个人中心，用户管理，博主管理，文章分类管理，博主文章管理，系统公告管理，轮播图管理。博主可以注册登录，修改个人信息，对自己发布的博主文章进行管理操作。用户可以注册登录，查看管理员发布的公告信息和博主发布的文章信息，还可以对博主文章进行收藏评论以及评论操作。开发本程序后台用到了Spring Boot开发技术，页面设计采用VUE框架和layui样式。数据库采用关系数据库市场占有率最高的MySQL作为本程序使用的数据库，完全符合程序使用并且有丰富的拓展余地。程序从需求到设计，从开发到测试，都在功能上和性能上都不断的进行了调试，让开发的程序在使用上用户体验更美好。

关键词：个人博客系统；Spring Boot；MySQL；VUE;Layui

4 系统设计

系统分析接下来的操作步骤就是系统的设计，这部分内容也是不能马虎对待的。因为生活都是在不断产生变化，人们需求也是在不断改变，开发技术也是在不断升级，所以程序也需要考虑在今后可以方便进行功能扩展，完成升级。程序也需要具备大容量以及对其它软硬件的适应能力，而不仅仅是满足现有用户提出来的功能需求，程序在设计期间始终要以发展的理念来进行，要让程序的开发技术上具备先进性的特点，也要让程序开发成本降低，以及让程序后期运行使用时易于维护。

4.1 系统结构设计

本程序在设计结构选择上首选B/S，也是为了满足程序今后升级便利，以及程序低维护成本的要求。本程序的网络拓扑设计也会在下图展示，通过图形的方式来描述更容易理解。

图4.1 系统网络拓扑设计图

4.2系统功能模块设计

程序的功能在系统分析这部分已经确定了，这部分主要还是针对程序功能进行更加详细的设计，设计成果使用结构图展示直观明了，也更容易让人理解。绘制结构图采用的工具是Visio，使用它可以快速绘制出不同角色拥有的功能结构。

图4.2 功能结构图

4.3数据库设计

对程序的功能分析与结构设计之后，也要对程序数据存储的工具进行选择，本程序选用的数据存储仓库是Mysql，选用这个工具就需要根据该数据库的特点进行数据库文件的创建，并设计与之对应的数据表。

4.3.1数据库E-R图

设计一个数据库，不仅包含了数据库实体的设计，也包括了数据库表的结构设计，此部分内容设计的就是确认数据库的实体，并在此基础上对每个实体应该有的属性值进行分析设计，这些确认好的属性值对接下来的数据表的设计也是有很大帮助的，因为它们代表数据表里面的字段值。通常每个程序的数据库里面都具备用户这样的一个数据表。那么在分析用户这个实体的时候，都会设计出它的属性，有最基本的登录程序的账号属性，有用户的姓名属性，有用户的电话或联系地址属性等内容。一旦确认实体具备的属性之后，就可以采用相应的设计软件绘画出实体属性图，或者是实体之间的E-R图。设计E-R模型的软件有很多，这里列举常用的几个，一个是PowerDesigner，一个是Navicat绘制E-R模型，本设计模块用到的还是之前课堂上就了解并接触的Visio工具，这个工具跟办公软件Word，Excel一样都属于Office里面的一部分。使用Visio工具不仅在软件安装上快捷高效，而且它不会占用很多计算机的存储空间。

（1）个人博客系统设计了管理员实体，管理员实体属性图会在下图进行展示，此图的绘制工具是Visio工具。

图4.4 管理员实体属性图

（2）个人博客系统设计了用户实体，用户实体属性图会在下图进行展示，此图的绘制工具是Visio工具。

图4.5 用户实体属性图

（3）个人博客系统设计了文章分类实体，文章分类实体属性图会在下图进行展示，此图的绘制工具是Visio工具。

图4.6 文章分类实体属性图

4.3.2 数据库表结构

在上述内容中，已经设计出相应的E-R模型，就可以在数据库里面根据各个实体创建相应的数据表，不过在初次使用数据库工具的时候，是需要创建一个针对程序的数据库文件，有了此步操作之后，才在刚创建的数据库文件里面创建数据表，创建数据表需要涉及到字段的设计，主键的设计，字段长度与类型的设计等内容，只有设计好的数据表结构才可以按照此规则存放对应的程序数据。这里举个例子，就拿上面提到的用户实体来说吧，用户具备的属性值，比如账号，比如联系方式与电话等都可以设计成该用户数据表里面的字段，然后对这些字段设计其数据类型，长度，并选择该表的主键作为此用户数据表的唯一标志。数据库里面的各个数据表都有它们的主键，这样也是为了方便区分各个数据表。 

1系统公告表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	title	String	标题	是
4	introduction	String	简介	是
5	picture	String	图片	是
6	content	String	内容	是

2博主文章表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	addtime	Date	创建时间	是
3	wenzhangbiaoti	String	文章标题	是
4	wenzhangfenlei	String	文章分类	是
5	tupian	String	图片	是
6	bozhuhao	String	博主号	是
7	bozhuming	String	博主名	是
8	fabushijian	datetime	发布时间	是
9	jianshu	String	简述	是
10	wenzhangneirong	String	文章内容	是
11	thumbsupnum	Integer	赞	是
12	crazilynum	Integer	踩	是
13	clicktime	datetime	最近点击时间	是
14	clicknum	Integer	点击次数	是

。

。

。

。

。

9用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

10token表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	userid	Integer	用户id	是
3	username	String	用户名	是
4	tablename	String	表名	是
5	role	String	角色	是
6	token	String	密码	是
7	addtime	Date	新增时间	是
8	expiratedtime	Date	过期时间	是

5 系统实现

对个人博客系统进行了前面的系统分析，系统设计之后，接下来的环节就是个人博客系统的具体编码实现功能的部分。这部分内容会显示系统各个功能的具体界面运行效果。

5.1 管理员功能实现

5.1.1 用户管理

管理员可以对用户信息进行添加，修改，删除，查询操作。

图5.1 用户管理页面

5.1.2 文章分类管理

管理员可以对文章分类信息进行添加，修改，删除，查询操作。

图5.2 文章分类管理页面

5.1.3 公告信息管理

管理员可以对公告信息进行添加，修改，删除，查询操作。

图5.3 公告信息管理页面

5.1.4 博主信息管理

管理员可以对博主信息信息进行添加，修改，删除，查询操作。

图5.4 博主信息管理页面

5.2 博主功能实现

5.2.1 博主文章管理

博主可以对自己发布过的博主文章信息进行添加，修改，删除，查询操作，还可以查看评论。

图5.5首页页面

5.3 用户功能实现

5.3.1 博主文章信息

用户可以在博主文章里面查看到博主发布的文章信息，可以对博主文章信息进行查看，收藏，赞踩，评论操作。

图5.6 博主文章信息页面

5.3.2 我的收藏

我的收藏里面可以看到自己收藏过的博主文章信息，可以去点击收藏的信息去取消收藏。

图5.7 我的收藏页面

源码领取：

v关功纵浩  文心海资源库 回复 源码 领取