项目简介
本系统是一款基于B/S(Browser/Server)架构的家用电器在线销售平台,采用前后端分离设计,实现了从商品展示、购物车管理到订单处理的完整电商业务流程。系统支持管理员与普通用户两种角色,管理员可对用户、商品分类、商品及订单进行统一管理,普通用户可浏览商品、加入购物车、下单购买并管理个人订单。适用于课程设计、毕业设计、答辩演示及学习交流。
核心功能介绍
管理员端
| 模块 | 功能说明 |
|---|
| 用户管理 | 用户信息的增删改查,支持查看用户列表与详情 |
| 分类管理 | 商品分类的维护,支持新增、编辑、删除分类 |
| 商品管理 | 商品信息的增删改查,库存管理,商品图片上传 |
| 订单管理 | 订单列表查询,订单发货,订单取消 |
用户端
| 模块 | 功能说明 |
|---|
| 用户认证 | 用户注册、登录 |
| 商品浏览 | 按分类筛选、按名称搜索商品,查看商品详情 |
| 购物车 | 添加商品、修改数量、删除商品 |
| 下单购买 | 填写收货人、电话、地址,提交订单 |
| 订单管理 | 查看我的订单,确认收货 |
| 个人信息 | 修改个人资料、联系方式、收货地址 |
技术栈介绍
后端技术
| 技术 | 版本 | 说明 |
|---|
| Java | 1.8 | 开发语言 |
| Spring Boot | 2.1.8 | 应用框架 |
| MyBatis | 2.1.0 | ORM持久层框架 |
| MySQL Connector | 8.0.17 | 数据库驱动 |
| Lombok | - | 简化实体类编写 |
| FastJSON | 1.2.58 | JSON序列化 |
前端技术
| 技术 | 版本 | 说明 |
|---|
| Vue | 2.6.11 | 前端框架 |
| Vue Router | 3.2.0 | 路由管理 |
| Element UI | 2.15.3 | UI组件库 |
| Axios | 0.21.1 | HTTP请求库 |
其他
| 技术 | 版本 | 说明 |
|---|
| MySQL | 8.0 | 关系型数据库 |
| Maven | 3.6+ | 项目构建工具 |
| Node.js | 12.0+ | 前端运行环境 |
项目结构
c84/ ├── src/main/ │ ├── java/com/appliance/ │ │ ├── controller/ # 控制器层(RESTful API) │ │ │ ├── UserController.java │ │ │ ├── ProductController.java │ │ │ ├── CategoryController.java │ │ │ ├── CartController.java │ │ │ ├── OrdersController.java │ │ │ └── FileController.java │ │ ├── service/ # 业务逻辑层 │ │ ├── mapper/ # MyBatis数据访问层 │ │ ├── entity/ # 实体类 │ │ ├── common/ # 公共类(统一响应封装等) │ │ ├── config/ # 配置类(跨域、文件上传等) │ │ └── ApplianceApplication.java │ └── resources/ │ ├── mapper/ # MyBatis XML映射文件 │ ├── sql/ # 数据库初始化脚本 │ └── application.yml # 应用配置文件 ├── frontend/ │ ├── src/ │ │ ├── views/ # 页面组件 │ │ │ ├── Login.vue # 登录页 │ │ │ ├── Register.vue # 注册页 │ │ │ ├── Home.vue # 首页 │ │ │ ├── user/ # 用户端页面 │ │ │ └── admin/ # 管理端页面 │ │ ├── router/ # 路由配置 │ │ ├── App.vue │ │ └── main.js │ ├── package.json │ └── vue.config.js └── pom.xml
数据库设计
数据库概览
数据库名:appliance_sales,字符集:utf8mb4。
表结构说明
1. user(用户表)
| 字段 | 类型 | 说明 |
|---|
| id | INT | 主键,自增 |
| username | VARCHAR(50) | 用户名,唯一 |
| password | VARCHAR(100) | 密码 |
| name | VARCHAR(100) | 姓名 |
| phone | VARCHAR(20) | 手机号 |
| address | VARCHAR(500) | 地址 |
| role | TINYINT | 角色:0-普通用户,1-管理员 |
| create_time | DATETIME | 创建时间 |
2. category(商品分类表)
| 字段 | 类型 | 说明 |
|---|
| id | INT | 主键,自增 |
| name | VARCHAR(100) | 分类名称 |
| description | VARCHAR(500) | 分类描述 |
3. product(商品表)
| 字段 | 类型 | 说明 |
|---|
| id | INT | 主键,自增 |
| name | VARCHAR(200) | 商品名称 |
| category_id | INT | 分类ID,外键 |
| price | DECIMAL(10,2) | 价格 |
| stock | INT | 库存 |
| image | VARCHAR(200) | 图片路径 |
| description | TEXT | 商品描述 |
| status | TINYINT | 状态:0-下架,1-上架 |
| create_time | DATETIME | 创建时间 |
4. orders(订单表)
| 字段 | 类型 | 说明 |
|---|
| id | INT | 主键,自增 |
| order_no | VARCHAR(50) | 订单号,唯一 |
| user_id | INT | 用户ID,外键 |
| total_amount | DECIMAL(10,2) | 订单总金额 |
| status | TINYINT | 状态:0-待发货,1-已发货,2-已完成 |
| receiver_name | VARCHAR(100) | 收货人 |
| receiver_phone | VARCHAR(20) | 收货电话 |
| receiver_address | VARCHAR(500) | 收货地址 |
| create_time | DATETIME | 创建时间 |
| update_time | DATETIME | 更新时间 |
5. order_item(订单明细表)
| 字段 | 类型 | 说明 |
|---|
| id | INT | 主键,自增 |
| order_id | INT | 订单ID,外键 |
| product_id | INT | 商品ID,外键 |
| product_name | VARCHAR(200) | 商品名称快照 |
| product_price | DECIMAL(10,2) | 商品单价快照 |
| quantity | INT | 购买数量 |
6. cart(购物车表)
| 字段 | 类型 | 说明 |
|---|
| id | INT | 主键,自增 |
| user_id | INT | 用户ID,外键 |
| product_id | INT | 商品ID,外键 |
| quantity | INT | 数量 |
| create_time | DATETIME | 创建时间 |
ER关系
product.category_id→category.idorders.user_id→user.idorder_item.order_id→orders.idorder_item.product_id→product.idcart.user_id→user.idcart.product_id→product.id
安装与运行
1. 数据库配置
执行src/main/resources/sql/appliance_sales.sql创建数据库并导入初始数据。
修改src/main/resources/application.yml中的数据库连接信息:
spring: datasource: url: jdbc:mysql://localhost:3306/appliance_sales?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8 username: root password: 你的密码
2. 后端启动
mvn clean package mvn spring-boot:run
后端服务地址:http://localhost:8080
3. 前端启动
cd frontend npm install npm run serve
前端服务地址:http://localhost:8081
4. 生产部署
# 前端打包 cd frontend && npm run build # 后端打包 mvn clean package -DskipTests
默认账号
| 角色 | 用户名 | 密码 |
|---|
| 管理员 | admin | 123456 |
| 普通用户 | user | 123456 |
主要接口
用户
POST /api/user/login- 登录POST /api/user/register- 注册GET /api/user/{id}- 获取用户信息POST /api/user- 保存/更新用户信息
商品
GET /api/product- 商品列表(支持分类、关键词筛选)GET /api/product/{id}- 商品详情POST /api/product- 保存商品(管理员)DELETE /api/product/{id}- 删除商品(管理员)
订单
POST /api/orders- 创建/更新订单GET /api/orders- 全部订单(管理员)GET /api/orders/user/{userId}- 用户订单GET /api/orders/{id}- 订单详情
购物车
POST /api/cart- 添加购物车PUT /api/cart- 更新购物车GET /api/cart/user/{userId}- 购物车列表DELETE /api/cart/{id}- 删除购物车项
注意事项
- 需预先安装并启动 MySQL 8.0
- JDK 1.8、Maven 3.6+、Node.js 12.0+
- 首次运行前需执行数据库脚本
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()