基于若依（RuoYi）二次开发的自营商城系统：从架构设计到落地的全栈实践

pursue.dreams2026-07-28 11:24

基于若依（RuoYi）二次开发的自营商城系统：从架构设计到落地的全栈实践

项目地址 ：https://gitee.com/zhbdream/shop-mall

技术栈 ：Java 17 + Spring Boot + MyBatis + Shiro + JWT + MySQL 8 + uni-app（Vue 3 + TypeScript）

开源协议 ：MIT License

关键词：若依、商城系统、Java 全栈、uni-app、微信小程序、自营电商

一、为什么要做这个项目？

在 2026 年的电商环境下，市面上不缺 SaaS 商城工具，但对开发者和中小团队来说，真正痛点在于：

  • SaaS 工具数据不自主，迁移成本高、定制空间有限；
  • 大型开源商城系统过于重量级，微服务架构虽好，但中小项目用 Spring Cloud 全家桶属于"杀鸡用牛刀"；
  • 若依框架生态成熟，但缺少一个"开箱即用"的商城业务样板，大多数开发者拿到若依后还要从零搭建电商模块。

Shop-Mall 就是为了解决这个问题而诞生的------基于若依框架二次开发，保留其成熟的权限管理、日志审计、代码生成等基础设施，在此之上构建一套完整的自营商城业务能力，同时配套 uni-app 移动端，实现"管理后台 + H5/微信小程序"双端覆盖。

一句话定位 ：不是要做一个"全行业通用电商平台"，而是给中小团队和独立开发者一个能快速跑起来、能直接二次开发的自营商城样板。

二、整体架构设计

2.1 项目结构

复制代码 
shop-mall/
├── ShopAdmin/          # 后端服务（Java）
│   ├── shop-admin/     # 主启动模块 + Thymeleaf 管理后台
│   ├── shop-common/    # 通用工具 & 常量
│   ├── shop-framework/ # 框架核心（安全、拦截器、配置）
│   ├── shop-system/    # 系统管理（用户、角色、菜单）
│   ├── shop-business/  # 商城业务模块（商品、订单、会员、营销等）
│   ├── sql/            # 数据库脚本（脱敏演示数据）
│   └── doc/            # 设计文档 & 界面截图
└── shopApp/            # 移动端（uni-app + Vue 3 + TypeScript）
    ├── pages/          # 页面组件
    ├── components/     # 公共组件
    ├── api/            # 接口定义
    ├── config/         # 配置文件
    └── store/          # 状态管理

项目采用前后端分离 + 多端适配的设计思路：

端 技术方案 说明
管理后台 Thymeleaf 服务端渲染 基于若依经典模板，运营/管理员使用
移动端 REST API Spring Boot 统一接口 同一套 API 同时服务 H5 和小程序
用户端 H5 / 小程序 uni-app（Vue 3 + TS） 一套代码编译到 H5 和微信小程序

2.2 技术选型分析

后端技术栈
技术 版本 选型理由
Java 17（LTS） 长期支持版本，虚拟线程等现代特性
Spring Boot 3.x 自动配置、内嵌服务器、生态完善
MyBatis 3.5.x 灵活的 SQL 映射，适合复杂电商查询
Apache Shiro 1.7+ 轻量级安全框架，认证/授权/加密一体化
JWT - 无状态 Token 认证，天然适配前后端分离
MySQL 8.0+ 窗口函数、JSON 字段支持，满足复杂业务建模
阿里云 OSS - 商品图片/静态资源的云端存储
t-io WebSocket - 在线客服实时通信
前端技术栈
技术 说明
uni-app 跨端框架，一套代码编译 H5 + 微信小程序
Vue 3 Composition API，更好的类型推断和性能
TypeScript 类型安全，降低多人协作的沟通成本

2.3 为什么选若依作为底座？

