摘要在如今數字化時代，個人數據管理開始越來越重要，特別是對于那些希望記錄、回顧和分析自己的日常生活的人來說。本課題旨在設計并實現一個集成了論壇功能和個人空間的個人日志管理系統(tǒng)，該系統(tǒng)不僅可以有效地幫助用戶記錄日常生活、情感狀態(tài)和個人反思，還提供了一個社區(qū)平臺可以讓用戶進行分享心得、交流經驗，并且通過互動也可以有效地增強用戶的參與感。本系統(tǒng)采用前后端分離的架構設計，后端基于SpringBoot框架進行開發(fā)，SpringBoot內嵌Tomcat、Jetty等Web容器，支持自動裝配機制，開發(fā)者無需手動配置大量的XML文件，從而提升了開發(fā)效率和系統(tǒng)的可維護性。同時，系統(tǒng)結合SpringMVC來處理HTTP請求的映射與調度，實現清晰的控制器邏輯，便于管理RESTfulAPI接口。在數據持久化方面，使用了MyBatis持久層框架，通過注解或XML映射文件將數據庫操作與Java對象進行綁定，避免了冗余的JDBC操作代碼，提高了SQL查詢的靈活性與執(zhí)行效率。關鍵詞：日志管理；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以上通過了用例圖來描述了系統(tǒng)的功能，接下來通過流程圖3.2展示日志發(fā)表的流程：開始否是否有賬號否是否有賬號是是注冊賬號登錄注冊賬號登錄個人空間個人空間點擊按鈕點擊按鈕否是否有分類否是否有分類是添加分類是添加分類否是否有標簽否是否有標簽是添加標簽是添加標簽編輯并發(fā)表日志編輯并發(fā)表日志結束結束圖3.2日志發(fā)表的流程圖首先用戶來到首頁進行登錄，如若用戶沒有賬號，那么要先進行注冊，注冊完畢后即可進行登錄；登錄成功后，用戶會先處于論壇頁，可以瀏覽論壇中他人發(fā)表的日志進行互動包括點贊和評論；用戶如果想要發(fā)表日志，可以先點擊個人空間進入個人空間頁面，然后點擊處于頁面右側的發(fā)表日志按鈕，即可進行日志的編輯，用戶輸入想要發(fā)表日志的標題、內容，上傳圖片，選擇該日志的分類與標簽，若沒有想要的分類和標簽，可事先分別在分類頁和標簽頁進行添加自己想要的分類與標簽，編輯完成后，點擊發(fā)表日志即可完成日志的發(fā)表。3.1.2管理員用例分析管理員的操作主要有對日志系統(tǒng)后臺的管理，用例圖如圖3.3所示：登錄：管理員通過賬號密碼進行登錄。日志管理功能：在日志管理模塊，可以對所有發(fā)表的日志進行管理，包括查看、添加、修改與刪除，還可以按照日志標題、記錄日期、標簽名稱、分類名稱進行篩選。標簽管理功能：管理員能在標簽管理頁查看所有用戶所添加的標簽包括標簽名、由誰發(fā)布、描述、創(chuàng)建時間和修改時間，還可以根據標簽名進行篩選；除此之外，也可以對這些標簽進行編輯與刪除。分類管理功能：在分類管理頁面，管理員能夠查看所有用戶所添加的分類信息，包括分類的名稱、由誰創(chuàng)建、分類的圖標、對分類的描述、創(chuàng)建時間以及更新時間；另外，管理員也可以對這些分類進行編輯與刪除。評論管理功能：能在評論管理頁面查看所有用戶所進行的所有評論的詳細信息，包括評論者、被評論者、評論內容以及評論時間；管理員可以通過評論者的名字與評論的內容進行模糊搜索，另外，管理員同樣可以對這些評論進行修改與刪除。點贊管理功能：點贊管理模塊中，可以查看到所有的點贊的詳細信息，例如點贊者的賬號、被點贊者的賬號、被點贊的日志標題、點贊時間以及該點贊的狀態(tài)，已取消后會顯示狀態(tài)為已刪除；此外，可以通過點贊者的賬號與被點贊的日志的標題進行模糊搜索，且可以進行對點贊信息的刪除。公告管理功能：可以在公告管理頁面進行通知公告的發(fā)布，比如系統(tǒng)通知或者一些活動消息，包括標題與內容；發(fā)布之后，用戶能在論壇的右側部分看到所發(fā)布的公告。另外，還可以對已發(fā)布的公告進行修改或刪除。賬號管理功能：該模塊管理員能夠看到所有已注冊的用戶賬號信息包括用戶名、賬號創(chuàng)建時間、賬號狀態(tài)等，以及用戶的一些詳細信息比如姓名、性別、身份證號、頭像等；管理員可以根據用戶名、身份證號進行篩選；如有需要，管理員可以添加賬號用戶便不需要自行注冊；此外，管理員也可以所有已注冊的賬號進行注銷。個人信息功能：在個人信息頁展示個人的基本信息，包括用戶名、出生日期、郵箱、身高、手機號碼、家庭住址、身份證號碼、姓名、性別等基本信息，并且可以對除用戶名之外的信息進行修改。<<include>>增刪改查登錄<<include>>增刪改查登錄數量趨勢數量趨勢<<include>>近期日志查看日志管理<<include>>近期日志查看日志管理<<include>>增刪改查日志分析<<include>>增刪改查日志分析<<include>>增刪改查<<include>>增刪改查<<include>>標簽管理<<include>>標簽管理增刪改查分類管理增刪改查分類管理<<include>><<include>>用戶管理用戶管理<<include>>增刪改查<<include>>增刪改查公告管理公告管理<<include>>增刪改查<<include>>增刪改查評論管理評論管理<<include>>查看、刪除<<include>>查看、刪除點贊管理點贊管理圖3.3管理員用例圖3.2數據庫設計在系統(tǒng)的開發(fā)中，數據庫設計也是非常重要的一步，下面介紹數據庫的詳細設計：3.2.1數據庫的E-R圖設計該日志系統(tǒng)的數據庫中主要包括有用戶表（users）、日志表（logs）、分類表（categories）、標簽表（tags）、點贊信息表（likes）、評論信息表（comments）和通知公告表（notices）。一個用戶可以發(fā)表多篇日志，但每篇日志只有一位用戶發(fā)布，所以users表和logs表之間存在一對多的關聯映射關系；一個日志中可以擁有一個分類或標簽，但一個分類和標簽可以被多個日志所擁有，所以logs表和categories表、logs表和tags表的關系均存在多對一的關聯映射關系；每個用戶可以創(chuàng)建多個標簽和分類，而同一個標簽和分類只能被一個用戶創(chuàng)建，所以users表和tags表、users表和categories表的關系均存在一對多的關聯映射關系；每個用戶可以對多篇日志進行點贊，但每次點贊記錄只屬于一個用戶，所以users表和likes表是一對多的關系；一篇日志可以被多個用戶點贊，但每次點贊記錄只屬于一篇日志，所以logs表和likes表存在一對多的關聯映射關系；每個用戶可以對多篇日志發(fā)表評論，但每條評論只屬于一個用戶，所以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)-發(fā)布地址publish_datetimedatetime-發(fā)布時間moodvarchar(100)-天氣/心情created_attimestamp-創(chuàng)建時間updated_attimestamp-更新時間分類（categories）表的結構如表3.3所示。該表中記錄分類的詳細信息，對應的實體類是Categoriy。表3.3分類（categories）表字段名稱數據類型約束說明idint主鍵分類編號user_idintnotnull用戶idnamevarchar(255)-分類名稱descriptiontext-分類描述created_attimestamp-創(chuàng)建時間updated_attimestamp-更新時間iconvarchar(50)-分類圖標validtinyintdefault10已刪除1有效標簽（tags）表的結構如表3.4所示。該表中記錄標簽的詳細信息，實體類的名字對應的是Tag。表3.4標簽（tags）表字段名稱數據類型約束說明idint主鍵標簽編號user_idintnotnull用戶idnamevarchar(255)-標簽名稱descriptionvarchar(255)-標簽描述created_attimestamp-創(chuàng)建時間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-創(chuàng)建時間validtinyintdefault10已刪除1有效評論信息（comments）表的結構如表3.6所示。表中記錄評論的詳細信息，實體類是Comment。表3.6評論（comments）表字段名稱數據類型約束說明comment_idint主鍵評論編號user_idintnotnull評論者idtarget_user_idintnotnull被評論者idlog_idintnotnull被評論日志idcontenttextnotnull評論內容created_attimestamp-創(chuàng)建時間validtinyintdefault10已刪除1有效通知公告信息（notices）表的結構如表3.7所示。該表中記錄通知公告的詳細信息，對應的實體類是Notice。表3.7通知公告（notices）表字段名稱數據類型約束說明idint主鍵公告編號titlevarchar(255)notnull公告標題contenttextnotnull公告內容created_attimestamp-創(chuàng)建時間updated_attimestamp-更新時間validtinyintdefault10已刪除1有效3.3系統(tǒng)總體架構圖該日志管理系統(tǒng)總體架構分為前端層、后端層和數據庫三部分。前端層中，使用Vue.js構建用戶界面；ElementUI是為Vue設計的企業(yè)級桌面端UI組件庫，可輔助快速搭建美觀且功能多樣的前端頁面；Axios用于發(fā)送HTTP請求與后端通信，處理數據的獲取與提交。后端層中，以SpringBoot為核心框架，承擔業(yè)務邏輯處理、API接口定義及服務管理工作；SpringMVC用于處理HTTP請求映射，實現RESTfulAPI接口；MyBatis作為持久層框架，負責數據庫操作，涵蓋增刪改查等基礎操作。數據庫層中，采用MySQL作為數據庫管理系統(tǒng)，用于存儲用戶信息、日志內容、分類標簽等數據。系統(tǒng)總體架構圖如圖3.5所示：數據庫層后端層前端層數據庫層后端層前端層SpringBootVue.jsSpringBootVue.jsMySQLSpringMVCElementUIMySQLSpringMVCElementUIMyBatisAxiosMyBatisAxios圖3.5系統(tǒng)總體架構圖4詳細設計與關鍵問題上一章節(jié)進行了對日志管理系統(tǒng)的需求分析，在該系統(tǒng)中，主要設計兩個子系統(tǒng)，分別是普通用戶使用的系統(tǒng)和管理員使用的系統(tǒng)，下面將分別描述兩個子系統(tǒng)中的功能的詳細設計，并且將詳細的闡述在實現的過程中遇到的關鍵問題。4.1普通用戶的詳細設計普通用戶主要具有登錄、注冊功能，論壇瀏覽日志、互動、查看公告功能，個人空間發(fā)表、編輯、刪除日志功能，日志分析進行查看發(fā)表日志趨勢的功能，對分類與標簽進行增刪改查的功能，對賬號進行修改密碼以及注銷的操作，還有對個人信息進行修改的操作。4.1.1登錄與注冊功能的詳細設計注冊登錄與注冊功能是任何用戶系統(tǒng)的核心部分，尤其是像個人日志管理系統(tǒng)這樣的應用。這部分設計需要考慮用戶體驗、安全性以及數據驗證等多個方面。以下是關于登錄與注冊功能的詳細設計：注冊在注冊頁面輸入字段：用戶名、密碼、再次確認密碼；密碼校驗規(guī)則提示：長度在到16位之間，且必須是數字加字母組合；提交按鈕：點擊后進行注冊操作；錯誤信息顯示：展示“用戶已存在”、“密碼不符合要求”等提示，直到注冊成功即可返回登錄頁面進行登錄。前端頁面使用regiterForm表單進行收集用戶輸入的用戶名、密碼以及確認密碼，輸入信息后，使用了validatePass的校驗規(guī)則對輸入的用戶名密碼進行了規(guī)則校驗，用戶名需要有6到10個英文、數字、或英文數字組合組成，密碼需要由8到16為字母加數字組合組成。填寫成功后，點擊注冊，使用ajax的封裝請求函數$http.post進行調用controller中相應的接口，即UserController中的register，首先在UserController中調用userService的findByUserName判斷是否用戶名已被注冊，若數據庫中已存在該用戶名則提示“用戶名已被注冊”，重新注冊，否則調用userService接口中的register進行注冊，進一步在userServiceImpl實現類中先對輸入的密碼進行md5加密，然后調用userMapper接口將密碼與用戶名存入數據庫中，即可完成注冊。圖4.1注冊頁登錄在登錄頁面輸入用戶名與密碼；用戶名與密碼的校驗規(guī)則與注冊時一致，登錄成功后即可進行首頁。前端頁面使用loginForm表單進行收集用戶輸入的用戶名與密碼，使用validate對輸入的用戶名密碼進行了規(guī)則校驗，校驗規(guī)則與注冊時一致，不過多贅述。正確填寫之后，點擊登錄按鈕，同樣使用ajax封裝請求函數$http.post（以下簡稱$http.post）進行調用userController中的login接口，在該接口中首先調用userService.findByUserName(username)查詢是否存在該用戶，存在的話再將傳入的password進行md5加密與數據庫中的密碼進行比對，正確的話便可以成功將用戶信息返回給前端，登錄成功。期間的密碼錯誤與用戶名不存在均會有相應的提示返回給前端。登錄成功后前端會根據后端返回的用戶信息中的用戶類型判斷該用戶是管理員還是普通用戶，從而進入不同的頁面。圖4.2登錄頁4.1.2論壇功能的詳細設計天氣登錄成功后普通用戶會先進入論壇頁面，論壇頁面主要有三個主要功能：一是上方的天氣，獲取天氣通過$http.get請求調用weatherController中的getCurrentWeather接口，該接口使用了OpenWeatherMap開放式接口進行了對天氣的查詢，將城市傳過去之后，該接口會返回該城市的一系列天氣信息，獲取到之后返回給前端，前端頁面拿到信息后摘取自己所需要的信息進行頁面上的展示；日志信息二是所有用戶發(fā)表的日志信息，以及每條信息的點贊和評論信息，前端使用$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鉤子函數中。在每個日志的部分還有點贊和評論的按鈕，在點擊點贊后，前端首先判斷是點贊還是取消點贊，若是前者，則發(fā)送請求，調用LikeController中的addLike接口，在該接口中，先判斷在數據庫的點贊表中是否以及存在該點贊信息（若是點贊又取消點贊信息仍然存在），即調用likesService.getLikeByUserIdAndLogId(like)判斷，若為空，則調用likesService.addLike(like)添加一條點贊信息；否則，調用likesService.modifyLike(like)修改數據庫中該點贊記錄的有效值valid為1即可重新點贊成功；若為后者取消點贊，則前端發(fā)送請求調用likesController中的modifyLike接口，然后再調用likesService.modifyLike(like)修改數據庫中該點贊記錄的有效值valid為0即可取消點贊成功。評論的相關操作是，在評論框輸入評論，點擊發(fā)表評論前端發(fā)送請求調用后端commentController中的addComment方法，在方法中調用commentService.addComment(comment)，成功后返回成功提示信息，前端會再次請求獲取日志的信息重新刷新日志下的評論，及時在頁面進行重新渲染；在評論右側可以點擊刪除評論，前端發(fā)送請求調用后端的CommentController中的modifyComment接口，在接口中調用commentService.modifyComment(comment)修改該條評論記錄的valid為0，既可以實現邏輯刪除。圖4.3論壇頁4.1.3個人空間的詳細設計個人信息個人空間上方主要是個人的一些簡便信息的展示，這一塊便涉及到個人信息的獲取，前端使用$http.get發(fā)送請求調用UserController中的getUserInfo方法，在該方法中調用userService.getUserInfo(map)獲取到個人信息，返回給前端，前端進行展示；圖4.4個人空間頁日志信息與操作個人空間的中間部分是登錄者發(fā)布的日志的集合列表，與論壇部分大致一致，不同的是，個人空間這里把登錄者的用戶id傳回了后端，后端在獲取日志列表的時候多了一個查詢條件，只獲取了該用戶的發(fā)表的日志，不過多贅述；對每個日志的操作還有刪除與編輯，在每篇日志的右下側有刪除日志的按鈕，點擊按鈕，前端首先彈出是否確認刪除的提示，防止誤觸，確認之后，前端像后端發(fā)送請求調用后端LogController的batchDelete接口，在接口中調用logService.deleteBatch(ids)對數據庫中的日志記錄中的valid修改值為0進行邏輯刪除，向前端返回刪除成功信息。而點擊編輯后，調用logController中的getLogDetail，在接口中調用logService.getLogDetail(id)獲取該日志的詳細信息返回給前端，前端將其渲染在編輯的對話框中，用戶進行修改信息，修改后，點擊提交，前端將用戶新填寫的form表單進行發(fā)送請求于后端LogController的modifyLog接口，在接口中調用logService.modifyLog(log)修改數據庫中的日志信息，修改成功后給前端返回成功信息，前端重新獲取日志信息進行實時更新數據。個人空間右側部分是一個發(fā)布日志的按鈕，點擊后前端向后端發(fā)送請求調用LogController中的addLog接口，在接口中調用logService.addLog(log)，之后返回成功信息。圖4.5編輯日志頁4.1.4日志分析界面功能日志分析頁面上方是一個統(tǒng)計區(qū)域，顯示總日志數、近七日比、總標簽數和總分類數，中間部分是一個折線圖，可以展示近七日、近兩周或近一個月的發(fā)表日志的趨勢，下方是一個較為美觀的最近發(fā)布的三篇日志的信息輪播圖。前端向后端發(fā)送請求，調用后端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)將標簽信息保存到數據庫中。如果保存成功，返回成功提示信息給前端；否則，返回錯誤信息。在標簽列表部分，每個標簽右側有修改和刪除按鈕。點擊修改按鈕，前端彈出修改標簽的對話框，用戶可以修改標簽名稱和顏色。修改完成后，點擊提交按鈕，前端發(fā)送請求調用TagController中的modifyTag接口，在接口中調用tagService.modifyTag(tag)修改數據庫中的標簽信息。修改成功后，前端會重新獲取標簽列表進行實時更新數據。點擊刪除按鈕，前端首先彈出是否確認刪除的提示，防止誤觸。確認之后，前端向后端發(fā)送請求調用TagController的batchDelete接口，在接口中調用tagService.batchDelete(ids)對數據庫中的標簽記錄進行刪除操作（這里的ids是一個包含要刪除標簽ID的列表）。刪除成功后，向前端返回刪除成功信息，前端重新獲取標簽列表進行展示。圖4.8標簽頁圖4.9添加標簽4.1.6分類分類頁的功能與標簽頁類似，主要包括自主添加分類、對已添加分類的管理（修改與刪除）。前端頁面使用一個表單來收集輸入的分類名稱、分類圖標和分類描述。點擊添加分類按鈕，前端使用$http.post調用CategoryController中的addCat接口。在該接口中，先對傳入的分類對象進行參數檢查，然后調用categoryService.addCat(category)將分類信息保存到數據庫中。保存成功返回成功提示信息，否則返回錯誤信息。在分類列表部分，每個分類右側有修改和刪除按鈕。點擊修改按鈕，前端彈出修改分類的對話框，用戶可以修改分類名稱、圖標和描述。修改完成后，點擊提交按鈕，前端發(fā)送請求調用CategoryController中的modifyCat接口，在接口中調用categoryService.modifyCat(category)修改數據庫中的分類信息。修改成功后，前端重新獲取分類列表進行更新展示。點擊刪除按鈕，前端彈出確認提示，確認后向后端發(fā)送請求調用CategoryController的batchDelete接口，在接口中調用categoryService.batchDelete(ids)對數據庫中的分類記錄進行刪除操作（ids為包含要刪除分類ID的列表）。刪除成功后，向前端返回刪除成功信息，前端重新獲取分類列表進行展示。圖4.10分類管理圖4.11添加分類4.1.7賬號信息賬號信息頁面主要用于展示用戶的核心賬號數據，并提供修改密碼與注銷賬號的功能，確保用戶能夠安全、便捷地管理自身賬號相關操作。在前端頁面，整體布局以簡潔直觀為主，通過多個模塊展示賬號關鍵信息。頁面上方使用大標題“賬號信息”明確頁面主題，下方劃分為用戶信息展示區(qū)、操作按鈕區(qū)以及兩個功能彈窗區(qū)（修改密碼彈窗和注銷賬號確認彈窗）。用戶信息展示區(qū)使用el-card組件進行包裹，內部以列表形式逐項展示用戶名、姓名、郵箱和密碼（密碼展示為掩碼形式“********”）。這些信息在頁面加載時，前端通過$http.get發(fā)送請求調用UserController中的getUserInfo方法，該方法接收從localStorage中獲取的userId作為參數，在方法內部調用userService.getUserInfo(map)從數據庫中查詢用戶的詳細信息，并將結果返回給前端。前端接收到數據后，將對應信息綁定到userInfo對象的屬性上，進而渲染到頁面的展示區(qū)域。操作按鈕區(qū)設置兩個按鈕，“修改密碼”按鈕和“注銷賬號”按鈕。用戶點擊“修改密碼”按鈕時，通過設置彈出修改密碼彈窗。該彈窗內包含一個表單，表單內有三個輸入框，用于輸入舊密碼、新密碼和確認新密碼，綁定到passwordForm對象的對應屬性上。同時，為確保密碼修改的準確性和安全性，在提交表單時，先調用validate進行表單驗證，驗證規(guī)則與注冊時一致，如檢查新密碼是否由字母和數字組成且長度在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)對用戶賬號進行注銷操作（一般為邏輯刪除，修改用戶記錄的有效標識字段為無效狀態(tài)）。注銷成功后，接口返回成功提示信息給前端，前端執(zhí)行l(wèi)ocalStorage.removeItem('userId');清除本地存儲的用戶標識信息，將用戶頁面跳轉至登錄頁面，同時展示“賬號已注銷”的成功提示；若注銷失敗，返回錯誤信息，提示用戶注銷失敗及原因。圖4.12賬號管理圖4.13修改密碼4.1.8個人信息個人信息頁面主要用于展示和管理用戶的個人詳細信息，功能圍繞個人信息展示、信息修改展開。在前端頁面，通過userInfoForm表單收集用戶信息展示與修改操作。頁面初始加載時，使用$http.get發(fā)送請求調用UserController中的getUserInfo方法，該方法接收當前用戶的標識信息（如用戶ID等），并調用userService.getUserInfo(map)從數據庫中查詢用戶詳細信息，包括用戶名、出生日期、郵箱、身高、手機號碼、家庭住址、身份證號碼、姓名、性別等。將獲取到的信息返回給前端，前端接收到數據后，將其渲染到頁面上對應的展示區(qū)域，如用戶名展示在特定的文本區(qū)域，其他信息也依次填充到相應位置。若用戶需要修改個人信息，除用戶名不可修改外，其他信息展示區(qū)域旁設有編輯按鈕。點擊編輯按鈕后，該信息對應的展示區(qū)域變?yōu)榭删庉嫷妮斎肟蚧蜻x擇框（根據信息類型而定，如性別使用下拉選擇框），用戶修改完信息后，點擊保存按鈕，前端將修改后的信息封裝成數據對象，使用$http.post請求調用UserController中的modifyUserInfo接口。在該接口中，首先對傳入的數據進行有效性校驗，如檢查郵箱格式是否正確、手機號碼是否符合規(guī)范等。校驗通過后，調用userService.modifyUserInfo(userInfo)將修改后的信息更新到數據庫中。若更新成功，接口返回成功提示信息給前端，前端重新調用getUserInfo方法獲取最新的用戶信息并進行頁面刷新展示；若更新失敗，則返回錯誤信息，前端彈出提示框告知用戶信息修改失敗及原因。圖4.14查看個人信息圖4.15修改個人信息4.2管理員的詳細設計管理員的操作主要有登錄，對日志、分類、標簽、公告、用戶的增刪改查操作，對評論和點贊的查看和刪除操作，個人信息的修改。4.2.1日志管理在日志管理頁面，前端調用LogController中的接口getLogList獲取日志列表與普通用戶的論壇功能相似，不同的是多了幾個查詢條件包括日志標題、記錄日期、標簽、分類。編輯操作先調用LogController的getLogDetail進行渲染頁面，修改后調用LogController的modifyLog接口進行修改。查看操作和刪除操作也與普通用戶中的操作一致。圖4.16日志管理模塊4.2.2日志分析日志分析與普通用戶的操作大多一致，不同之處在于管理員分析頁面是所有用戶發(fā)布的日志的分析趨勢等，且沒有近三篇發(fā)表日志的展示，其他均與普通用戶無區(qū)別。4.2.3標簽、分類管理管理員可以看到所有用戶所添加的標簽與分類，沒有添加操作，其它刪改查操作與普通用戶大致相同。圖4.17標簽管理模塊圖4.18分類管理模塊4.2.5評論管理管理員可以看到所有用戶發(fā)表的所有評論，可以進行刪除，刪除操作與普通用戶一致。圖4.19評論管理模塊4.2.6點贊管理管理員可以看到所有的點贊信息，可以進行刪除，操作與普通用戶一致。圖4.20點贊管理模塊4.2.7通知公告管理員可以對通知公告進行增刪改查操作，添加時前端將收集的公告信息form表單進行提交調用NoticeController的addNotice接口，在接口中調用noticeService.addNotice(notice)方法進行添加公告；修改時，調用NoticeController的getNoticeDetail(notice)方法先獲取公告原先的詳細信息，修改后，前端發(fā)送請求將新的表單form提交調用后端NoticeController的modifyNotcie(notice)接口，在接口中調用noticeService.modifyNotice(notice)方法進行修改公告，成功后返回成功信息。刪除操作，點擊刪除按鈕，前端向后端發(fā)送請求調用后端NoticeController的ba