SpringBoot+Vue汽车销售平台毕业设计实战-代码聚汇网

SpringBoot+Vue汽车销售平台毕业设计实战

金宇澄

1. 项目概述

作为一名经历过毕业设计煎熬的过来人，我深知一个完整可运行的项目对Java Web方向学生的重要性。今天要分享的是一款基于SpringBoot+Vue的汽车销售平台，这个项目不仅包含了前后端完整源码，还附赠SQL脚本和接口文档，特别适合作为计算机相关专业的毕业设计选题。

这个项目采用主流的前后端分离架构，后端使用SpringBoot框架提供RESTful API服务，前端采用Vue.js+ElementUI构建用户界面。系统实现了汽车销售的核心业务流程，包括用户管理、车辆展示、在线咨询、订单生成与支付等功能模块。我在开发过程中特别注重代码规范性和项目结构的清晰度，确保即使是Java Web初学者也能快速理解和二次开发。

2. 技术选型与架构设计

2.1 后端技术栈

后端采用SpringBoot 2.7.x作为基础框架，这是目前Java领域最流行的微服务开发框架。选择这个版本主要是考虑到其稳定性和丰富的社区支持。数据库选用MySQL 8.0，相比5.7版本在性能和JSON支持上有显著提升。

认证方案采用JWT(JSON Web Token)，相比传统的Session方案更适合前后端分离架构。我们实现了完整的权限控制体系，基于Spring Security定制了认证过滤器。这里特别要注意JWT的密钥管理和token刷新机制，我在代码中已经实现了自动刷新token的逻辑。

数据访问层使用MyBatis-Plus 3.5.x，这个ORM框架在MyBatis基础上做了大量增强，特别是它的代码生成器和Wrapper查询构造器能极大提高开发效率。我在项目中配置了分页插件和性能分析插件，方便调试SQL性能。

2.2 前端技术栈

前端采用Vue 3.x组合式API写法，配合Vite构建工具，相比传统的Webpack方案，Vite的冷启动速度和热更新效率都有质的提升。UI组件库选择Element Plus，这是对Vue 3支持最好的企业级组件库之一。

状态管理使用Pinia替代Vuex，这是Vue官方推荐的新一代状态管理方案，API更简洁，TypeScript支持更好。路由管理使用Vue Router 4.x，实现了动态路由和路由守卫，确保页面访问的安全性。

2.3 系统架构设计

系统采用典型的三层架构：

表现层：Vue前端应用，负责用户交互和数据显示
业务逻辑层：SpringBoot后端服务，处理业务规则和数据验证
数据访问层：MyBatis-Plus+MySQL，负责数据持久化

前后端通过RESTful API进行通信，接口设计遵循Richardson成熟度模型Level 2标准。特别要注意的是跨域问题的处理，我在项目中配置了全局的CORS过滤器，同时在后端Controller上添加了@CrossOrigin注解。

3. 数据库设计与实现

3.1 核心表结构

数据库设计遵循第三范式，确保数据的一致性和完整性。下面是几个核心表的设计思路：

车辆信息表(car_info)

