我开源的H5商城2.0版本发布,强烈推荐
简介
🏬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🔥 最新的 2.0.0 版本中,我重构了项目后端的大部分代码,将整个项目的代码可维护性提升了一个档次,并且商城前后台所有接口全部接入 apifox,供大家在线查看。此外对接第三方支付使用了策略模式,解耦支付代码逻辑。还修复了一些老旧 bug,提升商城体验,
- 重构项目后端代码,优化全局同一返回类代码。
- 商城前后台所有接口全部接入 apifox,并且请求参数、响应参数注释完善,方便大家在线查看。
- 对接第三方支付代码重写,使用了策略模式,提升可维护性。
- 重构消息模块将 message-core、message-comsumer 模块,同一合并到 message 模块下。
功能设计
功能上,waynboot-mall 项目可分为 “H5 商城前台” 和 “运管后台” 两部分。
![功能设计](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-e2b8b155.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6a9b3949255a746ae2fb943b2509d2303aJYhgqOvhugQ_tXPRNm4Latk8WNTKQX6W8xOcE7KQuamoo2PYxafDaNBZCv6eoLRIY3lCLfQeeA2BGGnjqIgL5mRnP2AoRtpYWxACRxGZ52YPTymp2BhNBPtoK6JuwBzNTcCUiUflx2Io-FKzNejKtSciiSrumh8W2ukIpDEcbApjSCHTticyqVkydE1-pKFD5nM5mq0zAmneHk91R2WkzOAO8xYYwd7mHsPQz2621Zo4rw2AseT4k1UspfMH3BO6sQsnpRpbpNqefrHKaU3-EpCGPkaoJUTFmwRyJjRTxlsrQioezTD4EOWqrH9ha306zuZixbM0R7QrK1PAKV8YtcYj1FbvhUXr5RI647-NvSQ9Zik3YLLuDOF8zfdYaLsSJxvcmZJKO2xgOxChlWBMlg&q-sign-algorithm=sha1&q-ak=AKIDJ9la7IYVSa1pgMO4fqklz7NrqBR12g-FY7mZSnG5uSgjida12FEFMCrgUdPikyTS&q-sign-time=1716185363%3B1716185963&q-key-time=1716185363%3B1716185963&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=3168353d94d72d5df97b452280b45edfb468dd04)
系统架构
系统架构上,waynboot-mall 项目秉持着小而精的架构特征,经典而不失优雅,
![系统架构](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-e9f8fa52.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6ab34e5f3c8c45edc76ea89ae3f647b4b6JYhgqOvhugQ_tXPRNm4Latk8WNTKQX6W8xOcE7KQuamoo2PYxafDaNBZCv6eoLRIY3lCLfQeeA2BGGnjqIgL5mRnP2AoRtpYWxACRxGZ52YPTymp2BhNBPtoK6JuwBzNTcCUiUflx2Io-FKzNejKtSciiSrumh8W2ukIpDEcbApjSCHTticyqVkydE1-pKFD5nM5mq0zAmneHk91R2WkzHJpByyrG-fpfw1zsouKvlVYm_mW6uGzCs_3WtjfcUAaTMYynvZY3MmEX-IdIZCoJnvIAtfQjX6HAipk94JgmlGjVm1WE0NEkrwwXxHWfkK4BUiW1oHfDwYeQcw-sN0SiZX4VT8LUIJIKDy_0M6LX1UE90so92YQkBzes1ZtvN0wSMNm46C_AFkm39R7iSIq3A&q-sign-algorithm=sha1&q-ak=AKID_IVqu6pTD-VXbQARo5gsf0b_yUGmGINfW06t2LPPth4JmFgf4CZH51Vjj0Iw9L8Z&q-sign-time=1716185363%3B1716185963&q-key-time=1716185363%3B1716185963&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=04cac17cdfc1fea9b07118a7f9f8ff88ba7ce677)
系统设计
从系统设计来看,waynboot-mall 项目选用当前最新 Spring Boot3.1、MyBatis-Plus 开发而来,项目中其他系统组件介绍如下图:
![系统设计](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-b53d7c62.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6aa00d9d9ea5f1a2ca89331cf487592bafJYhgqOvhugQ_tXPRNm4LalmyU-c6d67bAMN9yU5S5KEGg_UowJg8PIHb5vR46j0ywKqe9JOraHXPgRaPapi1abLVQSJkkkDuHP0OunYrsz1Z-sB-Ot-TrAyCJoq0fwRzZ6xSkJDwka4IktpwGtTqRBEemg35yh7Yn8w_74hUxyabGOJRCIJbYHyWrAirQuUDjGA3atAL2mR7Qd0qDoLcB4J5uzvbAbBHwlBxV1T7mKaOpnWogHIgKaw4Udgqwu-VvG1GQkR56uZfr2qrAeCJAaUTk2IoghUZTTyB3TIWNOoD7ueuBnokzwqDLeSXjhm949l34u-R4hp6gOummzFjhtdUOHxkYpgL1NpFHVFY1L-v0RNs8WKBzHXj70MS_Nx6hkBmWuJUh4LOSC4Li7eGqQ&q-sign-algorithm=sha1&q-ak=AKIDMZ0eKVD8XnRYkm9gVrxgVZSb9uiU4IrgIDBX4rz-04LpW5Wb5c60NQhTATSR0sQW&q-sign-time=1716185364%3B1716185964&q-key-time=1716185364%3B1716185964&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=9e8b3b95b9e70869c63ad5533ca2bce8582d3739)
接口文档
本项目使用 apifox 提供的在线文档功能供大家在线查看以及浏览。
文档地址:https://apifox.com/apidoc/shared-f48b11f5-6137-4722-9c70-b9c5c3e5b09b
![后台接口文档](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-c2b1c26b.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6a25ba15cf5399aefbb118845ebb5d602cJYhgqOvhugQ_tXPRNm4LalmyU-c6d67bAMN9yU5S5KEGg_UowJg8PIHb5vR46j0ywKqe9JOraHXPgRaPapi1abLVQSJkkkDuHP0OunYrsz1Z-sB-Ot-TrAyCJoq0fwRzZ6xSkJDwka4IktpwGtTqRBEemg35yh7Yn8w_74hUxyabGOJRCIJbYHyWrAirQuUDjGA3atAL2mR7Qd0qDoLcBzngwyd5JM8s0OiV6te3ddgHE4eAUsjxmu3MvzZ4fUM8X4gvb6TdK6yTFDtiGohzQv0ncYdBLkeWzyo3M2S2AT4NarGgUbZMVhP8FpCztS3GnueH_1Cn905DsCPqR5HlZliXqwfyUM0Qzq0iqDi_5ahSgIDP6MNGrnbmbOsBkQlqwrvwhtWqe3rlYVyG1gUdHw&q-sign-algorithm=sha1&q-ak=AKIDjM54wgS40MXlMvC8exN86axnAkHVZh486iQtBSL8QyKDCTiRgWk43SbusGw65h5R&q-sign-time=1716185364%3B1716185964&q-key-time=1716185364%3B1716185964&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=51a1c2ef8c514b3103a7a448274f14c6fae7f0b9)
![前台接口文档](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-880ae26c.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6a8a47fa78f023b96fe52c5ac6436c5d5aJYhgqOvhugQ_tXPRNm4LalmyU-c6d67bAMN9yU5S5KEGg_UowJg8PIHb5vR46j0ywKqe9JOraHXPgRaPapi1abLVQSJkkkDuHP0OunYrsz1Z-sB-Ot-TrAyCJoq0fwRzZ6xSkJDwka4IktpwGtTqRBEemg35yh7Yn8w_74hUxyabGOJRCIJbYHyWrAirQuUDjGA3atAL2mR7Qd0qDoLcB6ZKYND4RN7a9o1Dt4JLxAMcpBcRc-AErWIzkxhjcrOLbtjDTaqOLdZntcEC3gXY0TfrQ06ZwfHCYeC7oOearKzrI6BNL4Row_s4tXNMoCP6LKKFNOlTfP1Wmx28Jw2xahI7HvAFCo8tzieTFQBGcQXhX8fzEHHh8148a5RWAmTqSu25zSQzWHg-3xHBc6YQxw&q-sign-algorithm=sha1&q-ak=AKID7h1b_kTA9MsOSvY1G2oeoS9y-Te65l669CWerNVTNuHx7P2JLx0JhHSiPIFbxbPD&q-sign-time=1716185364%3B1716185964&q-key-time=1716185364%3B1716185964&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=1a2c53d05948c0fc855443b8e4235a4d08a7cb00)
本地开发
1. 克隆项目
git clone git@github.com: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 目录下,如下
![](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-3ba8f3f7.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6aa6a73c9dabf9d0aa7245c1ec0c06b439JYhgqOvhugQ_tXPRNm4LalmyU-c6d67bAMN9yU5S5KEGg_UowJg8PIHb5vR46j0ywKqe9JOraHXPgRaPapi1abLVQSJkkkDuHP0OunYrsz1Z-sB-Ot-TrAyCJoq0fwRzZ6xSkJDwka4IktpwGtTqRBEemg35yh7Yn8w_74hUxyabGOJRCIJbYHyWrAirQuUDjGA3atAL2mR7Qd0qDoLcB_wnDmHBFFf9bruSHWAuCaclLdBudlhlP-n6f03czo6IkZZ9EA1spemIDfxnErLcDKAVfIeFNjU2fL8Pz_6Q7m2riugkkQheZ8tvWilolREdJwYww-plzdRGG_GO5CG8dQ-U1zzuDLgNLlKopsosPtQum4W2n1iTtfurpitVaqIedJ3sTaux10zgrp4xsHLFjQ&q-sign-algorithm=sha1&q-ak=AKID5OR-Wf9ZAfWHtpyWasBsuLlFpcb8w0u8HDglqQXkNYLiA2dgHdzo3sO3Wbij-zAH&q-sign-time=1716185364%3B1716185964&q-key-time=1716185364%3B1716185964&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=5529b00384fd0619590694e3239005f05bdd4a98)
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父项目依赖,定义子项目依赖版本
|-- ...
演示 GIF
![首页展示](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-d463ccc5.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6ae7b3c644952ceea0c2cf9c34171b9514JYhgqOvhugQ_tXPRNm4LalmyU-c6d67bAMN9yU5S5KEGg_UowJg8PIHb5vR46j0ywKqe9JOraHXPgRaPapi1abLVQSJkkkDuHP0OunYrsz1Z-sB-Ot-TrAyCJoq0fwRzZ6xSkJDwka4IktpwGtTqRBEemg35yh7Yn8w_74hUxyabGOJRCIJbYHyWrAirQuUDjGA3atAL2mR7Qd0qDoLcB1rjTbymbgwVp00PWpkkC0PBolK3rtSdjU7X5Pf0NzvHGoUX0w3BJx6pj4tqrB0drvtWiQoohaPVTar9Z2svLbnOfukzqYR3l41FxLM2RLsHUsvThvkpcDDDO1Vy9A3uLFoZLGbrJju5cq1MrhOCCcUD1MmDUnLS3A8pTWQY0G7KUsOdcx4VwfvV-jnhEr7aLQ&q-sign-algorithm=sha1&q-ak=AKIDtFzyle1Bs6EsRoMkrVh7KD8yE3fAfcnVTeOmoNWILIKd8ILDs1uLKSMtMfN2sSAB&q-sign-time=1716185364%3B1716185964&q-key-time=1716185364%3B1716185964&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=66f21ea03f89eaaa040e59599a33473008f82d8b)
![搜素下单](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/8095969/20240520-320caec2.png?x-cos-security-token=qyMuqgwArz3kCnCcxJ1ATAnzwUBB2D6acd48bdd643bf9296e593e8c8cb875fc2JYhgqOvhugQ_tXPRNm4LalmyU-c6d67bAMN9yU5S5KEGg_UowJg8PIHb5vR46j0ywKqe9JOraHXPgRaPapi1abLVQSJkkkDuHP0OunYrsz1Z-sB-Ot-TrAyCJoq0fwRzZ6xSkJDwka4IktpwGtTqRBEemg35yh7Yn8w_74hUxyabGOJRCIJbYHyWrAirQuUDjGA3atAL2mR7Qd0qDoLcB6gDS-ZGi2EJBDGOfx_RsRyExBI7Bsf_dvJBG5fBAlEoeAXr2E5v2iNBlA42Iukg02WctsydWZ_JFiIPCjWlALQzTQICV_vI5UnqLWlqjSOdngwQwPP3GG1IOFjoJP7YuXYcC93nLfNtfyhWXBt9lWV0phyj6A34uVXMdonyqOCsIlqxU_8htCK3-Y_e7GxSoQ&q-sign-algorithm=sha1&q-ak=AKIDVkGoIAnT-NdECYhBK9ju7Plf7Pik8vdtN3uAjNK6iqjwHH5TJJ3fUZPhKJ_9Kt6S&q-sign-time=1716185364%3B1716185964&q-key-time=1716185364%3B1716185964&q-header-list=host&q-url-param-list=x-cos-security-token&q-signature=85bf33f8e86070429ee41d3a4c9c54e2476fe6fe)
参与项目
该项目以 MIT 协议开放源码,意味着你能够自由地使用、复制甚至商业化。我鼓励任何有兴趣的朋友参与进来,共同进行项目的维护和改进。无论是修复 bug,改进代码还是添加新功能,都是我所期待的。
最后聊两句
waynboot-mall 项目发展至今,希望给各位初中级开发者、大学生作为一个接触线上商城实战项目的参考标杆,项目的模块划分比较合理,代码规范也有所注重,接口文档齐全,所以是非常值得推荐给大家使用参考的。
大家可以关注我以及 waynboot-mall 这个项目,后续商城版本升级迭代最新消息都会第一时间通知大家。
GitHub 地址:https://github.com/wayn111/waynboot-mall
关注我每周分享技术干货、开源项目、实战经验、国外优质文章翻译等,您的关注将是我的更新动力!