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.