龐一昌 曾毅剛 王貞龍 尤海龍 黃俊杰 齊心

摘 要：wiki是一種在網(wǎng)絡(luò)上開放且可供多人協(xié)同創(chuàng)作的超文本系統(tǒng)，本文結(jié)合wiki開放、共享的特點(diǎn)，基于SpringBoot+Vue3設(shè)計(jì)了一套Wiki知識(shí)庫(kù)系統(tǒng)，利用主流開發(fā)技術(shù)實(shí)現(xiàn)系統(tǒng)整體架構(gòu)、主要功能以及數(shù)據(jù)庫(kù)的設(shè)計(jì)，詳細(xì)論述了系統(tǒng)的開發(fā)過(guò)程，并對(duì)系統(tǒng)功能進(jìn)行了上線測(cè)試，系統(tǒng)運(yùn)行穩(wěn)定。結(jié)果表明，wiki知識(shí)庫(kù)系統(tǒng)具有較好的知識(shí)收集、管理、開放和共享的功能。

關(guān)鍵詞：SpringBoot;Vue;知識(shí)庫(kù)系統(tǒng)

一、引言

Wiki最早起源于1995年，Ward Cunningham在Purdue大學(xué)計(jì)算中心工作時(shí)，為了方便模式社群的交流建而建立了一個(gè)波特蘭模式知識(shí)庫(kù)（Portland Pattern Repository）。WiKi可以調(diào)動(dòng)廣大網(wǎng)民的群體智慧參與網(wǎng)絡(luò)創(chuàng)造和互動(dòng)，wiki是繼Blog之后風(fēng)靡于互聯(lián)網(wǎng)的又一種網(wǎng)絡(luò)技術(shù)和網(wǎng)絡(luò)文化。它也為教師和學(xué)生的知識(shí)共享提供了高效的平臺(tái)，實(shí)現(xiàn)了快速?gòu)V泛的信息整合[1-3]。

本文針對(duì)wiki的特點(diǎn)及開放性，設(shè)計(jì)并實(shí)現(xiàn)了基于SpringBoot+Vue框架的Wiki知識(shí)庫(kù)系統(tǒng)，該系統(tǒng)采用主流的前后端分離開發(fā)技術(shù)實(shí)現(xiàn)，后端采用SpringBoot+Mybatis+Redis+MySQL提供后臺(tái)服務(wù)，前端采用Vue+Ant Design Vue+Echarts+wangEditor實(shí)現(xiàn)用戶界面設(shè)計(jì)。

二、系統(tǒng)框架選擇

（一）Spring框架

Spring 是一款目前主流的 Java EE 輕量級(jí)開源框架 ，是 Java 世界最為成功的框架之一。具有控制反轉(zhuǎn)（IOC）、面向切面（AOP）、依賴注入（DI）等功能，降低代碼之間的耦合性。SpringBoot繼承了Spring框架的功能特點(diǎn)，簡(jiǎn)化了Spring框架繁瑣配置過(guò)程，遵循約定優(yōu)于配置這個(gè)理念，讓開發(fā)人員可以輕松地開發(fā)出基于Spring框架的應(yīng)用，成為業(yè)界主流開發(fā)框架[4]。

（二）MyBatis框架

MyBatis 是一款支持普通 SQL查詢，存儲(chǔ)過(guò)程和高級(jí)映射的優(yōu)秀持久層框架。簡(jiǎn)單易用，很好的集成于Spring框架，支持編寫動(dòng)態(tài)SQL語(yǔ)句，支持對(duì)象與數(shù)據(jù)庫(kù)的ORM字段關(guān)系映射，成為業(yè)界主流的持久層框架。

（三）Vue框架

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，它只關(guān)注視圖層，支持雙向數(shù)據(jù)綁定，通過(guò)簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)[5]。

三、系統(tǒng)總體設(shè)計(jì)