若依（RuoYi）是国内使用最广泛的 Java EE 快速开发平台之一，其核心价值在于：

  1. 开箱即用的基础设施：用户管理、角色权限、菜单配置、数据字典、操作日志、登录日志、代码生成器等企业级功能已经内置，不需要重复造轮子；
  2. 经典技术组合：Spring Boot + MyBatis + Shiro/JWT，技术栈成熟稳定，招聘门槛低，社区资料丰富；
  3. 模块化设计：ruoyi-common / ruoyi-framework / ruoyi-system 等分层清晰，二次开发时业务代码与框架代码边界明确；
  4. MIT 开源协议：商业友好，无授权风险。

在此基础上做商城业务扩展，开发者可以把精力聚焦在商品、订单、营销、库存等核心业务逻辑上，而不是花几周时间去搭建后台管理框架。

三、核心功能模块详解

3.1 商品管理

商品模块是商城系统的基石，Shop-Mall 实现了完整的商品域建模：

  • 商品 SPU/SKU 模型：支持多规格组合（如颜色 × 尺码），每个 SKU 独立管理价格、库存、图片；

  • 分类体系：多级商品分类树，支持拖拽排序；

  • 标签系统：自定义商品标签，用于前台筛选和营销分组；

  • 评价管理：用户评价、评分、图片评价，后台可审核/回复；

  • 搜索运营：关键词配置、搜索推荐、热搜榜单。

    ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
    │ 商品 SPU │────<│ 商品 SKU │────<│ 库存管理 │
    │ (标准品) │ │ (最小售卖) │ │ (独立库存) │
    └─────────────┘ └─────────────┘ └─────────────┘
    │ │
    ▼ ▼
    ┌─────────────┐ ┌─────────────┐
    │ 分类/标签 │ │ 价格/图片 │
    └─────────────┘ └─────────────┘

3.2 订单与售后

订单系统覆盖电商核心交易链路：

  • 购物车：支持 SKU 级别的数量修改、选中/取消、失效商品标记；
  • 订单流程：下单 → 支付 → 发货 → 收货 → 完成，支持超时自动取消；
  • 地址管理：用户多地址管理，默认地址设置；
  • 售后流程：退款/退货申请、审核、退款原路返回。

3.3 营销体系

营销是电商增长的核心驱动力，项目内置多种营销工具：

功能 说明
Banner 轮播 首页/频道页轮播图，支持链接跳转配置
优惠券 满减券/折扣券，支持发放数量、使用门槛、有效期管理
秒杀活动 限时特价，库存独立管理，防超卖
搜索运营 热搜词、搜索推荐、关键词关联

3.4 会员体系

  • 登录方式：短信验证码登录（接口已预留，默认 Mock）+ 密码登录；
  • 收藏功能：商品收藏列表，支持批量管理；
  • 余额系统：余额充值、消费记录、余额流水查询。

3.5 在线客服

基于 t-io WebSocket 实现实时客服聊天：

  • 用户端：发起咨询、发送文字/图片消息；
  • 管理后台：客服工作台，多会话管理、消息记录持久化；
  • 连接管理：心跳检测、断线重连、离线消息队列。

3.6 供应链管理

面向自营场景的轻量供应链模块：

  • 供应商管理：供应商信息维护、资质归档；
  • 采购管理：采购单创建、入库确认；
  • 库存流水：入库/出库/盘点记录，库存变动全链路可追溯。

3.7 堂食/桌台扫码点餐（特色扩展）

这是一个有意思的扩展模块，将商城能力延伸到了线下餐饮场景：

  • 门店管理：多门店配置；
  • 桌台管理：桌台编号、二维码生成；
  • 扫码点餐：用户扫码进入点餐页面，选菜下单；
  • 堂食看板：后厨/前台订单看板，实时查看订单状态；
  • 结算：支持 Mock 支付，可对接实际支付渠道。

这个模块的设计思路值得参考------商城底层能力（商品、订单、支付）是通用的，只需要在上层叠加不同的业务场景（堂食/外卖/零售），就能快速覆盖多个业态。

四、管理后台界面一览

管理后台基于若依经典的 Thymeleaf 模板，以下是核心页面：

