青橙电商项目 ​

1 项目介绍 ​

在电商业务日趋复杂的今天，一个成熟的商城系统不仅要支撑消费者的购物体验，还要兼顾商家的经营管理和平台的运营管控。

青橙电商 是一套面向真实业务场景打造的企业级三端商城系统——从零到一，覆盖「商品 → 搜索 → 购物车 → 下单 → 支付 → 售后 → 评价」完整电商链路，三端一体、开箱即用。它既是一套可落地、可扩展的商城解决方案，也是一个企业级 Java 工程化设计与架构实践的很好范本。

项目把 Spring Boot、Elasticsearch 搜索、RabbitMQ 消息队列、Redis 缓存、Spring Security 鉴权、事件驱动与设计模式等主流技术，有机地融入到真实的电商业务场景中。

无论你是想系统学习电商项目架构，还是需要一套可落地、可扩展的商城解决方案，青橙电商 都值得深入了解。

1.1 项目概述 ​

青橙电商 基于 Spring Boot 框架设计，采用 Maven 多模块分层组织，围绕电商核心链路构建完整业务闭环，天然划分为三大业务端，各司其职、互不干扰：

三端共用底层业务模块（商品、订单、会员、促销、系统、安全），通过独立的 Web 层对外提供服务：既保证了业务逻辑的复用，又实现了不同角色的权限与数据隔离——一套系统，即可支撑平台、商家、消费者三方协同运转。

1.2 系统架构 ​

青橙电商 采用清晰的领域分层架构，自顶向下分为应用接入层、核心业务层、基础支撑层、中间件与基础设施、第三方服务五个层次，层层解耦、职责单一：

业务模块（product / order / member / system）与三端接入层解耦，模块边界清晰，便于团队协作与独立演进；中间件与第三方服务统一接入，为上层业务提供稳定、可扩展的技术底座。

1.3 核心业务流程 ​

系统围绕电商核心链路构建完整业务闭环：商品 → 搜索 → 购物车 → 下单 → 支付 → 售后 → 评价。每一步都有对应的模块与技术保障，评价数据反哺商品与运营，形成从获客、转化到复购增长的业务飞轮：

1.4 系统模块划分 ​

项目共包含 10 个 Maven 子模块，按「基础支撑层 → 核心业务层 → 应用接入层」三个层次组织，职责分明：

• 基础支撑层

  • mall-common：公共基础模块，沉淀业务枚举、常量、事件模型、异常体系与大量通用工具类（雪花算法 ID、货币计算、HTTP 客户端、日期处理等）
  • mall-common-web：公共 Web 服务，提供文件上传等跨端通用能力
  • mall-security：安全认证模块，基于 Spring Security + JWT 实现 Token 鉴权、登录上下文管理与接口权限控制

• 核心业务层

  • mall-product：商品与营销中心，涵盖 product（商品 / 分类 / 品牌 / 规格 / SKU）、promotion（优惠券 / 秒杀 / 满减）、search（Elasticsearch 商品检索）三大子域
  • mall-order：交易履约中心，包含 cart（购物车）、order（订单）、payment（支付）、aftersale（售后）、evaluation（评价）
  • mall-member：会员与店铺中心，管理会员信息、收货地址、店铺、店员、店铺组织架构与运费模板
  • mall-system：系统管理中心，负责管理员、部门、角色、菜单权限（RBAC）、地区、页面装修、支付 / 物流插件配置

• 应用接入层

  • mall-admin-web、mall-store-web、mall-consumer-web：分别对应运营端、店铺端、用户端的接口聚合层

1.5 核心业务功能 ​

