Spring Boot + Vue3 前后端分离，实战wiki知识库系统

Download: https://xmq1024.com/3072.html

本文将介绍如何使用Spring Boot和Vue3构建一个基于前后端分离的wiki知识库系统。该系统具有以下功能：

1. 用户注册、登录、退出系统
2. 用户添加、编辑、删除文章
3. 用户对文章进行点赞、评论、收藏
4. 文章按照分类、标签进行检索
5. 文章可以被分享到社交媒体

技术栈：

- 前端：Vue3、Vue Router、Vuex、Axios、Element Plus、Markdown-It
- 后端：Spring Boot、Spring Security、Spring Data JPA、MySQL、Lombok、JWT

项目结构：

```
├── backend
│   ├── src
│   │   ├── main
│   │   │   ├── java
│   │   │   │   ├── com
│   │   │   │   │   ├── wiki
│   │   │   │   │   │   ├── config
│   │   │   │   │   │   ├── controller
│   │   │   │   │   │   ├── dto
│   │   │   │   │   │   ├── entity
│   │   │   │   │   │   ├── repository
│   │   │   │   │   │   ├── security
│   │   │   │   │   │   ├── service
│   │   │   │   │   │   └── util
│   │   │   │   │   └── wikiApplication.java
│   │   │   │   └── resources
│   │   │   │   ├── application.yml
│   │   │   │   ├── banner.txt
│   │   │   │   ├── import.sql
│   │   │   │   ├── static
│   │   │   │   └── templates
│   │   │   └── test
│   │   │   └── java
│   │   │   └── com
│   │   │   └── wiki
│   │   └── test
│   └── pom.xml
└── frontend
├── public
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── views
│   ├── App.vue
│   └── main.js
├── .env.development
├── .env.production
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── vue.config.js
└── yarn.lock
```

前端项目结构：

- api：封装了与后端交互的接口
- assets：存放静态资源，如图片、字体等
- components：通用的组件
- router：路由配置
- store：Vuex状态管理
- utils：通用工具函数
- views：页面组件
- App.vue：根组件
- main.js：入口文件

后端项目结构：

- config：配置类
- controller：控制器
- dto：数据传输对象
- entity：实体类
- repository：数据访问层
- security：安全配置
- service：业务逻辑层
- util：通用工具类
- wikiApplication.java：启动类

具体实现见代码仓库：https://github.com/ruanyandong/wiki

本文仅介绍如何搭建前后端分离的wiki知识库系统，具体实现细节可以参考代码仓库中的代码。