SpringBoot+Vue汉服租赁平台开发实战

老爸评测

1. 项目概述

这个基于SpringBoot的汉服租赁与展示平台是一个典型的B/S架构管理系统，主要面向汉服爱好者、租赁商家以及文化推广机构。系统采用前后端分离的设计模式，后端使用SpringBoot+MyBatisPlus技术栈，前端采用Vue.js框架，数据库选用MySQL。

作为一个完整的毕业设计项目，它涵盖了用户管理、汉服展示、租赁管理、订单处理等核心业务模块。项目最大的特点是：

完整的业务流程设计，从用户注册到下单支付全流程覆盖
精美的UI界面，充分展示汉服文化特色
规范的代码结构，符合企业级开发标准
完善的文档支持，包括毕业论文、开题报告等全套材料

提示：这类管理系统类项目非常适合作为计算机相关专业的毕业设计选题，因为它既包含了完整的技术栈应用，又具有实际商业价值，同时开发难度适中。

2. 系统架构设计

2.1 技术选型解析

后端技术栈

Spring Boot 2.7.x：作为基础框架，提供自动配置、依赖管理等功能
MyBatis-Plus 3.5.x：简化数据库操作，内置通用CRUD方法
Shiro 1.10.x：负责认证授权管理
Redis 6.x：用于缓存热点数据和会话管理
MySQL 8.0：主数据库，存储业务数据

选择这套技术栈主要基于以下考虑：

Spring Boot的自动配置特性可以大幅减少XML配置
MyBatis-Plus在MyBatis基础上增强了开发效率
Shiro相比Spring Security更轻量且易于集成
MySQL作为最流行的开源关系型数据库，社区支持完善

前端技术栈

Vue 3.x：核心框架，采用Composition API
Element Plus：UI组件库
Axios：HTTP客户端
Vue Router：路由管理
Pinia：状态管理

前端选择Vue3生态主要因为：

渐进式框架，学习曲线平缓
组件化开发模式适合管理系统类项目
丰富的生态系统和社区资源
与后端API对接方便

2.2 系统架构图

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

code复制表示层（Vue） → 业务逻辑层（Spring Boot） → 数据访问层（MyBatis-Plus）
　　　　　　　　　↓
　　　　　　　　缓存层（Redis）
　　　　　　　　　↓
　　　　　　　数据存储层（MySQL）

2.3 数据库设计

数据库设计遵循第三范式，主要包含以下核心表：

用户表(sys_user)
- 字段：user_id, username, password, salt, real_name, phone, email, avatar, status, create_time等
- 索引：username(唯一索引)
汉服表(hanfu)
- 字段：hanfu_id, name, category, style, dynasty, material, color, size_range, price, deposit, stock, description, cover_img等
- 索引：category, style
租赁订单表(rent_order)
- 字段：order_id, user_id, hanfu_id, rent_days, start_date, end_date, total_amount, status, create_time等
- 索引：user_id, status
评价表(comment)
- 字段：comment_id, order_id, user_id, content, score, create_time等
- 索引：order_id

注意：实际项目中还包含地址表、支付记录表、系统日志表等辅助表，这里仅列出核心表结构。

3. 核心功能实现

3.1 用户认证模块

3.1.1 密码安全设计

采用Shiro进行认证授权，密码存储方案：

前端对密码进行MD5初步加密
后端生成随机salt（16位）
使用SHA-256算法对(salt+密码)进行1024次哈希
将salt和最终哈希值存入数据库

关键代码实现：

java复制// 密码加密工具类
public class PasswordUtils {
    private static final int HASH_ITERATIONS = 1024;
    
    public static String encrypt(String password, String salt) {
        return new SimpleHash("SHA-256", password, salt, HASH_ITERATIONS).toHex();
    }
    
    public static String generateSalt() {
        return RandomStringUtils.randomAlphanumeric(16);
    }
}

3.1.2 JWT令牌实现

采用JWT作为无状态认证方案，包含以下信息：

用户ID
用户名
角色列表
签发时间
过期时间（2小时）

刷新策略：

令牌过期前30分钟可刷新
刷新后原令牌进入黑名单（Redis缓存）

3.2 汉服展示模块

3.2.1 多条件筛选实现

前端通过Elasticsearch实现高效的汉服检索，支持：

朝代筛选（唐、宋、明等）
款式分类（齐胸襦裙、马面裙等）
价格区间
材质类型
颜色筛选

后端接口设计：

java复制@GetMapping("/hanfu/list")
public Result listHanfu(
    @RequestParam(required = false) String keyword,
    @RequestParam(required = false) String dynasty,
    @RequestParam(required = false) String category,
    @RequestParam(required = false) Double minPrice,
    @RequestParam(required = false) Double maxPrice,
    @RequestParam(defaultValue = "1") Integer page,
    @RequestParam(defaultValue = "10") Integer size) {
    
    // 构建查询条件
    LambdaQueryWrapper<Hanfu> wrapper = new LambdaQueryWrapper<>();
    if (StringUtils.isNotBlank(keyword)) {
        wrapper.like(Hanfu::getName, keyword);
    }
    // 其他条件处理...
    
    // 分页查询
    Page<Hanfu> pageInfo = new Page<>(page, size);
    hanfuService.page(pageInfo, wrapper);
    
    return Result.success(pageInfo);
}

3.2.2 详情页设计

采用多图轮播+详情选项卡布局：

顶部：汉服主图轮播（3-5张）
中部：基础信息（名称、价格、库存等）
下部：选项卡（详情、参数、租赁须知）
侧边：推荐搭配区