1. 商品与搜索：支持多级分类、品牌、规格、参数的精细化管理，商品以 SPU / SKU 模型组织，并提供商品草稿、上下架审核等完整流程；搜索侧接入 Elasticsearch，实现全文检索与品牌 / 参数 / 价格区间聚合筛选，并通过 Redis 记录热搜词，为用户提供流畅的购物体验。
2. 营销促销：内置优惠券（平台券 / 店铺券）、秒杀、满减、积分商品、拼团等多种营销玩法，可灵活组合，助力商家提升转化。
3. 购物车与交易结算：采用渲染器（责任链）模式，将复杂的价格计算拆分为「基础价格 → 单品促销 → 优惠券 → 满减 → 运费 → 佣金 → 分销价 → 最终价」一系列独立渲染步骤，每一步（BasePriceRender、CouponRender、SkuFreightRender、CommissionRender 等）职责单一、可插拔扩展，让计价逻辑清晰可维护。
4. 订单、支付与售后：订单状态通过事件驱动机制流转，配合延迟消息队列实现「超时未支付自动取消」；支付环节通过统一的 PayDelegate 支付委托对接微信支付、支付宝，支持收银台、退款、账单结算；售后模块覆盖退款、退货及售后原因管理。
5. 会员与店铺：会员体系支持收货地址、积分、店铺会员等；店铺端提供店员管理、店铺部门 / 角色 / 菜单（组织级 RBAC）、运费模板与店铺设置，满足多商户经营诉求。
6. 系统与权限：基于 RBAC 模型实现管理员、部门、角色、菜单的权限管理，并支持页面数据装修、地区管理、物流（快递鸟）与支付插件配置，为平台运营提供强大的后台支撑。

1.6 技术栈总览 ​

1.7 项目亮点 ​

青橙电商 不止功能完整，更在架构设计上沉淀了六大亮点，兼顾高并发、可扩展与易维护：

1. 多模块分层，模块解耦：业务模块（product / order / member / system）与接入层（三端 Web）解耦，模块边界清晰，便于团队协作与独立演进。
2. 事件驱动，模块解耦：通过 OrderStatusChangeEvent、ProductStatusChangeEvent 等事件模型，让订单状态变更自动触发促销（返还优惠券）、商品（更新销量）等模块的联动处理，各模块间低耦合、易扩展。
3. 消息队列削峰与异步：基于 RabbitMQ 定义商品库存更新、支付状态更新、退款、优惠券退回、订单确认等队列，并借助延迟队列实现订单超时自动取消，从容应对高并发场景。
4. 多级缓存加速：Redis 结合 Spring Cache 注解（@Cacheable / @CacheEvict）缓存分类、运费模板、店铺菜单等热点数据，并使用 ZSet 维护热搜榜单，显著降低数据库压力。
5. 设计模式的工程化落地：购物车结算的渲染器 / 责任链模式、支付的委托模式、系统插件的策略模式，让复杂业务逻辑结构清晰、易于维护和扩展。
6. 分布式 ID 与安全：采用雪花算法生成分布式唯一 ID；配置层面使用 Jasypt 加密敏感信息，全方位保障系统安全。

为什么选择 青橙电商？

• 三端一体：一套系统覆盖买家、商家、平台全角色，权限与数据天然隔离
• 技术主流：Spring Boot + Elasticsearch + RabbitMQ + Redis + Spring Security，主流技术栈一站式实践
• 可落地、可扩展：从商品到售后全链路闭环，开箱即用，支持二次开发与业务扩展
• 学习标杆：架构分层、事件驱动、设计模式等最佳实践，是学习电商项目架构与面试的高价值范本

1.8 功能界面 ​

1.8.1 运营端 ​

商品管理：

促销管理：

订单管理：

会员管理：

1.8.2 店铺端 ​

登录界面：

店铺首页：

商品管理：

订单管理：

评价管理：

秒杀活动：

1.8.3 用户端 ​

登录界面

登录成功，去首页购物

通过商品分类浏览商品

立即购买

购物车

去结算：

提交订单

我的订单：

2 环境配置 ​

2.1 虚拟机 ​

Linux命令速查：https://yjoffer.com/tools/linux-cheatsheet.html

Docker命令速查：https://yjoffer.com/tools/docker-cheatsheet.html

项目中用到的一些服务端软件如：Nacos配置中心、Redis、RabbitMQ消息队列等通常会安装在企业局域网的服务器中，开发人员去远程连接它们。在教学中我们在自己的电脑上安装虚拟机，虚拟机代表了企业局域网中的服务器。