工作台 商品管理 订单管理
数据概览、待办事项 商品/SKU/分类/标签管理 订单列表、详情、发货
堂食看板 门店桌台 客服聊天
实时订单状态 桌台管理与二维码 WebSocket 实时通信

完整截图见：ShopAdmin/doc/界面截图.md

五、移动端界面一览

移动端使用 uni-app 开发，同时支持 H5 和微信小程序：

首页 分类 商品详情 购物车
Banner + 秒杀 + 推荐 多级分类浏览 规格选择、评价、加购 SKU 选择、数量管理
订单 我的 登录 客服
订单列表/详情/物流 个人中心、收藏、余额 短信/密码登录 实时聊天

六、快速开始

6.1 环境要求

环境 版本要求
JDK ≥ 17
MySQL ≥ 8.0
Maven ≥ 3.0
Node.js ≥ 16（uni-app 推荐）

6.2 数据库初始化

sql 复制代码 
CREATE DATABASE shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

导入脱敏演示数据：

bash 复制代码 
mysql -u root -p shop < ShopAdmin/sql/shop.sql

数据库脚本说明详见：ShopAdmin/sql/README.md

6.3 启动后端

bash 复制代码 
cd ShopAdmin

# 复制本地配置（填写数据库密码、OSS密钥等，切勿提交到仓库）
cp shop-admin/src/main/resources/application-local.yml.example \
   shop-admin/src/main/resources/application-local.yml

# 编译打包
mvn clean package -DskipTests

# 启动（启用 druid + local 配置）
java -jar shop-admin/target/shop-admin.jar --spring.profiles.active=druid,local

启动后访问 http://localhost/ 进入管理后台（默认账号见 SQL 说明文档）。

6.4 启动移动端

bash 复制代码 
cd shopApp

# 安装依赖
npm install

# 修改接口地址
# 编辑 config/index.ts 中的 baseUrl，或参考 config/index.example.ts

# 启动 H5 开发服务
npm run dev:h5

# 微信小程序：
# 1. 在 HBuilderX 或微信开发者工具中打开 shopApp 目录
# 2. 填写 manifest.json 中的微信小程序 appid
# 3. 编译运行

七、架构设计亮点与技术实践

7.1 安全设计

  • 配置脱敏 ：仓库内的配置文件和 SQL 均已脱敏，生产环境的密钥通过 application-local.yml 或环境变量注入，杜绝密钥泄露；
  • Shiro + JWT 双重保障：Shiro 负责权限模型（RBAC），JWT 负责无状态认证，两者协同覆盖了管理后台和移动端 API 的安全需求；
  • 安全策略文档 ：项目提供独立的 SECURITY.md，明确漏洞报告流程。

7.2 移动端跨端实践

uni-app 的跨端能力是本项目的一大亮点：

复制代码 
                    ┌── H5（移动端浏览器）
shopApp (Vue 3) ────┤
                    └── 微信小程序

通过条件编译处理平台差异：

typescript 复制代码 
// #ifdef MP-WEIXIN
// 微信小程序专属逻辑：调用 wx.login 获取 code
wx.login({
  success: (res) => {
    // 用 code 换取 openid
  }
});
// #endif

// #ifdef H5
// H5 专属逻辑：走短信验证码登录
// #endif

一套代码，两端运行，大幅降低了移动端的开发和维护成本。

7.3 实时通信架构

在线客服模块基于 t-io WebSocket 实现：

复制代码 
用户端 (uni-app)          管理后台 (Thymeleaf)
    │                           │
    │    WebSocket 连接          │    WebSocket 连接
    │  ─────────────────────────▶│
    │                           │
    │    发送消息                 │    接收消息
    │  ─────────────────────────▶│
    │                           │
    │    接收回复                 │    发送回复
    │  ◀─────────────────────────│

t-io 是一个高性能的 Java 网络通信框架，相比原生 WebSocket，它提供了连接管理、心跳检测、消息分发等开箱即用的能力，非常适合客服聊天这种长连接场景。

