引言

在當(dāng)今快速迭代的技術(shù)環(huán)境中，全棧開發(fā)成為許多開發(fā)者追求的技能之一。本文將詳細(xì)介紹一個(gè)基于 Vue3 Admin 的全棧后臺(tái)應(yīng)用項(xiàng)目，該項(xiàng)目前端基于 Soybean Admin 進(jìn)行二次開發(fā)，后端則使用 Nest.js 框架結(jié)合 Prisma 進(jìn)行 ORM 管理。通過這一項(xiàng)目，讀者可以深入了解前端與后端技術(shù)的結(jié)合，并學(xué)習(xí)如何構(gòu)建一個(gè)功能完善的全棧應(yīng)用。

一、項(xiàng)目簡(jiǎn)介

Vue3 Admin 是一個(gè)綜合性的后臺(tái)管理應(yīng)用，通過前后端的緊密配合，為開發(fā)者提供了一個(gè)功能豐富、易于擴(kuò)展的開發(fā)框架。前端部分采用了 Vue3.5、Ant Design Vue、UnoCSS 和 Pinia 等現(xiàn)代前端技術(shù)棧，后端則使用了 Nest.js、PostgreSQL 和 Prisma 等強(qiáng)大的后端技術(shù)棧。

• 前端技術(shù)棧：

a.Vue3.5：Vue.js 的最新版本，提供了更強(qiáng)大的響應(yīng)式系統(tǒng)和更好的性能優(yōu)化。

b.Ant Design Vue：基于 Ant Design 的 Vue 實(shí)現(xiàn)，提供了豐富的 UI 組件，提升了開發(fā)效率和用戶體驗(yàn)。

c.UnoCSS：一個(gè)原子化的 CSS 引擎，可以按需引入樣式，減少不必要的 CSS 代碼。

d.Pinia：Vue 的官方狀態(tài)管理庫(kù)，替代了 Vuex，提供了更簡(jiǎn)潔和高效的 API。

• 后端技術(shù)棧：

a.Nest.js：一個(gè)用于構(gòu)建高效、可靠和可擴(kuò)展的服務(wù)器端應(yīng)用程序的框架。

b.PostgreSQL：一個(gè)強(qiáng)大的開源關(guān)系型數(shù)據(jù)庫(kù)，提供了豐富的數(shù)據(jù)類型和強(qiáng)大的查詢功能。

c.Prisma：一個(gè)現(xiàn)代的數(shù)據(jù)庫(kù) ORM 工具，可以方便地將數(shù)據(jù)庫(kù)表結(jié)構(gòu)映射為 TypeScript 類型，并生成高效的查詢代碼。

項(xiàng)目線上預(yù)覽地址為：https://vue3.baiwumm.com/，使用用戶名 Admin 和密碼 abc123456 即可登錄體驗(yàn)。

二、系統(tǒng)功能設(shè)計(jì)

Vue3 Admin 項(xiàng)目在功能設(shè)計(jì)上充分考慮了實(shí)際應(yīng)用場(chǎng)景的需求，并融入了一些創(chuàng)新的設(shè)計(jì)思路。

1. 動(dòng)態(tài)國(guó)際化語(yǔ)言配置：
   系統(tǒng)支持動(dòng)態(tài)切換語(yǔ)言，用戶可以在前端選擇不同的語(yǔ)言選項(xiàng)，系統(tǒng)會(huì)根據(jù)用戶的選擇動(dòng)態(tài)加載相應(yīng)的語(yǔ)言包，實(shí)現(xiàn)國(guó)際化支持。
2. 記錄登錄用戶的 CURD 操作日志：
   系統(tǒng)通過后端服務(wù)記錄每個(gè)登錄用戶的 CURD（創(chuàng)建、讀取、更新、刪除）操作日志，便于管理員進(jìn)行審計(jì)和追蹤。
3. 用戶和角色權(quán)限的一對(duì)一映射：
   系統(tǒng)通過角色和權(quán)限的映射關(guān)系，實(shí)現(xiàn)了基于角色的訪問控制（RBAC）。用戶被分配不同的角色，每個(gè)角色關(guān)聯(lián)不同的菜單權(quán)限，系統(tǒng)根據(jù)用戶的角色動(dòng)態(tài)生成路由菜單。
4. 登錄用戶發(fā)布消息公告：
   系統(tǒng)支持登錄用戶發(fā)布消息公告，后端使用 Server-Sent Events（SSE）技術(shù)推送消息到前端，實(shí)現(xiàn)實(shí)時(shí)通知功能。多個(gè)用戶可以同時(shí)登錄系統(tǒng)，查看和接收消息公告。
