暗茧1. 项目概述：高校汉服租赁系统的技术架构与业务价值
这套基于SpringBoot+Vue+MyBatis+MySQL的高校汉服租赁系统，是我在校园文化数字化领域的一次完整实践。系统采用经典的前后端分离架构，前端使用Vue.js构建响应式用户界面，后端采用SpringBoot提供RESTful API服务，MyBatis作为ORM框架操作MySQL数据库。这种技术组合在当前企业级应用中具有典型代表性，特别适合需要快速迭代的校园互联网项目。
提示：系统源码已通过完整测试，包含管理员后台、用户端小程序、订单管理、服装库存等核心模块，可直接用于毕业设计或商业项目二次开发。
在高校场景中，汉服租赁需求具有明显的季节性特征——传统文化节日前后会出现订单高峰，平时则多为社团活动使用。这就要求系统在架构设计上必须考虑：
- 高并发预约能力（如中秋、元宵等节日）
- 服装多维度分类管理（形制、朝代、尺码等）
- 灵活的租期定价策略
- 可视化库存状态展示
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈深度解析与选型依据
2.1 SpringBoot后端技术选型
选用SpringBoot 2.7.x版本（兼容JDK8）主要基于以下考量：
- 自动配置特性大幅减少XML配置，通过starter依赖快速集成：
xml复制<!-- 核心依赖示例 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
- 内置Tomcat容器支持快速部署，通过application.yml集中管理配置：
yaml复制server:
port: 8080
servlet:
context-path: /hanfu-api
spring:
datasource:
url: jdbc:mysql://localhost:3306/hanfu_rental?useSSL=false
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
- 通过@Transactional注解实现声明式事务管理，确保订单创建、库存扣减等操作的原子性：
java复制@Transactional(rollbackFor = Exception.class)
public RentalOrder createOrder(OrderDTO dto) {
// 1. 校验库存
// 2. 生成订单
// 3. 扣减库存
}
2.2 Vue前端架构设计
前端采用Vue 3组合式API开发，主要技术亮点包括：
- 基于Vite的快速构建工具链，相比传统webpack启动速度快10倍以上：
bash复制npm create vite@latest hanfu-frontend --template vue
- 使用Pinia进行状态管理，解决多组件间数据共享问题：
javascript复制// stores/rental.js
export const useRentalStore = defineStore('rental', {
state: () => ({
currentCategory: null,
filterParams: {}
}),
actions: {
async fetchHanfuList() {
// API请求封装
}
}
})
- 响应式布局方案：
- 移动端：flex布局+rem适配
- PC端：Element Plus的栅格系统
- 关键CSS代码示例：
css复制/* 汉服卡片响应式设计 */
.hanfu-card {
width: calc(33.333% - 20px);
@media (max-width: 768px) {
width: calc(50% - 16px);
}
@media (max-width: 480px) {
width: 100%;
}
}
2.3 MyBatis数据持久层优化
针对汉服租赁业务特点，MyBatis配置做了以下专项优化：
- 动态SQL处理多条件查询：
xml复制<select id="selectHanfuByCondition" resultMap="BaseResultMap">
SELECT * FROM hanfu
<where>
<if test="dynasty != null">
AND dynasty = #{dynasty}
</if>
<if test="category != null">
AND category = #{category}
</if>
<if test="minPrice != null">
AND rent_price >= #{minPrice}
</if>
</where>
ORDER BY create_time DESC
</select>
- 二级缓存配置提升热门商品查询性能：
xml复制<cache eviction="LRU" flushInterval="60000" size="512" readOnly="true"/>
- 类型处理器处理枚举字段：
java复制public enum HanfuStatus {
AVAILABLE(1), RENTED(2), MAINTENANCE(3);
@JsonCreator
public static HanfuStatus fromValue(int value) {
// 枚举转换逻辑
}
}
3. 核心业务模块实现细节
3.1 汉服库存管理设计
采用"总库存+可用库存"双字段设计解决并发问题：
sql复制CREATE TABLE `hanfu` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(64) NOT NULL COMMENT '汉服名称',
`total_stock` int NOT NULL COMMENT '总库存量',
`available_stock` int NOT NULL COMMENT '可用库存',
`rent_price` decimal(10,2) NOT NULL COMMENT '日租金',
`deposit` decimal(10,2) NOT NULL COMMENT '押金',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
库存扣减采用乐观锁实现：
java复制public boolean reduceStock(Long hanfuId, int quantity) {
int affected = hanfuMapper.updateStock(
hanfuId,
quantity,
LocalDateTime.now() // 版本号替代方案
);
return affected > 0;
}
对应的Mapper方法：
xml复制<update id="updateStock">
UPDATE hanfu
SET available_stock = available_stock - #{quantity}
WHERE id = #{id}
AND available_stock >= #{quantity}
</update>
3.2 租赁订单状态机设计
订单状态流转采用状态模式实现：
java复制public interface OrderState {
void pay(OrderContext context);
void cancel(OrderContext context);
void complete(OrderContext context);
}
// 具体状态实现
public class PendingPaymentState implements OrderState {
@Override
public void pay(OrderContext context) {
// 支付逻辑
context.setState(new PaidState());
}
}
数据库状态字段设计：
sql复制CREATE TABLE `rental_order` (
`status` tinyint NOT NULL COMMENT '0-待支付 1-已支付 2-租赁中 3-已完成 4-已取消',
`status_change_history` json DEFAULT NULL COMMENT '状态变更记录'
);
3.3 支付对接方案
集成微信支付JSAPI实现校园场景支付：
- 后端签名接口：
java复制@PostMapping("/pay/unifiedorder")
public Result<WxPayResponse> unifiedOrder(@RequestBody OrderPayDTO dto) {
// 1. 创建微信支付订单
// 2. 返回前端所需参数
return Result.success(payService.createOrder(dto));
}
- 前端支付调用：
javascript复制const res = await wxPay(unifiedOrderRes)
if (res.code === 'SUCCESS') {
showToast('支付成功')
await checkPaymentStatus()
}
- 支付结果异步通知处理：
java复制@PostMapping("/pay/notify")
public String payNotify(HttpServletRequest request) {
// 验签逻辑
// 更新订单状态
return "<xml><return_code><![CDATA[SUCCESS]]></return_code></xml>";
}
4. 系统部署实战指南
4.1 数据库初始化
推荐使用MySQL 8.0+版本，执行以下步骤：
bash复制# 创建数据库
mysql> CREATE DATABASE hanfu_rental CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
# 导入表结构
mysql -uroot -p hanfu_rental < schema.sql
# 初始化基础数据
mysql -uroot -p hanfu_rental < data_init.sql
4.2 后端服务部署
使用Docker容器化部署方案：
dockerfile复制FROM openjdk:8-jdk-alpine
VOLUME /tmp
COPY target/hanfu-rental.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
启动命令：
bash复制# 构建镜像
docker build -t hanfu-backend .
# 运行容器
docker run -d -p 8080:8080 \
-e "SPRING_PROFILES_ACTIVE=prod" \
-v /path/to/config:/config \
--name hanfu-backend \
hanfu-backend
4.3 前端项目部署
Nginx配置示例：
nginx复制server {
listen 80;
server_name hanfu.example.com;
location / {
root /usr/share/nginx/html/hanfu-front;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:8080/;
proxy_set_header Host $host;
}
}
构建与部署流程：
bash复制npm install
npm run build
rsync -avz dist/ user@server:/path/to/hanfu-front
5. 典型问题排查手册
5.1 跨域问题解决方案
开发环境配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST")
.allowCredentials(true)
.maxAge(3600);
}
}
生产环境推荐使用Nginx反向代理解决：
nginx复制location /api/ {
add_header 'Access-Control-Allow-Origin' '$http_origin';
add_header 'Access-Control-Allow-Credentials' 'true';
proxy_pass http://backend:8080/;
}
5.2 微信支付签名失败排查
常见原因及解决方案：
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 调用支付JSAPI报签名无效 | 时间戳格式错误 | 确保使用Unix时间戳（秒级） |
| 支付成功但未收到通知 | 网络策略限制 | 检查服务器80/443端口是否开放 |
| 验签失败 | 商户密钥不一致 | 核对APIv3密钥与平台配置 |
5.3 高并发场景下的库存超卖
采用分布式锁方案增强：
java复制public boolean safeReduceStock(Long hanfuId, int quantity) {
String lockKey = "stock_lock:" + hanfuId;
try {
// 获取分布式锁（Redis实现示例）
boolean locked = redisTemplate.opsForValue()
.setIfAbsent(lockKey, "1", 10, TimeUnit.SECONDS);
if (!locked) {
throw new BusinessException("系统繁忙，请重试");
}
return reduceStock(hanfuId, quantity);
} finally {
redisTemplate.delete(lockKey);
}
}
6. 项目扩展方向建议
- 智能推荐模块
- 基于用户浏览历史实现协同过滤推荐
- 使用HanLP实现汉服标签提取
java复制// HanLP关键词提取示例
List<String> keywordList = HanLP.extractKeyword(hanfuDescription, 5);
- 预约日历可视化
- 使用FullCalendar组件展示汉服可租日期
- 后端实现基于时间段的库存查询接口
- 服装健康度追踪
- 记录每次租赁后的清洁/维护记录
- 根据使用次数自动下架老旧服装
这套系统在实际运行中，我发现高校场景的用户行为有几个特点值得注意：社团订单通常需要批量预定多套服装，而个人用户更关注单件服装的细节展示。因此在界面设计上，我们为管理员后台增加了"团体预约"快速通道，同时在前端商品详情页加入了360°旋转展示功能。