Spring Boot + Vue3 前后端分離，實(shí)戰(zhàn)wiki知識(shí)庫(kù)系統(tǒng)

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

本文將介紹如何使用Spring Boot和Vue3構(gòu)建一個(gè)基于前后端分離的wiki知識(shí)庫(kù)系統(tǒng)。該系統(tǒng)具有以下功能：

1. 用戶注冊(cè)、登錄、退出系統(tǒng)
2. 用戶添加、編輯、刪除文章
3. 用戶對(duì)文章進(jìn)行點(diǎn)贊、評(píng)論、收藏
4. 文章按照分類、標(biāo)簽進(jìn)行檢索
5. 文章可以被分享到社交媒體

技術(shù)棧：

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

項(xiàng)目結(jié)構(gòu)：

```
├── 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
```

前端項(xiàng)目結(jié)構(gòu)：

- api：封裝了與后端交互的接口
- assets：存放靜態(tài)資源，如圖片、字體等
- components：通用的組件
- router：路由配置
- store：Vuex狀態(tài)管理
- utils：通用工具函數(shù)
- views：頁(yè)面組件
- App.vue：根組件
- main.js：入口文件

后端項(xiàng)目結(jié)構(gòu)：

- config：配置類
- controller：控制器
- dto：數(shù)據(jù)傳輸對(duì)象
- entity：實(shí)體類
- repository：數(shù)據(jù)訪問(wèn)層
- security：安全配置
- service：業(yè)務(wù)邏輯層
- util：通用工具類
- wikiApplication.java：?jiǎn)?dòng)類

具體實(shí)現(xiàn)見(jiàn)代碼倉(cāng)庫(kù)：https://github.com/ruanyandong/wiki

本文僅介紹如何搭建前后端分離的wiki知識(shí)庫(kù)系統(tǒng)，具體實(shí)現(xiàn)細(xì)節(jié)可以參考代碼倉(cāng)庫(kù)中的代碼。