鞋子商城（移动端H5）+SpringBoot3 + Vue3 (前后端分离)

大家好，今天给大家带来一个超级简单的 移动端的 鞋子商城系统。大家可用学习下系统的设计和源码风格。

视频演示

图片演示

技术栈

后端

技术框架：JDK17+SpringBoot3 + Mybatis-Plus

数据库：Mysql8

前端

- Vue 3 - 主要前端框架，使用Composition API
- Vue Router 4 - 单页面应用路由管理
- Pinia - 状态管理库，替代Vuex
- Vant 4 - 移动端UI组件库

 移动端适配
- postcss-px-to-viewport-8-plugin - px到vw的自动转换，实现移动端适配
- @vant/area-data - 地区数据支持

HTTP请求处理

- Axios - HTTP客户端，封装了请求拦截器和响应拦截器
- 统一错误处理 - 通过request.js实现统一的API错误处理
- Token认证 - 自动添加认证头

系统功能概述

整个系统分为 管理员， 用户端。管理员可以进行商品管理，订单管理 ，用户管理。用户可以浏览鞋子，然后进行购买等基础的商城操作。

管理员账号信息：  admin / 123456

用户账号： hadluo / 123456  （也可以自己注册，注册需要配置好邮箱服务器）

管理员端

基础属性管理

我们将鞋子的属性抽取成四种， 然后可以对以下四种属性进行增删改管理，属性如下：

鞋子类型： 比如鞋子属性拖鞋，凉鞋，运动鞋等待，这些都是鞋子的类型。 用户可以根据自己的需要在前端首页进行搜索。

鞋子颜色： 鞋子的颜色支持后台自定义，用户可以根据自己的需要在前端首页进行颜色筛选搜索。

鞋子品牌： 鞋子的品牌类型，比如是安踏，李宁等等。用户可以根据自己的需要在前端首页进行品牌筛选搜索。

鞋子尺码： 鞋子的尺码，用户可以根据自己的需要在前端首页进行尺码筛选搜索。购买时，需要指定尺码。

商品管理

管理员可以任意上架和下架商品，商品支持图片，库存，详情等字段。

订单管理

根据订单的状态进行查询订单列表，还可以对特定订单状态进行操作。订单状态扭转流程：

1. 用户下单支付成功后，订单处于一个待发货状态，管理员在代发货订单列表的操作中进行发货。

2. 发完货后，订单处于运输中订单。

3. 用户拿到鞋子收货后，变成待收货状态，也可以直接申请退款，变成 待退款状态，通过后顶答案变成退订单，前端显示为已完成。

4.收货成功后，订单变成待评价，用户可以对订单进行评价。到此订单就变成已完成。

5.用户还可以对已完成的订单进行评价追加。

用户管理

列举平台所有的用户，包括管理员。用户有 头像，用户名，邮箱，注册时间，是否禁用等字段。管理员可以对用户进行禁用等操作。

用户端

首页

用户在首页可以进行商品搜索， 还可以支持商品的基础属性进行分类搜索。

商品详情

用户可以查看商品详情， 然后对商品进行加入购物车或直接购买。

购物车

展示用户加入购物车的商品。支持批量清除和结算。

我的

展示用户信息，订单信息，还支持用户自己的收货地址管理，密码管理等。

登录/注册

系统部署

执行sql

用户需要自己安装好mysql数据库，注意，必须是mysql8 ，否则代码运行会出错。

然后用navicate等连接工具，连接到mysql服务，然后新建一个hadluo-shoes 数据库， 然后执行 “hadluo-shoes.sql” 里面的表创建和数据导入。

安装Redis

 随便下载一个windows版本的redis安装就可以了。

前端部署

vue项目部署

前端的项目必须没有中文，否则启动会报错！！

安装node ， 版本：v22.12.0 ， 安装完成后。 进入到项目 hadluo-vue 目录下，这个项目是vue的用户端， 右键，运行cmd，运行下面命令：

npm run serve

由于我已经跟你npm install好了，所以你无需执行，直接run就可以了！！

浏览器访问 ： http://localhost:8081/  进入用户端，此时为电脑网页显示，按下F12 ，点击手机模拟，进入手机页面预览：

进入到项目hadluo-vue-admin 目录下，这个项目是vue的管理后台， 右键，运行cmd，运行下面命令：

npm run serve

由于我已经跟你npm install好了，所以你无需执行，直接run就可以了！！

浏览器打开 ： http://localhost:8080/     访问管理后台

启动后端项目

将maven设置的settings.xml改成你自己的配置。

然后刷新maven，等待项目下载依赖包完成。。。。。

然后部署后端 ， 打开idea， 导入maven工程 hadluo-server。

打开resources目录， 修改 application.yml 配置文件，主要修改下面几个信息：

数据库信息（注意改成你的地址）

datasource:
  driver-class-name: com.mysql.cj.jdbc.Driver
  url: jdbc:mysql://127.0.0.1:3306/hadluo-shoes
  username: root
  password: qq123456

redis

  data:
    redis:
      database: 0
      host: 192.168.200.131
      port: 6379

邮箱服务器配置（不知道的直接百度 “如何获取qq邮箱服务器密钥”）

  mail:
    host: smtp.qq.com
    port: 465
    username: 你的邮箱@qq.com
    password: 你的邮箱服务器密钥
    test-connection: true

图片存储信息（可以不用动）

# 文件上传路径配置
file:
  upload:
    path: D:\ftp\hadluo-shoes  #文件上传的路径
    url-prefix: http://localhost:${server.port}/api/file/get  # 文件下载接口的地址

然后启动 main 启动类 ：MainApplication.class

浏览器访问

管理员端
 http://localhost:8080

管理员账号信息：  admin / 123456

用户端

http://localhost:8081/

用户账号信息： hadluo/123456