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

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

视频演示

https://githubs.xyz/show/ad7fb0bf-e4c5-403c-9521-ff6a5f46c557.mp4

图片演示

技术栈

后端

技术框架：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认证 - 自动添加认证头

完整源码+sql我已经整理清楚，移步：

githubs点xyz/product/666

系统功能概述

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

管理员账号信息： 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