基于JAVA+SpringBoot+Vue的个人博客系统

研究背景

在这个推荐个性化的时代，采用新技术开发一个博客系统来分享和展示内容是一个永恒不变的需求。本次设计的个人博客系统有管理员，用户，博主三个角色。管理员功能有个人中心，用户管理，博主管理，文章分类管理，博主文章管理，系统公告管理，轮播图管理。博主可以注册登录，修改个人信息，对自己发布的博主文章进行管理操作。用户可以注册登录，查看管理员发布的公告信息和博主发布的文章信息，还可以对博主文章进行收藏评论以及评论操作。

研究意义

通过网络进行文章的转移展示，可以让用户和博主都能感受到互联网的魅力，让用户解除了地理的远近的限制和降低欣赏时间的成本。本次开发的个人博客系统具有下面的意义：

第一，现实中租赁场地欣赏文章与互联网办公设备的费用比较起来可谓是天上地下，能有效的节约成本。

第二，用户和博主都可以通过网络查看，避免了线下来回路费的实际成本。

综上所述，网络展示可以让展示变得更加灵活，是对传统展示模式的突破与变革，对于众多用户以及博主都有很强烈的吸引力和亲和力，在互联网时代真正实现了多环节的多赢。

系统流程分析

每个程序开发出来，不管是登录，添加信息等操作都是遵循一定的操作流程的，每个流程都有相应的判断，所以在分析系统的时候，也有必要对系统的流程进行分析。

系统开发流程

程序开发首先需要分析所开发程序的功能，这个步骤也是程序的需求分析阶段，这个阶段的任务很重要，因为程序功能确定之后，后面的设计，编码等环节都跟系统的分析阶段所完成的内容挂钩。程序在开发时大致都遵循以下流程。

图3.1系统开发流程图

系统注册流程

程序提供注册的功能（注册对应流程在下图展示）。就是让非系统操作用户变成程序的操作用户，主要让用户在注册页面上，根据页面提示，规范填写个人信息，程序也会根据用户填写的内容进行逻辑判断，确定用户身份是合格的身份之后，用户填写的数据才可以被数据库写入用户数据表里面。

图3.2 注册流程图

系统登录流程

程序投入生活让使用者使用，都需要经过登录模块这个入门环节，这个功能也就像现实生活一样，需要使用正确的钥匙打开门，才能进入。而登录模块需要的钥匙就是账号，密码，这两项数据正确就能访问程序的功能区。登录流程也会在下图展示，里面也有相应的判断规则。

图3.3 登录流程图

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

系统结构设计

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

图4.1 系统网络拓扑设计图

系统功能模块设计

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

图4.2 功能结构图

数据库设计

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

数据库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 文章分类实体属性图

数据库表结构

在上述内容中，已经设计出相应的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

点击次数

是

3博主文章评论表

序号

列名

数据类型

说明

允许空

1

Id

Int

id

否

2

addtime

Date

创建时间

是

3

refid

Integer

关联表id

是

4

userid

Integer

用户id

是

5

nickname

String

用户名

是

6

content

String

评论内容

是

7

reply

String

回复内容

是

4博主表

序号

列名

数据类型

说明

允许空

1

Id

Int

id

否

2

addtime

Date

创建时间

是

3

bozhuhao

String

博主号

是

4

bozhuming

String

博主名

是

5

mima

String

密码

是

6

xingbie

String

性别

是

7

nianling

Integer

年龄

是

8

lianxidianhua

String

联系电话

是

9

dianziyouxiang

String

电子邮箱

是

10

touxiang

String

头像

是

11

jianjie

String

简介

是

5用户表

序号

列名

数据类型

说明

允许空

1

Id

Int

id

否

2

addtime

Date

创建时间

是

3

yonghuming

String

用户名

是

4

xingming

String

姓名

是

5

mima

String

密码

是

6

xingbie

String

性别

是

7

nianling

Integer

年龄

是

8

shoujihao

String

手机号

是

6文章分类表

序号

列名

数据类型

说明

允许空

1

Id

Int

id

否

2

addtime

Date

创建时间

是

3

wenzhangfenlei

String

文章分类

是

7收藏表

序号

列名

数据类型

说明

允许空

1

Id

Int

id

否

2

addtime

Date

创建时间

是

3

userid

Integer

用户id

是

4

refid

Integer

收藏id

是

5

tablename

String

表名

是

6

name

String

收藏名称

是

7

picture

String

收藏图片

是

8

type

String

类型(1:收藏,21:赞,22:踩)

是

9

inteltype

String

推荐类型

是

8配置文件表

序号

列名

数据类型

说明

允许空

1

Id

Int

id

否

2

name

String

配置参数名称

是

3

value

String

配置参数值

是

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.1 用户管理页面

文章分类管理

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

图5.2 文章分类管理页面

公告信息管理

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

图5.3 公告信息管理页面

博主信息管理

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

图5.4 博主信息管理页面

博主功能实现

博主文章管理

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

图5.5首页页面

用户功能实现

博主文章信息

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

图5.6 博主文章信息页面

我的收藏

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

图5.7 我的收藏页面