Vue3 Admin：前端的全棧開發(fā)之旅
引言
在當(dāng)今快速迭代的技術(shù)環(huán)境中，全棧開發(fā)成為許多開發(fā)者追求的技能之一。本文將詳細(xì)介紹一個基于 Vue3 Admin 的全棧后臺應(yīng)用項目，該項目前端基于 Soybean Admin 進(jìn)行二次開發(fā)，后端則使用 Nest.js 框架結(jié)合 Prisma 進(jìn)行 ORM 管理。通過這一項目，讀者可以深入了解前端與后端技術(shù)的結(jié)合，并學(xué)習(xí)如何構(gòu)建一個功能完善的全棧應(yīng)用。
一、項目簡介
Vue3 Admin 是一個綜合性的后臺管理應(yīng)用，通過前后端的緊密配合，為開發(fā)者提供了一個功能豐富、易于擴(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 實現(xiàn)，提供了豐富的 UI 組件，提升了開發(fā)效率和用戶體驗。
c.UnoCSS：一個原子化的 CSS 引擎，可以按需引入樣式，減少不必要的 CSS 代碼。
d.Pinia：Vue 的官方狀態(tài)管理庫，替代了 Vuex，提供了更簡潔和高效的 API。
- 后端技術(shù)棧：
a.Nest.js：一個用于構(gòu)建高效、可靠和可擴(kuò)展的服務(wù)器端應(yīng)用程序的框架。
b.PostgreSQL：一個強(qiáng)大的開源關(guān)系型數(shù)據(jù)庫，提供了豐富的數(shù)據(jù)類型和強(qiáng)大的查詢功能。
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è)計思路。
- 動態(tài)國際化語言配置：
系統(tǒng)支持動態(tài)切換語言，用戶可以在前端選擇不同的語言選項，系統(tǒng)會根據(jù)用戶的選擇動態(tài)加載相應(yīng)的語言包，實現(xiàn)國際化支持。 - 記錄登錄用戶的 CURD 操作日志：
系統(tǒng)通過后端服務(wù)記錄每個登錄用戶的 CURD（創(chuàng)建、讀取、更新、刪除）操作日志，便于管理員進(jìn)行審計和追蹤。 - 用戶和角色權(quán)限的一對一映射：
系統(tǒng)通過角色和權(quán)限的映射關(guān)系，實現(xiàn)了基于角色的訪問控制（RBAC）。用戶被分配不同的角色，每個角色關(guān)聯(lián)不同的菜單權(quán)限，系統(tǒng)根據(jù)用戶的角色動態(tài)生成路由菜單。 - 登錄用戶發(fā)布消息公告：
系統(tǒng)支持登錄用戶發(fā)布消息公告，后端使用 Server-Sent Events（SSE）技術(shù)推送消息到前端，實現(xiàn)實時通知功能。多個用戶可以同時登錄系統(tǒng)，查看和接收消息公告。 - 前端實用業(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)于四、項目運(yùn)行
- 安裝 PostgreSQL 數(shù)據(jù)庫，并導(dǎo)入
/postgreSQL中的文件，修改/server/env文件中的數(shù)據(jù)庫配置，這一步要保證成功，不然后端服務(wù)起不來
DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue3-admin?schema=public"- 拉取項目代碼
git clone https://github.com/baiwumm/vue3-admin.git
cd vue3-admin
// 進(jìn)入前端
cd web
// 進(jìn)入后端
cd server- 安裝依賴
npm install -g pnpm
pnpm install- 開發(fā)模式運(yùn)行
// 前端啟動
pnpm dev
// 后端啟動：開發(fā)模式
pnpm start:dev- 編譯項目
pnpm build
五、新增路由菜單
- 在
web/src/views目錄下新建文件夾/index.vue文件 - 在菜單
系統(tǒng)管理-國際化-route中添加路由配置 - 在菜單
系統(tǒng)管理-菜單管理中按照規(guī)則添加菜單，可打開多個標(biāo)簽頁參考，路由配置參考：系統(tǒng)路由 - 在菜單
系統(tǒng)管理-角色管理中編輯狀態(tài)中勾選相應(yīng)的菜單，保存刷新頁面，即可看到路由菜單生效
六、環(huán)境和依賴
為了順利運(yùn)行 Vue3 Admin 項目，需要準(zhǔn)備以下環(huán)境和依賴：
- 推薦包管理工具：pnpm，它提供了更快的安裝速度和更好的依賴管理。
- Git：用于克隆和管理項目版本，確保團(tuán)隊成員之間的代碼同步。
- Node.js：版本要求 >= 18.12.0，推薦 18.19.0 或更高，以確保項目依賴的兼容性。
- Pnpm：版本要求 >= 8.7.0，推薦最新版本，用于安裝和管理項目依賴。
- PostgreSQL：推薦最新版本，用于存儲項目數(shù)據(jù)。
七、演示圖
|
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
八、結(jié)語
Vue3 Admin 項目通過前后端的緊密配合，實現(xiàn)了一個功能豐富、易于擴(kuò)展的全棧后臺應(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/
