一套完善的 H5 商城开源了,绝无套路

294 天前
 kkdebunk

简介

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 ,帮助博主让更多的人知道这个项目。

4265 次点击
所在节点    分享创造
31 条回复
yunzhongzhuan
294 天前
UI 一言难尽 真的
kkdebunk
294 天前
@yunzhongzhuan 一个人开发,个人审美😂
AchieveHF
294 天前
有啥意义呢,练手吗
kingjpa
294 天前
这个前端页面都是几年前烂大街的东西,你现在这个项目的前端页面都是东拼西凑组合起来的,大部分前端页面都是某个素材网下回来的
kkdebunk
294 天前
@kingjpa 一个人开发能力有限
loveqianool
294 天前
这 UI 挺好的呀
Leonkennedy2
294 天前
挺好的,感谢开源
smallboy19991231
294 天前
感觉很像京东?
zooo
294 天前
挺不错的
要是没点套路,还不习惯来
kkdebunk
294 天前
@zooo 😂
kkdebunk
294 天前
@Leonkennedy2 谢谢
nash
294 天前
现在除了商城还是商城,中国程序员什么时候在底层上多做点贡献,AI 应用也行
fusxcs
294 天前
你这 UI 让我想起了诈骗人员给下载安装的 app 商城。。。就路边抽奖送平板的那种。。。
yafoo
294 天前
要是 php 就好了
amlee
294 天前
挺好的,搞不懂那些吐槽 UI 的,一个商城的 UI 还想做出花来吗?
chenhua19940128
294 天前
加油,至少比只动嘴不动手的强
CocoCoding
294 天前
@amlee 它们在直接浏览器打开的,没切换到手机模式展示
hyqCrystal
294 天前
支持支持👍
Desiree
294 天前
为什么跟 这个项目 https://gitee.com/liguozhen91/litemall
Desiree
294 天前
相似度如此之高

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/958966

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX