校园闲置交易系统开发：Spring Boot+Vue全栈实践

1. 项目概述

校园闲置物品交易系统是一个基于现代Web技术构建的线上交易平台，旨在解决高校学生群体中闲置物品流通效率低下的问题。作为一名长期从事校园信息化建设的开发者，我发现学生们每年都会产生大量闲置物品（如教材、电子产品、生活用品等），而传统的线下交易方式存在信息不对称、交易效率低下等痛点。

这个系统采用前后端分离架构，前端使用Vue.js构建响应式用户界面，后端基于Spring Boot框架提供RESTful API服务，数据持久层采用MyBatis+MySQL组合。系统最核心的价值在于：

• 为校园用户提供便捷的物品发布和交易渠道
• 通过信用评价体系建立可靠的交易环境
• 实现校园资源的循环利用，减少浪费

2. 系统架构设计

2.1 技术栈选型

后端技术栈：

• Spring Boot 2.7.x：提供快速应用开发能力，内置Tomcat服务器
• Spring Security：负责系统认证和授权
• MyBatis：轻量级ORM框架，灵活处理SQL映射
• MySQL 8.0：关系型数据库，存储结构化数据
• Redis：缓存热点数据，提升系统响应速度

前端技术栈：

• Vue 3.x：渐进式JavaScript框架，构建用户界面
• Element Plus：基于Vue 3的UI组件库
• Axios：处理HTTP请求，与后端API交互
• Vue Router：实现前端路由管理

2.2 系统分层架构

系统采用经典的三层架构设计：

code复制表示层（Vue.js）
  ↓
业务逻辑层（Spring Boot）
  ↓
数据访问层（MyBatis）
  ↓
数据存储层（MySQL）

这种分层设计使得各层职责明确，便于维护和扩展。前后端通过定义良好的API接口进行通信，前端专注于用户交互和界面展示，后端处理业务逻辑和数据持久化。

3. 数据库设计

3.1 核心数据表结构

用户表（user）

