引言

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

一、項目簡介

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

• 前端技術棧：

a.Vue3.5：Vue.js 的最新版本，提供了更強大的響應式系統和更好的性能優化。

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

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

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

• 后端技術棧：

a.Nest.js：一個用于構建高效、可靠和可擴展的服務器端應用程序的框架。

b.PostgreSQL：一個強大的開源關系型數據庫，提供了豐富的數據類型和強大的查詢功能。

c.Prisma：一個現代的數據庫 ORM 工具，可以方便地將數據庫表結構映射為 TypeScript 類型，并生成高效的查詢代碼。

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

二、系統功能設計

Vue3 Admin 項目在功能設計上充分考慮了實際應用場景的需求，并融入了一些創新的設計思路。

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

三、功能模塊

- 登錄 / 注銷

- 首頁

- 智能行政
  - 消息公告
  - 組織管理
  - 崗位管理
  - 組織架構

- 個人中心

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

- 技術文檔
  - Soybean（內鏈）
  - Vue3
  - Nest.js
  - Ant Design Vue
  - UnoCSS

- 系統設置
  - 用戶管理
  - 菜單管理
  - 角色管理
  - 國際化
  - 操作日志

- 關于

四、項目運行

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

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. 開發模式運行

// 前端啟動
pnpm dev
// 后端啟動：開發模式
pnpm start:dev

5. 編譯項目

pnpm build

五、新增路由菜單

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

六、環境和依賴

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

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

七、演示圖

八、結語

Vue3 Admin 項目通過前后端的緊密配合，實現了一個功能豐富、易于擴展的全棧后臺應用。通過本文的介紹，讀者可以了解項目的技術棧、功能設計和環境依賴，為學習全棧開發提供一個參考案例。無論是前端開發者還是后端開發者，都可以從中獲得寶貴的經驗和啟發。

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

項目地址：

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