以下是基于?Vue + RuoYi 架構設計的商城Web/小程序實訓課程方案，結合企業級開發需求與教學實踐，涵蓋全棧技術棧與實戰模塊：
📚?一、課程概述
目標：通過Vue前端 + RuoYi后端（Spring Boot）開發企業級電商系統，實現多終端（Web/H5/小程序）適配，覆蓋從架構設計到部署上線的全流程。
周期：8周（建議每日3小時）
適合人群：具備基礎Java/Vue知識的開發者，熟悉HTML/CSS/JavaScript。
???二、技術棧解析
1. 前端技術棧
| 技術 | 作用 | 實訓案例 |
|---|---|---|
| Vue | 響應式組件開發 | 商品列表動態渲染、購物車實時更新 |
| Vite | 極速構建工具 | 替代Webpack，編譯效率提升70%+ |
| Pinia | 狀態管理（替代Vuex） | 全局管理用戶登錄態、購物車數據 |
| UniApp | 跨端開發框架 | 一套代碼編譯Web/H5/微信小程序 |
| Element-UI | UI組件庫 | 后臺管理系統表單/表格組件 |
2. 后端技術棧（RuoYi）
| 組件 | 功能 |
|---|---|
| Spring Boot? | 核心框架，快速啟動 |
| MyBatis Plus | ORM增強，自動生成CRUD代碼 |
| Spring Security | JWT認證 + RBAC權限控制 |
| Redis | 緩存購物車/秒殺庫存 |
| Flowable | 工作流引擎（訂單狀態機） |
3. 多終端適配方案
?三、核心模塊實訓內容
1. 用戶與權限系統
-
JWT認證流程
前端：axios攔截器添加Token；后端：Spring Security校驗權限。 -
RBAC動態菜單
后端返回權限樹 → 前端v-for遞歸生成導航菜單。
2. 商品與購物車
-
商品管理
-
分類樹組件：遞歸組件 + 懶加載子分類。
-
SKU選擇器：Vue計算屬性聯動庫存狀態。
-
-
購物車實現
-
分布式緩存：Redis存儲用戶購物車（Key:?
cart:{userId}）。 -
本地同步：Pinia持久化到
localStorage防丟失。
-
3. 訂單與支付
-
高并發訂單
-
樂觀鎖防超賣：
UPDATE stock SET num=num-1 WHERE id=? AND num>。 -
消息隊列削峰：RocketMQ異步處理訂單創建。
-
-
支付集成
微信/支付寶沙箱對接，RuoYi支付模塊擴展回調接口。
4. 多終端適配（UniApp）
<!-- 示例：商品列表頁跨端兼容 -->
<template><view v-if="isH5"><!-- Web端組件 --></view><scroll-view v-else><!-- 小程序滾動組件 --></scroll-view>
</template>
<script>export default { computed: { isH5: () => process.env.VUE_APP_PLATFORM === 'h5' } }
</script>🔧?四、項目實戰流程
1. 環境初始化
vue create mall-web --preset RuoYi-Vue3-Template-
后端：
克隆RuoYi-Pro源碼 → 導入ruoyi-vue-pro.sql?→ 配置Redis連接。
2. 聯調關鍵配置
-
跨域解決（Vite代理）：
// vite.config.js server: { proxy: { '/dev-api': { target: 'http://localhost:8080', rewrite: path => path.replace(/^\/dev-api/, '') } } } -
接口規范：
RESTful API設計（商品接口：GET /api/product/{id}）。
3. 部署上線
| 環境 | 工具 | 操作 |
|---|---|---|
| 前端 | Nginx | 托管dist靜態資源 |
| 后端 | Docker | 容器化部署Spring Boot應用 |
| 監控 | Spring Boot Admin | 實時檢測API健康狀態 |
???五、性能優化技巧
-
緩存策略
-
商品詳情頁：Redis緩存 + 本地熱點緩存（Caffeine）。
-
-
加載優化
-
路由懶加載：
() => import('@/views/Shop.vue')。 -
圖片懶加載：
v-lazy指令減少首屏請求量。
-
-
數據庫
-
讀寫分離：MySQL主從集群 + ShardingJDBC分庫。
-
📊?六、課程設計特色
| 模塊 | 企業級實踐 | 教學價值 |
|---|---|---|
| 權限系統 | RBAC動態菜單 + 數據權限 | 理解安全設計核心思想 |
| 秒殺場景 | Redis預減庫存 + MQ異步下單 | 掌握高并發解決方案 |
| 多端適配 | UniApp編譯Web/小程序/H5 | 提升全棧開發能力 |
| DevOps | Docker容器化 + Jenkins流水線 | 熟悉CI/CD標準化流程 |
📦?七、推薦資源
-
開源項目
-
RuoYi-Vue3前端源碼：gitee.com/weifengze/RuoYi-Vue3。
-
UniApp商城模板：RuoYi-Mall小程序。
-
-
工具鏈
-
接口調試：Apifox（替代Postman）。
-
部署監控：Spring Boot Admin + SkyWalking。
-
💡?實訓建議：
分階段實施：第1-2周完成基礎框架搭建，第3-5周開發核心模塊，第6-8周集成多端與部署。
重點攻克：權限系統設計、高并發訂單處理、跨端兼容性問題。
擴展方向：集成ELK日志分析、Prometheus監控、微信小程序云開發
?