服务器操作系统使用Centos7，导入下发的虚拟机文件，也可以自行安装Centos7虚拟机。

1、导入虚拟机：

首先安装VMware-workstation 16.x 或 VMware-workstation 17.x 虚拟机软件（已安装vmware软件的同学不需要重新安装），可从课程资料“软件工具”目录获取安装程序（VMwareworkstation16.rar）。

1）设置网络

点击 “编辑--》虚拟网络编辑器”配置网络地址，地址须与下图一致。

设置子网IP：192.168.101.0，子网掩码：255.255.255.0。

2）导入虚拟机

解压老师提供的虚拟机文件，进入解压后的文件架，双击"CentOS 7 64 位.vmx" 文件，选择复制虚拟机。

可能存在下边的问题：

win11打开.vmx文件报错：“未能启动虚拟机”

尝试解决方法：

1. 打开虚拟机的存放路径
2. 找到.vmx的配置文件
3. 修改 virtualHW.version改为virtualHW.version = "18"

对此虚拟机的设置建议至少8G内存、8核CPU，硬盘存储至少40G。

设置完成，启动虚拟机。

注意：虚拟机的IP地址为192.168.101.68，不用修改IP地址。

虚拟机启动成功如下界面：

注意：不用点击进行登录。

3）远程连接虚拟机

虚拟机启动成功，下边使用ssh客户端工具（FinalShell）远程 连接 虚拟机。

打开FinalShell软件，没有安装的可以从课程资料“软件工具”目录获取安装程序（finalshell_install.exe）。

通过下图所示建立新连接：

填写连接信息：

IP地址：192.168.101.68

账号与密码为：root/centos

如下图：

点击“确定”，创建连接成功，如下图：

双击连接信息，连接成功如下图：

执行 systemctl start docker 启动docker。

启动mysql：docker start mysql

启动redis：docker start redis

启动nacos：docker start nacos

以上软件如果已经启动不用重复启动。

查询docker容器：docker ps

如下图：

虚拟机已经安装了项目使用的软件，可通过docker ps -a查询全部安装的容器，具体在使用时再进行启动。

虚拟机：CentOS7-64-2-3.zip

链接: https://pan.baidu.com/s/10zztg7RH4kDxwPMhbbs-Hg 提取码: umw5

2.2 后端 ​

2.2.1 数据库 ​

电商项目的数据库使用MySQL8，首先创建数据库“mall-plus”

从课程资料中找到“电商项目”目录中mall-plus.sql，创建表并导入数据。

共59张表

2.2.2 Redis ​

保证虚拟机中的Redis启动成功

Redis命令速查：https://yjoffer.com/tools/redis-cheatsheet.html

2.2.3 MQ ​

保证虚拟机的RabbitMQ启动成功

注意检查用户设置、虚拟主机：

用户名：hmall，密码：123

虚拟主机：/hmall

2.2.4 Elasticsearch ​

保证虚拟机的Elasticsearch启动成功

2.2.5 部署工程 ​

将“青橙电商”目录中的mall-plus目录拷贝到代码目录，并使用IDEA打开mall-plus目录。

找到每个端的配置进行配置：

在application-dev.yml中主要配置：

1. 数据库的IP、账号、密码等信息
2. redis的IP、密码等信息
3. RabbitMQ的IP、虚拟主机、账号、密码等信息
4. Elasticsearch的IP、端口等信息

配置完成，启动电商项目。

2.3 前端 ​

2.3.1 安装nvm ​

我们面对的前端项目很多，比如A，B两个并行开发项目，nodejs依赖版本不一致。A项目需要v119.1老版本，B项目需要v16.15.0新版本，需要随时切换。

我们可以使用nvm工具灵活切换node.js版本

举例如下：

nvm全英文也叫node.js version management，是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。

请大家自行上网查找nvm安装方法并自行安装。

2.3.2 运营端 ​

