Wiki知識庫系統研究與實現

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

摘 要：wiki是一種在網絡上開放且可供多人協同創作的超文本系統，本文結合wiki開放、共享的特點，基于SpringBoot+Vue3設計了一套Wiki知識庫系統，利用主流開發技術實現系統整體架構、主要功能以及數據庫的設計，詳細論述了系統的開發過程，并對系統功能進行了上線測試，系統運行穩定。結果表明，wiki知識庫系統具有較好的知識收集、管理、開放和共享的功能。

關鍵詞：SpringBoot;Vue;知識庫系統

一、引言

Wiki最早起源于1995年，Ward Cunningham在Purdue大學計算中心工作時，為了方便模式社群的交流建而建立了一個波特蘭模式知識庫（Portland Pattern Repository）。WiKi可以調動廣大網民的群體智慧參與網絡創造和互動，wiki是繼Blog之后風靡于互聯網的又一種網絡技術和網絡文化。它也為教師和學生的知識共享提供了高效的平臺，實現了快速廣泛的信息整合[1-3]。

本文針對wiki的特點及開放性，設計并實現了基于SpringBoot+Vue框架的Wiki知識庫系統，該系統采用主流的前后端分離開發技術實現，后端采用SpringBoot+Mybatis+Redis+MySQL提供后臺服務，前端采用Vue+Ant Design Vue+Echarts+wangEditor實現用戶界面設計。

二、系統框架選擇

（一）Spring框架

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

（二）MyBatis框架

MyBatis 是一款支持普通 SQL查詢，存儲過程和高級映射的優秀持久層框架。簡單易用，很好的集成于Spring框架，支持編寫動態SQL語句，支持對象與數據庫的ORM字段關系映射，成為業界主流的持久層框架。

（三）Vue框架

Vue是一套用于構建用戶界面的漸進式框架，它只關注視圖層，支持雙向數據綁定，通過簡潔的API提供高效的數據綁定和靈活的組件系統[5]。

三、系統總體設計

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

系統采用前后端分離的設計模式，前后端之間彼此獨立，前端負責頁面交互和數據展示，著重提升用戶使用體驗。后端負責業務邏輯的處理和提供數據，著重提升系統的性能和安全性，前后端分離的開發設計模式，提高了開發效率，降低了維護成本。

系統整體架構如圖 1 所示。

系統根據框架特點及業務需求分析將功能模塊劃分為普通用戶功能和管理員維護功能兩大部分。普通用戶可以根據知識庫分類導航樹分類瀏覽不同的電子書文檔內容，并對優秀的電子書文檔內容點贊，以提高電子書的訪問量。管理員登錄系統后，可以維護用戶管理模塊、分類管理模塊、電子書管理模塊、電子書文檔模塊及數據報表統計五大模塊。

四、系統技術實現

（一）數據庫設計

根據對系統功能模塊的描述，結合實際的使用情況，知識庫系統數據庫中保存如下信息：

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

2）電子書信息包括：ID、電子書名稱、一級分類ID、二級分類ID、描述、電子書封面、文檔數、閱讀數、點贊數。

3）電子書文檔信息包括：ID、電子書ID、父ID、文檔名稱、文檔內容、排序、閱讀數、點贊數。

4）電子書快照信息包括：ID、電子書ID、快照日期、閱讀數、點贊數、閱讀增長、點贊增長。

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

（二）后端功能設計

數據庫設計完成后，在項目中集成Mybatis實現數據庫持久層操作。利用Mybatis Generator插件自動生成持久層代碼，簡化開發過程，提高代碼編寫效率。

使用Spring AOP面向切面編程完成請求參數、返回結果和接口耗時的日志信息顯示展示，在日志中增加日志跟蹤號，以方便生產運維。在后端數據訪問接口中使用PageHelper插件實現分頁技術。使用雪花算法實現實體類ID自增操作，使用Validation完成參數的校驗。在前后端訪問時會存在跨域問題，通過在后端配置跨域請求允許前端訪問后端接口。

系統是基于前后端分離的架構進行開發，后端向前端返回通用接口數據CommonResp，后臺接口封裝請求參數和響應參數，制作CopyUtil工具類封裝BeanUtils，快速完成數據庫查詢實體對象和返回對象之間的數據拷貝。

當電子書中每一個文檔的文檔數、閱讀數和點贊數發生變化時，電子書中相應信息要能夠實現自動更新，要實現該功能，可以使用實時更新或者定時批量更新。實時更新優點是數據準確性高（實時性好），缺點是耦合性高;定時批量更新可以根據時間周期定時更新數據信息，優點是實現簡單，耦合性低，不需要更改現有業務代碼，缺點是實時性不強。本系統使用SpringBoot的定時任務來實現每隔30秒批量更新數據功能。

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

（三）前端功能設計

前端首頁模塊左側顯示歡迎頁面及分類導航樹。歡迎頁面以報表的形式統計知識庫系統每天文檔總閱讀量、總點贊量、點擊率百分比以及今日和預計今日閱讀和點贊數。并用Echarts圖表可視化展示30天總閱讀量和總點贊量的趨勢圖。可以直觀分析知識庫文檔用戶喜好程度和站點訪問情況。

前端訪問后端接口數據時集成了HTTP庫axios，完成前后端數據的交互，VueCLI多環境的配置以實現開發和生產環境的無縫切換，通過設置axios的默認baseURL可以設置統一的接口請求域前綴。在前后端交互時經常要輸出請求參數和返回結果日志信息，可以通過配置axios攔截器實現上述功能。

在前端用戶界面中經常會引用Ant Design Vue中的圖標庫，可以采用下面的方法批量導入圖標庫，避免了使用一次導入一次的缺點。

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

const app = createApp（App）;

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

// 全局使用圖標

const icons： any = Icons;

for （const i in icons） {

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

}

分類導航樹分類展示各個分類下的電子書信息，點擊電子書便可閱讀電子書文檔信息。電子書文檔樹以導航樹的形式展示文檔信息，文檔導航樹支持無限級訪問。導航樹結構利用遞歸算法來實現。

管理員登錄后臺后在電子書管理頁面可以根據需要創建、修改和刪除電子書信息，電子書編輯采用富文本編輯器WangEditor來實現文檔的編輯功能，并利用Ant Design Vue文件上傳組件實現電子書封面上傳功能。

五、結語

本文介紹了Wiki知識庫系統的詳細設計過程及方法，在系統開發過程中綜合運用了多種開發技術。系統開發完畢后將項目部署到阿里云服務器，利用Nginx提供高性能的Web和反向代理服務，系統經過長期的運行和使用，系統運行穩定，具有較好的知識收集、管理、開放和共享的功能。

參考文獻：

[1]楊興波，張林.基于wiki的網絡協作學習綜述[J].科技視界，2016（15）：142+167.

[2]嚴帥. 基于wiki的項目式學習平臺的設計與研發[D].北京郵電大學，2018.

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

[4]王偉，常慶麗，吳朝霞.基于Springboot+Vue的精準幫扶系統研究與實現[J].河南科技，2021，40（27）：12-14.

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

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