以下是基于 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监控、微信小程序云开发
