基于SpringBoot+Vue的个人生活日志管理系统

摘要在如今数字化时代，个人数据管理开始越来越重要，特别是对于那些希望记录、回顾和分析自己的日常生活的人来说。本课题旨在设计并实现一个集成了论坛功能和个人空间的个人日志管理系统，该系统不仅可以有效地帮助用户记录日常生活、情感状态和个人反思，还提供了一个社区平台可以让用户进行分享心得、交流经验，并且通过互动也可以有效地增强用户的参与感。本系统采用前后端分离的架构设计，后端基于SpringBoot框架进行开发，SpringBoot内嵌Tomcat、Jetty等Web容器，支持自动装配机制，开发者无需手动配置大量的XML文件，从而提升了开发效率和系统的可维护性。同时，系统结合SpringMVC来处理HTTP请求的映射与调度，实现清晰的控制器逻辑，便于管理RESTfulAPI接口。在数据持久化方面，使用了MyBatis持久层框架，通过注解或XML映射文件将数据库操作与Java对象进行绑定，避免了冗余的JDBC操作代码，提高了SQL查询的灵活性与执行效率。关键词：日志管理；SpringBoot+SpringMVC；Vue+ElementUI；论坛

ABSTRACTIntoday’sdigitalera,personaldatamanagementisbecomingmoreandmoreimportant,especiallyforthosewhowanttorecord,reviewandanalyzetheirdailylives.Thistopicaimstodesignandimportantapersonallogmanagementsystemthatintegratesforumfunctionandpersonspace.Thissystemnotonlycaneffectivelyhelpusersrecordtheirdailylifeemotionalstateandpersonalreflection,butalsoprovidesacommunityplatformthatallowsuserstosharetheirfeelingsandexperience,andcameffectivelyenhancetheirsenseofparticipationthroughinteraction.Thesystemadoptsthearchitecturedesignoffrontendandbackendseparation.ThebackendisdevelopedbasedontheSpringBootframework.SpringBootisembeddedwithTomcat,Jettyandotherwebcontainers,whichsupportstheautomaticassemblymechanism.DevelopersdonotneedtomanuallyconfigurealargenumberofXMLfiles,thusimprovingthedevelopmentefficiencyandsystemmaintainability.Atthesametime,thesystemcombinesSpringMVCtohandlethemappingandschedulingofHTTPrequests,realizingclearcontrollerlogic,andfacilitatingthemanagementofRESTfulAPIinterfaces.Intermsofdatapersistence,theMyBatispersistencelayerframeworkisusedtobinddatabaseoperationswithJavaobjectsthroughannotationsorXMLmappingfiles,avoidingredundantJDBCoperationcodes,andimprovingtheflexibilityandexecutionefficiencyofSQLqueries.Keywords：logmanagement;SpringBoot+SpringMVC;Vue+ElementUI;forum以上通过了用例图来描述了系统的功能，接下来通过流程图3.2展示日志发表的流程：开始否是否有账号否是否有账号是是注册账号登录注册账号登录个人空间个人空间点击按钮点击按钮否是否有分类否是否有分类是添加分类是添加分类否是否有标签否是否有标签是添加标签是添加标签编辑并发表日志编辑并发表日志结束结束图3.2日志发表的流程图首先用户来到首页进行登录，如若用户没有账号，那么要先进行注册，注册完毕后即可进行登录；登录成功后，用户会先处于论坛页，可以浏览论坛中他人发表的日志进行互动包括点赞和评论；用户如果想要发表日志，可以先点击个人空间进入个人空间页面，然后点击处于页面右侧的发表日志按钮，即可进行日志的编辑，用户输入想要发表日志的标题、内容，上传图片，选择该日志的分类与标签，若没有想要的分类和标签，可事先分别在分类页和标签页进行添加自己想要的分类与标签，编辑完成后，点击发表日志即可完成日志的发表。3.1.2管理员用例分析管理员的操作主要有对日志系统后台的管理，用例图如图3.3所示：登录：管理员通过账号密码进行登录。日志管理功能：在日志管理模块，可以对所有发表的日志进行管理，包括查看、添加、修改与删除，还可以按照日志标题、记录日期、标签名称、分类名称进行筛选。标签管理功能：管理员能在标签管理页查看所有用户所添加的标签包括标签名、由谁发布、描述、创建时间和修改时间，还可以根据标签名进行筛选；除此之外，也可以对这些标签进行编辑与删除。分类管理功能：在分类管理页面，管理员能够查看所有用户所添加的分类信息，包括分类的名称、由谁创建、分类的图标、对分类的描述、创建时间以及更新时间；另外，管理员也可以对这些分类进行编辑与删除。评论管理功能：能在评论管理页面查看所有用户所进行的所有评论的详细信息，包括评论者、被评论者、评论内容以及评论时间；管理员可以通过评论者的名字与评论的内容进行模糊搜索，另外，管理员同样可以对这些评论进行修改与删除。点赞管理功能：点赞管理模块中，可以查看到所有的点赞的详细信息，例如点赞者的账号、被点赞者的账号、被点赞的日志标题、点赞时间以及该点赞的状态，已取消后会显示状态为已删除；此外，可以通过点赞者的账号与被点赞的日志的标题进行模糊搜索，且可以进行对点赞信息的删除。公告管理功能：可以在公告管理页面进行通知公告的发布，比如系统通知或者一些活动消息，包括标题与内容；发布之后，用户能在论坛的右侧部分看到所发布的公告。另外，还可以对已发布的公告进行修改或删除。账号管理功能：该模块管理员能够看到所有已注册的用户账号信息包括用户名、账号创建时间、账号状态等，以及用户的一些详细信息比如姓名、性别、身份证号、头像等；管理员可以根据用户名、身份证号进行筛选；如有需要，管理员可以添加账号用户便不需要自行注册；此外，管理员也可以所有已注册的账号进行注销。个人信息功能：在个人信息页展示个人的基本信息，包括用户名、出生日期、邮箱、身高、手机号码、家庭住址、身份证号码、姓名、性别等基本信息，并且可以对除用户名之外的信息进行修改。<<include>>增删改查登录<<include>>增删改查登录数量趋势数量趋势<<include>>近期日志查看日志管理<<include>>近期日志查看日志管理<<include>>增删改查日志分析<<include>>增删改查日志分析<<include>>增删改查<<include>>增删改查<<include>>标签管理<<include>>标签管理增删改查分类管理增删改查分类管理<<include>><<include>>用户管理用户管理<<include>>增删改查<<include>>增删改查公告管理公告管理<<include>>增删改查<<include>>增删改查评论管理评论管理<<include>>查看、删除<<include>>查看、删除点赞管理点赞管理图3.3管理员用例图3.2数据库设计在系统的开发中，数据库设计也是非常重要的一步，下面介绍数据库的详细设计：3.2.1数据库的E-R图设计该日志系统的数据库中主要包括有用户表（users）、日志表（logs）、分类表（categories）、标签表（tags）、点赞信息表（likes）、评论信息表（comments）和通知公告表（notices）。一个用户可以发表多篇日志，但每篇日志只有一位用户发布，所以users表和logs表之间存在一对多的关联映射关系；一个日志中可以拥有一个分类或标签，但一个分类和标签可以被多个日志所拥有，所以logs表和categories表、logs表和tags表的关系均存在多对一的关联映射关系；每个用户可以创建多个标签和分类，而同一个标签和分类只能被一个用户创建，所以users表和tags表、users表和categories表的关系均存在一对多的关联映射关系；每个用户可以对多篇日志进行点赞，但每次点赞记录只属于一个用户，所以users表和likes表是一对多的关系；一篇日志可以被多个用户点赞，但每次点赞记录只属于一篇日志，所以logs表和likes表存在一对多的关联映射关系；每个用户可以对多篇日志发表评论，但每条评论只属于一个用户，所以users表和comments表存在一对多的关联映射关系；一篇日志可以有多条评论，但每条评论只属于一篇日志，所以comments表和logs表存在多对一的关联映射关系；数据库E-R图设计如图3.4所示：nn1logs1logscommentsncommentsn1n11n1n11nn1usersn1userslikes1likes111nnnncategoriestagscategoriestags图3.4数据库设计E-R图3.2.2数据表的设计下面介绍数据库中表结构的具体设计：用户信息（users）表的结构如表3.1所示。该表中记录了用户的一些信息，该表的实体类名字是User。表3.1用户（users）表字段名称数据类型约束说明idint主键用户编号usernamevarchar(50)notnull用户名password_hashvarchar(255)notnull加密后的密码emailvarchar(100)-邮箱phone_numbervarchar(15)-手机号id_card_numbervarchar(18)-身份证号namevarchar(50)-姓名gendertinyint-性别date_of_birthdate-生日heightdecimal-身高address_companyvarchar(255)-公司地址user_sortint(1)default00用户1管理员日志（logs）表的结构如表3.2所示。该表中记录日志的详细信息，对应的实体类是Log。表3.2日志（logs）表字段名称数据类型约束说明idint主键日志编号user_idintnotnull用户idtitlevarchar(255)notnull日志标题contentvarchar(1023)-日志内容tag_idint-标签编号cate_idint-分类编号addressvarchar(255)-发布地址publish_datetimedatetime-发布时间moodvarchar(100)-天气/心情created_attimestamp-创建时间updated_attimestamp-更新时间分类（categories）表的结构如表3.3所示。该表中记录分类的详细信息，对应的实体类是Categoriy。表3.3分类（categories）表字段名称数据类型约束说明idint主键分类编号user_idintnotnull用户idnamevarchar(255)-分类名称descriptiontext-分类描述created_attimestamp-创建时间updated_attimestamp-更新时间iconvarchar(50)-分类图标validtinyintdefault10已删除1有效标签（tags）表的结构如表3.4所示。该表中记录标签的详细信息，实体类的名字对应的是Tag。表3.4标签（tags）表字段名称数据类型约束说明idint主键标签编号user_idintnotnull用户idnamevarchar(255)-标签名称descriptionvarchar(255)-标签描述created_attimestamp-创建时间updated_attimestamp-更新时间bg_colorvarchar(9)-标签背景色validtinyintdefault10已删除1有效点赞信息（likes）表的结构如表3.5所示。该表中记录点赞的详细信息，对应的实体类是Likes。表3.5点赞（likes）表字段名称数据类型约束说明like_idint主键点赞编号user_idintnotnull点赞者idtarget_user_idintnotnull被点赞者idlog_idintnotnull被点赞日志idcreated_attimestamp-创建时间validtinyintdefault10已删除1有效评论信息（comments）表的结构如表3.6所示。表中记录评论的详细信息，实体类是Comment。表3.6评论（comments）表字段名称数据类型约束说明comment_idint主键评论编号user_idintnotnull评论者idtarget_user_idintnotnull被评论者idlog_idintnotnull被评论日志idcontenttextnotnull评论内容created_attimestamp-创建时间validtinyintdefault10已删除1有效通知公告信息（notices）表的结构如表3.7所示。该表中记录通知公告的详细信息，对应的实体类是Notice。表3.7通知公告（notices）表字段名称数据类型约束说明idint主键公告编号titlevarchar(255)notnull公告标题contenttextnotnull公告内容created_attimestamp-创建时间updated_attimestamp-更新时间validtinyintdefault10已删除1有效3.3系统总体架构图该日志管理系统总体架构分为前端层、后端层和数据库三部分。前端层中，使用Vue.js构建用户界面；ElementUI是为Vue设计的企业级桌面端UI组件库，可辅助快速搭建美观且功能多样的前端页面；Axios用于发送HTTP请求与后端通信，处理数据的获取与提交。后端层中，以SpringBoot为核心框架，承担业务逻辑处理、API接口定义及服务管理工作；SpringMVC用于处理HTTP请求映射，实现RESTfulAPI接口；MyBatis作为持久层框架，负责数据库操作，涵盖增删改查等基础操作。数据库层中，采用MySQL作为数据库管理系统，用于存储用户信息、日志内容、分类标签等数据。系统总体架构图如图3.5所示：数据库层后端层前端层数据库层后端层前端层SpringBootVue.jsSpringBootVue.jsMySQLSpringMVCElementUIMySQLSpringMVCElementUIMyBatisAxiosMyBatisAxios图3.5系统总体架构图4详细设计与关键问题上一章节进行了对日志管理系统的需求分析，在该系统中，主要设计两个子系统，分别是普通用户使用的系统和管理员使用的系统，下面将分别描述两个子系统中的功能的详细设计，并且将详细的阐述在实现的过程中遇到的关键问题。4.1普通用户的详细设计普通用户主要具有登录、注册功能，论坛浏览日志、互动、查看公告功能，个人空间发表、编辑、删除日志功能，日志分析进行查看发表日志趋势的功能，对分类与标签进行增删改查的功能，对账号进行修改密码以及注销的操作，还有对个人信息进行修改的操作。4.1.1登录与注册功能的详细设计注册登录与注册功能是任何用户系统的核心部分，尤其是像个人日志管理系统这样的应用。这部分设计需要考虑用户体验、安全性以及数据验证等多个方面。以下是关于登录与注册功能的详细设计：注册在注册页面输入字段：用户名、密码、再次确认密码；密码校验规则提示：长度在到16位之间，且必须是数字加字母组合；提交按钮：点击后进行注册操作；错误信息显示：展示“用户已存在”、“密码不符合要求”等提示，直到注册成功即可返回登录页面进行登录。前端页面使用regiterForm表单进行收集用户输入的用户名、密码以及确认密码，输入信息后，使用了validatePass的校验规则对输入的用户名密码进行了规则校验，用户名需要有6到10个英文、数字、或英文数字组合组成，密码需要由8到16为字母加数字组合组成。填写成功后，点击注册，使用ajax的封装请求函数$http.post进行调用controller中相应的接口，即UserController中的register，首先在UserController中调用userService的findByUserName判断是否用户名已被注册，若数据库中已存在该用户名则提示“用户名已被注册”，重新注册，否则调用userService接口中的register进行注册，进一步在userServiceImpl实现类中先对输入的密码进行md5加密，然后调用userMapper接口将密码与用户名存入数据库中，即可完成注册。图4.1注册页登录在登录页面输入用户名与密码；用户名与密码的校验规则与注册时一致，登录成功后即可进行首页。前端页面使用loginForm表单进行收集用户输入的用户名与密码，使用validate对输入的用户名密码进行了规则校验，校验规则与注册时一致，不过多赘述。正确填写之后，点击登录按钮，同样使用ajax封装请求函数$http.post（以下简称$http.post）进行调用userController中的login接口，在该接口中首先调用userService.findByUserName(username)查询是否存在该用户，存在的话再将传入的password进行md5加密与数据库中的密码进行比对，正确的话便可以成功将用户信息返回给前端，登录成功。期间的密码错误与用户名不存在均会有相应的提示返回给前端。登录成功后前端会根据后端返回的用户信息中的用户类型判断该用户是管理员还是普通用户，从而进入不同的页面。图4.2登录页4.1.2论坛功能的详细设计天气登录成功后普通用户会先进入论坛页面，论坛页面主要有三个主要功能：一是上方的天气，获取天气通过$http.get请求调用weatherController中的getCurrentWeather接口，该接口使用了OpenWeatherMap开放式接口进行了对天气的查询，将城市传过去之后，该接口会返回该城市的一系列天气信息，获取到之后返回给前端，前端页面拿到信息后摘取自己所需要的信息进行页面上的展示；日志信息二是所有用户发表的日志信息，以及每条信息的点赞和评论信息，前端使用$http.get调用LikesController中的getLikeList接口，我将需要返回的日志信息以及每条日志的点赞信息和评论信息封装为了一个展示对象LogDTO，这样可以简便的返回所需要的所有数据，首先调用logService.getLogList(map)获取所有的日志列表，然后对获取的日志列表进行遍历，再调用likesService.getLikeList(map)和commentService.getCommentList(map)获取每条日志的点赞和评论信息，最后将这些封装为一个LogDTO，最后遍历完成，得到一个List<LogDTO>数组形式的数据，返回给前端，前端拿到数据后即可进行数据渲染展示在页面上；通知公告三是论坛右侧通知列表的展示前端使用$http.get调用NoticeController中的getNoticeList方法，再调用noticeService.getNoticeList(map)成功获取到通知公告的数据，返回给前端，否则会返回错误信息，前端拿到数据后同意进行数据渲染展示在页面。这三个数据请求都在跳转至该页面便会调用，即mounted钩子函数中。在每个日志的部分还有点赞和评论的按钮，在点击点赞后，前端首先判断是点赞还是取消点赞，若是前者，则发送请求，调用LikeController中的addLike接口，在该接口中，先判断在数据库的点赞表中是否以及存在该点赞信息（若是点赞又取消点赞信息仍然存在），即调用likesService.getLikeByUserIdAndLogId(like)判断，若为空，则调用likesService.addLike(like)添加一条点赞信息；否则，调用likesService.modifyLike(like)修改数据库中该点赞记录的有效值valid为1即可重新点赞成功；若为后者取消点赞，则前端发送请求调用likesController中的modifyLike接口，然后再调用likesService.modifyLike(like)修改数据库中该点赞记录的有效值valid为0即可取消点赞成功。评论的相关操作是，在评论框输入评论，点击发表评论前端发送请求调用后端commentController中的addComment方法，在方法中调用commentService.addComment(comment)，成功后返回成功提示信息，前端会再次请求获取日志的信息重新刷新日志下的评论，及时在页面进行重新渲染；在评论右侧可以点击删除评论，前端发送请求调用后端的CommentController中的modifyComment接口，在接口中调用commentService.modifyComment(comment)修改该条评论记录的valid为0，既可以实现逻辑删除。图4.3论坛页4.1.3个人空间的详细设计个人信息个人空间上方主要是个人的一些简便信息的展示，这一块便涉及到个人信息的获取，前端使用$http.get发送请求调用UserController中的getUserInfo方法，在该方法中调用userService.getUserInfo(map)获取到个人信息，返回给前端，前端进行展示；图4.4个人空间页日志信息与操作个人空间的中间部分是登录者发布的日志的集合列表，与论坛部分大致一致，不同的是，个人空间这里把登录者的用户id传回了后端，后端在获取日志列表的时候多了一个查询条件，只获取了该用户的发表的日志，不过多赘述；对每个日志的操作还有删除与编辑，在每篇日志的右下侧有删除日志的按钮，点击按钮，前端首先弹出是否确认删除的提示，防止误触，确认之后，前端像后端发送请求调用后端LogController的batchDelete接口，在接口中调用logService.deleteBatch(ids)对数据库中的日志记录中的valid修改值为0进行逻辑删除，向前端返回删除成功信息。而点击编辑后，调用logController中的getLogDetail，在接口中调用logService.getLogDetail(id)获取该日志的详细信息返回给前端，前端将其渲染在编辑的对话框中，用户进行修改信息，修改后，点击提交，前端将用户新填写的form表单进行发送请求于后端LogController的modifyLog接口，在接口中调用logService.modifyLog(log)修改数据库中的日志信息，修改成功后给前端返回成功信息，前端重新获取日志信息进行实时更新数据。个人空间右侧部分是一个发布日志的按钮，点击后前端向后端发送请求调用LogController中的addLog接口，在接口中调用logService.addLog(log)，之后返回成功信息。图4.5编辑日志页4.1.4日志分析界面功能日志分析页面上方是一个统计区域，显示总日志数、近七日比、总标签数和总分类数，中间部分是一个折线图，可以展示近七日、近两周或近一个月的发表日志的趋势，下方是一个较为美观的最近发布的三篇日志的信息轮播图。前端向后端发送请求，调用后端LogController的getLogListRecent接口，为了方便简洁，返回的数据我定义了一个新的类AnalysisDataDTO，其中包括日志列表、总记录数、总分类数、总标签数、近七日占比，以及折现图所需要的日期集合List和对应的日志数集合List。在接口中调用logService.getTotalLogNum(totalMap)获取总日志数，categoryService.getCatsNum(totalMap)获取总分类数，tagService.getTagNum(totalMap)获取总标签数，logService.getRecentLogNum(totalMap)获取近七日的日志数，logService.getDailyLogCounts(map)获取折线图所需要的日期日志数集合列表，封装为AnalysisDataDTO返回给前端在页面进行渲染。图4.6日志分析页图4.7轮播日志4.1.5标签标签页主要有两个功能：一是自主添加标签，二是对已添加标签的管理，包括修改与删除。前端页面使用一个表单来收集用户输入的标签名称和选择的标签颜色。正确填写之后，点击添加标签按钮，前端使用ajax封装请求函数$http.post进行调用TagController中的addTag接口。在该接口中，首先对传入的标签对象进行必要的参数检查，然后调用tagService.addTag(tag)将标签信息保存到数据库中。如果保存成功，返回成功提示信息给前端；否则，返回错误信息。在标签列表部分，每个标签右侧有修改和删除按钮。点击修改按钮，前端弹出修改标签的对话框，用户可以修改标签名称和颜色。修改完成后，点击提交按钮，前端发送请求调用TagController中的modifyTag接口，在接口中调用tagService.modifyTag(tag)修改数据库中的标签信息。修改成功后，前端会重新获取标签列表进行实时更新数据。点击删除按钮，前端首先弹出是否确认删除的提示，防止误触。确认之后，前端向后端发送请求调用TagController的batchDelete接口，在接口中调用tagService.batchDelete(ids)对数据库中的标签记录进行删除操作（这里的ids是一个包含要删除标签ID的列表）。删除成功后，向前端返回删除成功信息，前端重新获取标签列表进行展示。图4.8标签页图4.9添加标签4.1.6分类分类页的功能与标签页类似，主要包括自主添加分类、对已添加分类的管理（修改与删除）。前端页面使用一个表单来收集输入的分类名称、分类图标和分类描述。点击添加分类按钮，前端使用$http.post调用CategoryController中的addCat接口。在该接口中，先对传入的分类对象进行参数检查，然后调用categoryService.addCat(category)将分类信息保存到数据库中。保存成功返回成功提示信息，否则返回错误信息。在分类列表部分，每个分类右侧有修改和删除按钮。点击修改按钮，前端弹出修改分类的对话框，用户可以修改分类名称、图标和描述。修改完成后，点击提交按钮，前端发送请求调用CategoryController中的modifyCat接口，在接口中调用categoryService.modifyCat(category)修改数据库中的分类信息。修改成功后，前端重新获取分类列表进行更新展示。点击删除按钮，前端弹出确认提示，确认后向后端发送请求调用CategoryController的batchDelete接口，在接口中调用categoryService.batchDelete(ids)对数据库中的分类记录进行删除操作（ids为包含要删除分类ID的列表）。删除成功后，向前端返回删除成功信息，前端重新获取分类列表进行展示。图4.10分类管理图4.11添加分类4.1.7账号信息账号信息页面主要用于展示用户的核心账号数据，并提供修改密码与注销账号的功能，确保用户能够安全、便捷地管理自身账号相关操作。在前端页面，整体布局以简洁直观为主，通过多个模块展示账号关键信息。页面上方使用大标题“账号信息”明确页面主题，下方划分为用户信息展示区、操作按钮区以及两个功能弹窗区（修改密码弹窗和注销账号确认弹窗）。用户信息展示区使用el-card组件进行包裹，内部以列表形式逐项展示用户名、姓名、邮箱和密码（密码展示为掩码形式“********”）。这些信息在页面加载时，前端通过$http.get发送请求调用UserController中的getUserInfo方法，该方法接收从localStorage中获取的userId作为参数，在方法内部调用userService.getUserInfo(map)从数据库中查询用户的详细信息，并将结果返回给前端。前端接收到数据后，将对应信息绑定到userInfo对象的属性上，进而渲染到页面的展示区域。操作按钮区设置两个按钮，“修改密码”按钮和“注销账号”按钮。用户点击“修改密码”按钮时，通过设置弹出修改密码弹窗。该弹窗内包含一个表单，表单内有三个输入框，用于输入旧密码、新密码和确认新密码，绑定到passwordForm对象的对应属性上。同时，为确保密码修改的准确性和安全性，在提交表单时，先调用validate进行表单验证，验证规则与注册时一致，如检查新密码是否由字母和数字组成且长度在8到16位等。验证通过，前端将passwordForm对象中的数据进行整理，并通过$http.post调用UserController中的updatePassword接口。在updatePassword接口中，首先获取请求体中的userId、oldPassword、newPassword和confirmNewPassword，然后依次进行新旧密码一致性检查、新密码格式校验、新密码与确认密码匹配检查、用户存在性验证以及旧密码正确性验证。若所有验证通过，则调用userService.updatePassword(user.getUsername(),Md5Util.getMD5String(newPassword))对数据库中的密码进行更新，更新成功返回成功提示信息给前端，前端展示成功提示，并关闭修改密码弹窗；若验证不通过或更新失败，则返回相应错误信息，前端弹出提示框告知用户密码修改失败的原因。当用户点击“注销账号”按钮时，通过设置showDeleteAccountDialog=true，弹出注销账号确认弹窗，弹窗内提示用户“您确定要注销账号吗？此操作不可逆”。若用户点击“确定”按钮，前端将userId作为参数，通过$http.post调用UserController中的deleteUser接口。在deleteUser接口中，首先检查传入的ids（此处仅包含一个userId）是否为空，若不为空，则调用userService.batchDelete(ids)对用户账号进行注销操作（一般为逻辑删除，修改用户记录的有效标识字段为无效状态）。注销成功后，接口返回成功提示信息给前端，前端执行localStorage.removeItem('userId');清除本地存储的用户标识信息，将用户页面跳转至登录页面，同时展示“账号已注销”的成功提示；若注销失败，返回错误信息，提示用户注销失败及原因。图4.12账号管理图4.13修改密码4.1.8个人信息个人信息页面主要用于展示和管理用户的个人详细信息，功能围绕个人信息展示、信息修改展开。在前端页面，通过userInfoForm表单收集用户信息展示与修改操作。页面初始加载时，使用$http.get发送请求调用UserController中的getUserInfo方法，该方法接收当前用户的标识信息（如用户ID等），并调用userService.getUserInfo(map)从数据库中查询用户详细信息，包括用户名、出生日期、邮箱、身高、手机号码、家庭住址、身份证号码、姓名、性别等。将获取到的信息返回给前端，前端接收到数据后，将其渲染到页面上对应的展示区域，如用户名展示在特定的文本区域，其他信息也依次填充到相应位置。若用户需要修改个人信息，除用户名不可修改外，其他信息展示区域旁设有编辑按钮。点击编辑按钮后，该信息对应的展示区域变为可编辑的输入框或选择框（根据信息类型而定，如性别使用下拉选择框），用户修改完信息后，点击保存按钮，前端将修改后的信息封装成数据对象，使用$http.post请求调用UserController中的modifyUserInfo接口。在该接口中，首先对传入的数据进行有效性校验，如检查邮箱格式是否正确、手机号码是否符合规范等。校验通过后，调用userService.modifyUserInfo(userInfo)将修改后的信息更新到数据库中。若更新成功，接口返回成功提示信息给前端，前端重新调用getUserInfo方法获取最新的用户信息并进行页面刷新展示；若更新失败，则返回错误信息，前端弹出提示框告知用户信息修改失败及原因。图4.14查看个人信息图4.15修改个人信息4.2管理员的详细设计管理员的操作主要有登录，对日志、分类、标签、公告、用户的增删改查操作，对评论和点赞的查看和删除操作，个人信息的修改。4.2.1日志管理在日志管理页面，前端调用LogController中的接口getLogList获取日志列表与普通用户的论坛功能相似，不同的是多了几个查询条件包括日志标题、记录日期、标签、分类。编辑操作先调用LogController的getLogDetail进行渲染页面，修改后调用LogController的modifyLog接口进行修改。查看操作和删除操作也与普通用户中的操作一致。图4.16日志管理模块4.2.2日志分析日志分析与普通用户的操作大多一致，不同之处在于管理员分析页面是所有用户发布的日志的分析趋势等，且没有近三篇发表日志的展示，其他均与普通用户无区别。4.2.3标签、分类管理管理员可以看到所有用户所添加的标签与分类，没有添加操作，其它删改查操作与普通用户大致相同。图4.17标签管理模块图4.18分类管理模块4.2.5评论管理管理员可以看到所有用户发表的所有评论，可以进行删除，删除操作与普通用户一致。图4.19评论管理模块4.2.6点赞管理管理员可以看到所有的点赞信息，可以进行删除，操作与普通用户一致。图4.20点赞管理模块4.2.7通知公告管理员可以对通知公告进行增删改查操作，添加时前端将收集的公告信息form表单进行提交调用NoticeController的addNotice接口，在接口中调用noticeService.addNotice(notice)方法进行添加公告；修改时，调用NoticeController的getNoticeDetail(notice)方法先获取公告原先的详细信息，修改后，前端发送请求将新的表单form提交调用后端NoticeController的modifyNotcie(notice)接口，在接口中调用noticeService.modifyNotice(notice)方法进行修改公告，成功后返回成功信息。删除操作，点击删除按钮，前端向后端发送请求调用后端NoticeController的ba