车管家4S店车辆维保管理系统

项目简介

基于 Spring Boot 与原生 HTML+CSS+JavaScript 的前后端分离技术，开发的功能完善的 B/S 架构车辆维保（4S 店）管理系统。该系统旨在为 4S 店提供一个集客户管理、车辆档案、维保流程、配件库存等功能于一体的高效信息化管理平台，同时为车主提供便捷的在线预约与查询服务。

作者: 杨璐 学校: 辽宁科技学院 专业: 计算机科学与技术 班级: 计BZ246 学号: 74133240622 指导教师: 刘慧宇 日期: 2025年1月

---

技术栈

后端技术

• Spring Boot 2.7.18 - 核心框架
• Spring Data JPA - 数据访问层
• MySQL 8.0 - 关系型数据库
• Maven - 项目管理工具
• Lombok - 简化Java代码
• FastJSON - JSON处理

前端技术

• HTML5 - 页面结构
• CSS3 - 样式设计
• JavaScript (ES6) - 交互逻辑
• Fetch API - HTTP请求

开发工具

• IntelliJ IDEA / Eclipse - 后端开发IDE
• VS Code - 前端开发编辑器
• MySQL Workbench - 数据库管理
• Postman - API测试

---

系统功能

1. 用户管理

• 用户注册与登录
• 角色管理（管理员、工作人员、客户）
• 用户信息维护
• 密码修改

2. 客户管理

• 客户档案管理
• 会员等级管理
• 积分管理
• 客户信息查询

3. 车辆档案管理

• 车辆信息登记
• 车辆档案查询
• 车辆保养记录
• 里程数管理

4. 维保工单管理

• 工单创建与分配
• 工单流转跟踪
• 故障诊断记录
• 费用计算
• 工单状态管理

5. 配件库存管理

• 配件信息管理
• 库存数量管理
• 库存预警
• 配件出入库记录

6. 预约管理

• 在线预约服务
• 预约确认
• 预约查询
• 预约取消

---

项目结构

car-maintenance-system/
├── backend/                          # Spring Boot后端
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/
│   │   │   │       └── carmaintenance/
│   │   │   │           ├── CarMaintenanceApplication.java  # 主应用程序
│   │   │   │           ├── config/                         # 配置类
│   │   │   │           │   └── WebConfig.java
│   │   │   │           ├── controller/                     # 控制器层
│   │   │   │           │   ├── AuthController.java
│   │   │   │           │   ├── UserController.java
│   │   │   │           │   ├── VehicleController.java
│   │   │   │           │   ├── ServiceOrderController.java
│   │   │   │           │   ├── PartsInventoryController.java
│   │   │   │           │   └── AppointmentController.java
│   │   │   │           ├── dto/                            # 数据传输对象
│   │   │   │           │   ├── Result.java
│   │   │   │           │   ├── LoginRequest.java
│   │   │   │           │   └── LoginResponse.java
│   │   │   │           ├── entity/                         # 实体类
│   │   │   │           │   ├── User.java
│   │   │   │           │   ├── Customer.java
│   │   │   │           │   ├── Vehicle.java
│   │   │   │           │   ├── ServiceOrder.java
│   │   │   │           │   ├── PartsInventory.java
│   │   │   │           │   ├── Appointment.java
│   │   │   │           │   └── ServiceItem.java
│   │   │   │           └── repository/                     # 数据访问层
│   │   │   │               ├── UserRepository.java
│   │   │   │               ├── CustomerRepository.java
│   │   │   │               ├── VehicleRepository.java
│   │   │   │               ├── ServiceOrderRepository.java
│   │   │   │               ├── PartsInventoryRepository.java
│   │   │   │               ├── AppointmentRepository.java
│   │   │   │               └── ServiceItemRepository.java
│   │   │   └── resources/
│   │   │       └── application.properties                  # 应用配置
│   │   └── test/
│   └── pom.xml                                             # Maven配置
│
├── frontend/                         # HTML+CSS+JS前端
│   ├── admin/                        # 管理员界面
│   │   └── dashboard.html
│   ├── staff/                        # 工作人员界面
│   │   └── dashboard.html
│   ├── customer/                     # 客户界面
│   │   └── dashboard.html
│   ├── css/                          # 样式文件
│   │   ├── common.css                # 通用样式
│   │   ├── login.css                 # 登录页样式
│   │   └── dashboard.css             # 仪表板样式
│   ├── js/                           # JavaScript文件
│   │   ├── config.js                 # 配置文件
│   │   ├── api.js                    # API调用工具
│   │   ├── login.js                  # 登录逻辑
│   │   └── admin-dashboard.js        # 管理员仪表板逻辑
│   └── login.html                    # 登录页面
│
├── database/                         # 数据库脚本
│   ├── schema.sql                    # 表结构SQL
│   └── data.sql                      # 初始数据SQL
│
└── README.md                         # 项目说明文档

---

数据库设计

主要数据表

1. users - 用户表
2. customers - 客户信息表
3. vehicles - 车辆档案表
4. service_orders - 维保工单表
5. parts_inventory - 配件库存表
6. parts_usage - 配件使用记录表
7. appointments - 预约记录表
8. service_items - 服务项目表
9. system_logs - 系统日志表

ER图说明

用户(User) 1---N 客户(Customer)
客户(Customer) 1---N 车辆(Vehicle)
车辆(Vehicle) 1---N 维保工单(ServiceOrder)
客户(Customer) 1---N 维保工单(ServiceOrder)
工单(ServiceOrder) N---N 配件(PartsInventory) [通过parts_usage]
客户(Customer) 1---N 预约(Appointment)
车辆(Vehicle) 1---N 预约(Appointment)