7.4 配置管理最佳实践

项目采用了多 Profile 配置隔离的策略：

yaml 复制代码 
# application.yml --- 通用配置（可提交）
spring:
  profiles:
    active: druid

# application-local.yml --- 本地/生产配置（不提交，加入 .gitignore）
spring:
  datasource:
    password: your_actual_password
aliyun:
  oss:
    access-key: your_access_key
    secret-key: your_secret_key

这样做的好处是：

  1. 仓库中的配置是安全的模板配置，不含任何敏感信息；
  2. 不同环境（开发/测试/生产）只需维护各自的 application-{env}.yml；
  3. 新人 clone 项目后，复制 example 文件并填入自己的配置即可运行。

八、与同类开源商城系统对比

在 2026 年的开源商城生态中，有几款主流方案值得关注。以下是 Shop-Mall 与它们的定位对比：

维度 Shop-Mall Mall4j CRMEB JooLun
后端框架 若依 + Spring Boot Spring Boot 3 ThinkPHP / Java Spring Cloud
架构模式 单体（轻量） 单体/微服务 单体/微服务 微服务
移动端 uni-app (Vue 3 + TS) uni-app uni-app uni-app
管理后台 Thymeleaf（若依模板） Vue 3 + Element Plus Vue Vue
适用场景 中小自营、学习参考 中大型企业 中小商家 大型平台
部署复杂度 ⭐ 低 ⭐⭐ 中 ⭐⭐ 中 ⭐⭐⭐ 高
学习成本 ⭐ 低（若依生态） ⭐⭐ 中 ⭐⭐ 中 ⭐⭐⭐ 高
特色功能 堂食扫码点餐扩展 B2B2C 多商户 分销裂变 SaaS 多租户

Shop-Mall 的差异化优势：

  1. 最低的上手门槛：若依框架在国内 Java 开发者中覆盖率极高，大部分后端开发者对若依的代码结构和设计模式都不陌生，二次开发几乎零学习成本；
  2. 轻量但不简陋：单体架构部署简单（一个 JAR 包即可运行），但商城功能模块完整，覆盖了商品、订单、营销、会员、客服、供应链等核心场景；
  3. 堂食场景扩展：这是其他商城系统很少提供的功能，体现了"底层能力复用 + 上层场景灵活扩展"的设计哲学；
  4. Java 17 + TypeScript：技术栈保持现代，Java 17 的 LTS 特性和 TypeScript 的类型安全，为项目的长期维护提供保障。

九、适合什么样的团队和场景？

✅ 推荐使用场景

  • 中小自营电商：品牌自营商城，商品 SKU 数量在千级别以内；
  • 学习 & 毕设：Java 全栈开发者学习电商系统设计的参考样板；
  • 快速 MVP：创业团队快速验证商业模型的技术底座；
  • 线下 + 线上融合：堂食扫码、门店自提等 O2O 场景；
  • 若依用户：已经在使用若依的团队，需要快速叠加商城能力。

❌ 不推荐场景

  • 多商户入驻平台（B2B2C）→ 建议选择 Mall4j 或 JooLun；
  • 大规模分布式电商（日活百万级）→ 需要微服务架构支撑；
  • 跨境电商 → 需要多语言、多币种、国际支付等专项能力。

十、二次开发指南与建议

10.1 新增业务模块的标准流程

若依框架提供了强大的代码生成器，新增业务表后，可以一键生成 Controller / Service / Mapper / 前端页面。推荐的标准流程：

复制代码 
1. 设计数据库表（遵循若依命名规范：t_shop_xxx）
2. 在若依代码生成器中导入表
3. 生成基础 CRUD 代码
4. 在生成的基础上叠加业务逻辑（如库存扣减、订单状态机）
5. 配置菜单权限

10.2 支付对接

