我开源的 H5 商城 2.0 版本发布了，大家点点 star 冲 1000！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 189 天前的主题，其中的信息可能已经有所发展或是发生改变。

简介

🏬waynboot-mall 是一套全部开源的 H5 商城项目，包含运营后台、H5 商城前台和后端接口三个项目 。实现了一套完整的商城业务，有首页展示、商品分类、商品详情、sku 详情、商品搜索、加入购物车、结算下单、支付宝/微信支付/易支付对接、我的订单列表、商品评论等一系列功能 🔥。

商城所有项目源码全部开源，绝无套路。技术上基于 Spring Boot3.1 、Mybatis Plus 、Spring Security 、Vue2 ，整合了 Mysql 、Redis 、RabbitMQ 、ElasticSearch 、Nginx 等常用中间件，根据我多年线上项目实战经验总结开发而来不断优化、完善。

对于初学者而言 waynboot-mall 项目是非常易于本地开发部署的，根据 readme 中的本地开发指南就能成功启动项目。

并且提供了 docker-compose 服务器一键部署脚本，只需要十多分钟就能在服务器上启动商城前后台所有服务。

项目地址

后端接口项目 https://github.com/wayn111/waynboot-mall
前端 H5 商城项目 https://github.com/wayn111/waynboot-mobile
前端运管后台项目 https://github.com/wayn111/waynboot-admin

功能设计

功能上，waynboot-mall 项目可分为 “H5 商城前台” 和 “运管后台” 两部分。

功能设计

系统架构

系统架构上，waynboot-mall 项目秉持着小而精的架构特征，经典而不失优雅，

系统架构

系统设计

从系统设计来看，waynboot-mall 项目选用当前最新 Spring Boot3.1 、MyBatis-Plus 开发而来，项目中其他系统组件介绍如下图：

系统设计

接口文档

本项目使用 apifox 提供的在线文档功能供大家在线查看以及浏览。

文档地址： https://apifox.com/apidoc/shared-f48b11f5-6137-4722-9c70-b9c5c3e5b09b

后台接口文档

前台接口文档

本地开发

1. 克隆项目

git clone [email protected]:wayn111/waynboot-mall.git

2. 导入项目依赖

将 waynboot-mall 目录用 idea 打开，导入 maven 依赖

3. 安装依赖软件

安装 Jdk17 、Mysql8.0+、Redis3.0+、RabbitMQ3.0+（含延迟消息插件）、ElasticSearch7.0+（含分词、拼英插件）到本地

4. 导入 sql 文件

在项目根目录下，找到 wayn_shop_*.sql 文件，新建 mysql 数据库 wayn_shop ，导入其中

5. 项目图片部署

下载商城图片压缩包，将 zip 中所有图片解压缩部署到 D:/waynshop/webp 目录下，如下

6. 修改连接配置

修改 Mysql 、Redis 、RabbitMQ 、Elasticsearch 连接配置，修改application-dev.yml以及application.yml文件中数据连接配置相关信息

7. 启动项目

后台 api：进入 waynboot-admin-api 子项目，找到 AdminApplication 文件，右键run AdminApplication，启动后台项目
h5 商城 api: 进入 waynboot-mobile-api 子项目，找到 MobileApplication 文件，右键run MobileApplication，启动 h5 商城项目
消费者 api：进入 waynboot-message-consumer 子项目，找到 MessageApplication 文件，右键run MessageApplication，启动消费者项目

8. 启动商城 H5 项目

请查看商城 H5 前端项目 https://github.com/wayn111/waynboot-mobile ，readme 文档，进行本地启动

9. 启动商城后管项目

请查看商城后管前端项目 https://github.com/wayn111/waynboot-admin ，readme 文档，进行本地启动

文件目录结构说明

|-- db-init                           // 数据库初始化脚本
|-- waynboot-monitor                  // 监控模块
|-- waynboot-util                     // 帮助模块，包含项目基础帮助类
|   |-- constant                      // 基础常量
|   |-- converter                     // 基础转换类
|   |-- enums                         // 基础枚举
|   |-- exception                     // 基础异常
|   |-- util                          // 基础帮助类
|-- waynboot-admin-api                // 运营后台 api 模块，提供后台项目 api 接口
|   |-- controller                    // 后台接口
|   |-- framework                     // 后台配置相关
|-- waynboot-common                   // 通用模块，包含项目核心基础类
|   |-- annotation                    // 通用注解
|   |-- base                          // 通用注解
|   |-- core                          // 核心配置，包含项目 entity 、mapper 、service 、vo 定义
|   |-- config                        // 通用配置
|   |-- design                        // 设计模式实现
|   |-- dto                           // dto 定义
|   |-- request                       // 接口请求定义
|   |-- reponse                       // 接口响应定义
|   |-- task                          // 任务相关
|   |-- util                          // 通用帮助类
|   |-- wapper                        // 通用包装类，包含易支付代码
|-- waynboot-data                     // 数据模块，通用中间件数据访问
|   |-- waynboot-data-redis           // redis 访问配置模块
|   |-- waynboot-data-elastic         // elastic 访问配置模块
|-- waynboot-message                  // 消息模块，rabbitmq 操作
|   |-- waynboot-message-core         // rabbitmq 消息配置，定义队列、交换机、绑定队列到交换机
|   |-- waynboot-message-consumer     // rabbitmq 消费者，消费消息
|-- waynboot-mobile-api               // H5 商城 api 模块，提供 H5 商城 api 接口
|   |-- controller                    // 前台接口
|   |-- framework                     // 前台配置相关
|-- pom.xml                           // maven 父项目依赖，定义子项目依赖版本
|-- ...