基于SpringBoot和Vue3的個(gè)人博客系統(tǒng)摘要隨著互聯(lián)網(wǎng)用戶對內(nèi)容分享需求的增長，傳統(tǒng)博客系統(tǒng)因架構(gòu)老舊已經(jīng)難以滿足現(xiàn)代輕量化需求。因此，本文設(shè)計(jì)并實(shí)現(xiàn)了一套基于SpringBoot和Vue3的高性能博客系統(tǒng)。系統(tǒng)采用模塊化設(shè)計(jì)，劃分為用戶和管理員兩大功能模塊，包含用戶管理、文章發(fā)布、評論互動(dòng)等核心功能，通過分層架構(gòu)顯著降低系統(tǒng)耦合度。實(shí)踐表明，本文所采用的框架模式運(yùn)行高效、功能完善，有效支持博文創(chuàng)作與用戶互動(dòng)，并具有良好的可擴(kuò)展性。本文不僅驗(yàn)證了SpringBoot框架的技術(shù)優(yōu)勢，更為個(gè)人博客系統(tǒng)的輕量化設(shè)計(jì)提供了實(shí)踐參考，具有顯著的推廣應(yīng)用價(jià)值。關(guān)鍵詞博客系統(tǒng)；SpringBoot框架；模塊化設(shè)計(jì)；輕量化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章緒論 第二章系統(tǒng)開發(fā)技術(shù)本博客系統(tǒng)的整體設(shè)計(jì)，基于B/S架構(gòu)，而對于選擇了B/S架構(gòu)的系統(tǒng)設(shè)計(jì)，選擇適合的框架技術(shù)和設(shè)計(jì)一套規(guī)范、清晰的數(shù)據(jù)庫表設(shè)計(jì)尤為重要。關(guān)乎著系統(tǒng)本身的整體性能，如穩(wěn)定性，拓展性等。本章闡述所選開發(fā)框架及其作用以及數(shù)據(jù)庫系統(tǒng)的流程與庫表設(shè)計(jì)。2.1后臺(tái)開發(fā)技術(shù)2.1.1SpringBoot框架SpringBoot作為當(dāng)下Java企業(yè)級開發(fā)里頗為主流的輕量級框架，秉持“約定優(yōu)于配置”的設(shè)計(jì)理念，極大程度簡化了傳統(tǒng)Web應(yīng)用的初始搭建以及開發(fā)流程，此框架內(nèi)部嵌入了Tomcat、Jetty等Servlet容器，開發(fā)者可迅速搭建出可獨(dú)立運(yùn)行且適用于生產(chǎn)環(huán)境的應(yīng)用程序，有效降低了項(xiàng)目部署的復(fù)雜程度[3]。在技術(shù)實(shí)現(xiàn)方面，SpringBoot借助智能的自動(dòng)配置機(jī)制以及starter依賴管理，將SpringMVC、SpringData、MyBatis等常用開發(fā)組件進(jìn)行無縫集成，并且還提供對Redis、RabbitMQ等主流中間件的開箱即用支持，它所內(nèi)置的健康檢查、性能監(jiān)控等功能模塊，可為系統(tǒng)運(yùn)維提供一套完整的解決方案。相較于傳統(tǒng)的JavaWeb框架而言，SpringBoot有如下一些較為十分突出的優(yōu)勢：(1)極簡開發(fā)：借助自動(dòng)化配置來消除數(shù)量眾多的配置文件，這樣一來開發(fā)者只需將精力集中在業(yè)務(wù)邏輯的實(shí)現(xiàn)方面；(2)生態(tài)完善：可與Spring技術(shù)生態(tài)實(shí)現(xiàn)完美的兼容性，并且可以較為輕松地朝著微服務(wù)架構(gòu)的方向進(jìn)行擴(kuò)展；(3)部署高效：支持打包為單一可執(zhí)行JAR，配合多環(huán)境配置實(shí)現(xiàn)快速部署；(4)擴(kuò)展靈活：模塊化設(shè)計(jì)支持按需引入功能組件，滿足不同規(guī)模項(xiàng)目需求。經(jīng)本系統(tǒng)實(shí)踐證明使用SpringBoot進(jìn)行JavaWeb的開發(fā)，可以免去大量的配置文件的需求。相比于傳統(tǒng)的Servlet框架的Web項(xiàng)目，提高了至少30%的開發(fā)時(shí)間[4]。并且SpringBoot框架的業(yè)界生態(tài)環(huán)境良好，配合著框架本身的依賴導(dǎo)入功能，可以十分輕松對于整體進(jìn)行功能插件的導(dǎo)入和更新，對于本博客系統(tǒng)以后的功能的拓展性有著重要的幫助。綜合多方面的考慮，選擇SpringBoot框架為基礎(chǔ)，集成其他功能框架來進(jìn)行系統(tǒng)開發(fā)。2.1.2MyBatis框架MyBatis作為主流的Java持久層框架，通過XML的注解方式實(shí)現(xiàn)對象-關(guān)系映射，兼具靈活性和易用性。其核心優(yōu)勢體現(xiàn)在：(1)簡化開發(fā)：提供直觀的API和簡潔的配置，顯著降低數(shù)據(jù)庫操作復(fù)雜度；(2)松耦合設(shè)計(jì)：分離SQL與Java代碼，通過XML注解配置提升可維護(hù)性；(3)靈活可控：支持自定義SQL編寫，滿足復(fù)雜業(yè)務(wù)場景需求；(4)強(qiáng)兼容性：無縫集成Spring等主流框架，豐富的插件生態(tài)提升開發(fā)效率。MyBatis獨(dú)特的SQL優(yōu)化能力與結(jié)果集自動(dòng)映射機(jī)制，在保證性能的同時(shí)大幅提升代碼可讀性，成為現(xiàn)代Java應(yīng)用持久層的優(yōu)選方案。同時(shí)SpringBoot框架有MyBatis專屬的依賴，兩者相配合能大幅提高的開發(fā)速度，以及保證系統(tǒng)結(jié)構(gòu)的完整[5]。綜上，MyBatis這套技術(shù)框架有著成熟的功能適配性，兩者結(jié)合進(jìn)行開發(fā)，對于本博客系統(tǒng)的整體后端開發(fā)速度、流程、以及分層設(shè)計(jì)有著相當(dāng)大的幫助。所以本博客系統(tǒng)選擇了這套后端開發(fā)架構(gòu)，有著嚴(yán)謹(jǐn)?shù)倪壿嫼屠碚撝С帧?.2前端開發(fā)技術(shù)2.2.1Vue技術(shù)Vue作為一款漸進(jìn)式前端框架，以其輕量高效和易用性成為現(xiàn)代Web開發(fā)的主流選擇。其核心優(yōu)勢包括：(1)響應(yīng)式數(shù)據(jù)綁定：基于數(shù)據(jù)驅(qū)動(dòng)的視圖渲染，自動(dòng)同步DOM與數(shù)據(jù)狀態(tài)；(2)組件化開發(fā)：通過可復(fù)用的組件構(gòu)建用戶界面，提升代碼復(fù)用性和可維護(hù)性；(3)漸進(jìn)式架構(gòu)：可靈活應(yīng)用于項(xiàng)目局部或整體，與其他技術(shù)棧協(xié)同開發(fā)。Vue框架的輕量化和組件化開發(fā)的優(yōu)勢，以及豐富且功能完善的第三方組件的支持，兩者相互配合，降低了前端網(wǎng)頁開發(fā)的門檻，并且極大提高了Web項(xiàng)目的前端網(wǎng)頁的開發(fā)速度[6]。2.2.2ElementUIElementUI是一套基于Vue的桌面端組件庫，為開發(fā)者提供豐富且高質(zhì)量的UI組件。其主要特點(diǎn)包括：(1)組件豐富：提供表單、表格、彈窗等常用組件，覆蓋大部分業(yè)務(wù)場景；(2)設(shè)計(jì)規(guī)范：遵循統(tǒng)一的視覺風(fēng)格和交互邏輯，保證用戶體驗(yàn)一致性；(3)配置靈活：支持深度自定義主題和組件樣式，滿足個(gè)性化需求；(4)開發(fā)高效：完善的文檔和示例代碼，顯著提升前端開發(fā)效率。ElementUI通過模塊化的組件設(shè)計(jì)和友好的API，使開發(fā)者能夠快速構(gòu)建專業(yè)的企業(yè)級后臺(tái)管理系統(tǒng)，是Vue技術(shù)棧中最受歡迎的UI框架之一。2.3數(shù)據(jù)庫系統(tǒng)數(shù)據(jù)庫系統(tǒng)是JavaWeb項(xiàng)目得以運(yùn)行的基礎(chǔ)，沒有良好的數(shù)據(jù)庫架構(gòu)，就不會(huì)有一個(gè)能夠健壯運(yùn)行的系統(tǒng)。一個(gè)好的數(shù)據(jù)庫表的設(shè)計(jì)對于系統(tǒng)本身的整體功能拓展性，以及后續(xù)開發(fā)有著重要作用。2.3.1MySQLMySQL身為極為流行的開源關(guān)系型數(shù)據(jù)庫，和JavaWeb項(xiàng)目有著天然適配方面的優(yōu)勢，它所有的輕量級特質(zhì)以及高性能表現(xiàn)，讓其成為SpringBoot等JavaWeb框架優(yōu)先選用的數(shù)據(jù)存儲(chǔ)方案，MySQL運(yùn)用JDBC標(biāo)準(zhǔn)接口，與Java語言的數(shù)據(jù)庫訪問層實(shí)現(xiàn)了完美兼容，開發(fā)者可借助Hibernate、MyBatis等ORM框架達(dá)成高效的數(shù)據(jù)庫操作[7]。在Web應(yīng)用場景當(dāng)中，MySQL的事務(wù)ACID特性對數(shù)據(jù)一致性起到了保障作用，其經(jīng)過優(yōu)化的InnoDB存儲(chǔ)引擎可有效地支撐高并發(fā)訪問。對于JavaWeb項(xiàng)目里常見的分頁查詢以及復(fù)雜關(guān)聯(lián)等需求，MySQL提供了完善的SQL語法支持以及查詢優(yōu)化器，借助主從復(fù)制、分庫分表等方案，MySQL可以隨著JavaWeb應(yīng)用規(guī)模的擴(kuò)大而靈活地進(jìn)行演進(jìn)。MySQL與Java生態(tài)工具的深度整合，SpringBoot框架有著對于MySQL的專屬連接池的支持，MyBatis框架動(dòng)態(tài)SQL支持等等，進(jìn)一步的簡化的數(shù)據(jù)持久層的開發(fā)。同時(shí)MySQL良好的開發(fā)社區(qū)，為其提供了多種可視化的工具，為項(xiàng)目后期的運(yùn)維提供了便利。2.3.2RedisRedis作為一款高性能的內(nèi)存數(shù)據(jù)庫，在本博客系統(tǒng)里得到了充分整合，被用于熱點(diǎn)文章緩存，成功解決了高并發(fā)訪問情況下的數(shù)據(jù)庫壓力問題，本文采用了“讀寫分離+多級緩存”架構(gòu)設(shè)計(jì)[8]。當(dāng)用戶對熱點(diǎn)文章發(fā)起請求時(shí)，系統(tǒng)會(huì)先去查詢Redis緩存，要是可命中，就直接返回，要是沒有命中，就再從MySQL讀取，并且憑借Spring自動(dòng)完成緩存回填。本系統(tǒng)使用Redis中的緩存技術(shù)，來達(dá)到了快速響應(yīng)前端請求的效果，并減少了請求對于數(shù)據(jù)庫系統(tǒng)的讀寫訪問次數(shù)。假設(shè)在有高并發(fā)的場景下，本系統(tǒng)可以憑借這套MySQL-Redis的讀寫訪問流程，可以保證網(wǎng)頁的快速渲染和響應(yīng)，并將MySQL數(shù)據(jù)庫的讀寫壓力控制在較低的水平[9]，極大的提高了本系統(tǒng)的健壯性與綜合性能。第三章可行性分析與需求分析本章將闡述系統(tǒng)整套技術(shù)選型的功能模塊的劃分，以及進(jìn)行劃分的用戶需求依據(jù)。在技術(shù)選型層面，基于對現(xiàn)代Web應(yīng)用開發(fā)趨勢進(jìn)行選型。在功能模塊劃分方面，遵循"高內(nèi)聚、低耦合"的設(shè)計(jì)原則[10]，將系統(tǒng)劃分為用戶端和管理端兩大核心模塊，進(jìn)行深入需求分析。3.1技術(shù)可行性目前業(yè)界對于JavaWeb項(xiàng)目開發(fā)的技術(shù)成熟度與生態(tài)支持相當(dāng)完善。本系統(tǒng)基于快速開發(fā)、易于維護(hù)、性能良好的原則進(jìn)行了如下的技術(shù)選型。SpringBoot：作為當(dāng)前主流的JavaWeb開發(fā)框架，具備完善的開發(fā)工具鏈，豐富的starter依賴和活躍的社區(qū)支持，能夠快速構(gòu)建RESTfulAPI和微服務(wù)架構(gòu)。MyBatis：有靈活性的ORM框架，再加上PageHelper分頁插件以及動(dòng)態(tài)SQL支持，可簡化持久層開發(fā)工作。Vue：漸進(jìn)式前端框架結(jié)合ElementUI等組件庫可有效開發(fā)響應(yīng)式管理后臺(tái)以及用戶界面，并且它和SpringBoot天生適配。MySQL：成熟的關(guān)系型數(shù)據(jù)庫有支持事務(wù)ACID特性的能力，借助MyBatis的動(dòng)態(tài)SQL以及緩存機(jī)制，也就是二級緩存加上Redis，可對復(fù)雜查詢性能給予優(yōu)化。Redis：內(nèi)存數(shù)據(jù)庫可為熱點(diǎn)數(shù)據(jù)如文章閱讀量、排行榜等提供高速緩存服務(wù)，并且支持借助發(fā)布/訂閱模式來達(dá)成實(shí)時(shí)通知這一功能。綜上，所選用的技術(shù)方案皆是業(yè)界普遍采用的主流方式，各個(gè)組件之間的兼容性在諸多項(xiàng)目中得到了驗(yàn)證，生態(tài)工具鏈完備，技術(shù)方面的風(fēng)險(xiǎn)相對較低。并且本人有著多次JavaWeb項(xiàng)目開發(fā)經(jīng)驗(yàn)，從最底層數(shù)據(jù)庫到前后端代碼開發(fā)再到整體的部署運(yùn)行都有著豐富的實(shí)踐基礎(chǔ)，所以本項(xiàng)目在技術(shù)上完全可行。3.2運(yùn)行可行性考慮到市面常見的博客平臺(tái)，每日的用戶的流量巨大，所以本系統(tǒng)采用了Redis來減輕MySQL的訪問壓力。Vue框架的響應(yīng)式的布局方案，可以完全的適配移動(dòng)端網(wǎng)頁的瀏覽，用戶體驗(yàn)并不輸于采用C/S架構(gòu)的系統(tǒng)[11]。當(dāng)用戶打開博客網(wǎng)站時(shí)，前端自動(dòng)發(fā)起獲取數(shù)據(jù)的請求，請求到達(dá)后端時(shí)由SpringBoot框架分發(fā)請求到相應(yīng)控制器方法，再由MyBatis框架獲取數(shù)據(jù)庫中的數(shù)據(jù)，返回給控制器，由控制器將數(shù)據(jù)進(jìn)行統(tǒng)一的封裝后返回給前端，最后由前端將數(shù)據(jù)渲染到網(wǎng)頁視圖。之后用戶所有的請求都是會(huì)基于這樣的一套流程來進(jìn)行響應(yīng)。如過發(fā)生錯(cuò)誤，將有后端統(tǒng)一封裝并解析，如數(shù)據(jù)不存在、訪問超時(shí)等，都做了相對應(yīng)的錯(cuò)誤返回接口，并記錄錯(cuò)誤日志。極大的可以保證在突發(fā)錯(cuò)誤的情況下用戶的使用體驗(yàn)，并且也能夠幫助系統(tǒng)維護(hù)人員對于錯(cuò)誤的排查與修復(fù)，提高了系統(tǒng)的整體運(yùn)行時(shí)的健壯性。綜上所訴，本系統(tǒng)的業(yè)務(wù)流程設(shè)計(jì)嚴(yán)謹(jǐn)規(guī)范，可拓展性強(qiáng)，運(yùn)行時(shí)穩(wěn)定性有保障。面對故障情況也有著快速修復(fù)的保證。3.3需求分析參考市面上的成熟的博客系統(tǒng)以及業(yè)務(wù)流程，將系統(tǒng)劃分出用戶和管理員這兩大模塊，并基于這兩大模塊進(jìn)行功能的再次分析。本文同樣劃分出用戶于管理員并對其需求進(jìn)行了深入分析。3.3.1用戶需求分析基本功能需求：(1)用戶注冊與登錄：支持賬號密碼注冊。(2)個(gè)人信息管理：包括個(gè)人資料修改、頭像設(shè)置等功能。(3)博客文章管理：支持文章的創(chuàng)建、編輯、刪除及分類管理?；?dòng)功能需求：(1)文章收藏：用戶可收藏感興趣的文章。(2)評論功能：支持對文章發(fā)表評論及回復(fù)他人評論。3.3.2管理員需求分析用戶管理需求：(1)用戶信息查看：包括根據(jù)篩選信息查找用戶。(2)用戶信息管理：對用戶進(jìn)行信息修改、刪除、增加等操作。內(nèi)容管理需求：(1)全站博文管理功能：對博文進(jìn)行刪除、修改等操作。(2)文章分類管理功能：新增、刪除文章分類。(3)公告發(fā)布與管理功能：發(fā)布、更換系統(tǒng)公告。系統(tǒng)管理需求：(1)熱點(diǎn)信息緩存功能：編輯熱點(diǎn)信息并發(fā)布。第四章系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)本章詳細(xì)闡述系統(tǒng)的功能模塊劃分、數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計(jì)以及功能的具體實(shí)現(xiàn)，并通過流程圖直觀展示核心業(yè)務(wù)流程，為系統(tǒng)實(shí)現(xiàn)提供完整的設(shè)計(jì)方案和技術(shù)依據(jù)。4.1用戶模塊設(shè)計(jì)4.1.1用戶模塊整體設(shè)計(jì)用戶模塊從功能上可以劃分為賬戶功能、內(nèi)容交互、個(gè)人中心這三大模塊。本文將依次對其分析。用戶模塊整體設(shè)計(jì)如圖4.1所示。圖4.1用戶模塊圖4.1.2登錄注冊模塊設(shè)計(jì)登錄和注冊模塊是博客平臺(tái)網(wǎng)站的起始，大部分的功能如發(fā)布博客、收藏等等功能都要用戶經(jīng)過登錄后才能被用戶使用。本系統(tǒng)的登錄流程為用戶輸入用戶名和密碼后，前端將用戶名和密碼傳給后端，后端在數(shù)據(jù)庫用戶表中通過用戶名來匹配密碼，進(jìn)行登錄校驗(yàn)，并返回登錄成功與否。登錄流程圖如圖4.2所示。圖4.2登錄流程圖對于注冊功能，加強(qiáng)了用戶個(gè)人信息的檢驗(yàn)，如檢驗(yàn)了聯(lián)系方式的位數(shù)，電子郵箱的格式，和用戶昵稱重復(fù)問題。在用戶點(diǎn)擊注冊時(shí)，后端依次查詢用戶名是否重復(fù)，如重復(fù)則返回已注冊的提示信息。再檢驗(yàn)聯(lián)系方式位數(shù)和內(nèi)容是否合規(guī)，最后檢驗(yàn)密碼重復(fù)輸入是否一致，如一致則向用戶表中插入相對應(yīng)的信息，并返回注冊成功。由于登錄注冊兩功能緊密聯(lián)系，所以共用用戶表，上文已經(jīng)展示。注冊流程圖如4.3所示。圖4.3用戶注冊流程4.1.3博客發(fā)布模塊設(shè)計(jì)博客發(fā)布模塊作為博客系統(tǒng)的核心功能組件，其設(shè)計(jì)直接關(guān)系到用戶創(chuàng)作體驗(yàn)和內(nèi)容質(zhì)量。該模塊基于用戶實(shí)際使用場景進(jìn)行了深度優(yōu)化，在保證功能完整性的同時(shí)兼顧了靈活性與規(guī)范性。如下圖所示，用戶在進(jìn)行發(fā)布時(shí)可以自定標(biāo)題、圖片、簡介等等。文章標(biāo)題和文章分類這兩個(gè)屬性考慮到實(shí)際情形，選取這兩個(gè)屬性為核心屬性。在實(shí)際使用沒有標(biāo)題和分類的博客是不存在的，也是不合理的。如果不做空輸入校驗(yàn)，也會(huì)影響博文的檢索功能，這不利于系統(tǒng)的規(guī)范性。因此這兩項(xiàng)都做了內(nèi)容輸入校驗(yàn)，強(qiáng)制用戶輸入內(nèi)容。而其他如簡述、圖片等非必要屬性是可以省略的內(nèi)容，就無需做輸入校驗(yàn)，也避免了發(fā)布博客時(shí)過于繁瑣。用戶ID和用戶昵稱由存儲(chǔ)在會(huì)話信息中的信息自動(dòng)填充。這種設(shè)計(jì)既滿足了用戶的日常簡易發(fā)布需求，又能支持的長篇博文創(chuàng)作。同時(shí)考慮到長篇博文的需求，在文章內(nèi)容輸入的功能中加入了富文本編輯器的設(shè)計(jì)，可以自定義字體顏色、標(biāo)題、插入圖片、超鏈接等。這項(xiàng)功能可以極大提高用戶的閱讀體驗(yàn)。發(fā)布流程圖如圖4.4所示。圖4.4博客發(fā)布流程圖4.1.3用戶交互模塊既然有博客發(fā)布就肯定會(huì)有，博文的點(diǎn)擊、閱讀、點(diǎn)贊、收藏、評論等等一系列的用戶與用戶之間的交互需求。所以這些功能是一個(gè)成熟的博客平臺(tái)不可缺失的功能，這直接影響到用戶的使用體驗(yàn)。本文將這些功能進(jìn)行歸納并闡述。對于點(diǎn)贊數(shù)、點(diǎn)踩數(shù)和點(diǎn)擊次數(shù)都是由用戶點(diǎn)擊觸發(fā)相對應(yīng)的事件后，由前端發(fā)起請求到后端，后端根據(jù)傳來信息解析出文章標(biāo)題，在文章表中查詢該列數(shù)據(jù)，并修改相對應(yīng)的數(shù)據(jù)。所以這三個(gè)屬性與文章關(guān)聯(lián)性強(qiáng)，被設(shè)計(jì)到文章表中。而對于收藏博客和評論博客，這兩個(gè)功能直接與雙方用戶和文章之間強(qiáng)關(guān)聯(lián)，所以有必要設(shè)計(jì)出新的表，來體現(xiàn)其之間的關(guān)系。用戶ID和文章標(biāo)題作為表連接的關(guān)鍵元素。具體數(shù)據(jù)查詢定位的流程如圖4.5所示。圖4.5用戶交互關(guān)系圖4.1.5個(gè)人中心模塊對于個(gè)人中心來說最基本就是修改密碼、修改個(gè)人信息的功能。流程圖4.6如所示。圖4.6修改信息流程圖而本博客系統(tǒng)從實(shí)際需求出發(fā)又額外的增加了，歷史博文列表、博文修改、博文刪除功能。而對于博主來說，有著專門的接口來查看自己博客下收到到的評論，自己發(fā)布的博客可以進(jìn)行回復(fù)和刪除評論的操作。如圖4.7所示。圖4.7個(gè)人中心流程圖4.2管理員模塊設(shè)計(jì)4.2.1管理員模塊整體設(shè)計(jì)對于成熟博客系統(tǒng)設(shè)計(jì)，完善的后臺(tái)管理員模塊是十分重要的一個(gè)模塊。該模塊直接關(guān)系到用戶管理、博文管理、系統(tǒng)公告發(fā)布等等重要功能的平穩(wěn)運(yùn)行。雖然后臺(tái)管理員系統(tǒng)不直接影響用戶對于博客平臺(tái)的瀏覽和正常使用，但是如果沒有該模塊，對于系統(tǒng)整體的平穩(wěn)運(yùn)行和長期發(fā)展是至關(guān)重要的。整體劃分圖如圖4.8所示。圖4.8管理模塊圖4.2.2用戶管理模塊設(shè)計(jì)對于管理員這一角色來說，首先最重要的功能便是用戶管理，該功能不僅有利于系統(tǒng)的維護(hù)，更有利于系統(tǒng)的運(yùn)行。當(dāng)管理員進(jìn)入后臺(tái)頁面時(shí)，前端發(fā)起請求獲取數(shù)據(jù)庫中最新的所有用戶的信息，并同步到頁面上。管理員便可以對用戶信息進(jìn)行修改、刪除、或者手動(dòng)添加用戶等等操作。流程圖如圖4.9所示。圖4.9用戶管理流程圖4.2.3博文管理模塊設(shè)計(jì)作為博客系統(tǒng)，系統(tǒng)內(nèi)的最重要內(nèi)容便是博文，也可以說是博文支撐了整個(gè)博客系統(tǒng)。所以博文管理功能對管理員來說是不可少的。當(dāng)管理員進(jìn)入到了博文管理界面時(shí)，前端會(huì)發(fā)起請求獲取數(shù)據(jù)庫中最新的所有博文信息，并展示在頁面上，方便管理員統(tǒng)一進(jìn)行管理。如刪除、修改、新增等。而博文管理又能反向的定位到用戶，來對用戶進(jìn)行操作等。這樣的設(shè)計(jì)功能邏輯自洽，流程完善更方便了管理員對于整體信息的管理。如圖4.10所示。圖4.10博文管理流程圖4.2.4系統(tǒng)公告模塊設(shè)計(jì)考慮到管理員有著如發(fā)布網(wǎng)站活動(dòng)、征集相關(guān)主題博客等等的面向所有用戶發(fā)布信息的需求。設(shè)計(jì)出系統(tǒng)公告模塊，管理員可以在公告管理頁面進(jìn)行編輯公告并發(fā)布。系統(tǒng)公告同樣支持圖片、和富文本，來提升用戶的閱讀體驗(yàn)。當(dāng)用戶登錄時(shí)，便會(huì)獲取最新的系統(tǒng)公告。如圖4.11所示。圖4.11系統(tǒng)公告管理流程圖4.2.5輪播圖模塊設(shè)計(jì)在博客系統(tǒng)首頁，會(huì)有輪播圖的展示，主要展示如當(dāng)前熱點(diǎn)話題、熱點(diǎn)信息等等，以便激發(fā)用戶的創(chuàng)作交流欲望。所以，管理員不定期的更新首頁輪播圖對于本博客系統(tǒng)來說是相當(dāng)有必要的。在后臺(tái)界面管理員可以進(jìn)行輪播圖的上傳，上傳后用戶便可以在首頁進(jìn)行瀏覽。如圖4.12所示。圖4.12首頁輪播圖管理流程圖4.2.6熱點(diǎn)緩存模塊設(shè)計(jì)博客系統(tǒng)作為一個(gè)有著高并發(fā)場景的系統(tǒng)，所以設(shè)計(jì)出一個(gè)緩存模塊來進(jìn)行數(shù)據(jù)庫壓力是很有必要的事情。而緩存信息的裝填則由管理員來實(shí)現(xiàn)。管理員進(jìn)入到緩存管理界面時(shí)，可以在界面中進(jìn)行裝填緩存信息，裝填后點(diǎn)擊緩存，前端便會(huì)帶著緩存信息到達(dá)后端，有后端將緩存信息寫入到Redis數(shù)據(jù)庫中。這樣當(dāng)熱點(diǎn)信息接收到高并發(fā)的請求時(shí)，可能通過Redis來分流數(shù)據(jù)庫的壓力[12]。所以，到達(dá)MySQL數(shù)據(jù)庫的請求大部分都是并發(fā)較低的寫入、刪除等請求，極大的減少了MySQL連接池的占用[13]。如圖4.13所示。圖4.13緩存信息管理流程圖4.3數(shù)據(jù)庫設(shè)計(jì)與實(shí)現(xiàn)4.3.1數(shù)據(jù)庫E-R圖設(shè)計(jì)數(shù)據(jù)庫時(shí)，首先需要考慮到的時(shí)實(shí)體的屬性，以及各個(gè)實(shí)體之間的關(guān)系。一個(gè)設(shè)計(jì)良好的數(shù)據(jù)庫架構(gòu)，必然是邏輯清晰，結(jié)構(gòu)明了的。明確了實(shí)體的屬性之后，對于接下來的數(shù)據(jù)庫表設(shè)計(jì)有這很大的幫助[14]。本系統(tǒng)主要?jiǎng)澐殖鲇脩簟⒐芾?、博文這三大主實(shí)體，又基于這三大主實(shí)體設(shè)計(jì)出若干實(shí)體。并圍繞這些實(shí)體進(jìn)行了數(shù)據(jù)庫表的設(shè)計(jì)。用戶實(shí)體如圖4.14所示。用戶實(shí)體中的用戶ID屬性為主鍵，便于后續(xù)通過ID快速定位用戶數(shù)據(jù)。如用戶登錄和管理員查找用戶時(shí)都需要用到用戶ID。其余的用戶屬性如年齡、性別等屬性，主要用于存儲(chǔ)用戶注冊時(shí)填入的個(gè)人信息。圖4.14用戶實(shí)體E-R圖管理員實(shí)體如圖4.15所示。其中管理員ID作為主鍵來標(biāo)識管理員。密碼屬性作為管理員登錄后臺(tái)系統(tǒng)的校驗(yàn)屬性。圖4.15管理員實(shí)體E-R圖博文實(shí)體如圖4.16所示。其中，文章ID作為博文實(shí)體的主鍵，用于檢索、標(biāo)記博文。創(chuàng)作者屬性用于對應(yīng)創(chuàng)作者。評論屬性用于記錄該博文下的用戶評論。內(nèi)容、點(diǎn)擊數(shù)、分類等屬性存儲(chǔ)博文基本信息。圖4.1博文實(shí)體E-R圖公告實(shí)體如圖4.17所示。公告編號屬性作為主鍵，用于檢索、標(biāo)記公告。公告標(biāo)題、公告內(nèi)容等屬性用于存儲(chǔ)公告相關(guān)的基本信息。圖4.17公告實(shí)體E-R圖收藏夾實(shí)體如圖4.18所示。收藏夾編號作為主鍵，用于標(biāo)記收藏夾。收藏者屬性用于存儲(chǔ)用戶信息，用于對應(yīng)收藏者。收藏文章用于存儲(chǔ)文章信息。圖4.18收藏夾E-R圖4.3.2數(shù)據(jù)庫表設(shè)計(jì)在理清系統(tǒng)結(jié)構(gòu)，明確了實(shí)體的基礎(chǔ)上，就要著手?jǐn)?shù)據(jù)庫表的設(shè)計(jì)。要根據(jù)E-R模型設(shè)計(jì)出每個(gè)表中每個(gè)字段的名字、類型、長度等等。不僅要一一對應(yīng)，還要能體現(xiàn)出實(shí)體的屬性，并能夠準(zhǔn)確的應(yīng)用到系統(tǒng)之中[15]。博客系統(tǒng)要始終圍繞這博客來進(jìn)行開發(fā)，而博客抽象到最底層，則是數(shù)據(jù)庫庫表中的數(shù)據(jù)。所以數(shù)據(jù)庫表的設(shè)計(jì)是極為重要的，沒有一個(gè)良好的數(shù)據(jù)庫底層設(shè)計(jì)，那么這個(gè)系統(tǒng)不能算是成功的。本節(jié)將以數(shù)據(jù)字典的形式進(jìn)行展示數(shù)據(jù)庫表設(shè)計(jì)。用戶表如表4.1所示。設(shè)置單列自增主鍵ID。其中，用戶賬戶、用戶昵稱的數(shù)據(jù)重復(fù)問題，在后端進(jìn)行數(shù)據(jù)庫寫入時(shí)進(jìn)行重復(fù)查詢來進(jìn)行處理。其中，gender、age等字段用于存儲(chǔ)用戶個(gè)人信息，在注冊時(shí)進(jìn)行寫入。picture、about字段設(shè)置為允許為空，后續(xù)用戶可以自行決定是否設(shè)置頭像和簡介。addtime字段記錄用戶創(chuàng)建時(shí)間，由數(shù)據(jù)庫自動(dòng)寫入。表4.1用戶表名稱類型是否為null注釋idintnotnull自增主鍵userIdvacharnotnull用戶賬戶userNamevacharnotnull用戶昵稱passwordvarcharnotnull用戶密碼gendervarcharnotnull性別ageintnotnull年齡phonevarcharnotnull聯(lián)系方式emailvarcharnotnull郵箱picturevarcharnull頭像存放路徑aboutvarcharnull用戶簡介addTimetimenotnull創(chuàng)建時(shí)間博文表如表4.2所示，設(shè)置單列自增主鍵ID，作為唯一文章標(biāo)號。存儲(chǔ)博文信息，如內(nèi)容、配圖、時(shí)間等等。標(biāo)題重復(fù)等數(shù)據(jù)問題在后端進(jìn)行處理。pricture和about字段設(shè)置為允許為空，由用戶自行決定是否為博文設(shè)置配圖和簡介。實(shí)際應(yīng)用中，會(huì)存在博文創(chuàng)建成功，但是還未有點(diǎn)擊發(fā)生的情況，所以clickTime字段設(shè)置為允許為空。titile、message等字段用于存儲(chǔ)博文的基本信息。表4.2博文表名稱類型是否為null注釋idintnotnull自增主鍵文章編號titilevacharnotnull文章標(biāo)題tagvacharnotnull文章分類pricturevarcharnull文章配圖存放路徑userIdvarcharnotnull用戶IDuserNamevarcharnotnull用戶昵稱messagevarcharnotnull文章內(nèi)容aboutvarcharnull文章簡介upintnotnull點(diǎn)贊數(shù)downintnotnull點(diǎn)踩數(shù)clickintnotnull點(diǎn)擊數(shù)clickTimetimenull最近點(diǎn)擊時(shí)間addTimetimenotnull創(chuàng)建時(shí)間管理員表如表4.3所示?？紤]到管理員這一實(shí)體的特殊性，不存在自行注冊的場景。所以rootId作為主鍵，password作為通行密碼，由管理人員設(shè)置填入。表4.3管理員表名稱類型是否為null注釋rootIdvarcharnotnull主鍵管理員IDpasswordvarcharnotnull管理員密碼addTimetimenotnull創(chuàng)建時(shí)間系統(tǒng)公告表如表4.4所示。id字段作為主鍵，用于唯一標(biāo)識公告。考慮到系統(tǒng)公告由管理員發(fā)布，所以將picture設(shè)置為notnull。表4.4系統(tǒng)公告表名稱類型是否為null注釋idintnotnull自增主鍵公告IDtitlevarcharnotnull公告標(biāo)題meaaagevarcharnotnull公告內(nèi)容picturevarcharnotnull公告配圖addTimetimenotnull創(chuàng)建時(shí)間收藏表如表4.5所示。id作為主鍵，用于唯一標(biāo)識收藏信息。userid字段用戶存儲(chǔ)收藏者id，title字段用于存儲(chǔ)被收藏的文章的標(biāo)題。Picture存儲(chǔ)文章的配圖的路徑信息，考慮到存在沒有配圖的博文，所以設(shè)置該字段為允許為空。表4.5收藏表名稱類型是否為null注釋idintnotnull自增主鍵titilevacharnotnull文章標(biāo)題userIdvarcharnotnull用戶IDpicturevarcharnull配圖addTimetimenotnull創(chuàng)建時(shí)間博文評論表如表4.6所示。id字段作為主鍵用于唯一標(biāo)識評論，用于后續(xù)的回復(fù)功能定位評論。title字段存放文章標(biāo)題，用于定位被評論的文章。Commenter和userid分別存儲(chǔ)評論用戶id和被評論用戶id，用于定位查詢。表4.6博文評論表名稱類型是否為null注釋idintnotnull自增主鍵評論編號titilevacharnotnull文章標(biāo)題commentervarcharnotnull評論用戶IDuserIdvarcharnotnull被評論用戶IDcontentvarcharnotnull評論內(nèi)容addTimetimenotnull創(chuàng)建時(shí)間評論回復(fù)表如表4.7所示。id字段作為回復(fù)主鍵。comment字段用于存放評論編號，用戶后續(xù)定位被回復(fù)的評論。userId字段用于存放回復(fù)人的用戶id。表4.7評論回復(fù)表名稱類型是否為null注釋idintnotnull自增主鍵回復(fù)編號commentintnotnull評論IDuserIdvarcharnotnull用戶IDcontentvarcharnotnull內(nèi)容addTimetimenotnull創(chuàng)建時(shí)間4.4用戶模塊實(shí)現(xiàn)4.4.1登錄注冊模塊實(shí)現(xiàn)登錄注冊模塊是用戶正常使用博客系統(tǒng)前的必經(jīng)程序。本系統(tǒng)在登錄時(shí)，將用戶所輸入的信息傳遞到后端驗(yàn)證賬號是否存在、密碼是否正確。后端返回是否登錄成功給前端頁面。具體實(shí)現(xiàn)如圖4.19所示。圖4.19登錄實(shí)現(xiàn)圖注冊實(shí)現(xiàn)在用戶初次注冊，會(huì)收集用戶的個(gè)人信息，并在后端進(jìn)行昵稱重復(fù)檢驗(yàn)和聯(lián)系方式電話、郵箱等格式是否合規(guī)。如圖4.20所示。圖4.20注冊實(shí)現(xiàn)圖4.4.2博文發(fā)布模塊實(shí)現(xiàn)博文的發(fā)布必須要指定標(biāo)題和分類，這兩個(gè)必須填入的字段做了特殊標(biāo)記。支持上傳配圖，以及富文本編輯器來實(shí)現(xiàn)博文內(nèi)容樣式的多樣化表達(dá)。具體實(shí)現(xiàn)如圖4.21所示。圖4.21注冊實(shí)現(xiàn)圖同時(shí)當(dāng)用戶進(jìn)入博文后，會(huì)進(jìn)行博文配圖、簡介、點(diǎn)擊數(shù)等數(shù)據(jù)和博文內(nèi)容的展示。如圖4.22所示。圖4.22博文訪問實(shí)現(xiàn)圖4.4.3用戶交互模塊實(shí)現(xiàn)本博客系統(tǒng)所涉及到的用戶之間交互功能，主要有發(fā)表評論，查看評論、回復(fù)評論等等。當(dāng)點(diǎn)擊進(jìn)入博文后，便可以在博文底部的評論框進(jìn)行評論。具體實(shí)現(xiàn)如圖4.23所示。圖4.23評論實(shí)現(xiàn)圖而用戶也可以看到自己發(fā)布的博文下的評論詳情，可以對其進(jìn)行回復(fù)或刪除等操作。如圖4.24所示。圖4.24評論列表實(shí)現(xiàn)圖當(dāng)用戶點(diǎn)擊回復(fù)，會(huì)跳轉(zhuǎn)到回復(fù)頁面，用戶輸入回復(fù)內(nèi)容時(shí)點(diǎn)擊提交即可回復(fù)。如圖4.25所示。圖4.25評論回復(fù)實(shí)現(xiàn)圖4.4.4個(gè)人中心模塊實(shí)現(xiàn)對于個(gè)人中心來說最不可缺少的功能就是，密碼修改和信息修改。本系統(tǒng)在用戶修改密碼時(shí)進(jìn)行舊密碼的校驗(yàn)，來確保系統(tǒng)的賬號的安全性。如圖4.26所示。圖4.26修改密碼實(shí)現(xiàn)圖修改個(gè)人信息時(shí)是對注冊時(shí)輸入的信息進(jìn)行修改。這里也同樣會(huì)進(jìn)行聯(lián)系方式和郵箱格式的校驗(yàn)。具體實(shí)現(xiàn)如圖4.27所示。圖4.27修改個(gè)人信息實(shí)現(xiàn)圖用戶還可以在個(gè)人中心中查看自己發(fā)布過的歷史博文，并進(jìn)行修改、刪除等等操作。如圖4.28所示。圖4.28博文歷史實(shí)現(xiàn)圖4.5管理員模塊實(shí)現(xiàn)4.5.1用戶管理模塊實(shí)現(xiàn)在管理員登錄之后，點(diǎn)擊用戶管理來獲取全部的用戶信息，可以對其進(jìn)行刪除，修改信息等操作。具體實(shí)現(xiàn)如圖4.29所示。圖4.29用戶管理實(shí)現(xiàn)圖4.5.2文章管理模塊實(shí)現(xiàn)管理員可以對系統(tǒng)內(nèi)全部博文進(jìn)行管理，如刪除、修改等等操作。如圖4.30所示。圖4.30文章管理實(shí)現(xiàn)圖同時(shí)可以修改、增加或刪除文章分類。如圖4.31所示。圖4.31分類管理實(shí)現(xiàn)圖4.5.3系統(tǒng)公告模塊實(shí)現(xiàn)與發(fā)布博文類似，管理員發(fā)布公告必須指定標(biāo)題和配圖，考慮到系統(tǒng)公告同樣有多樣性表達(dá)的需求，文本內(nèi)容同樣支持富文本編輯。如圖4.32所示。圖4.32系統(tǒng)公告實(shí)現(xiàn)圖4.5.4輪播圖模塊實(shí)現(xiàn)考慮到首頁的輪播始終且固定為三張，所以不做增加的功能只進(jìn)行修改。具體實(shí)現(xiàn)如圖4.33所示。圖4.33輪播圖更換實(shí)現(xiàn)圖第五章總結(jié)與展望本文基于SpringBoot集成MyBatis和Vue技術(shù)棧，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)輕量化、高性能的基于B/S架構(gòu)的個(gè)人博客系統(tǒng)。通過對傳統(tǒng)的Servlet框架的博客系統(tǒng)進(jìn)行多方面的分析，如架構(gòu)臃腫、部署復(fù)雜等問題，提出了模塊化設(shè)計(jì)和分層架構(gòu)的解決方案，并以此進(jìn)行了開發(fā)技術(shù)的選選型和功能設(shè)計(jì)，擁有這樣良好的設(shè)計(jì)模式的幫助，來對本博客系統(tǒng)進(jìn)行模塊化的開發(fā)，有效的降低了系統(tǒng)耦合度，提升了可維護(hù)性與