2.3.2.1 环境配置 ​

node版本切换到116.0，如下图：

在“电商项目”目录下“mall-ui\manager”目录拷贝到代码目录，cmd进入此目录，运行"npm install || yarn"命令，安装依赖。

如下图：

启动运营端,运行：yarn run dev

如下图：

2.3.2.2 启动报错处理 ​

D:\teach\jzo2o2.0\code\mall-ui\manager>nvm use 14.16.0

Now using node v14.16.0 (64-bit)

D:\teach\jzo2o2.0\code\mall-ui\manager>yarn run dev

yarn run v1.22.22

$ vue-cli-service serve

Browserslist: caniuse-lite is outdated. Please run:

npx update-browserslist-db@latest

Why you should do it regularly: https://github.com/browserslist/update-db#readme

INFO Starting development server...

98% after emitting CopyPlugin

ERROR Failed to compile with 1 error 下午10:53:36

This dependency was not found:

• swiper/swiper-bundle.css in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/page-decoration/modelList/seckill-only-album.vue?vue&type=script&lang=js

To install it, you can run: npm install --save swiper/swiper-bundle.css

处理方法：

因为使用的 Swiper 5.x，进行下边的更改。

// 将
import 'swiper/swiper-bundle.css'
// 改为
import 'swiper/css/swiper.css'

如下图：

2.3.2.3 登录 ​

先保证后端服务已经启动，再启动前端运营端。

打开登录界面，登录测试：

账号：admin、密码：111111

2.3.3 店铺端 ​

2.3.3.1 环境配置 ​

在“电商项目”目录下“mall-ui\store”目录拷贝到代码目录，参考运营端运行店铺端。

2.3.3.2 登录 ​

登录界面：

默认账号：13011111111 密码：111111

2.3.4 小程序 ​

2.3.4.1 申请小程序账号 ​

开发小程序首先要申请小程序账号，参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#申请账号

点击注册小程序（https://mp.weixin.qq.com/wxopen/waregister?action=step1）填写信息，如下图：

填写完成进入下一步：

进入邮箱激活小程序，进入下一步信息登记，选择“个人”

填写主体登记信息：

使用自己的个人微信扫描上图的二维码，如下图，点击“确定”

点击“确定”后提示“信息提交成功”，点击前往小程序。

进入小程序管理界面：

填写小程序信息，点击上图中小程序信息栏目的“去填写按钮”，如下图：

小程序名称一定谨慎填写，每年是有一定修改次数限制的。

注意：小程序名称不能重复

下边配置最关键的appid和密钥，通过左侧菜单找到开发管理菜单：

点击“开发管理”菜单进入下图界面，点击“开发设置”，如下图：

点击“生成” 弹出二维码，如下图：

使用自己的微信扫描二维码生成密钥成功，点击“复制”将密钥和AppID妥善保存，开发小程序要使用。

如果密钥丢失可以进行重置：

2.3.4.2 安装小程序开发工具 ​

本部分内容可参考微信开发文档：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000e8842960070ab0086d162c5b80a

首先下载微信小程序开发工具。

用户端是基于微信小程序开发的，首先需要下载并安装微信开发者工具：

可以使用课程资料中提供的安装包或在线下载，点击下载（https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html）

安装成功创建快捷方式：

2.3.4.3 运行小程序 ​

然后打开微信开发者工具，初次使用弹出身份确认，如下图，使用申请小程序账号时用的微信进行扫码。

扫码通过进入下边的界面：

进入添加小程序项目界面，如下图：

目录：选择小程序前端工程的 shop-uniapp\unpackage\dist\dev\mp-weixin目录。

AppID：填写申请小程序号获取的AppID。

选择不使用云服务。

如下图：（注意每人的目录位置可能不一样）

点击确定进入下边的界面：

小程序开发环境配置完成进行编译运行。

首先清除缓存

然后编译运行：

登录测试

打开登录界面

登录成功，去首页购物

获取项目资料 ​

获取项目资料请联系站长老苗(微信: mrt_0607 备注预见猿份)