Spring Boot+Vue校园二手交易平台开发实战

1. 项目概述

校园二手交易平台是每个大学生都需要的实用工具。作为一名在校园里摸爬滚打多年的老学长，我深知同学们经常面临这样的困扰：毕业时带不走的专业书籍、只用过几次的健身器材、换新后闲置的电子产品...这些物品扔了可惜，留着又占地方。传统的QQ群、微信群交易方式信息杂乱，缺乏保障，而闲鱼等平台又存在校外人员混杂的问题。

这个基于Spring Boot和Vue的校园闲置物品交易系统，正是为解决这些痛点而生。它采用前后端分离架构，后端使用Spring Boot框架，前端基于Vue.js开发，数据库选用MySQL，是一套专为高校环境设计的轻量级解决方案。

提示：系统已集成支付宝沙箱支付功能，虽然不能真实收款，但完整模拟了线上交易全流程，非常适合学习电商系统开发原理。

2. 技术架构解析

2.1 后端技术栈

Spring Boot 2.7.x作为后端框架，这是我经过多个项目验证的稳定选择。它内置Tomcat服务器，通过简单的starter依赖就能快速搭建RESTful API服务。特别配置了以下核心依赖：

xml复制<dependencies>
    <!-- Web支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- 数据库相关 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    
    <!-- 安全认证 -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt-api</artifactId>
        <version>0.11.5</version>
    </dependency>
    
    <!-- 缓存 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
</dependencies>

JWT(JSON Web Token)实现认证是经过多方对比后的选择。相比传统的Session认证，JWT更适合前后端分离架构，它的无状态特性让系统更容易扩展。我特别设计了包含用户基础信息和权限的claims结构：

java复制public String generateToken(User user) {
    return Jwts.builder()
        .setSubject(user.getUsername())
        .claim("userId", user.getUserId())
        .claim("role", user.getRole())
        .setIssuedAt(new Date())
        .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
        .signWith(SignatureAlgorithm.HS512, SECRET)
        .compact();
}

2.2 前端技术选型

Vue 3 + Element Plus的组合让前端开发效率大幅提升。通过Vue CLI创建的工程结构清晰，配合Vue Router和Vuex，实现了良好的状态管理。特别优化了以下几个点：

1. 基于axios的请求拦截器自动添加JWT Token
2. 路由守卫实现权限控制
3. 商品图片上传采用压缩+CDN方案
4. 使用WebSocket实现实时消息通知

javascript复制// axios拦截器示例
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

2.3 数据库设计

MySQL 8.0作为关系型数据库，InnoDB引擎支持事务处理。除了项目描述中的三张核心表外，系统还包含以下辅助表：

• 收藏表(f