sql复制CREATE TABLE `user` (
  `user_id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `real_name` varchar(50) DEFAULT NULL,
  `phone_number` varchar(20) NOT NULL,
  `email` varchar(100) DEFAULT NULL,
  `register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `credit_score` int DEFAULT '100',
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `idx_username` (`username`),
  UNIQUE KEY `idx_phone` (`phone_number`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

物品表（item）

sql复制CREATE TABLE `item` (
  `item_id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL,
  `item_name` varchar(100) NOT NULL,
  `item_desc` text,
  `price` decimal(10,2) NOT NULL,
  `category` varchar(50) NOT NULL,
  `publish_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `status` varchar(20) NOT NULL DEFAULT '待交易',
  PRIMARY KEY (`item_id`),
  KEY `idx_user` (`user_id`),
  KEY `idx_category` (`category`),
  KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

订单表（order）

sql复制CREATE TABLE `order` (
  `order_id` bigint NOT NULL AUTO_INCREMENT,
  `buyer_id` bigint NOT NULL,
  `seller_id` bigint NOT NULL,
  `item_id` bigint NOT NULL,
  `deal_price` decimal(10,2) NOT NULL,
  `order_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `order_status` varchar(20) NOT NULL DEFAULT '待支付',
  `buyer_comment` text,
  `seller_comment` text,
  PRIMARY KEY (`order_id`),
  KEY `idx_buyer` (`buyer_id`),
  KEY `idx_seller` (`seller_id`),
  KEY `idx_item` (`item_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 索引优化策略

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

1. 用户表的username和phone_number字段建立唯一索引，确保用户信息的唯一性
2. 物品表的user_id、category和status字段建立普通索引，加速按用户、分类和状态的查询
3. 订单表的buyer_id、seller_id和item_id字段建立索引，优化交易记录的查询效率

4. 后端实现细节

4.1 Spring Boot应用配置

主应用类配置：

java复制@SpringBootApplication
@MapperScan("com.campus.trade.dao")
public class CampusTradeApplication {
    public static void main(String[] args) {
        SpringApplication.run(CampusTradeApplication.class, args);
    }
}

数据库配置（application.yml）：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/campus_trade?useSSL=false&serverTimezone=UTC
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  redis:
    host: localhost
    port: 6379
mybatis:
  mapper-locations: classpath:mapper/*.xml
  configuration:
    map-underscore-to-camel-case: true

4.2 用户认证模块

采用JWT（JSON Web Token）实现无状态认证：

java复制@Component
public class JwtTokenProvider {
    private final String secretKey = "your-secret-key";
    private final long validityInMilliseconds = 3600000; // 1h

    public String createToken(String username, List<String> roles) {
        Claims claims = Jwts.claims().setSubject(username);
        claims.put("roles", roles);
        
        Date now = new Date();
        Date validity = new Date(now.getTime() + validityInMilliseconds);
        
        return Jwts.builder()
            .setClaims(claims)
            .setIssuedAt(now)
            .setExpiration(validity)
            .signWith(SignatureAlgorithm.HS256, secretKey)
            .compact();
    }
    
    // 其他验证方法...
}

4.3 物品服务实现

核心物品服务包含发布、查询和更新功能：

java复制@Service
@RequiredArgsConstructor
public class ItemServiceImpl implements ItemService {
    private final ItemMapper itemMapper;
    private final UserMapper userMapper;
    
    @Override
    @Transactional
    public Item publishItem(ItemDTO itemDTO, Long userId) {
        User user = userMapper.selectById(userId);
        if (user == null) {
            throw new BusinessException("用户不存在");
        }
        
        Item item = new Item();
        BeanUtils.copyProperties(itemDTO, item);
        item.setUserId(userId);
        item.setStatus("待交易");
        
        itemMapper.insert(item);
        return item;
    }
    
    @Override
    public PageInfo<ItemVO> queryItems(ItemQueryDTO queryDTO, Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum, pageSize);
        List<Item> items = itemMapper.selectByCondition(queryDTO);
        
        PageInfo<Item> pageInfo = new PageInfo<>(items);
        return convertToVO(pageInfo);
    }
    
    // 其他方法...
}

5. 前端实现细节

5.1 Vue项目结构

code复制src/
├── api/            # API请求封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── router/         # 路由配置
├── store/          # Vuex状态管理
├── utils/          # 工具函数
├── views/          # 页面组件
│   ├── Home.vue    # 首页
│   ├── Item/       # 物品相关页面
│   ├── User/       # 用户相关页面
│   └── Order/      # 订单相关页面
└── main.js         # 应用入口

5.2 物品列表组件

vue复制<template>
  <div class="item-list">
    <el-row :gutter="20">
      <el-col 
        v-for="item in items" 
        :key="item.id" 
        :xs="24" :sm="12" :md="8" :lg="6"
      >
        <item-card :item="item" @click="viewDetail(item.id)"/>
      </el-col>
    </el-row>
    
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script>
import { getItemList } from '@/api/item'
import ItemCard from '@/components/ItemCard.vue'

export default {
  components: { ItemCard },
  data() {
    return {
      items: [],
      total: 0,
      pageSize: 12,
      currentPage: 1
    }
  },
  created() {
    this.fetchItems()
  },
  methods: {
    async fetchItems() {
      const res = await getItemList({
        page: this.currentPage,
        size: this.pageSize
      })
      this.items = res.data.list
      this.total = res.data.total
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchItems()
    },
    viewDetail(id) {
      this.$router.push(`/item/${id}`)
    }
  }
}
</script>

5.3 状态管理（Vuex）

javascript复制import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: localStorage.getItem('token') || ''
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    logout(state) {
      state.user = null
      state.token = ''
      localStorage.removeItem('token')
    }
  },
  actions: {
    async login({ commit }, { username, password }) {
      const res = await login({ username, password })
      commit('setToken', res.data.token)
      const user = await getCurrentUser()
      commit('setUser', user.data)
    }
  }
})

6. 系统部署方案

6.1 开发环境部署

1. 后端部署：

bash复制# 克隆项目
git clone https://github.com/example/campus-trade.git

# 进入后端目录
cd campus-trade-backend

# 安装依赖
mvn install

# 运行应用
mvn spring-boot:run

2. 前端部署：

bash复制# 进入前端目录
cd campus-trade-frontend

# 安装依赖
npm install

# 启动开发服务器
npm run serve

6.2 生产环境部署

推荐使用Docker容器化部署：

后端Dockerfile：

dockerfile复制FROM openjdk:11-jre-slim
WORKDIR /app
COPY target/campus-trade-0.0.1-SNAPSHOT.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]

前端Dockerfile：

dockerfile复制FROM nginx:alpine
WORKDIR /usr/share/nginx/html
COPY dist .
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

docker-compose.yml：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: 123456
      MYSQL_DATABASE: campus_trade
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
  
  redis:
    image: redis:6.0
    ports:
      - "6379:6379"
  
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
  
  frontend:
    build: ./frontend
    ports:
      - "80:80"
  
volumes:
  mysql_data:

7. 系统功能模块详解

7.1 用户模块

核心功能：

• 用户注册（手机号验证）
• 登录/登出（JWT认证）
• 个人信息管理
• 信用评价系统

关键实现：

java复制@RestController
@RequestMapping("/api/user")
public class UserController {
    private final UserService userService;
    
    @PostMapping("/register")
    public Result<UserVO> register(@Valid @RequestBody UserRegisterDTO dto) {
        UserVO user = userService.register(dto);
        return Result.success(user);
    }
    
    @PostMapping("/login")
    public Result<String> login(@Valid @RequestBody UserLoginDTO dto) {
        String token = userService.login(dto);
        return Result.success(token);
    }
    
    @GetMapping("/info")
    @PreAuthorize("hasRole('USER')")
    public Result<UserVO> getCurrentUser() {
        Long userId = SecurityUtils.getCurrentUserId();
        UserVO user = userService.getUserById(userId);
        return Result.success(user);
    }
}

7.2 物品模块

核心功能：

• 物品发布与管理
• 物品分类浏览
• 物品搜索与筛选
• 物品状态管理

关键SQL映射（MyBatis）：

xml复制<mapper namespace="com.campus.trade.dao.ItemMapper">
    <select id="selectByCondition" resultType="com.campus.trade.entity.Item">
        SELECT * FROM item
        <where>
            <if test="category != null and category != ''">
                AND category = #{category}
            </if>
            <if test="keyword != null and keyword != ''">
                AND (item_name LIKE CONCAT('%', #{keyword}, '%') 
                OR item_desc LIKE CONCAT('%', #{keyword}, '%'))
            </if>
            <if test="minPrice != null">
                AND price >= #{minPrice}
            </if>
            <if test="maxPrice != null">
                AND price <= #{maxPrice}
            </if>
            <if test="status != null and status != ''">
                AND status = #{status}
            </if>
        </where>
        ORDER BY publish_time DESC
    </select>
</mapper>

7.3 交易模块

核心流程：

1. 买家浏览物品详情
2. 发起交易请求
3. 卖家确认交易
4. 线下完成物品交接
5. 双方互评

状态机设计：

code复制待确认 → 已确认 → 已完成
          ↓
        已取消

8. 系统安全与性能优化

8.1 安全措施

1. 输入验证：

java复制@PostMapping
public Result createItem(@Valid @RequestBody ItemDTO dto) {
    // 只有通过验证的请求才会执行到这里
}

2. SQL注入防护：

• 使用MyBatis参数绑定
• 避免字符串拼接SQL

3. XSS防护：

• 前端使用vue-sanitize处理用户输入
• 后端对输出内容进行转义

8.2 性能优化

1. 缓存策略：

java复制@Cacheable(value = "items", key = "#id")
public Item getItemById(Long id) {
    return itemMapper.selectById(id);
}

2. 异步处理：

java复制@Async
public void sendNotification(Long userId, String message) {
    // 发送通知的逻辑
}

3. 数据库优化：

• 合理使用索引
• 避免SELECT *
• 大数据量分页查询优化

9. 常见问题与解决方案

9.1 跨域问题

解决方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*")
            .maxAge(3600);
    }
}

9.2 文件上传

实现代码：

vue复制<template>
  <el-upload
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        this.$message.error('只能上传图片文件')
      }
      return isImage
    },
    handleSuccess(res) {
      this.$emit('uploaded', res.data.url)
    }
  }
}
</script>

9.3 短信验证码

实现逻辑：

1. 前端请求发送验证码
2. 后端生成随机码并存入Redis（设置过期时间）
3. 调用短信服务商API发送短信
4. 用户提交验证码时与Redis中的值比对

10. 项目扩展方向

1. 即时通讯功能：

• 集成WebSocket实现实时聊天
• 消息历史记录存储

2. 支付系统集成：

• 对接支付宝/微信支付
• 交易资金托管

3. 推荐系统：

• 基于用户行为的物品推荐
• 协同过滤算法实现

4. 移动端适配：

• 开发微信小程序版本
• 响应式设计优化移动端体验

在实际开发过程中，我遇到最棘手的问题是交易状态的并发控制。最初的设计在高并发场景下会出现状态不一致的问题。最终的解决方案是采用乐观锁机制：

java复制@Transactional
public boolean confirmOrder(Long orderId, Long userId) {
    Order order = orderMapper.selectById(orderId);
    if (!order.getStatus().equals("待确认")) {
        throw new BusinessException("订单状态已变更");
    }
    
    int rows = orderMapper.updateStatus(orderId, "待确认", "已确认");
    if (rows == 0) {
        throw new ConcurrentModificationException("订单确认冲突");
    }
    
    // 其他业务逻辑...
    return true;
}

这个校园闲置物品交易系统从技术选型到功能实现都经过精心设计，特别适合作为毕业设计或学习项目。它不仅包含了现代Web开发的完整技术栈，还涉及了许多实际开发中会遇到的问题和解决方案。