商城系统（SpringBoot后端+Vue管理员前端+微信小程序）正式开源啦！

怼烎@ 2022-09-04 09:53 104阅读 0赞

### 一、项目介绍 ###

mall是一套商城系统，包括 Spring Boot后端、 Vue后台管理员前端 、微信小程序用户前端 。

主要功能有商品管理、订单管理、用户管理、商品收藏、加购物车、地址管理等。

mall项目地址：[https://gitee.com/xzchengo/mall][https_gitee.com_xzchengo_mall]

mall-web项目地址：[https://gitee.com/xzchengo/mall-web][https_gitee.com_xzchengo_mall-web]

mall-app项目地址：[https://gitee.com/xzchengo/mall-app][https_gitee.com_xzchengo_mall-app]

### 二、项目演示 ###

演示地址：[http://af255dce56f8.ngrok.io/\#/][http_af255dce56f8.ngrok.io]

账号：admin 密码：123

提示：请使用谷歌浏览器访问，访问可能有点慢，无法访问说明我的服务器断网了或者关机了。

### 三、技术选型 ###

后端技术：

<table> 
 <thead> 
  <tr> 
   <th>技术</th> 
   <th>说明</th> 
   <th>学习地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Spring Boot</td> 
   <td>容器</td> 
   <td><a href="https://spring.io" rel="nofollow">https://spring.io</a></td> 
  </tr> 
  <tr> 
   <td>Spring MVC</td> 
   <td>MVC框架</td> 
   <td><a href="https://spring.io" rel="nofollow">https://spring.io</a></td> 
  </tr> 
  <tr> 
   <td>Spring Security</td> 
   <td>用户认证和授权</td> 
   <td><a href="https://spring.io" rel="nofollow">https://spring.io</a></td> 
  </tr> 
  <tr> 
   <td>MyBatis Plus</td> 
   <td>ORM框架</td> 
   <td><a href="https://mp.baomidou.com" rel="nofollow">https://mp.baomidou.com</a></td> 
  </tr> 
  <tr> 
   <td>Redis</td> 
   <td>分布式缓存</td> 
   <td><a href="https://redis.io" rel="nofollow">https://redis.io</a></td> 
  </tr> 
  <tr> 
   <td>MySQL</td> 
   <td>数据持久化</td> 
   <td><a href="https://www.mysql.com" rel="nofollow">https://www.mysql.com</a></td> 
  </tr> 
  <tr> 
   <td>Hutool</td> 
   <td>Java工具类库</td> 
   <td><a href="https://www.hutool.cn" rel="nofollow">https://www.hutool.cn</a></td> 
  </tr> 
  <tr> 
   <td>Lombok</td> 
   <td>对象封装工具</td> 
   <td><a href="https://projectlombok.org" rel="nofollow">https://projectlombok.org</a></td> 
  </tr> 
  <tr> 
   <td>Kaptcha</td> 
   <td>验证码生成器</td> 
   <td><a href="https://code.google.com/archive/p/kaptcha/" rel="nofollow">https://code.google.com/archive/p/kaptcha/</a></td> 
  </tr> 
  <tr> 
   <td>JWT</td> 
   <td>用户身份验证</td> 
   <td><a href="https://jwt.io/introduction/" rel="nofollow">https://jwt.io/introduction/</a></td> 
  </tr> 
 </tbody> 
</table>

前端技术：

<table> 
 <thead> 
  <tr> 
   <th>技术</th> 
   <th>说明</th> 
   <th>学习地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Vue</td> 
   <td>前端框架</td> 
   <td><a href="https://vue3js.cn" rel="nofollow">https://vue3js.cn</a></td> 
  </tr> 
  <tr> 
   <td>Axios</td> 
   <td>HTTP框架</td> 
   <td><a href="http://www.axios-js.com" rel="nofollow">http://www.axios-js.com</a></td> 
  </tr> 
  <tr> 
   <td>Vue-Router</td> 
   <td>路由框架</td> 
   <td><a href="https://next.router.vuejs.org" rel="nofollow">https://next.router.vuejs.org</a></td> 
  </tr> 
  <tr> 
   <td>Vuex</td> 
   <td>状态管理框架</td> 
   <td><a href="https://vuex.vuejs.org" rel="nofollow">https://vuex.vuejs.org</a></td> 
  </tr> 
  <tr> 
   <td>Element Plus</td> 
   <td>前端UI框架</td> 
   <td><a href="https://element-plus.gitee.io/#/zh-CN" rel="nofollow">https://element-plus.gitee.io/#/zh-CN</a></td> 
  </tr> 
 </tbody> 
</table>

微信小程序技术：

<table> 
 <thead> 
  <tr> 
   <th>技术</th> 
   <th>说明</th> 
   <th>学习地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Vant Weapp</td> 
   <td>UI组件库</td> 
   <td><a href="https://vant-contrib.gitee.io/vant-weapp" rel="nofollow">https://vant-contrib.gitee.io/vant-weapp</a></td> 
  </tr> 
 </tbody> 
</table>

### 四、软件架构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center]

### 五、开发工具 ###

<table> 
 <thead> 
  <tr> 
   <th>开发工具</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>intelliJ IDEA</td> 
   <td>开发IDE</td> 
  </tr> 
  <tr> 
   <td>Navicat Premium</td> 
   <td>数据库连接工具</td> 
  </tr> 
  <tr> 
   <td>RDM</td> 
   <td>Redis客户端连接工具</td> 
  </tr> 
  <tr> 
   <td>Postman</td> 
   <td>API接口调试工具</td> 
  </tr> 
  <tr> 
   <td>微信开发者工具</td> 
   <td>小程序开发工具</td> 
  </tr> 
 </tbody> 
</table>

### 六、开发环境 ###

<table> 
 <thead> 
  <tr> 
   <th>环境</th> 
   <th>版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>JDK</td> 
   <td>1.8</td> 
  </tr> 
  <tr> 
   <td>Maven</td> 
   <td>3.6.x</td> 
  </tr> 
  <tr> 
   <td>npm</td> 
   <td>6.14.x</td> 
  </tr> 
  <tr> 
   <td>node</td> 
   <td>14.13.x</td> 
  </tr> 
  <tr> 
   <td>mysql</td> 
   <td>8.0.x</td> 
  </tr> 
  <tr> 
   <td>redis</td> 
   <td>6.0.x</td> 
  </tr> 
 </tbody> 
</table>

### 七、运行截图 ###

Vue后台管理员前端:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 9]

微信小程序用户前端:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 12]

### 八、安装教程 ###

#### 1. 后端项目（mall）的安装与启动： ####

git clone https://gitee.com/xzchengo/mall
    mvn install

用IDEA开发工具打开mall项目，分别在mall-admin模块和mall-weapp模块中找到主函数MallAdminApplication和MallWeappApplication，点击运行即可（在启动之前，请确保MySQL、Redis服务已经开启，并查看配置文件application.yml是否符合本机配置要求，同时，请确保IDEA安装了Lombok插件）

#### 2. 前端项目（mall-web）的安装与启动： ####

git clone https://gitee.com/xzchengo/mall-web
    npm install

用IDEA开发工具打开mall-web项目，使用npm安装完成以后，直接点击运行即可（在启动之前，请确保本机已经安装了Node.js和npm，IDEA要安装Vue插件）

#### 3. 微信小程序（mall-app）的安装与启动： ####

git clone https://gitee.com/xzchengo/mall-app
    npm install

用微信开发者工具打开mall-app，第一步，点击菜单栏中的【工具】->【构建npm】，第二步，点击右侧【详情】->【本地设置】->勾选【不校验合法域名、web-view…】。最后，点击【编译】。注意：如果是直接【预览】，需要把/utils/request.js中的basePath = http://localhost:9900 中的localhost修改成本机网络的ip地址，如果是使用的是【真机调试】则无需修改。

### 九、使用说明 ###

1.  如果你在安装、启动、使用过程中遇到了问题，请在评论区留言，我看到会第一时间回复。
2.  本商城系统是1.0.0版本（即首个版本），可能有些功能有Bug，欢迎各位在评论区留言反馈。
3.  本商城系统使用MIT开源许可证，完全免费，请放心使用！

**最后、希望大家点赞、收藏走一波！**

[https_gitee.com_xzchengo_mall]: https://gitee.com/xzchengo/mall
[https_gitee.com_xzchengo_mall-web]: https://gitee.com/xzchengo/mall-web
[https_gitee.com_xzchengo_mall-app]: https://gitee.com/xzchengo/mall-app
[http_af255dce56f8.ngrok.io]: http://af255dce56f8.ngrok.io/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/5ec009e57ca84ac88d94a54ce8ed4fc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/f52bf1cc469740e7b12f3f053a2c4d67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220829/c1aef11d119b4348b4bb8b6dd3b019db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220829/525443dc307d41779fc9efbcc2f2c58b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220829/ce4a79d608324317bf1361184a1b37fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20220829/574e71d84d8940d88df0d6eef793b6be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20220829/7b8bf58a6c494ecdb43d56c44ae58378.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20220829/5e487cc52dbc456c8605afb2fa200d4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20220829/17ce35c6cce84323b376c9b0d93c72bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20220829/a9c4969a362945bf90b4863f516b86e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20220829/9c27197411014347a5fa99bab535039a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20220829/5b54c4f0a0d24ad5b41b7972727d8427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3ODkwMjUx_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20220829/a63fd9a42f2a42e89fcb9943265bb4d3.png