基于 Vue + RuoYi 架构设计的商城Web/小程序实训课程

以下是基于 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健康状态

⚡️ 五、性能优化技巧

  1. 缓存策略

    • 商品详情页:Redis缓存 + 本地热点缓存(Caffeine)。
  2. 加载优化

    • 路由懒加载:() => import('@/views/Shop.vue')

    • 图片懒加载:v-lazy指令减少首屏请求量。

  3. 数据库

    • 读写分离:MySQL主从集群 + ShardingJDBC分库。

📊 六、课程设计特色

模块 企业级实践 教学价值
权限系统 RBAC动态菜单 + 数据权限 理解安全设计核心思想
秒杀场景 Redis预减库存 + MQ异步下单 掌握高并发解决方案
多端适配 UniApp编译Web/小程序/H5 提升全栈开发能力
DevOps Docker容器化 + Jenkins流水线 熟悉CI/CD标准化流程

📦 七、推荐资源

  1. 开源项目

  2. 工具链

    • 接口调试:Apifox(替代Postman)。

    • 部署监控:Spring Boot Admin + SkyWalking。

💡 实训建议

  1. 分阶段实施:第1-2周完成基础框架搭建,第3-5周开发核心模块,第6-8周集成多端与部署。

  2. 重点攻克:权限系统设计、高并发订单处理、跨端兼容性问题。

  3. 扩展方向:集成ELK日志分析、Prometheus监控、微信小程序云开发