基于Vue.js和SpringBoot的个人博客系统，分为用户前台和管理后台，可以给管理员、博主和普通用户角色使用，包括文章分类模块、博主文章模块、博主管理模块、用户管理模块

关注

原创最新推荐文章于 2026-04-06 02:52:54 发布 955 阅读 AI 写同款· GEO 优化 ›

基于Vue.js和SpringBoot的班级回忆录系统，包括用户前台和管理后台，可以给管理员、普通用户角色使用，包括班级信息、新闻信息、班级相册、活动信息、捐赠信息、论坛管理模块 本班级回忆录管理员功能有个人中心，用户信息管理，班委信息管理，班级信息管理，加入班级管理，新闻信息管理，班级相册管理，活动信息管理，捐赠信息管理，论坛信息管理，系统信息管理。用户可以注册登录，加入班级，查看各种信息，还可以发布论坛，进行捐赠等。因而具有一定的实用性。阅读详情

基于Vue.js和SpringBoot的个人博客系统，分为用户前台和管理后台，可以给管理员、博主和普通用户角色使用，包括文章分类模块、博主文章模块、博主管理模块、用户管理模块
百度云盘链接：https://pan.baidu.com/s/1cTpknqWFdzgV-ukt4eDzgA 密码：v4l3

更多课程设计项目资源（源码+完整文档+开题报告+部署教程）和开发需求请看主页昵称。

更多课程设计项目资源（源码+完整文档+开题报告+部署教程）和开发需求请看主页昵称。

更多课程设计项目资源（源码+完整文档+开题报告+部署教程）和开发需求请看主页昵称。

基于spring boot的个人博客系统的设计与实现

摘要

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

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

Abstract

With the vigorous development of the domestic market economy in the past few decades, it has suddenly encountered the Internet technology introduced into China from abroad. The Internet industry has experienced a lot of setbacks from the initial distrust of the masses to the current one. The personal blog system developed this time has three roles: administrator, user, and blogger. The administrator functions include personal center, user management, blogger management, article classification management, blogger article management, system announcement management, and carousel map management. Bloggers can register and log in, modify personal information, and manage blogger articles published by themselves. Users can register and log in, view the announcement information published by the administrator and the article information published by the blogger, and can also collect comments and comment on the blogger's articles. The Spring Boot development technology is used in the background of the development of this program, and the page design adopts the VUE framework and layui style. The database adopts MySQL, which has the highest market share of relational database, as the database used by this program, which fully conforms to the program and has abundant room for expansion. From requirements to design, from development to testing, the program has been continuously debugged in terms of function and performance, so that the developed program has a better user experience in use.

Key Words：WeChat Xiaocheng Arena reservation system; Spring Boot; MySQL; uni-app

1 绪论

1.1 研究背景

1.2 研究意义

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

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

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

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

1.3 研究内容

本文主要对已开发程序进行文档说明，文章从绪论，开发技术，系统分析与设计，系统实现与测试等环节进行程序描述。

绪论：绪论部分主要从课题的背景，课题的意义等角度进行阐述。

开发技术：开发技术部分主要还是介绍开发的平台，使用的技术与开发的语言等内容。

系统分析：系统分析部分主要还是分析系统的运行流程与系统需要具备的功能等进行分析。

系统设计：系统设计主要还是基于系统分析，从系统分析得出的功能进行详细设计和数据库设计。

系统实现：系统实现主要运用开发知识对系统设计的功能进行实现。

系统测试：系统测试主要检测完成开发程序整体运行是否报错，程序运行使用是否可靠。

2 开发技术

2.1 VUE框架

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.2 Mysql数据库

关于程序的数据结构设计，数据的字段设计，为了更好的、更规范的使用数据库，在数据库里进行了字段的设计挑选。关系型数据库可挑选范围不广，基本上也就是甲骨文公司的Oracle和mysql，微软的SQL SERVER和ACCESS，IBM的DB2数据库，常用的也就5个，根据课题需求，创建的程序进行选择数据库的时候，最重要的一条就是符合课题设计的需要，在五个数据库里可以说都符合，但是从课题的需求具体分析，Oracle明显不合适，维护难，又比较臃肿，课题程序只用到了里面很少一部分，SQL SERVER数据库安装维护方面动不动就需要重装系统，因为操作系统的限制，也不采用SQL SERVER，ACCESS数据库比较简单小巧，但是安全性方面还有语言支持方面比较片面，也不予考虑，DBM数据库接触较少也不考虑，只有MYSQL数据库，社区版完全的不用掏钱，并且是开源，值得信赖，从关系型数据库里挑选到MySQL，是因为完全符合课题需要，而且小巧，基本不占用硬盘的空间，处理性能也可以，这就是选择MySQL数据库作为课题程序所需要的数据库的理由。

