waynboot-mall 是一套全部开源的微商城项目,包含三个项目:运营后台、H5 商城和后端接口。实现了一套完整的商城业务,有首页展示、商品分类、商品详情、sku 详情、商品搜索、加入购物车、结算下单、商品评论等一系列功能。商城前后台项目源码全部开源,绝无套路。技术上基于最新得 Springboot3.1 ,整合了 Redis 、RabbitMQ 、ElasticSearch 等常用中间件,根据博主多年线上项目实战经验总结开发而来不断优化、完善。
对于初学者而言 waynboot-mall 项目是非常易于部署的,根据 readme 中的开发部署指南就能成功启动项目。对于非技术人员,本项目也提供了一键安装脚本,能在五分钟内启动商城前后台所有服务。
学习完这个项目,相信能够帮助广大开发者更好的参与实际项目开发、理解前后端对接、常用业务逻辑如何设计实现、根据踩坑指南轻松解决线上项目疑难问题。
源码地址:
前台演示地址: http://121.4.124.33/mall
功能上,waynboot-mall 项目可分为 “H5 商城前台” 和 “运管后台” 两部分。详细功能如下图:
从系统设计来看,waynboot-mall 项目选用当前最新 Springboot3.1 + JDK17 开发而来,ORM 框架选用 MyBatis-Plus ,项目中其他系统组件介绍如下图:
系统组件 | 采用技术 | 官网 | |
---|---|---|---|
1 | 基础框架 | Spring Boot | https://spring.io/projects/spring-boot |
2 | ORM 框架 | MyBatis-Plus | https://baomidou.com |
3 | 工具类库 | hutool | https://hutool.cn |
4 | 流量网关 | Nginx | http://nginx.org/en/index.html |
5 | 访问控制 | Spring Security | https://spring.io/projects/spring-security |
6 | 日志记录 | Nginx | https://logback.qos.ch/ |
7 | 验证码 | easy-captcha | https://github.com/ele-admin/EasyCaptcha |
8 | 数据库连接池 | HikariCP | https://github.com/brettwooldridge/HikariCP |
9 | Redis 客户端 | Lettuce | https://lettuce.io |
10 | Elasticsearch 客户端 | Java High Level REST Client | https://www.elastic.co/guide/en/elasticsearch/client/java-rest/current/java-rest-high.html |
11 | 消息队列 | RabbitMQ | https://www.rabbitmq.com |
12 | 定时任务 | xxl-job | https://www.xuxueli.com/xxl-job |
13 | 服务监控 | spring-boot-admin | https://docs.spring-boot-admin.com/current/getting-started.html |
商城首页![]() | 更多商品![]() |
商城搜索![]() | 金刚位跳转![]() |
商品详情![]() | 商品分类![]() |
商品 sku 选择![]() | 购物车查看![]() |
确认下单![]() | 选择支付方式![]() |
下单成功![]() | 订单列表![]() |
商品评论![]() | 我的页面![]() |
登录![]() | 注册![]() |
|-- db-init // 数据库初始化脚本 |-- waynboot-monitor // 监控模块 |-- waynboot-admin-api // 运营后台 api 模块,提供后台项目 api 接口 | |-- controller // 后台接口 | |-- framework // 后台配置相关 |-- waynboot-common // 通用模块,包含项目核心基础类 | |-- annotation | |-- base | |-- config | |-- constant | |-- core | |-- enums | |-- exception | |-- task | |-- util |-- waynboot-data // 数据模块,通用中间件数据访问 | |-- waynboot-data-redis // redis 访问配置模块 | |-- waynboot-data-elastic // elastic 访问配置模块 |-- waynboot-message-consumer // 消费者模块,处理订单消息和邮件消息 |-- waynboot-message-core // 消费者核心模块队列、交换机配置 |-- waynboot-mobile-api // H5 商城 api 模块,提供 H5 商城 api 接口 | |-- controller // 前台接口 | |-- framework // 前台配置相关 |-- pom.xml // maven 父项目依赖,定义子项目依赖版本 |-- ...
感谢大家阅读,大家对于这个 H5 商城有任何问题,可以关注博主私信我。也希望大家能点个 Star ,帮助博主让更多的人知道这个项目。
![]() | 1 yunzhongzhuan 2023-07-23 14:02:22 +08:00 UI 一言难尽 真的 |
2 kkdebunk OP @yunzhongzhuan 一个人开发,个人审美 |
![]() | 3 AchieveHF 2023-07-23 14:26:50 +08:00 有啥意义呢,练手吗 |
![]() | 4 kingjpa 2023-07-23 14:38:03 +08:00 这个前端页面都是几年前烂大街的东西,你现在这个项目的前端页面都是东拼西凑组合起来的,大部分前端页面都是某个素材网下回来的 |
![]() | 6 loveqianool 2023-07-23 18:08:04 +08:00 ![]() 这 UI 挺好的呀 |
7 8E9aYW8oj31rnbOK 2023-07-23 19:20:49 +08:00 via Android 挺好的,感谢开源 |
![]() | 8 smallboy19991231 2023-07-23 19:24:40 +08:00 via Android 感觉很像京东? |
![]() | 9 zooo 2023-07-23 21:19:48 +08:00 挺不错的 要是没点套路,还不习惯来 |
11 kkdebunk OP @Leonkennedy2 谢谢 |
![]() | 12 nash 2023-07-23 21:55:02 +08:00 现在除了商城还是商城,中国程序员什么时候在底层上多做点贡献,AI 应用也行 |
13 fusxcs 2023-07-23 22:16:58 +08:00 你这 UI 让我想起了诈骗人员给下载安装的 app 商城。。。就路边抽奖送平板的那种。。。 |
![]() | 14 yafoo 2023-07-23 22:40:32 +08:00 via Android 要是 php 就好了 |
![]() | 15 amlee 2023-07-23 22:55:54 +08:00 挺好的,搞不懂那些吐槽 UI 的,一个商城的 UI 还想做出花来吗? |
16 chenhua19940128 2023-07-24 09:40:28 +08:00 加油,至少比只动嘴不动手的强 |
17 CocoCoding 2023-07-24 09:44:52 +08:00 @amlee 它们在直接浏览器打开的,没切换到手机模式展示 |
18 hyqCrystal 2023-07-24 09:45:29 +08:00 支持支持 |
![]() | 19 Desiree 2023-07-24 09:55:31 +08:00 为什么跟 这个项目 https://gitee.com/liguozhen91/litemall |
![]() | 20 Desiree 2023-07-24 09:55:46 +08:00 相似度如此之高 |
![]() | 21 ColinWei 2023-07-24 10:24:54 +08:00 界面已经很好看了,感谢开源! |
23 xjqxz2 2023-07-24 16:24:18 +08:00 基于 Springboot 3.1 是否支持 GraalVM 呀~ |
![]() | 25 790002517zzy 2023-07-24 19:12:36 +08:00 via Android 挺好的 先点了 |
26 ColoThor 2023-07-24 22:50:06 +08:00 开源支持个先 |
27 lyhiving 2023-07-25 09:03:28 +08:00 开源都是要点赞,商城后期肯定都是改协议的了 |