本系統(tǒng)運(yùn)用前后端分離的 MVVM 軟件架構(gòu)設(shè)計(jì)模式，采用 B/ S 系統(tǒng)構(gòu)架，后端使用目前最流行的框架 SpringBoot，整合了AOP、攔截器、過(guò)濾器、異步化、定時(shí)任務(wù)、WebSocket、多環(huán)境配置、緩存和消息隊(duì)列等核心技術(shù)，并采用 MyBatis 訪問 MySQL 數(shù)據(jù)庫(kù)構(gòu)建，Redis做數(shù)據(jù)緩存。 前端采用最新的Vue3，通過(guò)Vue CLI腳手架框架進(jìn)行構(gòu)建，使用 vue-router 進(jìn)行頁(yè)面路由管理，使用VueX+SessionStorage保存用戶登錄狀態(tài)，采用 Axios 請(qǐng)求和響應(yīng)技術(shù)同后端控制層進(jìn)行數(shù)據(jù)通信，基于RESTful 架構(gòu)使用 POST、GET、PUT、DELETE 等請(qǐng)求完成對(duì)服務(wù)器端資源的操作。前端UI界面采用 Ant Design Vue 和 Echarts 使系統(tǒng)擁有更好的用戶界面及數(shù)據(jù)可視化展示效果，能夠更好地處理頁(yè)面交互和邏輯，解決了常規(guī) Web 開發(fā)中數(shù)據(jù)通信、操作 DOM、渲染數(shù)據(jù)等難題。

系統(tǒng)采用前后端分離的設(shè)計(jì)模式，前后端之間彼此獨(dú)立，前端負(fù)責(zé)頁(yè)面交互和數(shù)據(jù)展示，著重提升用戶使用體驗(yàn)。后端負(fù)責(zé)業(yè)務(wù)邏輯的處理和提供數(shù)據(jù)，著重提升系統(tǒng)的性能和安全性，前后端分離的開發(fā)設(shè)計(jì)模式，提高了開發(fā)效率，降低了維護(hù)成本。

系統(tǒng)整體架構(gòu)如圖 1 所示。

系統(tǒng)根據(jù)框架特點(diǎn)及業(yè)務(wù)需求分析將功能模塊劃分為普通用戶功能和管理員維護(hù)功能兩大部分。普通用戶可以根據(jù)知識(shí)庫(kù)分類導(dǎo)航樹分類瀏覽不同的電子書文檔內(nèi)容，并對(duì)優(yōu)秀的電子書文檔內(nèi)容點(diǎn)贊，以提高電子書的訪問量。管理員登錄系統(tǒng)后，可以維護(hù)用戶管理模塊、分類管理模塊、電子書管理模塊、電子書文檔模塊及數(shù)據(jù)報(bào)表統(tǒng)計(jì)五大模塊。

四、系統(tǒng)技術(shù)實(shí)現(xiàn)

（一）數(shù)據(jù)庫(kù)設(shè)計(jì)

根據(jù)對(duì)系統(tǒng)功能模塊的描述，結(jié)合實(shí)際的使用情況，知識(shí)庫(kù)系統(tǒng)數(shù)據(jù)庫(kù)中保存如下信息：

1）分類信息包括：ID、父ID、分類名稱、排序。

2）電子書信息包括：ID、電子書名稱、一級(jí)分類ID、二級(jí)分類ID、描述、電子書封面、文檔數(shù)、閱讀數(shù)、點(diǎn)贊數(shù)。

3）電子書文檔信息包括：ID、電子書ID、父ID、文檔名稱、文檔內(nèi)容、排序、閱讀數(shù)、點(diǎn)贊數(shù)。

4）電子書快照信息包括：ID、電子書ID、快照日期、閱讀數(shù)、點(diǎn)贊數(shù)、閱讀增長(zhǎng)、點(diǎn)贊增長(zhǎng)。

5）用戶表信息包括：ID、登錄名、昵稱、密碼。

（二）后端功能設(shè)計(jì)

數(shù)據(jù)庫(kù)設(shè)計(jì)完成后，在項(xiàng)目中集成Mybatis實(shí)現(xiàn)數(shù)據(jù)庫(kù)持久層操作。利用Mybatis Generator插件自動(dòng)生成持久層代碼，簡(jiǎn)化開發(fā)過(guò)程，提高代碼編寫效率。