2.3 Spring Boot框架

Spring Boot 是由 Pivotal 团队提供的全新框架，其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。用我的话来理解，就是 Spring Boot 其实不是什么新的框架，它默认配置了很多框架的使用方式，就像 Maven 整合了所有的 Jar 包，Spring Boot 整合了所有的框架。

2.4 layui介绍

layui 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

3 系统分析

通过阅读查看之前收集的各种文献资料，了解了程序开发遵循的大体流程。其中系统分析也就是其流程当中的一部分，系统分析也是对所选课题，通过对使用者的调查分析，对同类型课题进行比较分析过程中得出本课题需要具备的功能，此部分也是对所选课题的功能等进行需求分析。

3.1可行性研究

开发任何程序都需要提前进行分析，也包括了程序的开发与使用是否可行的分析，通常在可行性分析部分，需要涉及到的内容有经济是否可行，有对开发者开发技术上是否可行的分析，有对使用者运行操作程序是否可行的分析等。

（1）技术可行性

此课题主要用于检验本人的专业知识，检验本人将理论运用于实践的能力。由于本人作为大学生，在大学校园学习了程序开发方面的专业知识，也多次根据学院老师布置的期末作业进行过程序小功能模块的制作与开发，也参与过本专业的课程设计作业，因此本人具备一定高度的开发经验，并在开发技术上，比如Spring Boot这种课堂上学习并实践过的网页技术等有了一定的技术基础，在操作软件的使用上，比如数据库Mysql的操作等都有一定的熟练度。所以，只要配置好开发的相关环境，程序开发就会很快上手。

（2）经济可行性

此次课题主要用于毕业答辩，并不是作为商业程序投入社会使用。运用的开发软件通过各大网页浏览器就可以下载在笔记本电脑上，环境安装教程也在各大网页浏览器上查看，在开发期间，包括代码的编写也可以通过网页浏览器下载相应功能模块的代码，然后对下载的功能模块代码进行相应的编辑，就可以写入程序中。可以说整个过程并没有涉及到资金的投入，在程序开发硬件设备上，仅需一台电脑，鼠标，键盘等设备，这些硬件设备也无需额外掏钱欣赏，因为校园文章馆有专门的计算机机房供学生使用，另外，由于本专业的原因，本人早期已购置一台笔记本，所以硬件设备都已具备。因此此程序在经济投入上是零支出，具备可行性。

（3）运行可行性

此次课题在界面设计上讲究简单化，美观的设计原则，在对各个功能的流程设计上也是比较通俗易懂的，所以程序一旦投入使用，对使用者的计算机操作水平没有过多要求，加上现如今计算机在各个行业都有运用，以及人们学历的普遍提升，大部分人在操作具备可视化操作界面的程序时，很快就可以上手，就算有少数人不懂怎么操作，经人简单指点培训也可以操作程序。因此，程序投入使用，在运行上具备可行性。

程序可行性分析，分析了开发者的技术可行，分析了使用者的运行使用可行，分析了程序开发的经济可行。总之，开发与使用该程序完全可行。

3.2系统性能分析

程序一旦开发完成，就会投入生活中使用，使用者大多都是使用程序的功能区解决问题，之所以去分析程序需要具备的性能特征，主要还是确保程序运行中，在质量上是可靠的，在数据安全上是值得放心的，以及程序是一个健壮性的程序，程序在今后的社会变化中，也能通过编辑修改进行升级，以满足使用者不断变化的需求等等，这些特点都是程序的性能需要具备的特点。之所以要进行性能分析，也主要是考虑程序投入使用中，要尽可能降低程序的维护成本，要始终保持程序可以可靠运行，并长时间帮助使用者处理各种数据。在程序的功能符合使用者的要求的前提下，只有稳定可靠的程序，才能得到使用者的青睐。

3.3 系统流程分析

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

3.3.1 系统开发流程

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

图3.1系统开发流程图

3.3.2 系统注册流程

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

图3.2 注册流程图

3.3.3 系统登录流程

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

图3.3 登录流程图

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	点击次数	是

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 系统实现

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

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 我的收藏页面

6系统测试

测试的目的就是验证程序的可靠性，通过对程序的功能，性能等进行测试，来确定程序是否可以交付使用。测试时，不仅涉及到功能是否全部已实现，也涉及到各个功能运行时是否稳定不出错。程序的内部操作逻辑是否也不出现故障等问题，都需要在测试时一一检验并排除各个问题，让程序交付使用者时，可以稳定执行各个操作功能。

6.1 测试的基本概念

测试环节，常用方法就是黑盒和白盒测试方法。为了更好的理解这两种方法，以下将对其概念进行介绍。

（1）黑盒测试方法

此方法经常用于程序验收环节，也用于软件的确认测试环境，此方法开展的前提是明确了程序的功能，通过程序接口输入数据信息，在经过程序对数据进行处理之后，会输出数据，通过对输入输出数据的比对来验证程序功能是否达标，此方法看重程序的功能，对程序功能操作的逻辑比较忽视。

（2）白盒测试方法

此方法恰恰与黑盒测试相反，它比较注重功能操作的逻辑问题，而忽视程序的功能。使用此方法就是验证程序的内部结构是否符合规格说明书的规定，从程序的工作原理上入手进行相应测试。

6.2 测试的任务和目的

6.2.1测试的任务

程序测试第一个任务就是找出问题，不管大小问题都应进行记载；第二个任务就是对记载的程序问题，进行逐个分析，并通过现有技术手段，以及网路渠道寻求解决办法，解决程序的各个问题，让程序不断进行完善，保持运行使用时不出错误。

6.2.2测试的目的

程序测试也是为了找出问题所在，除了分析出现的问题，解决这些问题之外，也需要开发者进行反思，反思是什么原因导致的问题，反思自己开发中的一些误操作，以及反思是否是自己缺乏相应的开发经验等问题，并针对这些问题，制定出相应的应对策略，让开发者在下一次开发程序期间，可以减少出错的几率，从而可以高效完成程序的开发制作。

6.3 测试结果分析

在对程序的功能，性能，逻辑等进行一系列测试之后，确定程序可以交付给使用者进行使用，程序不仅实现了用户要求的各个功能，另外程序也设置了安全屏障保证数据安全，比如登录功能的设置，数据库的加密等措施。程序在开发时，程序代码都是模块化并设置了各个接口，为程序今后的升级与维护作出了充分的考虑。通过白盒测试方法验证个人博客系统的逻辑操作并无出错，个人博客系统的性能比如可扩展性，稳定性等都有充分的保证，所以个人博客系统可以交付使用。

结论

虽然自己已经接触并大致学习过网页技术，但是对于该项技术目前来说还并未完全掌握，因此在进行程序开发时，遇到的困难不计其数，在初步进行程序开发时，对于程序的功能只是凭空想象，也并未有一个详细的开发计划，虽然在开发个人博客系统期间，也抽出时间通过网络查看多个与此系统类似的程序，也对项目程序的开发流程有个大致印象，了解到程序的开发不只是通过代码实现功能，而是开发之前一定要捋清楚程序的功能，也就是需要进行需求分析这样一个过程，而且这个步骤还非常重要，不能缺失，因为此步骤主要就是明确用户的需求来设计程序功能，这样才能保证开发的程序是用户需要的软件。

在程序的功能已经确定之后，也需要明确程序的操作流程，也需要把程序看成一个整体，然后将其功能分成多个小模块进行编程开发，这样的设计思路才是正确可行的，虽然程序的每个小功能模块都需要花费大量时间进行实现，好在现在互联网技术发达，可以通过网络搜索开发期间遇到的问题，查看前人对这些问题的总结，再加上自己锲而不舍的进行编码调试，最终可以实现一个个程序小功能。程序开发一方面是解决遇到的各种问题，另一方面随着开发的结束，自己的能力也得到了迅速提升。得出的经验就是设计程序功能之前，先要深刻了解需要设计的程序，也要认真去分析用户对程序功能的需求，并列出程序大致功能，这样可以保证自己在进入功能详细设计时不慌乱，可以保持有条不紊的进行。通过程序的编制，让我明白知识的学习与掌握真的非常重要，关键时刻能够用得上，还有一个就是要始终保持认真，细心的做事风格，这会让自己可以把事情做得又快又好。

在这个竞争相当激烈的社会，尤其是计算机的发展非常迅猛，对自己提出的要求就是要更加努力的学习知识，要真正融入当今社会，即使毕业之后步入社会进行工作，也要加强学习，才能让自己具备价值。

收录于