5. 前端實(shí)用業(yè)務(wù)功能和有趣效果：
   系統(tǒng)還包含了一些前端常見的實(shí)用業(yè)務(wù)功能，如文件上傳、圖片預(yù)覽、分頁(yè)查詢等，并添加了一些有趣的效果，如動(dòng)態(tài)加載動(dòng)畫、過渡效果等，提升了用戶體驗(yàn)。

三、功能模塊

- 登錄 / 注銷

- 首頁(yè)

- 智能行政
  - 消息公告
  - 組織管理
  - 崗位管理
  - 組織架構(gòu)

- 個(gè)人中心

- 功能頁(yè)
  - 驗(yàn)證碼
  - 打印
  - 拾色器
  - 甘特圖
  - 圖片預(yù)覽
  - 自定義 Vue 指令
  - 懶加載
  - 圖片取色盤
  - 系統(tǒng)級(jí)取色器
  - 文件預(yù)覽
  - 流程圖
  - 瀑布流
  - Swiper

- 技術(shù)文檔
  - Soybean（內(nèi)鏈）
  - Vue3
  - Nest.js
  - Ant Design Vue
  - UnoCSS

- 系統(tǒng)設(shè)置
  - 用戶管理
  - 菜單管理
  - 角色管理
  - 國(guó)際化
  - 操作日志

- 關(guān)于

四、項(xiàng)目運(yùn)行

1. 安裝 PostgreSQL 數(shù)據(jù)庫(kù)，并導(dǎo)入 /postgreSQL 中的文件，修改 /server/env文件中的數(shù)據(jù)庫(kù)配置，這一步要保證成功，不然后端服務(wù)起不來(lái)

DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue3-admin?schema=public"

2. 拉取項(xiàng)目代碼

git clone https://github.com/baiwumm/vue3-admin.git
cd vue3-admin
// 進(jìn)入前端
cd web
// 進(jìn)入后端
cd server

3. 安裝依賴

npm install -g pnpm
pnpm install

4. 開發(fā)模式運(yùn)行

// 前端啟動(dòng)
pnpm dev
// 后端啟動(dòng)：開發(fā)模式
pnpm start:dev

5. 編譯項(xiàng)目

pnpm build

五、新增路由菜單

1. 在 web/src/views 目錄下新建 文件夾/index.vue 文件
2. 在菜單 系統(tǒng)管理-國(guó)際化-route 中添加路由配置
3. 在菜單 系統(tǒng)管理-菜單管理 中按照規(guī)則添加菜單，可打開多個(gè)標(biāo)簽頁(yè)參考，路由配置參考：系統(tǒng)路由
4. 在菜單 系統(tǒng)管理-角色管理 中編輯狀態(tài)中勾選相應(yīng)的菜單，保存刷新頁(yè)面，即可看到路由菜單生效

六、環(huán)境和依賴

為了順利運(yùn)行 Vue3 Admin 項(xiàng)目，需要準(zhǔn)備以下環(huán)境和依賴：

• 推薦包管理工具：pnpm，它提供了更快的安裝速度和更好的依賴管理。
• Git：用于克隆和管理項(xiàng)目版本，確保團(tuán)隊(duì)成員之間的代碼同步。
• Node.js：版本要求 >= 18.12.0，推薦 18.19.0 或更高，以確保項(xiàng)目依賴的兼容性。
• Pnpm：版本要求 >= 8.7.0，推薦最新版本，用于安裝和管理項(xiàng)目依賴。
• PostgreSQL：推薦最新版本，用于存儲(chǔ)項(xiàng)目數(shù)據(jù)。

七、演示圖

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

Vue3 Admin 項(xiàng)目通過前后端的緊密配合，實(shí)現(xiàn)了一個(gè)功能豐富、易于擴(kuò)展的全棧后臺(tái)應(yīng)用。通過本文的介紹，讀者可以了解項(xiàng)目的技術(shù)棧、功能設(shè)計(jì)和環(huán)境依賴，為學(xué)習(xí)全棧開發(fā)提供一個(gè)參考案例。無(wú)論是前端開發(fā)者還是后端開發(fā)者，都可以從中獲得寶貴的經(jīng)驗(yàn)和啟發(fā)。

希望本文能夠幫助讀者更好地了解 Vue3 Admin 項(xiàng)目，并激發(fā)大家學(xué)習(xí)和實(shí)踐全棧開發(fā)的熱情。未來(lái)，我們將繼續(xù)完善和優(yōu)化項(xiàng)目，為開發(fā)者提供更高效、更可靠的開發(fā)工具。

項(xiàng)目地址：

https://gitee.com/baiwumm/vue3-admin/