引言

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

一、項目簡介

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

• 前端技術(shù)棧：

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

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

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

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

• 后端技術(shù)棧：

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

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

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

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

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

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

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

三、功能模塊

- 登錄 / 注銷

- 首頁

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

- 個人中心

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

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

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

- 關(guān)于

四、項目運行

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

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

2. 拉取項目代碼

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

3. 安裝依賴

npm install -g pnpm
pnpm install

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

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

5. 編譯項目

pnpm build

五、新增路由菜單

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

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

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

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

七、演示圖

八、結(jié)語

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

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

項目地址：

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