sql复制CREATE TABLE `car_info` (
  `car_id` bigint NOT NULL AUTO_INCREMENT COMMENT '车辆ID',
  `car_brand` varchar(50) NOT NULL COMMENT '车辆品牌',
  `car_model` varchar(50) NOT NULL COMMENT '车辆型号',
  `car_price` decimal(10,2) NOT NULL COMMENT '车辆价格',
  `car_stock` int NOT NULL DEFAULT '0' COMMENT '库存数量',
  `car_type` varchar(20) DEFAULT NULL COMMENT '车辆类型(SUV/轿车等)',
  `car_displacement` varchar(20) DEFAULT NULL COMMENT '排量',
  `car_transmission` varchar(20) DEFAULT NULL COMMENT '变速箱类型',
  `car_color` varchar(20) DEFAULT NULL COMMENT '颜色',
  `car_description` text COMMENT '详细描述',
  `car_image_url` varchar(255) DEFAULT NULL COMMENT '主图URL',
  `car_images` json DEFAULT NULL COMMENT '车辆图片集(JSON数组)',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`car_id`),
  KEY `idx_brand` (`car_brand`),
  KEY `idx_price` (`car_price`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='车辆信息表';

用户表(user_info)

sql复制CREATE TABLE `user_info` (
  `user_id` bigint NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(100) NOT NULL COMMENT '加密密码',
  `salt` varchar(50) NOT NULL COMMENT '加密盐值',
  `phone` varchar(20) NOT NULL COMMENT '手机号',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像URL',
  `gender` tinyint DEFAULT '0' COMMENT '性别(0-未知 1-男 2-女)',
  `birthday` date DEFAULT NULL COMMENT '生日',
  `address` varchar(255) DEFAULT NULL COMMENT '地址',
  `status` tinyint NOT NULL DEFAULT '1' COMMENT '状态(0-禁用 1-正常)',
  `last_login_time` datetime DEFAULT NULL COMMENT '最后登录时间',
  `register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '注册时间',
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `uk_username` (`username`),
  UNIQUE KEY `uk_phone` (`phone`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='用户信息表';

3.2 索引优化策略

为了提高查询性能，我在关键字段上建立了合适的索引：

车辆表的品牌和价格字段建立了普通索引，方便按品牌和价格区间筛选
用户表的用户名和手机号建立了唯一索引，确保唯一性同时提高登录查询速度
订单表的用户ID和创建时间建立了联合索引，优化用户订单查询

注意：虽然索引能提高查询速度，但不宜过度使用。每增加一个索引都会降低写入性能并占用额外存储空间。在实际项目中，应该根据具体的查询模式来设计索引。

4. 核心功能实现

4.1 用户认证模块

认证模块采用JWT方案，后端提供了以下关键接口：

/api/auth/login - 用户登录
/api/auth/register - 用户注册
/api/auth/refresh - 刷新Token
/api/auth/info - 获取当前用户信息

登录流程的实现代码示例：

java复制@RestController
@RequestMapping("/api/auth")
public class AuthController {
    
    @Autowired
    private UserService userService;
    
    @Autowired
    private JwtTokenProvider jwtTokenProvider;
    
    @PostMapping("/login")
    public Result<LoginResult> login(@Valid @RequestBody LoginRequest request) {
        // 1. 验证用户是否存在
        User user = userService.findByUsername(request.getUsername());
        if(user == null) {
            throw new BusinessException("用户名或密码错误");
        }
        
        // 2. 验证密码
        String encryptedPassword = DigestUtils.md5DigestAsHex(
            (request.getPassword() + user.getSalt()).getBytes());
        if(!encryptedPassword.equals(user.getPassword())) {
            throw new BusinessException("用户名或密码错误");
        }
        
        // 3. 生成Token
        String token = jwtTokenProvider.createToken(user.getUserId(), user.getUsername());
        String refreshToken = jwtTokenProvider.createRefreshToken(user.getUserId());
        
        // 4. 更新最后登录时间
        userService.updateLastLoginTime(user.getUserId());
        
        // 5. 返回结果
        LoginResult result = new LoginResult();
        result.setUserId(user.getUserId());
        result.setUsername(user.getUsername());
        result.setToken(token);
        result.setRefreshToken(refreshToken);
        return Result.success(result);
    }
}

4.2 车辆展示模块

前端车辆列表页采用了分页加载和条件筛选功能，核心实现逻辑：

vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getCarList } from '@/api/car'

const loading = ref(false)
const carList = ref([])
const pagination = ref({
  page: 1,
  size: 10,
  total: 0
})
const filters = ref({
  brand: '',
  minPrice: null,
  maxPrice: null,
  type: ''
})

const fetchCars = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.value.page,
      size: pagination.value.size,
      ...filters.value
    }
    const res = await getCarList(params)
    carList.value = res.data.list
    pagination.value.total = res.data.total
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchCars()
})
</script>

4.3 订单支付模块

支付流程采用了模拟支付方案，主要流程包括：

用户选择车辆并生成订单
跳转到支付页面选择支付方式
调用支付接口完成支付
更新订单状态并返回结果

支付状态机设计：

java复制public enum OrderStatus {
    UNPAID(0, "待支付"),
    PAID(1, "已支付"),
    DELIVERED(2, "已交付"),
    COMPLETED(3, "已完成"),
    CANCELLED(4, "已取消"),
    REFUNDED(5, "已退款");
    
    private final int code;
    private final String desc;
    
    // 省略构造函数和getter方法
    
    public static boolean canTransition(OrderStatus from, OrderStatus to) {
        switch (from) {
            case UNPAID:
                return to == PAID || to == CANCELLED;
            case PAID:
                return to == DELIVERED || to == REFUNDED;
            case DELIVERED:
                return to == COMPLETED;
            default:
                return false;
        }
    }
}

5. 项目部署与运行

5.1 后端部署

环境准备：
- JDK 1.8+
- Maven 3.6+
- MySQL 8.0+
数据库初始化：

bash复制mysql -u root -p < schema.sql
mysql -u root -p < data.sql

应用打包与运行：

bash复制mvn clean package
java -jar target/car-sales-1.0.0.jar

5.2 前端部署

环境准备：
- Node.js 16+
- npm 8+
安装依赖并运行：

bash复制npm install
npm run dev

生产环境构建：

bash复制npm run build

5.3 常见部署问题

端口冲突问题：
- 后端默认端口8080，可在application.yml中修改
- 前端开发端口3000，可在vite.config.js中修改
跨域问题：
- 开发环境配置了代理，见vite.config.js
- 生产环境建议使用Nginx反向代理
数据库连接失败：
- 检查application.yml中的数据库配置
- 确保MySQL服务已启动且允许远程连接

6. 项目扩展建议

这个基础项目还有很多可以扩展的方向：

增加车辆预约试驾功能
实现车辆贷款计算器
集成第三方支付接口(如支付宝、微信支付)
添加车辆评价和评分系统
实现数据可视化分析面板
增加多语言支持
开发移动端APP(使用Uniapp或Flutter)

我在实际开发中遇到过几个值得注意的问题：

车辆图片上传要限制文件大小和类型，建议使用OSS存储
价格计算要使用BigDecimal避免精度丢失
订单号生成要考虑并发场景，使用分布式ID生成器
敏感操作要记录操作日志
接口参数要做好校验，防止SQL注入和XSS攻击

这个项目采用了模块化的设计思想，各个功能模块相对独立，非常适合作为毕业设计的基础框架进行二次开发。代码中包含了详细的注释，关键业务逻辑都有日志记录，方便调试和问题排查。