使用Spring AOP面向切面編程完成請(qǐng)求參數(shù)、返回結(jié)果和接口耗時(shí)的日志信息顯示展示，在日志中增加日志跟蹤號(hào)，以方便生產(chǎn)運(yùn)維。在后端數(shù)據(jù)訪問接口中使用PageHelper插件實(shí)現(xiàn)分頁(yè)技術(shù)。使用雪花算法實(shí)現(xiàn)實(shí)體類ID自增操作，使用Validation完成參數(shù)的校驗(yàn)。在前后端訪問時(shí)會(huì)存在跨域問題，通過(guò)在后端配置跨域請(qǐng)求允許前端訪問后端接口。

系統(tǒng)是基于前后端分離的架構(gòu)進(jìn)行開發(fā)，后端向前端返回通用接口數(shù)據(jù)CommonResp，后臺(tái)接口封裝請(qǐng)求參數(shù)和響應(yīng)參數(shù)，制作CopyUtil工具類封裝BeanUtils，快速完成數(shù)據(jù)庫(kù)查詢實(shí)體對(duì)象和返回對(duì)象之間的數(shù)據(jù)拷貝。

當(dāng)電子書中每一個(gè)文檔的文檔數(shù)、閱讀數(shù)和點(diǎn)贊數(shù)發(fā)生變化時(shí)，電子書中相應(yīng)信息要能夠?qū)崿F(xiàn)自動(dòng)更新，要實(shí)現(xiàn)該功能，可以使用實(shí)時(shí)更新或者定時(shí)批量更新。實(shí)時(shí)更新優(yōu)點(diǎn)是數(shù)據(jù)準(zhǔn)確性高（實(shí)時(shí)性好），缺點(diǎn)是耦合性高;定時(shí)批量更新可以根據(jù)時(shí)間周期定時(shí)更新數(shù)據(jù)信息，優(yōu)點(diǎn)是實(shí)現(xiàn)簡(jiǎn)單，耦合性低，不需要更改現(xiàn)有業(yè)務(wù)代碼，缺點(diǎn)是實(shí)時(shí)性不強(qiáng)。本系統(tǒng)使用SpringBoot的定時(shí)任務(wù)來(lái)實(shí)現(xiàn)每隔30秒批量更新數(shù)據(jù)功能。

當(dāng)用戶對(duì)喜歡的文檔點(diǎn)贊時(shí)，服務(wù)器端會(huì)向客戶端推送點(diǎn)贊的文檔信息。為了實(shí)現(xiàn)推送技術(shù)，可以使用輪詢技術(shù)。在特定的的時(shí)間間隔，由瀏覽器對(duì)服務(wù)器發(fā)出HTTP請(qǐng)求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式需要瀏覽器不斷的向服務(wù)器發(fā)出請(qǐng)求，顯然這樣會(huì)浪費(fèi)很多的帶寬資源。在這種情況下，HTML5定義了WebSocket協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實(shí)時(shí)地進(jìn)行通訊。因此，本系統(tǒng)使用WebSocket由服務(wù)器端向客戶端推送點(diǎn)贊的文檔信息，以實(shí)現(xiàn)通知的功能，為避免點(diǎn)贊和通知在同一線程運(yùn)行造成互相影響，系統(tǒng)使用SpringBoot異步化實(shí)現(xiàn)點(diǎn)贊和通知的解耦[6]。

（三）前端功能設(shè)計(jì)

前端首頁(yè)模塊左側(cè)顯示歡迎頁(yè)面及分類導(dǎo)航樹。歡迎頁(yè)面以報(bào)表的形式統(tǒng)計(jì)知識(shí)庫(kù)系統(tǒng)每天文檔總閱讀量、總點(diǎn)贊量、點(diǎn)擊率百分比以及今日和預(yù)計(jì)今日閱讀和點(diǎn)贊數(shù)。并用Echarts圖表可視化展示30天總閱讀量和總點(diǎn)贊量的趨勢(shì)圖?？梢灾庇^分析知識(shí)庫(kù)文檔用戶喜好程度和站點(diǎn)訪問情況。