3.3 租赁流程实现

3.3.1 下单流程

选择汉服 → 2. 选择租赁天数 → 3. 填写收货信息 → 4. 支付押金 → 5. 生成订单

状态机设计：

code复制待支付 → 已支付 → 待发货 → 已发货 → 租赁中 → 待归还 → 已归还 → 已完成
　　　　　↓　　　　　　　　　　　　　　　↓
　　　　取消　　　　　　　　　　　　　申请续租

3.3.2 库存控制

采用乐观锁防止超卖：

java复制@Transactional
public Result createOrder(OrderDTO dto) {
    // 查询汉服信息（带版本号）
    Hanfu hanfu = hanfuMapper.selectByIdWithVersion(dto.getHanfuId());
    
    // 校验库存
    if (hanfu.getStock() < 1) {
        return Result.error("库存不足");
    }
    
    // 扣减库存（带版本号更新）
    int update = hanfuMapper.updateStockWithVersion(
        hanfu.getId(), 
        hanfu.getVersion());
    
    if (update == 0) {
        throw new RuntimeException("库存更新失败，请重试");
    }
    
    // 创建订单...
}

4. 系统部署方案

4.1 开发环境配置

推荐环境：

JDK 17
MySQL 8.0
Redis 6.x
Node.js 16.x
Maven 3.8.x

配置文件示例（application-dev.yml）：

yaml复制server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/hanfu_rent?useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
    
  redis:
    host: localhost
    port: 6379
    password: 
    database: 0

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

4.2 生产环境部署

4.2.1 后端部署

使用Maven打包：mvn clean package -DskipTests
生成Docker镜像：

dockerfile复制FROM openjdk:17-jdk-slim
COPY target/hanfu-rent-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

使用docker-compose编排：

yaml复制version: '3'
services:
  app:
    image: hanfu-rent:1.0
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    depends_on:
      - redis
      - mysql
  
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: yourpassword
      MYSQL_DATABASE: hanfu_rent
    
  redis:
    image: redis:6-alpine

4.2.2 前端部署

构建生产包：npm run build
Nginx配置示例：

nginx复制server {
    listen 80;
    server_name yourdomain.com;
    
    location / {
        root /var/www/hanfu-rent/dist;
        try_files $uri $uri/ /index.html;
    }
    
    location /api/ {
        proxy_pass http://backend:8080/;
        proxy_set_header Host $host;
    }
}

5. 项目优化方向

5.1 性能优化建议

引入Elasticsearch提升搜索效率
使用Redis缓存热点汉服数据
实现CDN加速静态资源加载
数据库读写分离
分库分表处理订单数据

5.2 功能扩展建议

增加汉服社区功能（UGC内容）
实现汉服定制服务
添加汉服文化知识库
开发配套小程序端
接入第三方支付平台
实现智能推荐算法

5.3 毕业设计答辩要点

重点讲解技术选型理由
演示核心业务流程
展示数据库设计思路
分析项目创新点
讨论遇到的难点及解决方案
准备性能测试数据

提示：答辩时建议准备2-3个对比方案（如传统Servlet架构与SpringBoot架构的对比），展示你的技术决策过程。

6. 常见问题解决方案

6.1 开发环境问题

问题1：MySQL连接失败

检查MySQL服务是否启动
确认application.yml中的数据库配置正确
检查MySQL用户权限
尝试添加连接参数：&useSSL=false&allowPublicKeyRetrieval=true

问题2：前端跨域访问
解决方案：

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

6.2 业务逻辑问题

问题3：库存扣减不一致
解决方案：

使用数据库乐观锁（如上文示例）
或者使用Redis分布式锁：

java复制public boolean deductStock(Long hanfuId) {
    String lockKey = "lock:hanfu:" + hanfuId;
    String clientId = UUID.randomUUID().toString();
    
    try {
        // 尝试获取锁
        Boolean locked = redisTemplate.opsForValue()
            .setIfAbsent(lockKey, clientId, 30, TimeUnit.SECONDS);
        
        if (Boolean.TRUE.equals(locked)) {
            // 执行库存扣减
            return hanfuService.deductStock(hanfuId);
        }
        return false;
    } finally {
        // 释放锁
        if (clientId.equals(redisTemplate.opsForValue().get(lockKey))) {
            redisTemplate.delete(lockKey);
        }
    }
}

问题4：订单状态流转异常
建议：

使用状态模式设计订单状态机
记录完整的状态变更日志
提供状态补偿机制

6.3 部署运维问题

问题5：内存溢出
解决方案：

调整JVM参数：-Xms512m -Xmx1024m -XX:+HeapDumpOnOutOfMemoryError
定期检查内存泄漏
使用Arthas等工具诊断

问题6：数据库慢查询
优化方案：

添加合适的索引
优化SQL语句，避免全表扫描
使用EXPLAIN分析执行计划
考虑分表分库

在实际开发这个汉服租赁系统的过程中，我发现最大的挑战不在于技术实现，而在于业务流程的完整性和用户体验的细节处理。比如在租赁流程中，最初设计的"选择汉服-下单支付"两步走模式在实际测试中暴露出用户对押金规则理解不清的问题。后来我们增加了"租赁计算器"功能，用户可以实时看到不同租赁天数的费用明细，这个小小的改进使订单转化率提升了近30%。这让我深刻体会到，一个好的系统不仅要有扎实的技术基础，更需要从用户角度出发不断优化交互体验。