项目默认使用 Mock 支付，生产环境需要对接真实支付渠道：

  • 微信支付：申请微信商户号，接入微信支付 V3 API；
  • 支付宝：接入支付宝开放平台；
  • 余额支付：项目已内置余额模块，可直接使用。

10.3 短信服务

登录验证码默认 Mock，生产环境建议对接：

  • 阿里云短信
  • 腾讯云短信
  • 其他 SMS 服务商

接口已预留，只需实现具体的发送逻辑即可。

10.4 部署建议

单机部署（适合初期）：

复制代码 
Nginx（静态资源 + 反向代理）
    │
    ├── 管理后台（Thymeleaf 页面）
    ├── REST API（Spring Boot JAR）
    └── MySQL 8

进阶部署（流量增长后）：

复制代码 
Nginx 负载均衡
    │
    ├── Spring Boot 实例 × 2+
    ├── MySQL 主从
    ├── Redis 缓存
    └── 阿里云 OSS（静态资源）

十一、总结

Shop-Mall 的核心价值在于：用最低的技术成本，覆盖最完整的自营电商场景。

它没有追求"大而全"的微服务架构，而是务实地选择了单体 + 模块化设计，让中小团队能快速跑起来、能看懂代码、能自主迭代。基于若依的底座意味着权限管理、日志审计、代码生成等企业级基础设施已经就绪，开发者可以把精力集中在业务逻辑上。

堂食扫码点餐的扩展模块更是点睛之笔------它证明了这套系统的底层能力（商品、订单、支付）是通用的，可以灵活适配不同的业务场景。

如果你正在寻找一个轻量但完整的 Java 商城开源项目，或者你的团队已经在使用若依并需要快速叠加电商能力，Shop-Mall 值得深入了解。

项目地址 ：https://gitee.com/zhbdream/shop-mall

技术栈速览：

  • 后端：Java 17 / Spring Boot / MyBatis / Shiro / JWT / MySQL 8 / 阿里云 OSS / t-io WebSocket
  • 前端：uni-app（Vue 3 + TypeScript）
  • 管理后台：Thymeleaf（若依经典模板）

开源协议：MIT License（基于若依 MIT 二次开发）

如果这篇文章对你有帮助，欢迎点赞、收藏、关注。有任何问题欢迎在评论区交流，也欢迎到 Gitee 仓库提交 Issue 和 PR！

相关推荐
RuoyiOffice2 天前
超级个体接私活必看：后端+前端+移动端三端一体企业管理系统怎么选（2026）
java·spring boot·vue·uniapp·全栈·企业管理·接私活
蜡台3 天前
使用 uni-popup 实现数据选择器Data-Picker
前端·javascript·html·uniapp·uni-popup·data-picker
蜡台1 个月前
uni-indexed-list 之扩展组件实现城市列表带索引查询过滤功能
前端·vue.js·uniapp·uni-indexed
资深备胎一号1 个月前
uniapp云打包的ios证书和profile文件从哪里来
uniapp·p12证书
吕永强2 个月前
基于SpringBoot+Vue的土特产销售与管理系统的设计与实现（源码+论文+部署）
毕业设计·商城·土特产商城·土特产销售与管理系统·土特产销售与管理·基于springboot土特产·销售与管理
蜡台2 个月前
UniApp WebView 组件宽高设置与动态适配全方案
前端·javascript·uniapp·webview·iframe
路光.2 个月前
uniapp中解决webview在app中调用，有过渡空白问题，增加过渡动效
uni-app·vue·app·uniapp
小云小白2 个月前
若依-vue3 把深色版本改成天蓝色-含登录页
vue3·若依·天蓝色
吕永强2 个月前
基于SpringBoot+Vue农产品销售与管理系统（源码+论文+部署）
毕业设计·商城·毕业论文·电商·农产品·农产品商城·农产品销售与管理系统
热门推荐
01GitHub 镜像站点02如何新建文件夹？ 电脑新建文件夹的4种方法032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）05AI科技热点日报 | 2026年07月01日06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？082026 年 AI 大模型 & AI 编程工具实战全总结09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南