---

安装与部署

环境要求

• JDK: 1.8 或更高版本
• Maven: 3.6 或更高版本
• MySQL: 8.0 或更高版本
• 浏览器: Chrome、Firefox、Edge 等现代浏览器

1. 数据库配置

创建数据库

# 登录MySQL
mysql -u root -p

# 执行数据库脚本
source database/schema.sql
source database/data.sql

或者直接在MySQL客户端中执行：

-- 创建数据库
CREATE DATABASE car_maintenance_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 导入schema.sql和data.sql文件内容

修改数据库连接配置

编辑 backend/src/main/resources/application.properties:

spring.datasource.url=jdbc:mysql://localhost:3306/car_maintenance_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=你的密码

2. 后端部署

方式一：使用IDE运行

1. 使用 IntelliJ IDEA 或 Eclipse 打开 backend 文件夹
2. 等待 Maven 依赖下载完成
3. 运行 CarMaintenanceApplication.java 主类
4. 看到 "车管家4S店车辆维保管理系统启动成功!" 表示启动成功
5. 后端服务地址：http://localhost:8080/api

方式二：使用Maven命令行

# 进入backend目录
cd backend

# 清理并打包
mvn clean package

# 运行jar包
java -jar target/car-maintenance-system-1.0.0.jar

3. 前端部署

开发环境（使用Live Server）

1. 使用 VS Code 打开 frontend 文件夹
2. 安装 Live Server 插件
3. 右键点击 login.html，选择 "Open with Live Server"
4. 浏览器自动打开：http://localhost:5500/login.html

生产环境（使用Nginx）

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/car-maintenance-system/frontend;
    index login.html;

    location / {
        try_files $uri $uri/ =404;
    }

    # 代理后端API请求
    location /api/ {
        proxy_pass http://localhost:8080/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

---

使用说明

演示账号

系统提供了以下演示账号供测试使用：

角色	用户名	密码	说明
管理员	admin	123456	拥有所有权限
工作人员	staff001	123456	处理工单和维保
客户	customer001	123456	查看车辆和预约

登录流程

1. 打开浏览器访问系统首页
2. 输入用户名和密码
3. 选择对应的登录角色
4. 点击"登录"按钮
5. 系统自动跳转到对应角色的仪表板

管理员功能

• 系统概览: 查看系统统计数据
• 用户管理: 管理所有系统用户
• 车辆管理: 管理所有车辆档案
• 工单管理: 管理所有维保工单
• 配件管理: 管理配件库存
• 预约管理: 管理客户预约

工作人员功能

• 查看分配给自己的工单
• 更新工单状态
• 记录维修诊断
• 添加使用配件
• 完成工单

客户功能

• 查看自己的车辆
• 查看维保记录
• 在线预约服务
• 查看预约状态
• 查询工单进度

---

API接口文档

认证接口

用户登录

POST /api/auth/login
Content-Type: application/json

Request Body:
{
    "username": "admin",
    "password": "123456"
}

Response:
{
    "code": 200,
    "message": "登录成功",
    "data": {
        "token": "TOKEN_1_1704614400000",
        "userInfo": {
            "userId": 1,
            "username": "admin",
            "realName": "系统管理员",
            "phone": "13800138000",
            "email": "admin@carmaintenance.com",
            "role": "admin"
        }
    }
}

车辆管理接口

获取所有车辆

GET /api/vehicles
Authorization: Bearer {token}

Response:
{
    "code": 200,
    "message": "操作成功",
    "data": [...]
}

根据ID获取车辆

GET /api/vehicles/{id}
Authorization: Bearer {token}

创建车辆

POST /api/vehicles
Content-Type: application/json
Authorization: Bearer {token}

Request Body:
{
    "customerId": 1,
    "licensePlate": "京A12345",
    "brand": "奔驰",
    "model": "C200L",
    "color": "黑色",
    "vin": "LBVCU31J7DR123456"
}

工单管理接口

获取所有工单

GET /api/orders
Authorization: Bearer {token}

创建工单

POST /api/orders
Content-Type: application/json
Authorization: Bearer {token}

Request Body:
{
    "vehicleId": 1,
    "customerId": 1,
    "serviceType": "maintenance",
    "appointmentTime": "2025-01-10T09:00:00",
    "faultDescription": "车辆到5000公里，需要小保养"
}

---

常见问题

1. 后端启动失败

问题: 端口被占用 解决: 修改 application.properties 中的 server.port 为其他端口

问题: 数据库连接失败 解决: 检查MySQL是否启动，确认用户名密码是否正确

2. 前端无法连接后端

问题: CORS跨域错误 解决: 检查 WebConfig.java 中的CORS配置，确保前端地址在允许列表中

问题: API请求404 解决: 确认后端服务已启动，检查 config.js 中的 BASE_URL 配置

3. 登录失败

问题: 用户名或密码错误 解决: 使用演示账号，或检查数据库中的用户数据

---

开发团队

作者: 杨璐 学校: 辽宁科技学院 专业: 计算机科学与技术 班级: 计BZ246 指导教师: 刘慧宇

---

许可证

本项目为毕业设计作品，仅供学习和研究使用。

---

更新日志

v1.0.0 (2025-01-07)

• 完成系统架构设计
• 实现用户认证功能
• 实现车辆档案管理
• 实现维保工单管理
• 实现配件库存管理
• 实现预约管理功能
• 完成前端页面设计
• 完成数据库设计

---

联系方式

如有问题或建议，请联系：

• 邮箱: 学生邮箱
• 学校: 辽宁科技学院
• 院系: 电子与信息工程学院

---

祝使用愉快！