前端訪問后端接口數(shù)據(jù)時(shí)集成了HTTP庫(kù)axios，完成前后端數(shù)據(jù)的交互，VueCLI多環(huán)境的配置以實(shí)現(xiàn)開發(fā)和生產(chǎn)環(huán)境的無(wú)縫切換，通過(guò)設(shè)置axios的默認(rèn)baseURL可以設(shè)置統(tǒng)一的接口請(qǐng)求域前綴。在前后端交互時(shí)經(jīng)常要輸出請(qǐng)求參數(shù)和返回結(jié)果日志信息，可以通過(guò)配置axios攔截器實(shí)現(xiàn)上述功能。

在前端用戶界面中經(jīng)常會(huì)引用Ant Design Vue中的圖標(biāo)庫(kù)，可以采用下面的方法批量導(dǎo)入圖標(biāo)庫(kù)，避免了使用一次導(dǎo)入一次的缺點(diǎn)。

import * as Icons from '@ant-design/icons-vue';

const app = createApp（App）;

app.use（store）.use（router）.use（Antd）.mount（'#app'）;

// 全局使用圖標(biāo)

const icons： any = Icons;

for （const i in icons） {

app.component（i， icons[i]）;

}

分類導(dǎo)航樹分類展示各個(gè)分類下的電子書信息，點(diǎn)擊電子書便可閱讀電子書文檔信息。電子書文檔樹以導(dǎo)航樹的形式展示文檔信息，文檔導(dǎo)航樹支持無(wú)限級(jí)訪問。導(dǎo)航樹結(jié)構(gòu)利用遞歸算法來(lái)實(shí)現(xiàn)。

管理員登錄后臺(tái)后在電子書管理頁(yè)面可以根據(jù)需要?jiǎng)?chuàng)建、修改和刪除電子書信息，電子書編輯采用富文本編輯器WangEditor來(lái)實(shí)現(xiàn)文檔的編輯功能，并利用Ant Design Vue文件上傳組件實(shí)現(xiàn)電子書封面上傳功能。

五、結(jié)語(yǔ)

本文介紹了Wiki知識(shí)庫(kù)系統(tǒng)的詳細(xì)設(shè)計(jì)過(guò)程及方法，在系統(tǒng)開發(fā)過(guò)程中綜合運(yùn)用了多種開發(fā)技術(shù)。系統(tǒng)開發(fā)完畢后將項(xiàng)目部署到阿里云服務(wù)器，利用Nginx提供高性能的Web和反向代理服務(wù)，系統(tǒng)經(jīng)過(guò)長(zhǎng)期的運(yùn)行和使用，系統(tǒng)運(yùn)行穩(wěn)定，具有較好的知識(shí)收集、管理、開放和共享的功能。

參考文獻(xiàn)：

[1]楊興波，張林.基于wiki的網(wǎng)絡(luò)協(xié)作學(xué)習(xí)綜述[J].科技視界，2016（15）：142+167.

[2]嚴(yán)帥. 基于wiki的項(xiàng)目式學(xué)習(xí)平臺(tái)的設(shè)計(jì)與研發(fā)[D].北京郵電大學(xué)，2018.

[3]魏青山，陳楠楠，張靜，李娟，張雪蕾.基于Wiki協(xié)作的高校學(xué)科知識(shí)庫(kù)建設(shè)與思考[J].醫(yī)學(xué)信息學(xué)雜志，2015，36（01）：71-74.

[4]王偉，常慶麗，吳朝霞.基于Springboot+Vue的精準(zhǔn)幫扶系統(tǒng)研究與實(shí)現(xiàn)[J].河南科技，2021，40（27）：12-14.

[5]劉博文.深入淺出Vue.js[M].北京：人民郵電出版社，2019.

[6]陳麗楓，鄭力新，王佳斌.基于HTML5 WebSocket的Web實(shí)時(shí)通信機(jī)制的研究與實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用，2016，35（10）：88-91.