基于Vue+SpringBoot的論壇型搜索網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

基于Vue+SpringBoot的論壇型搜索網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)摘要：因?yàn)榛ヂ?lián)網(wǎng)的快速發(fā)展，網(wǎng)絡(luò)信息井噴式爆發(fā)，很多有用的信息會被淹沒在互聯(lián)網(wǎng)的海洋里，因此創(chuàng)建一個可以快速搜索的網(wǎng)站就很有必要。該網(wǎng)站是一個彌補(bǔ)傳統(tǒng)搜索網(wǎng)站不足的工具，并擁有傳統(tǒng)搜索網(wǎng)站所不具備的優(yōu)勢。它可以提供豐富的網(wǎng)站資源，使用戶可以快速找到他們需要的內(nèi)容；它幫用戶節(jié)省了訪問各種搜索網(wǎng)站的時間REF_Ref2185\r\h[1]。論壇型搜索網(wǎng)站是論壇和搜索網(wǎng)站的結(jié)合，依靠Vue和SpringBoot等技術(shù)來設(shè)計(jì)界面和功能。用戶可以將想輸出的內(nèi)容或想提問的問題發(fā)布到論壇上，其他對此感興趣的用戶可在評論區(qū)發(fā)送自己的觀點(diǎn)。為保證網(wǎng)站環(huán)境，后臺管理系統(tǒng)會有審核員定期審核用戶發(fā)布的信息，對于違規(guī)言論一律刪除。網(wǎng)站的主要功能模塊有論壇模塊、搜索模塊、投稿管理模塊、節(jié)點(diǎn)管理模塊以及后臺管理系統(tǒng)。關(guān)鍵詞：論壇；漸進(jìn)式框架；SpringBoot；MySQLDesignandimplementationofaforum-basedsearchsitebasedonVue+SpringBootAbstract:BecauseoftherapiddevelopmentoftheInternetandtheexplosionofinformationontheInternet,alotofusefulinformationwillbedrownedintheoceanoftheInternet,soitisnecessarytocreateawebsitethatcanbesearchedquickly.Thesiteisatooltomakeupforthelackoftraditionalsearchsitesandhasadvantagesthattraditionalsearchsitesdonothave.Itcanproviderichwebresourcessothatuserscanquicklyfindthecontenttheyneed;ithelpsuserssavetimevisitingvarioussearchsites.Forum-basedsearchsiteisacombinationofaforumandasearchsite,relyingontechnologiessuchasVueandSpringBoottodesigntheinterfaceandfunctionality.Userscanpostthecontenttheywanttoexportorthequestionstheywanttoasktotheforum,andotherinteresteduserscansendtheiropinionsinthecommentsection.Toensurethewebsiteenvironment,thebackendmanagementsystemwillhaveauditorstoregularlyreviewtheinformationpostedbyusersanddeletealltheillegalcomments.Themainfunctionalmodulesofthewebsiteareforummodule,searchmodule,contributionmanagementmodule,nodemanagementmoduleandbackstagemanagementsystem.Keywords:Forum;ProgressiveFramework;SpringBoot;MySQL目錄TOC\o"1-3"\h\u130461緒論 2325111.1項(xiàng)目的背景與意義 2230651.2關(guān)鍵技術(shù)概述 2139821.3開發(fā)工具及開發(fā)環(huán)境 454431.4本文組織結(jié)構(gòu) 491242需求分析 594072.1設(shè)計(jì)目標(biāo) 5233372.2功能需求分析 539502.3性能需求分析 676833概要設(shè)計(jì) 767253.1數(shù)據(jù)庫設(shè)計(jì)與實(shí)現(xiàn) 7283963.1.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計(jì) 741963.1.2數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計(jì) 1068183.2軟件整體概要設(shè)計(jì) 1423453.3軟件模塊概要設(shè)計(jì) 15190043.3.1登錄管理模塊 159533.3.2首頁模塊 15146113.3.3系統(tǒng)管理 16112043.3.4帖子管理 16130283.4界面框架設(shè)計(jì) 17311323.4.1登錄界面風(fēng)格 17256273.4.2首頁界面風(fēng)格 18122483.4.3三種搜索功能界面風(fēng)格展示 2054813.4.4推薦網(wǎng)站界面風(fēng)格展示 2228273.4.5個人中心界面風(fēng)格展示 22299713.4.6投稿管理模塊界面風(fēng)格展示 23236563.4.7后臺管理系統(tǒng)的功能模塊界面風(fēng)格展示 24254914詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn) 26200354.1軟件詳細(xì)設(shè)計(jì)概述 2698694.2軟件詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn) 26188925系統(tǒng)測試 35154005.1測試用例設(shè)計(jì) 35285395.2系統(tǒng)功能測試 3667155.3系統(tǒng)性能測試 38245805.3.1異常測試如下： 38163795.3.2壓力測試如下： 39168495.4測試結(jié)論 39302216總結(jié) 393917參考文獻(xiàn) 4114373致謝 4223685附錄 431緒論1.1項(xiàng)目的背景與意義在數(shù)字科技快速發(fā)展的今天，信息傳播的速度非?？?，所以我們每天都離不開搜索REF_Ref2593\r\h[2]。但對于普通人來說，在海量數(shù)據(jù)里找到真正有用的信息越來越困難。用戶在各種搜索網(wǎng)站中瀏覽到的大多是同質(zhì)化嚴(yán)重的內(nèi)容，造成了非常不便的閱讀體驗(yàn)。因此設(shè)計(jì)并實(shí)現(xiàn)一個論壇型搜索網(wǎng)站就很有必要?；谡搲乃阉骶W(wǎng)站是將其他優(yōu)秀的搜索網(wǎng)站組合在一起，使網(wǎng)絡(luò)工具化和個性化。它們?yōu)榫W(wǎng)站提供了豐富的資源，節(jié)省了在不同搜索網(wǎng)站上搜索信息的時間，并使在不同網(wǎng)站之間導(dǎo)航變得更加容易。這不僅使網(wǎng)上沖浪更有效率，而且將用戶從繁瑣的搜索系統(tǒng)中解放出來?；谡搲乃阉骶W(wǎng)站是補(bǔ)充性的搜索工具，旨在彌補(bǔ)傳統(tǒng)搜索引擎的不足。該網(wǎng)站搭配一個論壇，用戶可以分享想法和提出問題,然后其他感興趣的用戶可以留下評論并相互幫助；可以平衡單個網(wǎng)站的局限性，創(chuàng)造一個友好、可持續(xù)的在線生態(tài)。1.2關(guān)鍵技術(shù)概述網(wǎng)站的實(shí)現(xiàn)需要依賴各種技術(shù)框架和開發(fā)工具，因此選擇合適的技術(shù)框架和開發(fā)工具不僅能提高開發(fā)效率、減輕開發(fā)人員的工作壓力，還能使項(xiàng)目更完整和安全。這里將介紹論壇型搜索網(wǎng)站運(yùn)用到的主要技術(shù)：Vue介紹Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架；Vue的核心庫只關(guān)注視圖層，所以它不僅容易上手，而且非常容易與第三方庫或現(xiàn)有項(xiàng)目集成；一方面，Vue與其現(xiàn)代工具集和許多支持類庫一起，很適合管理復(fù)雜的單頁應(yīng)用程序;另一方面，Vue的設(shè)計(jì)是自下而上逐層實(shí)現(xiàn)的REF_Ref2462\r\h[3]。Vue.js是一個非常好的前端框架，它不需要頻繁地操作DOM元素，使用的是一個虛擬DOM；當(dāng)屬性和狀態(tài)發(fā)生變化時，渲染器會返回一個新的元素樹，然后比較返回的元素樹和最后渲染的元素樹之間的差異，并更新它們，最終渲染出真實(shí)的DOM；Vue通過模型-視圖-視圖模型（MVVM）在UI視圖和應(yīng)用邏輯之間保持清晰的分離；其中模型-視圖-視圖模型（MVVM）的核心是視圖和視圖模型之間的雙向數(shù)據(jù)連接，因此數(shù)據(jù)變化可以自動響應(yīng)到視圖中，使前端開發(fā)更加高效和方便REF_Ref2772\r\h[4]REF_Ref2782\r\h[5]。圖1-1Vue的雙向數(shù)據(jù)綁定原理示意圖SpringBoot介紹SpringBoot是Pivotal團(tuán)隊(duì)的一個新框架，它簡化了初始配置和開發(fā)。Spring是一個非常強(qiáng)大的框架，但它的配置即使對小項(xiàng)目來說也很復(fù)雜，配置問題常常導(dǎo)致異常和低效開發(fā)；為了簡化配置，Pivotal團(tuán)隊(duì)在2013年提出了SpringBoot，這是一個新的基于Spring的框架，使開發(fā)人員可以專注于業(yè)務(wù)邏輯REF_Ref3337\r\h[6]REF_Ref3347\r\h[7]。SpringBoot使用三層架構(gòu)，包括業(yè)務(wù)邏輯層、實(shí)體層和數(shù)據(jù)訪問層REF_Ref3429\r\h[8]。它使用單一的配置文件和相關(guān)的配置類進(jìn)行部署，使項(xiàng)目可以快速創(chuàng)建；它有效地整合了開發(fā)過程中使用的技術(shù)，并提供標(biāo)準(zhǔn)化的配置信息以簡化框架的配置過程REF_Ref3520\r\h[9]REF_Ref3527\r\h[10]。SpringBoot可以與Tomcat、JettyServlet容器集成，自動配置以簡化Maven配置，沒有代碼生成或XML配置REF_Ref3569\r\h[11]REF_Ref3621\r\h[12]。圖1-2SpringBoot組成圖解MySQL數(shù)據(jù)庫介紹MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，是將數(shù)據(jù)存儲在各個表中，而不是將它們?nèi)看鎯υ谝粋€大文件中，從而大大提高了速度和靈活性；MySQL是一個功能強(qiáng)大、效率飛快的開源軟件；MySQL是可以處理數(shù)千條記錄的大型數(shù)據(jù)庫，使用標(biāo)準(zhǔn)化的SQL語言，可以在多個系統(tǒng)上運(yùn)行并支持多種語言REF_Ref3670\r\h[13]。MySQL以表格的形式存儲數(shù)據(jù),只有DOS界面，因此選擇Navicat作為管理工具REF_Ref3719\r\h[14]。圖1-3MySQL原理詳解1.3開發(fā)工具及開發(fā)環(huán)境開發(fā)語言：Java、JavaScript；數(shù)據(jù)庫（及版本）：MySQL5.6.41-winx64；編譯環(huán)境（及版本）：IDEA2021.3.3、VisualStudioCode1.65.2(systemsetup)；操作系統(tǒng)（及版本）：Windows10家庭中文版-22H2；系統(tǒng)開發(fā)的硬件要求：建議使用1024x768最低屏幕分辨率；系統(tǒng)開發(fā)的其他軟件要求：Postman、NavicatPremium15。1.4本文組織結(jié)構(gòu)本次畢業(yè)設(shè)計(jì)的開發(fā)是為了能更方便地在網(wǎng)絡(luò)上搜索想要的信息，集合一些優(yōu)秀的網(wǎng)站，為更多的人提供良好的上網(wǎng)體驗(yàn)，是基于Vue+SpringBoot設(shè)計(jì)的“論壇型搜索網(wǎng)站”。本文主要從需求分析、概要設(shè)計(jì)、詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn)等方面說明，整個內(nèi)容可以分為以下幾個部分：緒論：項(xiàng)目的背景和意義，概述開發(fā)所需的關(guān)鍵技術(shù)，開發(fā)工具和環(huán)境的介紹等；需求分析：介紹設(shè)計(jì)目標(biāo)，功能需求分析，性能需求分析等；概要設(shè)計(jì)：數(shù)據(jù)庫設(shè)計(jì)，界面框架設(shè)計(jì)，模塊概要設(shè)計(jì)，整體設(shè)計(jì)；詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn)：實(shí)現(xiàn)頁面基本樣式，具體功能，各模塊間正常交互，特殊地方進(jìn)行友好提示；系統(tǒng)測試：用例設(shè)計(jì)測試，系統(tǒng)基本功能測試，系統(tǒng)異常和壓力測試，測試結(jié)論；總結(jié)：工作總結(jié)，不足與展望，根據(jù)目前的開發(fā)情況評估未來的發(fā)展方向。2需求分析2.1設(shè)計(jì)目標(biāo)隨著互聯(lián)網(wǎng)的不斷發(fā)展，我們每天都會產(chǎn)出數(shù)以萬計(jì)的信息，然而這些信息分布在各種角落不為人知，本項(xiàng)目的目標(biāo)就是創(chuàng)建一個可以集合各類信息和網(wǎng)站的論壇型搜索網(wǎng)站。用戶不僅可以通過本網(wǎng)站減少信息差，還可以通過聚合起來的搜索網(wǎng)站，省去在不同搜索網(wǎng)站之間來回的時間。本網(wǎng)站是基于Vue和SpringBoot搭建的，前端使用webpack-3.6.0和vue-admin-template-4.4.0。后端使用springinitializr（web應(yīng)用程序）來生成SpringBoot項(xiàng)目結(jié)構(gòu)，使用mybatis-plus簡化開發(fā)、提高效率。本項(xiàng)目的目標(biāo)主要有以下幾點(diǎn)：用戶可以在不登錄的情況下查看網(wǎng)站上的信息。登錄成功后，他們可以發(fā)表評論、發(fā)貼、編輯個人信息和進(jìn)行其他操作等；管理員在登錄到后臺管理系統(tǒng)后，可以管理用戶，查看發(fā)布的信息，并處理攻擊性評論等。論壇型搜索網(wǎng)站的總體功能結(jié)構(gòu)圖如圖2-1所示：圖2-1論壇型搜索網(wǎng)站總體功能結(jié)構(gòu)圖2.2功能需求分析網(wǎng)站用戶分為三種角色：普通用戶、管理員、超級管理員，角色的權(quán)限功能如下所示：普通用戶：用戶在注冊完成后，輸入自己的賬號和密碼進(jìn)入網(wǎng)站，可進(jìn)行查詢和查看帖子、發(fā)帖、評論、修改個人信息、注銷賬號等操作，后續(xù)也可編輯帖子內(nèi)容，刪除評論。管理員：查看用戶的帖子和評論，如有違規(guī)立即刪除，如有多次可設(shè)置該用戶禁言或永久封禁；推薦網(wǎng)站管理的審核權(quán)限。超級管理員：除了管理員擁有的權(quán)限，還有兩個模塊管理權(quán)限。用戶管理權(quán)限，具有添加用戶、修改用戶數(shù)據(jù)和權(quán)限、查看用戶數(shù)據(jù)、刪除用戶等功能；角色管理權(quán)限，具有添加角色、修改角色數(shù)據(jù)和權(quán)限、查看角色、刪除角色等功能。論壇型搜索網(wǎng)站流程圖如圖2-2所示：圖2-2論壇型搜索網(wǎng)站流程圖2.3性能需求分析基于論壇的搜索網(wǎng)站有以下基本功能：管理員可以刪除帖子，用戶的帖子審核成功后才會出現(xiàn)在網(wǎng)站上。要預(yù)備用戶訪問量很高時，網(wǎng)站有能力承接這個訪問量以及支持IE、Chrome、Firefox和其他瀏覽器的能力。需要注意網(wǎng)站的主要功能在訪問高峰期不受影響。3概要設(shè)計(jì)3.1數(shù)據(jù)庫設(shè)計(jì)與實(shí)現(xiàn)3.1.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計(jì)在設(shè)計(jì)數(shù)據(jù)庫的物理結(jié)構(gòu)之前，有必要設(shè)計(jì)一個描述數(shù)據(jù)實(shí)體之間關(guān)系的概念性結(jié)構(gòu)。用E-R圖來表示數(shù)據(jù)實(shí)體很簡單，容易閱讀，所以用E-R圖來表示實(shí)體。圖3-1用戶實(shí)體圖3-2帖子實(shí)體圖3-3權(quán)限菜單實(shí)體圖3-4用戶角色實(shí)體圖3-5推薦網(wǎng)站實(shí)體圖3-6帖子評論實(shí)體圖3-7郵箱驗(yàn)證記錄實(shí)體圖3-8帖子審核記錄實(shí)體3.1.2數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計(jì)物理結(jié)構(gòu)設(shè)計(jì)是指根據(jù)數(shù)據(jù)庫的邏輯結(jié)構(gòu)來選擇RDBMS，并對數(shù)據(jù)的存儲結(jié)構(gòu)、訪問方式等進(jìn)行設(shè)計(jì)和實(shí)現(xiàn)REF_Ref3932\r\h[15]。物理結(jié)構(gòu)包括優(yōu)化關(guān)系數(shù)據(jù)庫表中邏輯結(jié)構(gòu)的關(guān)系模型，各存儲類型屬性，并定義主鍵和相應(yīng)的約束條件，這樣可以完成數(shù)據(jù)設(shè)計(jì)，滿足網(wǎng)站對數(shù)據(jù)存儲、插入和刪除的功能要求。本網(wǎng)站所設(shè)計(jì)的數(shù)據(jù)表如下所示：3.2軟件整體概要設(shè)計(jì)本次畢業(yè)設(shè)計(jì)有前臺網(wǎng)站和后臺管理系統(tǒng)兩個部分。前臺頁面包含了一些基本的功能，如發(fā)帖，發(fā)送評論，帖子分類展示，查詢帖子和用戶信息，修改個人信息，用戶登錄、注冊、重置密碼等操作；后臺管理系統(tǒng)包含了四大模塊，分別是系統(tǒng)管理模塊、帖子管理模塊、評論管理模塊、推薦網(wǎng)站管理模塊REF_Ref4010\r\h[16]。用戶的角色權(quán)限不同，登錄后臺顯示的界面也不同、擁有的權(quán)限也不相同。3.3軟件模塊概要設(shè)計(jì)3.3.1登錄管理模塊圖3-9登錄管理模塊登錄管理模塊如圖3-9所示，用戶進(jìn)行登錄操作時，后臺會對用戶提交的數(shù)據(jù)進(jìn)行校驗(yàn)。如果校驗(yàn)通過，則提示登錄成功，并跳轉(zhuǎn)到首頁；否則，根據(jù)后端返回的信息，進(jìn)行一些友好提示。用戶注冊時，輸入賬號，為保證賬號唯一性后臺判斷是否存在，若存在提示不能注冊，要重新填賬號；賬號輸入成功后，輸入密碼和確認(rèn)密碼，保證兩次密碼相同，否則報錯提示；輸入郵箱，后臺判斷是否唯一，成功后接收驗(yàn)證碼；點(diǎn)擊注冊，進(jìn)行表單驗(yàn)證，完成賬號注冊。重置密碼時，輸入賬號和郵箱，后臺判斷是否存在，若存在發(fā)送驗(yàn)證碼，表單輸入完成后進(jìn)行驗(yàn)證、提交后臺，驗(yàn)證成功后右上側(cè)彈出重置的隨機(jī)密碼，用戶可在登錄成功后修改密碼。3.3.2首頁模塊圖3-10首頁模塊首頁模塊如圖3-10所示，帖子分類展示部分，用戶點(diǎn)擊具體類別，展示所屬類別的帖子信息，用戶感興趣的部分可以進(jìn)行相應(yīng)操作。帖子熱度排行榜部分，根據(jù)帖子閱讀量和評論數(shù)進(jìn)行降序查詢展示，點(diǎn)擊榜單標(biāo)題進(jìn)入詳情頁，進(jìn)行相應(yīng)操作。最新發(fā)帖人展示部分，根據(jù)用戶最新發(fā)帖時間進(jìn)行降序查詢，用戶可以進(jìn)行相應(yīng)操作。3.3.3系統(tǒng)管理圖3-11系統(tǒng)管理模塊系統(tǒng)管理模塊如圖3-11所示，用戶管理模塊可以通過模糊查詢查看用戶信息，結(jié)果展示在下方表格中；可以創(chuàng)建用戶，填寫相應(yīng)用戶信息、設(shè)置用戶角色，創(chuàng)建用戶成功后則可在系統(tǒng)中進(jìn)行一些操作。用戶角色權(quán)限不同所能看到的界面內(nèi)容也不同；修改用戶信息的操作流程跟創(chuàng)建用戶差不多，但要注意修改用戶信息時要保證賬號和郵箱的唯一性。角色管理模塊通過模糊查詢展示角色信息列表；創(chuàng)建角色時，填寫角色名稱和角色描述、配置相應(yīng)權(quán)限菜單，如配置系統(tǒng)管理、帖子管理、評論管理等權(quán)限。只有用戶擁有相應(yīng)角色，才會有權(quán)限展示和操作相應(yīng)的功能。3.3.4帖子管理圖3-12帖子管理模塊帖子管理模塊如圖3-12所示，帖子管理模塊分為帖子審批和帖子詳情兩個模塊。帖子審批模塊可以對帖子類別和審批狀態(tài)進(jìn)行查詢，進(jìn)行對應(yīng)展示；點(diǎn)擊查看可進(jìn)入帖子詳情頁，進(jìn)行帖子審批操作；帖子詳情模塊可以進(jìn)行帖子審批，點(diǎn)擊相應(yīng)按鈕，具有對應(yīng)結(jié)果，審批不通過的話，要填寫原因，反饋給用戶。3.4界面框架設(shè)計(jì)3.4.1登錄界面風(fēng)格登錄界面，按提示完成表單輸入后，后臺會進(jìn)行邏輯驗(yàn)證，并具有一些友情提示。圖3-13登錄界面注冊界面，填寫表單信息后，后臺會進(jìn)行注冊用戶信息的校驗(yàn)。注冊完成進(jìn)入登錄界面登錄賬號，正式使用網(wǎng)站各種功能。圖3-14注冊界面忘記密碼界面，填寫賬號、郵箱、驗(yàn)證碼等信息進(jìn)行賬號密碼重置，重置信息會以彈窗的形式出現(xiàn)在頁面右上角。復(fù)制臨時密碼可先行進(jìn)行登錄操作，登錄成功后應(yīng)盡快修改密碼，以確保賬號安全。圖3-15忘記密碼界面后臺管理系統(tǒng)登錄界面，同前臺登錄邏輯相似，此處不再贅述。圖3-16登錄界面模塊3.4.2首頁界面風(fēng)格首頁界面，包括帖子分類展示、排行榜、最新發(fā)帖人等模塊，用戶可進(jìn)行相應(yīng)操作。圖3-17首頁詳情頁界面，包括帖子詳情展示、同類別帖子、評論區(qū)等模塊，用戶可進(jìn)行相應(yīng)操作。圖3-18詳情頁3.4.3三種搜索功能界面風(fēng)格展示快搜界面，點(diǎn)擊左側(cè)相應(yīng)鏈接右側(cè)展示對應(yīng)網(wǎng)站界面。圖3-19快搜模塊學(xué)術(shù)搜索界面，點(diǎn)擊左側(cè)相應(yīng)鏈接右側(cè)展示對應(yīng)學(xué)術(shù)網(wǎng)站界面。圖3-20學(xué)術(shù)搜索模塊搜索界面，點(diǎn)擊右上角搜索圖標(biāo)，進(jìn)入搜索界面。用戶可選擇搜索帖子或用戶，對感興趣的內(nèi)容可點(diǎn)擊對應(yīng)模塊進(jìn)入詳情頁。圖3-21搜索模塊3.4.4推薦網(wǎng)站界面風(fēng)格展示推薦網(wǎng)站界面，點(diǎn)擊版本和領(lǐng)域可進(jìn)行條件查詢，感興趣的內(nèi)容可點(diǎn)擊卡片進(jìn)入詳情頁查看。圖3-22推薦網(wǎng)站界面3.4.5個人中心界面風(fēng)格展示個人中心界面，包括審核成功的帖子模塊、個人資料展示模塊以及用戶信息的修改和刪除等操作。圖3-23個人中心模塊3.4.6投稿管理模塊界面風(fēng)格展示投稿界面，用戶可選擇發(fā)普通帖或推薦網(wǎng)站帖，可點(diǎn)擊“推薦網(wǎng)站”開關(guān)來填寫推薦的網(wǎng)站信息。圖3-24投稿模塊稿件管理界面，用戶可在此頁面查看稿件審核進(jìn)度。圖3-25稿件管理模塊3.4.7后臺管理系統(tǒng)的功能模塊界面風(fēng)格展示后臺管理系統(tǒng)利用了vue-element-admin項(xiàng)目框架。本系統(tǒng)使用了動態(tài)路由、權(quán)限驗(yàn)證等功能，在原基礎(chǔ)上進(jìn)行相應(yīng)更改。目前，左邊的功能分為四個部分：系統(tǒng)管理、帖子管理、評論管理和推薦網(wǎng)站管理。用戶管理界面，只有角色為超級管理員才有權(quán)限看到該界面，并進(jìn)行一些功能操作。圖3-26用戶管理模塊角色管理界面，同樣只有超級管理員才可操作和查看。圖3-27角色管理模塊帖子管理界面，只有管理員和超級管理員能看到當(dāng)前界面。超級管理員一般只有一個，因此這部分操作大多為管理員進(jìn)行審核。審核不通過會給用戶發(fā)送審核結(jié)果。圖3-28帖子審批管理模塊評論管理界面，用戶評論發(fā)布后默認(rèn)審核通過，管理員定期審核，若發(fā)現(xiàn)違規(guī)評論即刻刪除該評論。圖3-29評論管理模塊推薦網(wǎng)站管理界面，用戶提交的推薦網(wǎng)站默認(rèn)審核通過，管理員定期審核，若發(fā)現(xiàn)違規(guī)網(wǎng)站即刻刪除該網(wǎng)址。圖3-30節(jié)點(diǎn)管理模塊4詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn)4.1軟件詳細(xì)設(shè)計(jì)概述軟件詳細(xì)設(shè)計(jì)主要分為以下兩個部分：前臺界面主要包括帖子展示模塊、搜索模塊、用戶自行管理模塊、發(fā)帖管理模塊。后臺管理系統(tǒng)主要包括系統(tǒng)管理模塊、帖子審核管理模塊、評論管理模塊、推薦網(wǎng)站管理模塊，在vue-element-admin項(xiàng)目框架的基礎(chǔ)上進(jìn)行相應(yīng)修改，進(jìn)而完善后臺管理系統(tǒng)的功能。4.2軟件詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn)后臺管理系統(tǒng)的用戶信息管理：不同角色的用戶具有不同的操作權(quán)限，用戶登錄管理系統(tǒng)后根據(jù)角色的不同會展示不同的界面，進(jìn)行相應(yīng)的操作。創(chuàng)建和修改用戶信息功能部分代碼如下：@Override@TransactionalpublicStringaddUser(Useruser){QueryWrapper<User>wrapper=newQueryWrapper<>();wrapper.eq("username",user.getUsername()).eq("uEmail",user.getUEmail());UserselectOne=userMapper.selectOne(wrapper);if(selectOne==null){//寫入用戶表this.baseMapper.insert(user);//寫入用戶角色表List<Integer>roleIdList=user.getRoleIdList();if(roleIdList!=null){for(IntegerroleId:roleIdList){userRoleMapper.insert(newUserRole(null,user.getUId(),roleId));}}return"新增用戶成功";}else{return"當(dāng)前用戶已存在";}}@Override@TransactionalpublicvoidupdateUser(Useruser){//更新用戶表this.baseMapper.updateById(user);//清除原有角色LambdaQueryWrapper<UserRole>wrapper=newLambdaQueryWrapper<>();wrapper.eq(UserRole::getUId,user.getUId());userRoleMapper.delete(wrapper);//設(shè)置新的角色List<Integer>roleIdList=user.getRoleIdList();if(roleIdList!=null){for(IntegerroleId:roleIdList){userRoleMapper.insert(newUserRole(null,user.getUId(),roleId));}}}系統(tǒng)的角色管理：用戶因?yàn)榻巧珯?quán)限不同，進(jìn)入系統(tǒng)后所能看到的界面和具有的操作權(quán)限也不同。創(chuàng)建角色和修改角色功能部分代碼如下：@Override@TransactionalpublicvoidaddRole(Rolerole){//寫入角色表this.baseMapper.insert(role);//寫入角色菜單關(guān)系表if(null!=role.getMenuIdList()){for(IntegermenuId:role.getMenuIdList()){System.out.println(menuId);roleMenuMapper.insert(newRoleMenu(null,role.getRoleId(),menuId));}}}@Override@TransactionalpublicvoidupdateRole(Rolerole){//修改角色表this.baseMapper.updateById(role);//刪除原有權(quán)限LambdaQueryWrapper<RoleMenu>wrapper=newLambdaQueryWrapper<>();wrapper.eq(RoleMenu::getRoleId,role.getRoleId());roleMenuMapper.delete(wrapper);//新增權(quán)限if(null!=role.getMenuIdList()){for(IntegermenuId:role.getMenuIdList()){System.out.println(menuId);roleMenuMapper.insert(newRoleMenu(null,role.getRoleId(),menuId));}}}前臺界面的發(fā)帖管理模塊：主要功能為發(fā)帖及稿件管理等。發(fā)帖功能部分代碼如下：<template><div><el-tabsv-model="activeName"@tab-click="handleClick"><el-tab-panelabel="投稿"name="first"><el-form:model="postForm":rules="postRules"ref="postForm"label-width="100px"><el-form-itemlabel="標(biāo)題："prop="titleName"><el-row><el-col:span="10"><el-inputv-model="postForm.titleName"></el-input></el-col></el-row></el-form-item><el-form-itemlabel="推薦網(wǎng)站："prop="jiedian"><el-switchv-model="postForm.isLink"active-color="#13ce66"inactive-color="#ff4949"@change="switchBtn"></el-switch></el-form-item><el-form-itemlabel="內(nèi)容："prop="pDescribe"><froalaEditor:label="editorContentLabel"v-model="postForm.pDescribe"></froalaEditor></el-form-item><el-form-itemlabel="封面："prop="pImg"label-width="120px"><el-uploadclass="upload-demo"action="http://localhost:3000/express/upload":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":on-success="handleAvatarSuccess":limit="1":on-exceed="handleExceed":file-list="fileList"><el-buttonsize="small"type="primary">點(diǎn)擊上傳</el-button><divslot="tip"class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div></el-upload><!--:src="postForm.pImgFile"--><!--<el-imagev-if="postForm.pImgFile!=null":src="postForm.pImgFile"v-model="postForm.pImgFile"></el-image>--></el-form-item><el-form-itemlabel="標(biāo)簽："prop="tId"><el-selectv-model="postForm.tId"placeholder="請選擇標(biāo)簽"><el-optionv-for="itemintags":key="item.tId":label="item.tName":value="item.tId"></el-option></el-select></el-form-item><!--條件渲染根據(jù)isEdit顯示發(fā)布或者修改--><el-form-itemv-if="!isEdit"><el-buttontype="primary"@click="onSubmit(1,postForm)">發(fā)布</el-button><el-button@click="onSubmit(-1,postForm)">存入草稿</el-button></el-form-item><el-form-itemv-else><el-buttontype="primary"@click="editArticle">修改</el-button></el-form-item></el-form><el-dialogtitle="節(jié)點(diǎn)":visible="centerDialogVisible":show-close="false"width="30%"center><el-formref="wikiForm":model="wikiForm":rules="wikiRules"label-width="80px"><el-form-itemlabel="名稱"prop="wName"><el-inputv-model="wikiForm.wName"></el-input></el-form-item><el-form-itemlabel="領(lǐng)域"prop="eId"><el-radio-groupv-model="wikiForm.eId"><el-radiov-for="eIteminedition":key="eItem.eId":label="eItem.eId">{{eItem.eName}}</el-radio></el-radio-group></el-form-item><el-form-itemlabel="鏈接"prop="wLink"><el-inputv-model="wikiForm.wLink"></el-input></el-form-item></el-form><spanslot="footer"class="dialog-footer"><el-button@click="closeDialog">取消</el-button><el-buttontype="primary"@click="submitDialog(wikiForm)">確定</el-button></span></el-dialog></el-tab-pane><!--<el-tab-panelabel="草稿管理"name="second">2</el-tab-pane>--></el-tabs></div></template><script>importfroalaEditorfrom'./froala-editor.vue'exportdefault{inject:['reload'],//注入依賴components:{froalaEditor},data(){return{fileList:[],tags:[],dialogImageUrl:'',dialogVisible:false,disabled:false,editorContentLabel:'',isEdit:false,channels:[],activeName:'first',wikiForm:{wName:'',wLink:'',eId:1},wikiRules:{wName:[{required:true,message:'請輸入推薦網(wǎng)站名稱',trigger:'blur'},{min:2,max:10,message:'長度在2到10個字符',trigger:'blur'}],wLink:[{required:true,message:'請輸入鏈接',trigger:'blur'}],eId:[{required:true,message:'請選擇領(lǐng)域',trigger:'change'}]},centerDialogVisible:false,postForm:{isLink:false,titleName:'',pImg:"",pDescribe:'',pTime:"",tId:1},edition:[],//驗(yàn)證規(guī)則postRules:{titleName:[{required:true,message:'請輸入帖子標(biāo)題',trigger:'blur'},{min:5,max:30,message:'長度在5到30個字符',trigger:'blur'}],pDescribe:[{required:true,message:'請輸入內(nèi)容',trigger:'blur'}],tId:[{required:true,message:'請選擇標(biāo)簽',trigger:'blur'}]},userInfo:{}}},mounted(){},created(){this.$bus.$on("postMes",(msg)=>{console.log(msg)this.postForm=msgconsole.log(this.postForm)})this.getTagsList()this.getEdition()this.getInfo();},methods:{//推薦網(wǎng)站提交按鈕submitDialog(wikiForm){console.log(wikiForm)this.$refs.wikiForm.validate(valid=>{if(valid){this.centerDialogVisible=false}else{this.$message({message:'請檢查必填內(nèi)容是否填寫哦',type:'warning'})returnfalse}})},//推薦鏈接開關(guān)switchBtn(){console.log(this.postForm.isLink)console.log(this.centerDialogVisible)this.centerDialogVisible=this.postForm.isLink},//關(guān)閉節(jié)點(diǎn)彈窗closeDialog(){this.centerDialogVisible=falsethis.postForm.isLink=falsethis.wikiForm={}},//獲取領(lǐng)域getEdition(){this.$axios.getAllEdition().then(res=>{console.log(res)this.edition=res.data})},//獲取標(biāo)簽getTagsList(){this.$axios.getTagsList().then(res=>{console.log(res)this.tags=res.data})},//onUploadChange(file){////獲取文件//this.postForm.pImgFile=file//this.$refs.postForm.validateField("pImgFile");//},//頭部點(diǎn)擊事件，切換不同功能handleClick(tab,event){console.log(tab,event)},//修改帖子editArticle(){console.log('修改')},getInfo(){constparams={}//console.log(this.cookies.getToken('X-Token'))if(this.cookies.getToken('X-Token')!=undefined){params.token=this.cookies.getToken('X-Token')this.$axios.getUserInfo(params).then(res=>{//console.log(res)this.userInfo=res.data})}else{this.$router.push('/')}},//發(fā)布帖子onSubmit(status,postForm){//status表示是否上傳帖子，還是存為草稿//status01234//草稿全部帖子進(jìn)行中通過未通過console.log(status)this.postForm.isUpload=statusthis.postForm.uId=this.userInfo.uIdvarparams={}this.postForm.pTime=mon.formateDate(newDate(),'yyyy-MM-ddhh:mm:ss')params.postForm=this.postFormif(this.postForm.isLink){params.wikiForm=this.wikiForm}this.$refs.postForm.validate(valid=>{if(valid){//提交this.$axios.postMes(params).then(res=>{//console.log(res)if(res.code==20000){this.$message({message:res.message,type:'success'});//this.$router.push("/submit/article")this.reload()}else{this.$message.error(res.message);}})}else{this.$message({message:'請檢查必填內(nèi)容是否填寫哦',type:'warning'})returnfalse}})console.log(this.postForm)console.log(this.wikiForm)},handleRemove(file,fileList){console.log(file,fileList);},handlePreview(file){window.open(file.response.url)console.log(file);},handleExceed(files,fileList){this.$message.warning(`當(dāng)前限制選擇1個文件，本次選擇了${files.length}個文件，共選擇了${files.length+fileList.length}個文件`);},beforeRemove(file,fileList){returnthis.$confirm(`確定移除${}？`);},handleAvatarSuccess(res,file){//this.editForm.img=res.urlconsole.log(res)console.log(file)this.postForm.pImg=res.url}}}</script><stylescoped>.el-form-item{padding-right:50px;margin-bottom:20px;}</style>5系統(tǒng)測試5.1測試用例設(shè)計(jì)本次測試對象是一個B/S結(jié)構(gòu)的登錄功能測試。假設(shè)用戶的瀏覽器是穩(wěn)定版本的Chromev101。功能描述如下：用戶在瀏覽器上輸入相應(yīng)地址，回車后顯示后臺管理系統(tǒng)的登錄界面；表單輸入賬號和密碼，點(diǎn)擊登錄按鈕，后臺進(jìn)行數(shù)據(jù)校驗(yàn)，并給出相應(yīng)提示信息；表5-1后臺管理登錄界面測試用例用例名稱系統(tǒng)登錄用例描述后臺管理系統(tǒng)登錄用戶名存在、密碼正確的情況下，進(jìn)入系統(tǒng)頁面信息包含：頁面背景顯示用戶名和密碼接口，輸入數(shù)據(jù)后的登入系統(tǒng)接口用例入口打開Chrome，在地址欄輸入相應(yīng)地址進(jìn)入后臺管理系統(tǒng)登錄頁面測試用例ID場景測試步驟預(yù)期結(jié)果備注TC1初始頁面顯示從用例入口處進(jìn)入頁面元素完整，顯示與詳細(xì)設(shè)計(jì)一致TC2用戶名錄入—驗(yàn)證輸入已存在的用戶，admin1輸入成功TC3密碼—密碼錄入輸入與用戶名相關(guān)聯(lián)的數(shù)據(jù)，qwer123輸入成功TC4系統(tǒng)登錄—成功TC2，TC3，單擊登錄按鈕登錄系統(tǒng)成功TC5系統(tǒng)登錄—用戶名、密碼校驗(yàn)沒有輸入用戶名、密碼，點(diǎn)擊登錄按鈕系統(tǒng)登錄失敗，并提示：警告哦，請?zhí)顚懙卿浶畔⒑笤偬峤籘C6系統(tǒng)登錄—密碼校驗(yàn)輸入用戶名、沒有輸入密碼、單擊登錄按鈕系統(tǒng)登錄失敗，并提示：密碼不能少于6位及警告哦，請?zhí)顚懙卿浶畔⒑笤偬峤籘C7系統(tǒng)登錄—用戶名、密碼驗(yàn)證輸入的用戶名、密碼不關(guān)聯(lián)，單擊登錄按鈕系統(tǒng)登錄失敗，并提示：用戶名或密碼錯誤5.2系統(tǒng)功能測試用戶管理功能測試：使用數(shù)據(jù)測試該功能模塊中管理員能否添加用戶、編輯用戶、查詢用戶、刪除用戶等操作，測試結(jié)果均已通過，如下圖所示。在賬號輸入框里輸入“ad”，點(diǎn)擊查詢按鈕，查詢出以下內(nèi)容。圖5-1用戶管理模塊創(chuàng)建用戶時，輸入符合表單邏輯的信息后提交后端校驗(yàn)，新增用戶成功提示“新增用戶成功”，并在下方展示新增的用戶信息。圖5-2新增