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

2023-07-23 13:49:49 +08:00
 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 ,帮助博主让更多的人知道这个项目。

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

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

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

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

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

© 2021 V2EX