基于springboot和vue的个人博客系统

基于SpringBoot和Vue3的个人博客系统摘要随着互联网用户对内容分享需求的增长，传统博客系统因架构老旧已经难以满足现代轻量化需求。因此，本文设计并实现了一套基于SpringBoot和Vue3的高性能博客系统。系统采用模块化设计，划分为用户和管理员两大功能模块，包含用户管理、文章发布、评论互动等核心功能，通过分层架构显著降低系统耦合度。实践表明，本文所采用的框架模式运行高效、功能完善，有效支持博文创作与用户互动，并具有良好的可扩展性。本文不仅验证了SpringBoot框架的技术优势，更为个人博客系统的轻量化设计提供了实践参考，具有显著的推广应用价值。关键词博客系统；SpringBoot框架；模块化设计；轻量化AbstractWiththegrowingdemandforcontentsharingamonginternetusers,traditionalbloggingsystems,duetotheiroutdatedarchitecture,havebecomeunabletomeetmodernlightweightrequirements.Therefore,thispaperdesignsandimplementsahigh-performancebloggingsystembasedonSpringBootandVue3.Thesystemadoptsamodulardesign,dividedintotwomainfunctionalmodules:userandadministrator,andincludescorefunctionssuchasusermanagement,articlepublishing,andcommentinteraction.Thelayeredarchitecturesignificantlyreducessystemcoupling.Practicehasshownthattheframeworkpatternusedinthispaperoperatesefficiently,hascomprehensivefunctions,effectivelysupportsblogpostcreationanduserinteraction,andhasgoodscalability.ThispapernotonlyvalidatesthetechnicaladvantagesoftheSpringBootframeworkbutalsoprovidesapracticalreferenceforthelightweightdesignofpersonalbloggingsystems,withsignificantpromotionalapplicationvalue.KeywordsBlogsystem;SpringBoot;Modulardesign;Lightweight目录TOC\o"1-3"\h\u第1章绪论 第二章系统开发技术本博客系统的整体设计，基于B/S架构，而对于选择了B/S架构的系统设计，选择适合的框架技术和设计一套规范、清晰的数据库表设计尤为重要。关乎着系统本身的整体性能，如稳定性，拓展性等。本章阐述所选开发框架及其作用以及数据库系统的流程与库表设计。2.1后台开发技术2.1.1SpringBoot框架SpringBoot作为当下Java企业级开发里颇为主流的轻量级框架，秉持“约定优于配置”的设计理念，极大程度简化了传统Web应用的初始搭建以及开发流程，此框架内部嵌入了Tomcat、Jetty等Servlet容器，开发者可迅速搭建出可独立运行且适用于生产环境的应用程序，有效降低了项目部署的复杂程度[3]。在技术实现方面，SpringBoot借助智能的自动配置机制以及starter依赖管理，将SpringMVC、SpringData、MyBatis等常用开发组件进行无缝集成，并且还提供对Redis、RabbitMQ等主流中间件的开箱即用支持，它所内置的健康检查、性能监控等功能模块，可为系统运维提供一套完整的解决方案。相较于传统的JavaWeb框架而言，SpringBoot有如下一些较为十分突出的优势：(1)极简开发：借助自动化配置来消除数量众多的配置文件，这样一来开发者只需将精力集中在业务逻辑的实现方面；(2)生态完善：可与Spring技术生态实现完美的兼容性，并且可以较为轻松地朝着微服务架构的方向进行扩展；(3)部署高效：支持打包为单一可执行JAR，配合多环境配置实现快速部署；(4)扩展灵活：模块化设计支持按需引入功能组件，满足不同规模项目需求。经本系统实践证明使用SpringBoot进行JavaWeb的开发，可以免去大量的配置文件的需求。相比于传统的Servlet框架的Web项目，提高了至少30%的开发时间[4]。并且SpringBoot框架的业界生态环境良好，配合着框架本身的依赖导入功能，可以十分轻松对于整体进行功能插件的导入和更新，对于本博客系统以后的功能的拓展性有着重要的帮助。综合多方面的考虑，选择SpringBoot框架为基础，集成其他功能框架来进行系统开发。2.1.2MyBatis框架MyBatis作为主流的Java持久层框架，通过XML的注解方式实现对象-关系映射，兼具灵活性和易用性。其核心优势体现在：(1)简化开发：提供直观的API和简洁的配置，显著降低数据库操作复杂度；(2)松耦合设计：分离SQL与Java代码，通过XML注解配置提升可维护性；(3)灵活可控：支持自定义SQL编写，满足复杂业务场景需求；(4)强兼容性：无缝集成Spring等主流框架，丰富的插件生态提升开发效率。MyBatis独特的SQL优化能力与结果集自动映射机制，在保证性能的同时大幅提升代码可读性，成为现代Java应用持久层的优选方案。同时SpringBoot框架有MyBatis专属的依赖，两者相配合能大幅提高的开发速度，以及保证系统结构的完整[5]。综上，MyBatis这套技术框架有着成熟的功能适配性，两者结合进行开发，对于本博客系统的整体后端开发速度、流程、以及分层设计有着相当大的帮助。所以本博客系统选择了这套后端开发架构，有着严谨的逻辑和理论支持。2.2前端开发技术2.2.1Vue技术Vue作为一款渐进式前端框架，以其轻量高效和易用性成为现代Web开发的主流选择。其核心优势包括：(1)响应式数据绑定：基于数据驱动的视图渲染，自动同步DOM与数据状态；(2)组件化开发：通过可复用的组件构建用户界面，提升代码复用性和可维护性；(3)渐进式架构：可灵活应用于项目局部或整体，与其他技术栈协同开发。Vue框架的轻量化和组件化开发的优势，以及丰富且功能完善的第三方组件的支持，两者相互配合，降低了前端网页开发的门槛，并且极大提高了Web项目的前端网页的开发速度[6]。2.2.2ElementUIElementUI是一套基于Vue的桌面端组件库，为开发者提供丰富且高质量的UI组件。其主要特点包括：(1)组件丰富：提供表单、表格、弹窗等常用组件，覆盖大部分业务场景；(2)设计规范：遵循统一的视觉风格和交互逻辑，保证用户体验一致性；(3)配置灵活：支持深度自定义主题和组件样式，满足个性化需求；(4)开发高效：完善的文档和示例代码，显著提升前端开发效率。ElementUI通过模块化的组件设计和友好的API，使开发者能够快速构建专业的企业级后台管理系统，是Vue技术栈中最受欢迎的UI框架之一。2.3数据库系统数据库系统是JavaWeb项目得以运行的基础，没有良好的数据库架构，就不会有一个能够健壮运行的系统。一个好的数据库表的设计对于系统本身的整体功能拓展性，以及后续开发有着重要作用。2.3.1MySQLMySQL身为极为流行的开源关系型数据库，和JavaWeb项目有着天然适配方面的优势，它所有的轻量级特质以及高性能表现，让其成为SpringBoot等JavaWeb框架优先选用的数据存储方案，MySQL运用JDBC标准接口，与Java语言的数据库访问层实现了完美兼容，开发者可借助Hibernate、MyBatis等ORM框架达成高效的数据库操作[7]。在Web应用场景当中，MySQL的事务ACID特性对数据一致性起到了保障作用，其经过优化的InnoDB存储引擎可有效地支撑高并发访问。对于JavaWeb项目里常见的分页查询以及复杂关联等需求，MySQL提供了完善的SQL语法支持以及查询优化器，借助主从复制、分库分表等方案，MySQL可以随着JavaWeb应用规模的扩大而灵活地进行演进。MySQL与Java生态工具的深度整合，SpringBoot框架有着对于MySQL的专属连接池的支持，MyBatis框架动态SQL支持等等，进一步的简化的数据持久层的开发。同时MySQL良好的开发社区，为其提供了多种可视化的工具，为项目后期的运维提供了便利。2.3.2RedisRedis作为一款高性能的内存数据库，在本博客系统里得到了充分整合，被用于热点文章缓存，成功解决了高并发访问情况下的数据库压力问题，本文采用了“读写分离+多级缓存”架构设计[8]。当用户对热点文章发起请求时，系统会先去查询Redis缓存，要是可命中，就直接返回，要是没有命中，就再从MySQL读取，并且凭借Spring自动完成缓存回填。本系统使用Redis中的缓存技术，来达到了快速响应前端请求的效果，并减少了请求对于数据库系统的读写访问次数。假设在有高并发的场景下，本系统可以凭借这套MySQL-Redis的读写访问流程，可以保证网页的快速渲染和响应，并将MySQL数据库的读写压力控制在较低的水平[9]，极大的提高了本系统的健壮性与综合性能。第三章可行性分析与需求分析本章将阐述系统整套技术选型的功能模块的划分，以及进行划分的用户需求依据。在技术选型层面，基于对现代Web应用开发趋势进行选型。在功能模块划分方面，遵循"高内聚、低耦合"的设计原则[10]，将系统划分为用户端和管理端两大核心模块，进行深入需求分析。3.1技术可行性目前业界对于JavaWeb项目开发的技术成熟度与生态支持相当完善。本系统基于快速开发、易于维护、性能良好的原则进行了如下的技术选型。SpringBoot：作为当前主流的JavaWeb开发框架，具备完善的开发工具链，丰富的starter依赖和活跃的社区支持，能够快速构建RESTfulAPI和微服务架构。MyBatis：有灵活性的ORM框架，再加上PageHelper分页插件以及动态SQL支持，可简化持久层开发工作。Vue：渐进式前端框架结合ElementUI等组件库可有效开发响应式管理后台以及用户界面，并且它和SpringBoot天生适配。MySQL：成熟的关系型数据库有支持事务ACID特性的能力，借助MyBatis的动态SQL以及缓存机制，也就是二级缓存加上Redis，可对复杂查询性能给予优化。Redis：内存数据库可为热点数据如文章阅读量、排行榜等提供高速缓存服务，并且支持借助发布/订阅模式来达成实时通知这一功能。综上，所选用的技术方案皆是业界普遍采用的主流方式，各个组件之间的兼容性在诸多项目中得到了验证，生态工具链完备，技术方面的风险相对较低。并且本人有着多次JavaWeb项目开发经验，从最底层数据库到前后端代码开发再到整体的部署运行都有着丰富的实践基础，所以本项目在技术上完全可行。3.2运行可行性考虑到市面常见的博客平台，每日的用户的流量巨大，所以本系统采用了Redis来减轻MySQL的访问压力。Vue框架的响应式的布局方案，可以完全的适配移动端网页的浏览，用户体验并不输于采用C/S架构的系统[11]。当用户打开博客网站时，前端自动发起获取数据的请求，请求到达后端时由SpringBoot框架分发请求到相应控制器方法，再由MyBatis框架获取数据库中的数据，返回给控制器，由控制器将数据进行统一的封装后返回给前端，最后由前端将数据渲染到网页视图。之后用户所有的请求都是会基于这样的一套流程来进行响应。如过发生错误，将有后端统一封装并解析，如数据不存在、访问超时等，都做了相对应的错误返回接口，并记录错误日志。极大的可以保证在突发错误的情况下用户的使用体验，并且也能够帮助系统维护人员对于错误的排查与修复，提高了系统的整体运行时的健壮性。综上所诉，本系统的业务流程设计严谨规范，可拓展性强，运行时稳定性有保障。面对故障情况也有着快速修复的保证。3.3需求分析参考市面上的成熟的博客系统以及业务流程，将系统划分出用户和管理员这两大模块，并基于这两大模块进行功能的再次分析。本文同样划分出用户于管理员并对其需求进行了深入分析。3.3.1用户需求分析基本功能需求：(1)用户注册与登录：支持账号密码注册。(2)个人信息管理：包括个人资料修改、头像设置等功能。(3)博客文章管理：支持文章的创建、编辑、删除及分类管理。互动功能需求：(1)文章收藏：用户可收藏感兴趣的文章。(2)评论功能：支持对文章发表评论及回复他人评论。3.3.2管理员需求分析用户管理需求：(1)用户信息查看：包括根据筛选信息查找用户。(2)用户信息管理：对用户进行信息修改、删除、增加等操作。内容管理需求：(1)全站博文管理功能：对博文进行删除、修改等操作。(2)文章分类管理功能：新增、删除文章分类。(3)公告发布与管理功能：发布、更换系统公告。系统管理需求：(1)热点信息缓存功能：编辑热点信息并发布。第四章系统设计与实现本章详细阐述系统的功能模块划分、数据库表结构设计以及功能的具体实现，并通过流程图直观展示核心业务流程，为系统实现提供完整的设计方案和技术依据。4.1用户模块设计4.1.1用户模块整体设计用户模块从功能上可以划分为账户功能、内容交互、个人中心这三大模块。本文将依次对其分析。用户模块整体设计如图4.1所示。图4.1用户模块图4.1.2登录注册模块设计登录和注册模块是博客平台网站的起始，大部分的功能如发布博客、收藏等等功能都要用户经过登录后才能被用户使用。本系统的登录流程为用户输入用户名和密码后，前端将用户名和密码传给后端，后端在数据库用户表中通过用户名来匹配密码，进行登录校验，并返回登录成功与否。登录流程图如图4.2所示。图4.2登录流程图对于注册功能，加强了用户个人信息的检验，如检验了联系方式的位数，电子邮箱的格式，和用户昵称重复问题。在用户点击注册时，后端依次查询用户名是否重复，如重复则返回已注册的提示信息。再检验联系方式位数和内容是否合规，最后检验密码重复输入是否一致，如一致则向用户表中插入相对应的信息，并返回注册成功。由于登录注册两功能紧密联系，所以共用用户表，上文已经展示。注册流程图如4.3所示。图4.3用户注册流程4.1.3博客发布模块设计博客发布模块作为博客系统的核心功能组件，其设计直接关系到用户创作体验和内容质量。该模块基于用户实际使用场景进行了深度优化，在保证功能完整性的同时兼顾了灵活性与规范性。如下图所示，用户在进行发布时可以自定标题、图片、简介等等。文章标题和文章分类这两个属性考虑到实际情形，选取这两个属性为核心属性。在实际使用没有标题和分类的博客是不存在的，也是不合理的。如果不做空输入校验，也会影响博文的检索功能，这不利于系统的规范性。因此这两项都做了内容输入校验，强制用户输入内容。而其他如简述、图片等非必要属性是可以省略的内容，就无需做输入校验，也避免了发布博客时过于繁琐。用户ID和用户昵称由存储在会话信息中的信息自动填充。这种设计既满足了用户的日常简易发布需求，又能支持的长篇博文创作。同时考虑到长篇博文的需求，在文章内容输入的功能中加入了富文本编辑器的设计，可以自定义字体颜色、标题、插入图片、超链接等。这项功能可以极大提高用户的阅读体验。发布流程图如图4.4所示。图4.4博客发布流程图4.1.3用户交互模块既然有博客发布就肯定会有，博文的点击、阅读、点赞、收藏、评论等等一系列的用户与用户之间的交互需求。所以这些功能是一个成熟的博客平台不可缺失的功能，这直接影响到用户的使用体验。本文将这些功能进行归纳并阐述。对于点赞数、点踩数和点击次数都是由用户点击触发相对应的事件后，由前端发起请求到后端，后端根据传来信息解析出文章标题，在文章表中查询该列数据，并修改相对应的数据。所以这三个属性与文章关联性强，被设计到文章表中。而对于收藏博客和评论博客，这两个功能直接与双方用户和文章之间强关联，所以有必要设计出新的表，来体现其之间的关系。用户ID和文章标题作为表连接的关键元素。具体数据查询定位的流程如图4.5所示。图4.5用户交互关系图4.1.5个人中心模块对于个人中心来说最基本就是修改密码、修改个人信息的功能。流程图4.6如所示。图4.6修改信息流程图而本博客系统从实际需求出发又额外的增加了，历史博文列表、博文修改、博文删除功能。而对于博主来说，有着专门的接口来查看自己博客下收到到的评论，自己发布的博客可以进行回复和删除评论的操作。如图4.7所示。图4.7个人中心流程图4.2管理员模块设计4.2.1管理员模块整体设计对于成熟博客系统设计，完善的后台管理员模块是十分重要的一个模块。该模块直接关系到用户管理、博文管理、系统公告发布等等重要功能的平稳运行。虽然后台管理员系统不直接影响用户对于博客平台的浏览和正常使用，但是如果没有该模块，对于系统整体的平稳运行和长期发展是至关重要的。整体划分图如图4.8所示。图4.8管理模块图4.2.2用户管理模块设计对于管理员这一角色来说，首先最重要的功能便是用户管理，该功能不仅有利于系统的维护，更有利于系统的运行。当管理员进入后台页面时，前端发起请求获取数据库中最新的所有用户的信息，并同步到页面上。管理员便可以对用户信息进行修改、删除、或者手动添加用户等等操作。流程图如图4.9所示。图4.9用户管理流程图4.2.3博文管理模块设计作为博客系统，系统内的最重要内容便是博文，也可以说是博文支撑了整个博客系统。所以博文管理功能对管理员来说是不可少的。当管理员进入到了博文管理界面时，前端会发起请求获取数据库中最新的所有博文信息，并展示在页面上，方便管理员统一进行管理。如删除、修改、新增等。而博文管理又能反向的定位到用户，来对用户进行操作等。这样的设计功能逻辑自洽，流程完善更方便了管理员对于整体信息的管理。如图4.10所示。图4.10博文管理流程图4.2.4系统公告模块设计考虑到管理员有着如发布网站活动、征集相关主题博客等等的面向所有用户发布信息的需求。设计出系统公告模块，管理员可以在公告管理页面进行编辑公告并发布。系统公告同样支持图片、和富文本，来提升用户的阅读体验。当用户登录时，便会获取最新的系统公告。如图4.11所示。图4.11系统公告管理流程图4.2.5轮播图模块设计在博客系统首页，会有轮播图的展示，主要展示如当前热点话题、热点信息等等，以便激发用户的创作交流欲望。所以，管理员不定期的更新首页轮播图对于本博客系统来说是相当有必要的。在后台界面管理员可以进行轮播图的上传，上传后用户便可以在首页进行浏览。如图4.12所示。图4.12首页轮播图管理流程图4.2.6热点缓存模块设计博客系统作为一个有着高并发场景的系统，所以设计出一个缓存模块来进行数据库压力是很有必要的事情。而缓存信息的装填则由管理员来实现。管理员进入到缓存管理界面时，可以在界面中进行装填缓存信息，装填后点击缓存，前端便会带着缓存信息到达后端，有后端将缓存信息写入到Redis数据库中。这样当热点信息接收到高并发的请求时，可能通过Redis来分流数据库的压力[12]。所以，到达MySQL数据库的请求大部分都是并发较低的写入、删除等请求，极大的减少了MySQL连接池的占用[13]。如图4.13所示。图4.13缓存信息管理流程图4.3数据库设计与实现4.3.1数据库E-R图设计数据库时，首先需要考虑到的时实体的属性，以及各个实体之间的关系。一个设计良好的数据库架构，必然是逻辑清晰，结构明了的。明确了实体的属性之后，对于接下来的数据库表设计有这很大的帮助[14]。本系统主要划分出用户、管理、博文这三大主实体，又基于这三大主实体设计出若干实体。并围绕这些实体进行了数据库表的设计。用户实体如图4.14所示。用户实体中的用户ID属性为主键，便于后续通过ID快速定位用户数据。如用户登录和管理员查找用户时都需要用到用户ID。其余的用户属性如年龄、性别等属性，主要用于存储用户注册时填入的个人信息。图4.14用户实体E-R图管理员实体如图4.15所示。其中管理员ID作为主键来标识管理员。密码属性作为管理员登录后台系统的校验属性。图4.15管理员实体E-R图博文实体如图4.16所示。其中，文章ID作为博文实体的主键，用于检索、标记博文。创作者属性用于对应创作者。评论属性用于记录该博文下的用户评论。内容、点击数、分类等属性存储博文基本信息。图4.1博文实体E-R图公告实体如图4.17所示。公告编号属性作为主键，用于检索、标记公告。公告标题、公告内容等属性用于存储公告相关的基本信息。图4.17公告实体E-R图收藏夹实体如图4.18所示。收藏夹编号作为主键，用于标记收藏夹。收藏者属性用于存储用户信息，用于对应收藏者。收藏文章用于存储文章信息。图4.18收藏夹E-R图4.3.2数据库表设计在理清系统结构，明确了实体的基础上，就要着手数据库表的设计。要根据E-R模型设计出每个表中每个字段的名字、类型、长度等等。不仅要一一对应，还要能体现出实体的属性，并能够准确的应用到系统之中[15]。博客系统要始终围绕这博客来进行开发，而博客抽象到最底层，则是数据库库表中的数据。所以数据库表的设计是极为重要的，没有一个良好的数据库底层设计，那么这个系统不能算是成功的。本节将以数据字典的形式进行展示数据库表设计。用户表如表4.1所示。设置单列自增主键ID。其中，用户账户、用户昵称的数据重复问题，在后端进行数据库写入时进行重复查询来进行处理。其中，gender、age等字段用于存储用户个人信息，在注册时进行写入。picture、about字段设置为允许为空，后续用户可以自行决定是否设置头像和简介。addtime字段记录用户创建时间，由数据库自动写入。表4.1用户表名称类型是否为null注释idintnotnull自增主键userIdvacharnotnull用户账户userNamevacharnotnull用户昵称passwordvarcharnotnull用户密码gendervarcharnotnull性别ageintnotnull年龄phonevarcharnotnull联系方式emailvarcharnotnull邮箱picturevarcharnull头像存放路径aboutvarcharnull用户简介addTimetimenotnull创建时间博文表如表4.2所示，设置单列自增主键ID，作为唯一文章标号。存储博文信息，如内容、配图、时间等等。标题重复等数据问题在后端进行处理。pricture和about字段设置为允许为空，由用户自行决定是否为博文设置配图和简介。实际应用中，会存在博文创建成功，但是还未有点击发生的情况，所以clickTime字段设置为允许为空。titile、message等字段用于存储博文的基本信息。表4.2博文表名称类型是否为null注释idintnotnull自增主键文章编号titilevacharnotnull文章标题tagvacharnotnull文章分类pricturevarcharnull文章配图存放路径userIdvarcharnotnull用户IDuserNamevarcharnotnull用户昵称messagevarcharnotnull文章内容aboutvarcharnull文章简介upintnotnull点赞数downintnotnull点踩数clickintnotnull点击数clickTimetimenull最近点击时间addTimetimenotnull创建时间管理员表如表4.3所示。考虑到管理员这一实体的特殊性，不存在自行注册的场景。所以rootId作为主键，password作为通行密码，由管理人员设置填入。表4.3管理员表名称类型是否为null注释rootIdvarcharnotnull主键管理员IDpasswordvarcharnotnull管理员密码addTimetimenotnull创建时间系统公告表如表4.4所示。id字段作为主键，用于唯一标识公告。考虑到系统公告由管理员发布，所以将picture设置为notnull。表4.4系统公告表名称类型是否为null注释idintnotnull自增主键公告IDtitlevarcharnotnull公告标题meaaagevarcharnotnull公告内容picturevarcharnotnull公告配图addTimetimenotnull创建时间收藏表如表4.5所示。id作为主键，用于唯一标识收藏信息。userid字段用户存储收藏者id，title字段用于存储被收藏的文章的标题。Picture存储文章的配图的路径信息，考虑到存在没有配图的博文，所以设置该字段为允许为空。表4.5收藏表名称类型是否为null注释idintnotnull自增主键titilevacharnotnull文章标题userIdvarcharnotnull用户IDpicturevarcharnull配图addTimetimenotnull创建时间博文评论表如表4.6所示。id字段作为主键用于唯一标识评论，用于后续的回复功能定位评论。title字段存放文章标题，用于定位被评论的文章。Commenter和userid分别存储评论用户id和被评论用户id，用于定位查询。表4.6博文评论表名称类型是否为null注释idintnotnull自增主键评论编号titilevacharnotnull文章标题commentervarcharnotnull评论用户IDuserIdvarcharnotnull被评论用户IDcontentvarcharnotnull评论内容addTimetimenotnull创建时间评论回复表如表4.7所示。id字段作为回复主键。comment字段用于存放评论编号，用户后续定位被回复的评论。userId字段用于存放回复人的用户id。表4.7评论回复表名称类型是否为null注释idintnotnull自增主键回复编号commentintnotnull评论IDuserIdvarcharnotnull用户IDcontentvarcharnotnull内容addTimetimenotnull创建时间4.4用户模块实现4.4.1登录注册模块实现登录注册模块是用户正常使用博客系统前的必经程序。本系统在登录时，将用户所输入的信息传递到后端验证账号是否存在、密码是否正确。后端返回是否登录成功给前端页面。具体实现如图4.19所示。图4.19登录实现图注册实现在用户初次注册，会收集用户的个人信息，并在后端进行昵称重复检验和联系方式电话、邮箱等格式是否合规。如图4.20所示。图4.20注册实现图4.4.2博文发布模块实现博文的发布必须要指定标题和分类，这两个必须填入的字段做了特殊标记。支持上传配图，以及富文本编辑器来实现博文内容样式的多样化表达。具体实现如图4.21所示。图4.21注册实现图同时当用户进入博文后，会进行博文配图、简介、点击数等数据和博文内容的展示。如图4.22所示。图4.22博文访问实现图4.4.3用户交互模块实现本博客系统所涉及到的用户之间交互功能，主要有发表评论，查看评论、回复评论等等。当点击进入博文后，便可以在博文底部的评论框进行评论。具体实现如图4.23所示。图4.23评论实现图而用户也可以看到自己发布的博文下的评论详情，可以对其进行回复或删除等操作。如图4.24所示。图4.24评论列表实现图当用户点击回复，会跳转到回复页面，用户输入回复内容时点击提交即可回复。如图4.25所示。图4.25评论回复实现图4.4.4个人中心模块实现对于个人中心来说最不可缺少的功能就是，密码修改和信息修改。本系统在用户修改密码时进行旧密码的校验，来确保系统的账号的安全性。如图4.26所示。图4.26修改密码实现图修改个人信息时是对注册时输入的信息进行修改。这里也同样会进行联系方式和邮箱格式的校验。具体实现如图4.27所示。图4.27修改个人信息实现图用户还可以在个人中心中查看自己发布过的历史博文，并进行修改、删除等等操作。如图4.28所示。图4.28博文历史实现图4.5管理员模块实现4.5.1用户管理模块实现在管理员登录之后，点击用户管理来获取全部的用户信息，可以对其进行删除，修改信息等操作。具体实现如图4.29所示。图4.29用户管理实现图4.5.2文章管理模块实现管理员可以对系统内全部博文进行管理，如删除、修改等等操作。如图4.30所示。图4.30文章管理实现图同时可以修改、增加或删除文章分类。如图4.31所示。图4.31分类管理实现图4.5.3系统公告模块实现与发布博文类似，管理员发布公告必须指定标题和配图，考虑到系统公告同样有多样性表达的需求，文本内容同样支持富文本编辑。如图4.32所示。图4.32系统公告实现图4.5.4轮播图模块实现考虑到首页的轮播始终且固定为三张，所以不做增加的功能只进行修改。具体实现如图4.33所示。图4.33轮播图更换实现图第五章总结与展望本文基于SpringBoot集成MyBatis和Vue技术栈，设计并实现了一个轻量化、高性能的基于B/S架构的个人博客系统。通过对传统的Servlet框架的博客系统进行多方面的分析，如架构臃肿、部署复杂等问题，提出了模块化设计和分层架构的解决方案，并以此进行了开发技术的选选型和功能设计，拥有这样良好的设计模式的帮助，来对本博客系统进行模块化的开发，有效的降低了系统耦合度，提升了可维护性与