基于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ā)，很多有用的信息會(huì)被淹沒在互聯(lián)網(wǎng)的海洋里，因此創(chuàng)建一個(gè)可以快速搜索的網(wǎng)站就很有必要。該網(wǎng)站是一個(gè)彌補(bǔ)傳統(tǒng)搜索網(wǎng)站不足的工具，并擁有傳統(tǒng)搜索網(wǎng)站所不具備的優(yōu)勢(shì)。它可以提供豐富的網(wǎng)站資源，使用戶可以快速找到他們需要的內(nèi)容；它幫用戶節(jié)省了訪問各種搜索網(wǎng)站的時(shí)間REF_Ref2185\r\h[1]。論壇型搜索網(wǎng)站是論壇和搜索網(wǎng)站的結(jié)合，依靠Vue和SpringBoot等技術(shù)來(lái)設(shè)計(jì)界面和功能。用戶可以將想輸出的內(nèi)容或想提問的問題發(fā)布到論壇上，其他對(duì)此感興趣的用戶可在評(píng)論區(qū)發(fā)送自己的觀點(diǎn)。為保證網(wǎng)站環(huán)境，后臺(tái)管理系統(tǒng)會(huì)有審核員定期審核用戶發(fā)布的信息，對(duì)于違規(guī)言論一律刪除。網(wǎng)站的主要功能模塊有論壇模塊、搜索模塊、投稿管理模塊、節(jié)點(diǎn)管理模塊以及后臺(tái)管理系統(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ù)庫(kù)設(shè)計(jì)與實(shí)現(xiàn) 7283963.1.1數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì) 741963.1.2數(shù)據(jù)庫(kù)物理結(jié)構(gòu)設(shè)計(jì) 1068183.2軟件整體概要設(shè)計(jì) 1423453.3軟件模塊概要設(shè)計(jì) 15190043.3.1登錄管理模塊 159533.3.2首頁(yè)模塊 15146113.3.3系統(tǒng)管理 16112043.3.4帖子管理 16130283.4界面框架設(shè)計(jì) 17311323.4.1登錄界面風(fēng)格 17256273.4.2首頁(yè)界面風(fēng)格 18122483.4.3三種搜索功能界面風(fēng)格展示 2054813.4.4推薦網(wǎng)站界面風(fēng)格展示 2228273.4.5個(gè)人中心界面風(fēng)格展示 22299713.4.6投稿管理模塊界面風(fēng)格展示 23236563.4.7后臺(tái)管理系統(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)測(cè)試 35154005.1測(cè)試用例設(shè)計(jì) 35285395.2系統(tǒng)功能測(cè)試 3667155.3系統(tǒng)性能測(cè)試 38245805.3.1異常測(cè)試如下： 38163795.3.2壓力測(cè)試如下： 39168495.4測(cè)試結(jié)論 39302216總結(jié) 393917參考文獻(xiàn) 4114373致謝 4223685附錄 431緒論1.1項(xiàng)目的背景與意義在數(shù)字科技快速發(fā)展的今天，信息傳播的速度非?？?，所以我們每天都離不開搜索REF_Ref2593\r\h[2]。但對(duì)于普通人來(lái)說，在海量數(shù)據(jù)里找到真正有用的信息越來(lái)越困難。用戶在各種搜索網(wǎng)站中瀏覽到的大多是同質(zhì)化嚴(yán)重的內(nèi)容，造成了非常不便的閱讀體驗(yàn)。因此設(shè)計(jì)并實(shí)現(xiàn)一個(gè)論壇型搜索網(wǎng)站就很有必要?；谡搲乃阉骶W(wǎng)站是將其他優(yōu)秀的搜索網(wǎng)站組合在一起，使網(wǎng)絡(luò)工具化和個(gè)性化。它們?yōu)榫W(wǎng)站提供了豐富的資源，節(jié)省了在不同搜索網(wǎng)站上搜索信息的時(shí)間，并使在不同網(wǎng)站之間導(dǎo)航變得更加容易。這不僅使網(wǎng)上沖浪更有效率，而且將用戶從繁瑣的搜索系統(tǒng)中解放出來(lái)。基于論壇的搜索網(wǎng)站是補(bǔ)充性的搜索工具，旨在彌補(bǔ)傳統(tǒng)搜索引擎的不足。該網(wǎng)站搭配一個(gè)論壇，用戶可以分享想法和提出問題,然后其他感興趣的用戶可以留下評(píng)論并相互幫助；可以平衡單個(gè)網(wǎng)站的局限性，創(chuàng)造一個(gè)友好、可持續(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的核心庫(kù)只關(guān)注視圖層，所以它不僅容易上手，而且非常容易與第三方庫(kù)或現(xiàn)有項(xiàng)目集成；一方面，Vue與其現(xiàn)代工具集和許多支持類庫(kù)一起，很適合管理復(fù)雜的單頁(yè)應(yīng)用程序;另一方面，Vue的設(shè)計(jì)是自下而上逐層實(shí)現(xiàn)的REF_Ref2462\r\h[3]。Vue.js是一個(gè)非常好的前端框架，它不需要頻繁地操作DOM元素，使用的是一個(gè)虛擬DOM；當(dāng)屬性和狀態(tài)發(fā)生變化時(shí)，渲染器會(huì)返回一個(gè)新的元素樹，然后比較返回的元素樹和最后渲染的元素樹之間的差異，并更新它們，最終渲染出真實(shí)的DOM；Vue通過模型-視圖-視圖模型（MVVM）在UI視圖和應(yīng)用邏輯之間保持清晰的分離；其中模型-視圖-視圖模型（MVVM）的核心是視圖和視圖模型之間的雙向數(shù)據(jù)連接，因此數(shù)據(jù)變化可以自動(dòng)響應(yīng)到視圖中，使前端開發(fā)更加高效和方便REF_Ref2772\r\h[4]REF_Ref2782\r\h[5]。圖1-1Vue的雙向數(shù)據(jù)綁定原理示意圖SpringBoot介紹SpringBoot是Pivotal團(tuán)隊(duì)的一個(gè)新框架，它簡(jiǎn)化了初始配置和開發(fā)。Spring是一個(gè)非常強(qiáng)大的框架，但它的配置即使對(duì)小項(xiàng)目來(lái)說也很復(fù)雜，配置問題常常導(dǎo)致異常和低效開發(fā)；為了簡(jiǎn)化配置，Pivotal團(tuán)隊(duì)在2013年提出了SpringBoot，這是一個(gè)新的基于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)化的配置信息以簡(jiǎn)化框架的配置過程REF_Ref3520\r\h[9]REF_Ref3527\r\h[10]。SpringBoot可以與Tomcat、JettyServlet容器集成，自動(dòng)配置以簡(jiǎn)化Maven配置，沒有代碼生成或XML配置REF_Ref3569\r\h[11]REF_Ref3621\r\h[12]。圖1-2SpringBoot組成圖解MySQL數(shù)據(jù)庫(kù)介紹MySQL是一個(gè)關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，是將數(shù)據(jù)存儲(chǔ)在各個(gè)表中，而不是將它們?nèi)看鎯?chǔ)在一個(gè)大文件中，從而大大提高了速度和靈活性；MySQL是一個(gè)功能強(qiáng)大、效率飛快的開源軟件；MySQL是可以處理數(shù)千條記錄的大型數(shù)據(jù)庫(kù)，使用標(biāo)準(zhǔn)化的SQL語(yǔ)言，可以在多個(gè)系統(tǒng)上運(yùn)行并支持多種語(yǔ)言REF_Ref3670\r\h[13]。MySQL以表格的形式存儲(chǔ)數(shù)據(jù),只有DOS界面，因此選擇Navicat作為管理工具REF_Ref3719\r\h[14]。圖1-3MySQL原理詳解1.3開發(fā)工具及開發(fā)環(huán)境開發(fā)語(yǔ)言：Java、JavaScript；數(shù)據(jù)庫(kù)（及版本）：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)等方面說明，整個(gè)內(nèi)容可以分為以下幾個(gè)部分：緒論：項(xiàng)目的背景和意義，概述開發(fā)所需的關(guān)鍵技術(shù)，開發(fā)工具和環(huán)境的介紹等；需求分析：介紹設(shè)計(jì)目標(biāo)，功能需求分析，性能需求分析等；概要設(shè)計(jì)：數(shù)據(jù)庫(kù)設(shè)計(jì)，界面框架設(shè)計(jì)，模塊概要設(shè)計(jì)，整體設(shè)計(jì)；詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn)：實(shí)現(xiàn)頁(yè)面基本樣式，具體功能，各模塊間正常交互，特殊地方進(jìn)行友好提示；系統(tǒng)測(cè)試：用例設(shè)計(jì)測(cè)試，系統(tǒng)基本功能測(cè)試，系統(tǒng)異常和壓力測(cè)試，測(cè)試結(jié)論；總結(jié)：工作總結(jié)，不足與展望，根據(jù)目前的開發(fā)情況評(píng)估未來(lái)的發(fā)展方向。2需求分析2.1設(shè)計(jì)目標(biāo)隨著互聯(lián)網(wǎng)的不斷發(fā)展，我們每天都會(huì)產(chǎn)出數(shù)以萬(wàn)計(jì)的信息，然而這些信息分布在各種角落不為人知，本項(xiàng)目的目標(biāo)就是創(chuàng)建一個(gè)可以集合各類信息和網(wǎng)站的論壇型搜索網(wǎng)站。用戶不僅可以通過本網(wǎng)站減少信息差，還可以通過聚合起來(lái)的搜索網(wǎng)站，省去在不同搜索網(wǎng)站之間來(lái)回的時(shí)間。本網(wǎng)站是基于Vue和SpringBoot搭建的，前端使用webpack-3.6.0和vue-admin-template-4.4.0。后端使用springinitializr（web應(yīng)用程序）來(lái)生成SpringBoot項(xiàng)目結(jié)構(gòu)，使用mybatis-plus簡(jiǎn)化開發(fā)、提高效率。本項(xiàng)目的目標(biāo)主要有以下幾點(diǎn)：用戶可以在不登錄的情況下查看網(wǎng)站上的信息。登錄成功后，他們可以發(fā)表評(píng)論、發(fā)貼、編輯個(gè)人信息和進(jìn)行其他操作等；管理員在登錄到后臺(tái)管理系統(tǒng)后，可以管理用戶，查看發(fā)布的信息，并處理攻擊性評(píng)論等。論壇型搜索網(wǎng)站的總體功能結(jié)構(gòu)圖如圖2-1所示：圖2-1論壇型搜索網(wǎng)站總體功能結(jié)構(gòu)圖2.2功能需求分析網(wǎng)站用戶分為三種角色：普通用戶、管理員、超級(jí)管理員，角色的權(quán)限功能如下所示：普通用戶：用戶在注冊(cè)完成后，輸入自己的賬號(hào)和密碼進(jìn)入網(wǎng)站，可進(jìn)行查詢和查看帖子、發(fā)帖、評(píng)論、修改個(gè)人信息、注銷賬號(hào)等操作，后續(xù)也可編輯帖子內(nèi)容，刪除評(píng)論。管理員：查看用戶的帖子和評(píng)論，如有違規(guī)立即刪除，如有多次可設(shè)置該用戶禁言或永久封禁；推薦網(wǎng)站管理的審核權(quán)限。超級(jí)管理員：除了管理員擁有的權(quán)限，還有兩個(gè)模塊管理權(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)站有以下基本功能：管理員可以刪除帖子，用戶的帖子審核成功后才會(huì)出現(xiàn)在網(wǎng)站上。要預(yù)備用戶訪問量很高時(shí)，網(wǎng)站有能力承接這個(gè)訪問量以及支持IE、Chrome、Firefox和其他瀏覽器的能力。需要注意網(wǎng)站的主要功能在訪問高峰期不受影響。3概要設(shè)計(jì)3.1數(shù)據(jù)庫(kù)設(shè)計(jì)與實(shí)現(xiàn)3.1.1數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)在設(shè)計(jì)數(shù)據(jù)庫(kù)的物理結(jié)構(gòu)之前，有必要設(shè)計(jì)一個(gè)描述數(shù)據(jù)實(shí)體之間關(guān)系的概念性結(jié)構(gòu)。用E-R圖來(lái)表示數(shù)據(jù)實(shí)體很簡(jiǎn)單，容易閱讀，所以用E-R圖來(lái)表示實(shí)體。圖3-1用戶實(shí)體圖3-2帖子實(shí)體圖3-3權(quán)限菜單實(shí)體圖3-4用戶角色實(shí)體圖3-5推薦網(wǎng)站實(shí)體圖3-6帖子評(píng)論實(shí)體圖3-7郵箱驗(yàn)證記錄實(shí)體圖3-8帖子審核記錄實(shí)體3.1.2數(shù)據(jù)庫(kù)物理結(jié)構(gòu)設(shè)計(jì)物理結(jié)構(gòu)設(shè)計(jì)是指根據(jù)數(shù)據(jù)庫(kù)的邏輯結(jié)構(gòu)來(lái)選擇RDBMS，并對(duì)數(shù)據(jù)的存儲(chǔ)結(jié)構(gòu)、訪問方式等進(jìn)行設(shè)計(jì)和實(shí)現(xiàn)REF_Ref3932\r\h[15]。物理結(jié)構(gòu)包括優(yōu)化關(guān)系數(shù)據(jù)庫(kù)表中邏輯結(jié)構(gòu)的關(guān)系模型，各存儲(chǔ)類型屬性，并定義主鍵和相應(yīng)的約束條件，這樣可以完成數(shù)據(jù)設(shè)計(jì)，滿足網(wǎng)站對(duì)數(shù)據(jù)存儲(chǔ)、插入和刪除的功能要求。本網(wǎng)站所設(shè)計(jì)的數(shù)據(jù)表如下所示：3.2軟件整體概要設(shè)計(jì)本次畢業(yè)設(shè)計(jì)有前臺(tái)網(wǎng)站和后臺(tái)管理系統(tǒng)兩個(gè)部分。前臺(tái)頁(yè)面包含了一些基本的功能，如發(fā)帖，發(fā)送評(píng)論，帖子分類展示，查詢帖子和用戶信息，修改個(gè)人信息，用戶登錄、注冊(cè)、重置密碼等操作；后臺(tái)管理系統(tǒng)包含了四大模塊，分別是系統(tǒng)管理模塊、帖子管理模塊、評(píng)論管理模塊、推薦網(wǎng)站管理模塊REF_Ref4010\r\h[16]。用戶的角色權(quán)限不同，登錄后臺(tái)顯示的界面也不同、擁有的權(quán)限也不相同。3.3軟件模塊概要設(shè)計(jì)3.3.1登錄管理模塊圖3-9登錄管理模塊登錄管理模塊如圖3-9所示，用戶進(jìn)行登錄操作時(shí)，后臺(tái)會(huì)對(duì)用戶提交的數(shù)據(jù)進(jìn)行校驗(yàn)。如果校驗(yàn)通過，則提示登錄成功，并跳轉(zhuǎn)到首頁(yè)；否則，根據(jù)后端返回的信息，進(jìn)行一些友好提示。用戶注冊(cè)時(shí)，輸入賬號(hào)，為保證賬號(hào)唯一性后臺(tái)判斷是否存在，若存在提示不能注冊(cè)，要重新填賬號(hào)；賬號(hào)輸入成功后，輸入密碼和確認(rèn)密碼，保證兩次密碼相同，否則報(bào)錯(cuò)提示；輸入郵箱，后臺(tái)判斷是否唯一，成功后接收驗(yàn)證碼；點(diǎn)擊注冊(cè)，進(jìn)行表單驗(yàn)證，完成賬號(hào)注冊(cè)。重置密碼時(shí)，輸入賬號(hào)和郵箱，后臺(tái)判斷是否存在，若存在發(fā)送驗(yàn)證碼，表單輸入完成后進(jìn)行驗(yàn)證、提交后臺(tái)，驗(yàn)證成功后右上側(cè)彈出重置的隨機(jī)密碼，用戶可在登錄成功后修改密碼。3.3.2首頁(yè)模塊圖3-10首頁(yè)模塊首頁(yè)模塊如圖3-10所示，帖子分類展示部分，用戶點(diǎn)擊具體類別，展示所屬類別的帖子信息，用戶感興趣的部分可以進(jìn)行相應(yīng)操作。帖子熱度排行榜部分，根據(jù)帖子閱讀量和評(píng)論數(shù)進(jìn)行降序查詢展示，點(diǎn)擊榜單標(biāo)題進(jìn)入詳情頁(yè)，進(jìn)行相應(yīng)操作。最新發(fā)帖人展示部分，根據(jù)用戶最新發(fā)帖時(shí)間進(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)建用戶差不多，但要注意修改用戶信息時(shí)要保證賬號(hào)和郵箱的唯一性。角色管理模塊通過模糊查詢展示角色信息列表；創(chuàng)建角色時(shí)，填寫角色名稱和角色描述、配置相應(yīng)權(quán)限菜單，如配置系統(tǒng)管理、帖子管理、評(píng)論管理等權(quán)限。只有用戶擁有相應(yīng)角色，才會(huì)有權(quán)限展示和操作相應(yīng)的功能。3.3.4帖子管理圖3-12帖子管理模塊帖子管理模塊如圖3-12所示，帖子管理模塊分為帖子審批和帖子詳情兩個(gè)模塊。帖子審批模塊可以對(duì)帖子類別和審批狀態(tài)進(jìn)行查詢，進(jìn)行對(duì)應(yīng)展示；點(diǎn)擊查看可進(jìn)入帖子詳情頁(yè)，進(jìn)行帖子審批操作；帖子詳情模塊可以進(jìn)行帖子審批，點(diǎn)擊相應(yīng)按鈕，具有對(duì)應(yīng)結(jié)果，審批不通過的話，要填寫原因，反饋給用戶。3.4界面框架設(shè)計(jì)3.4.1登錄界面風(fēng)格登錄界面，按提示完成表單輸入后，后臺(tái)會(huì)進(jìn)行邏輯驗(yàn)證，并具有一些友情提示。圖3-13登錄界面注冊(cè)界面，填寫表單信息后，后臺(tái)會(huì)進(jìn)行注冊(cè)用戶信息的校驗(yàn)。注冊(cè)完成進(jìn)入登錄界面登錄賬號(hào)，正式使用網(wǎng)站各種功能。圖3-14注冊(cè)界面忘記密碼界面，填寫賬號(hào)、郵箱、驗(yàn)證碼等信息進(jìn)行賬號(hào)密碼重置，重置信息會(huì)以彈窗的形式出現(xiàn)在頁(yè)面右上角。復(fù)制臨時(shí)密碼可先行進(jìn)行登錄操作，登錄成功后應(yīng)盡快修改密碼，以確保賬號(hào)安全。圖3-15忘記密碼界面后臺(tái)管理系統(tǒng)登錄界面，同前臺(tái)登錄邏輯相似，此處不再贅述。圖3-16登錄界面模塊3.4.2首頁(yè)界面風(fēng)格首頁(yè)界面，包括帖子分類展示、排行榜、最新發(fā)帖人等模塊，用戶可進(jìn)行相應(yīng)操作。圖3-17首頁(yè)詳情頁(yè)界面，包括帖子詳情展示、同類別帖子、評(píng)論區(qū)等模塊，用戶可進(jìn)行相應(yīng)操作。圖3-18詳情頁(yè)3.4.3三種搜索功能界面風(fēng)格展示快搜界面，點(diǎn)擊左側(cè)相應(yīng)鏈接右側(cè)展示對(duì)應(yīng)網(wǎng)站界面。圖3-19快搜模塊學(xué)術(shù)搜索界面，點(diǎn)擊左側(cè)相應(yīng)鏈接右側(cè)展示對(duì)應(yīng)學(xué)術(shù)網(wǎng)站界面。圖3-20學(xué)術(shù)搜索模塊搜索界面，點(diǎn)擊右上角搜索圖標(biāo)，進(jìn)入搜索界面。用戶可選擇搜索帖子或用戶，對(duì)感興趣的內(nèi)容可點(diǎn)擊對(duì)應(yīng)模塊進(jìn)入詳情頁(yè)。圖3-21搜索模塊3.4.4推薦網(wǎng)站界面風(fēng)格展示推薦網(wǎng)站界面，點(diǎn)擊版本和領(lǐng)域可進(jìn)行條件查詢，感興趣的內(nèi)容可點(diǎn)擊卡片進(jìn)入詳情頁(yè)查看。圖3-22推薦網(wǎng)站界面3.4.5個(gè)人中心界面風(fēng)格展示個(gè)人中心界面，包括審核成功的帖子模塊、個(gè)人資料展示模塊以及用戶信息的修改和刪除等操作。圖3-23個(gè)人中心模塊3.4.6投稿管理模塊界面風(fēng)格展示投稿界面，用戶可選擇發(fā)普通帖或推薦網(wǎng)站帖，可點(diǎn)擊“推薦網(wǎng)站”開關(guān)來(lái)填寫推薦的網(wǎng)站信息。圖3-24投稿模塊稿件管理界面，用戶可在此頁(yè)面查看稿件審核進(jìn)度。圖3-25稿件管理模塊3.4.7后臺(tái)管理系統(tǒng)的功能模塊界面風(fēng)格展示后臺(tái)管理系統(tǒng)利用了vue-element-admin項(xiàng)目框架。本系統(tǒng)使用了動(dòng)態(tài)路由、權(quán)限驗(yàn)證等功能，在原基礎(chǔ)上進(jìn)行相應(yīng)更改。目前，左邊的功能分為四個(gè)部分：系統(tǒng)管理、帖子管理、評(píng)論管理和推薦網(wǎng)站管理。用戶管理界面，只有角色為超級(jí)管理員才有權(quán)限看到該界面，并進(jìn)行一些功能操作。圖3-26用戶管理模塊角色管理界面，同樣只有超級(jí)管理員才可操作和查看。圖3-27角色管理模塊帖子管理界面，只有管理員和超級(jí)管理員能看到當(dāng)前界面。超級(jí)管理員一般只有一個(gè)，因此這部分操作大多為管理員進(jìn)行審核。審核不通過會(huì)給用戶發(fā)送審核結(jié)果。圖3-28帖子審批管理模塊評(píng)論管理界面，用戶評(píng)論發(fā)布后默認(rèn)審核通過，管理員定期審核，若發(fā)現(xiàn)違規(guī)評(píng)論即刻刪除該評(píng)論。圖3-29評(píng)論管理模塊推薦網(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ì)主要分為以下兩個(gè)部分：前臺(tái)界面主要包括帖子展示模塊、搜索模塊、用戶自行管理模塊、發(fā)帖管理模塊。后臺(tái)管理系統(tǒng)主要包括系統(tǒng)管理模塊、帖子審核管理模塊、評(píng)論管理模塊、推薦網(wǎng)站管理模塊，在vue-element-admin項(xiàng)目框架的基礎(chǔ)上進(jìn)行相應(yīng)修改，進(jìn)而完善后臺(tái)管理系統(tǒng)的功能。4.2軟件詳細(xì)設(shè)計(jì)與代碼實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的用戶信息管理：不同角色的用戶具有不同的操作權(quán)限，用戶登錄管理系統(tǒng)后根據(jù)角色的不同會(huì)展示不同的界面，進(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));}}}前臺(tái)界面的發(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="請(qǐng)選擇標(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:'請(qǐng)輸入推薦網(wǎng)站名稱',trigger:'blur'},{min:2,max:10,message:'長(zhǎng)度在2到10個(gè)字符',trigger:'blur'}],wLink:[{required:true,message:'請(qǐng)輸入鏈接',trigger:'blur'}],eId:[{required:true,message:'請(qǐng)選擇領(lǐng)域',trigger:'change'}]},centerDialogVisible:false,postForm:{isLink:false,titleName:'',pImg:"",pDescribe:'',pTime:"",tId:1},edition:[],//驗(yàn)證規(guī)則postRules:{titleName:[{required:true,message:'請(qǐng)輸入帖子標(biāo)題',trigger:'blur'},{min:5,max:30,message:'長(zhǎng)度在5到30個(gè)字符',trigger:'blur'}],pDescribe:[{required:true,message:'請(qǐng)輸入內(nèi)容',trigger:'blur'}],tId:[{required:true,message:'請(qǐng)選擇標(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:'請(qǐng)檢查必填內(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:'請(qǐng)檢查必填內(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個(gè)文件，本次選擇了${files.length}個(gè)文件，共選擇了${files.length+fileList.length}個(gè)文件`);},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)測(cè)試5.1測(cè)試用例設(shè)計(jì)本次測(cè)試對(duì)象是一個(gè)B/S結(jié)構(gòu)的登錄功能測(cè)試。假設(shè)用戶的瀏覽器是穩(wěn)定版本的Chromev101。功能描述如下：用戶在瀏覽器上輸入相應(yīng)地址，回車后顯示后臺(tái)管理系統(tǒng)的登錄界面；表單輸入賬號(hào)和密碼，點(diǎn)擊登錄按鈕，后臺(tái)進(jìn)行數(shù)據(jù)校驗(yàn)，并給出相應(yīng)提示信息；表5-1后臺(tái)管理登錄界面測(cè)試用例用例名稱系統(tǒng)登錄用例描述后臺(tái)管理系統(tǒng)登錄用戶名存在、密碼正確的情況下，進(jìn)入系統(tǒng)頁(yè)面信息包含：頁(yè)面背景顯示用戶名和密碼接口，輸入數(shù)據(jù)后的登入系統(tǒng)接口用例入口打開Chrome，在地址欄輸入相應(yīng)地址進(jìn)入后臺(tái)管理系統(tǒng)登錄頁(yè)面測(cè)試用例ID場(chǎng)景測(cè)試步驟預(yù)期結(jié)果備注TC1初始頁(yè)面顯示從用例入口處進(jìn)入頁(yè)面元素完整，顯示與詳細(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)登錄失敗，并提示：警告哦，請(qǐng)?zhí)顚懙卿浶畔⒑笤偬峤籘C6系統(tǒng)登錄—密碼校驗(yàn)輸入用戶名、沒有輸入密碼、單擊登錄按鈕系統(tǒng)登錄失敗，并提示：密碼不能少于6位及警告哦，請(qǐng)?zhí)顚懙卿浶畔⒑笤偬峤籘C7系統(tǒng)登錄—用戶名、密碼驗(yàn)證輸入的用戶名、密碼不關(guān)聯(lián)，單擊登錄按鈕系統(tǒng)登錄失敗，并提示：用戶名或密碼錯(cuò)誤5.2系統(tǒng)功能測(cè)試用戶管理功能測(cè)試：使用數(shù)據(jù)測(cè)試該功能模塊中管理員能否添加用戶、編輯用戶、查詢用戶、刪除用戶等操作，測(cè)試結(jié)果均已通過，如下圖所示。在賬號(hào)輸入框里輸入“ad”，點(diǎn)擊查詢按鈕，查詢出以下內(nèi)容。圖5-1用戶管理模塊創(chuàng)建用戶時(shí)，輸入符合表單邏輯的信息后提交后端校驗(yàn)，新增用戶成功提示“新增用戶成功”，并在下方展示新增的用戶信息。圖5-2新增