1. 项目概述
高校汉服租赁平台是一个面向大学生群体的在线租赁系统,旨在解决传统文化爱好者租借汉服过程中遇到的各种痛点。作为一名参与过多个校园项目开发的技术人员,我发现传统线下租赁方式存在诸多不便:租赁信息不透明、预约流程繁琐、库存管理混乱等问题普遍存在。这个项目正是基于这些实际需求而设计的。
平台采用前后端分离架构,后端使用SpringBoot框架,前端基于Vue.js实现。数据库选用MySQL,同时引入Redis作为缓存层提升系统性能。整个系统从设计到实现都充分考虑了高校学生的使用习惯和技术特点,既保证了功能的完整性,又确保了系统的易用性和可维护性。
2. 技术选型与架构设计
2.1 后端技术栈
SpringBoot作为后端框架的选择主要基于以下几个考虑:
- 快速开发:SpringBoot的自动配置和起步依赖大大简化了项目搭建过程
- 生态丰富:Spring生态提供了完善的安全、数据访问等解决方案
- 易于扩展:可以方便地集成Redis、Elasticsearch等中间件
在实际开发中,我们特别注重了以下几个技术点的实现:
- 使用JWT(JSON Web Token)进行身份认证,避免了传统的Session存储
- 采用RESTful API设计规范,保证接口的规范性和可读性
- 使用MyBatis-Plus作为ORM框架,简化数据库操作
- 集成Swagger用于API文档自动生成
2.2 前端技术栈
Vue.js作为前端框架的优势在于:
- 渐进式框架,学习曲线平缓
- 组件化开发,便于维护和复用
- 丰富的生态系统(Vuex、Vue Router等)
我们特别使用了以下技术增强前端体验:
- Element UI组件库:提供美观、一致的UI组件
- Axios:处理HTTP请求
- Vue Router:实现前端路由
- Vuex:状态管理
2.3 数据库设计
数据库设计遵循了第三范式,同时考虑了查询性能。主要表结构包括:
2.3.1 汉服信息表
sql复制CREATE TABLE `costume` (
`costume_id` bigint NOT NULL AUTO_INCREMENT,
`costume_name` varchar(50) NOT NULL,
`costume_type` varchar(20) NOT NULL,
`costume_price` decimal(10,2) NOT NULL,
`costume_stock` int NOT NULL,
`costume_status` tinyint NOT NULL DEFAULT '1',
`costume_image` varchar(255) DEFAULT NULL,
`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`costume_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2.3.2 用户信息表
sql复制CREATE TABLE `user` (
`user_id` bigint NOT NULL AUTO_INCREMENT,
`user_name` varchar(30) NOT NULL,
`user_password` varchar(100) NOT NULL,
`user_phone` varchar(15) NOT NULL,
`user_role` tinyint NOT NULL DEFAULT '0',
`last_login` datetime DEFAULT NULL,
`register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`user_id`),
UNIQUE KEY `idx_phone` (`user_phone`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2.3.3 租赁订单表
sql复制CREATE TABLE `rent_order` (
`order_id` bigint NOT NULL AUTO_INCREMENT,
`order_code` varchar(50) NOT NULL,
`user_id` bigint NOT NULL,
`costume_id` bigint NOT NULL,
`rent_days` int NOT NULL,
`total_fee` decimal(10,2) NOT NULL,
`order_status` tinyint NOT NULL DEFAULT '0',
`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`order_id`),
UNIQUE KEY `idx_order_code` (`order_code`),
KEY `idx_user_id` (`user_id`),
KEY `idx_costume_id` (`costume_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 核心功能实现
3.1 用户认证模块
用户认证采用JWT方案,主要流程如下:
- 用户登录时,后端验证用户名密码
- 验证通过后生成JWT token返回给前端
- 前端后续请求携带该token
- 后端通过拦截器验证token有效性
关键代码实现:
java复制// JWT工具类
public class JwtUtil {
private static final String SECRET = "your-secret-key";
private static final long EXPIRATION = 86400000L; // 24小时
public static String generateToken(UserDetails userDetails) {
Map<String, Object> claims = new HashMap<>();
return Jwts.builder()
.setClaims(claims)
.setSubject(userDetails.getUsername())
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATION))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
}
public static String getUsernameFromToken(String token) {
return Jwts.parser()
.setSigningKey(SECRET)
.parseClaimsJws(token)
.getBody()
.getSubject();
}
}
3.2 汉服管理模块
汉服管理实现了CRUD操作,特别注重了图片上传和库存管理的实现。图片上传采用七牛云OSS存储,前端通过Element UI的Upload组件实现上传功能。
库存管理的关键点:
- 下单时检查库存
- 支付成功后扣减库存
- 取消订单时恢复库存
库存操作的原子性实现:
java复制@Transactional
public boolean decreaseStock(Long costumeId, int quantity) {
Costume costume = costumeMapper.selectById(costumeId);
if(costume == null || costume.getCostumeStock() < quantity) {
return false;
}
costume.setCostumeStock(costume.getCostumeStock() - quantity);
return costumeMapper.updateById(costume) > 0;
}
3.3 订单处理模块
订单处理流程:
- 用户选择汉服和租赁天数
- 系统计算总费用并生成待支付订单
- 用户完成支付后订单状态更新
- 管理员可以查看和管理所有订单
订单状态机设计:
java复制public enum OrderStatus {
UNPAID(0, "待支付"),
PAID(1, "已支付"),
COMPLETED(2, "已完成"),
CANCELLED(3, "已取消");
private final int code;
private final String desc;
// 构造方法、getter省略
}
4. 系统优化与部署
4.1 性能优化
- Redis缓存:将热门汉服信息和配置信息缓存到Redis
java复制@Cacheable(value = "costume", key = "#costumeId")
public Costume getCostumeById(Long costumeId) {
return costumeMapper.selectById(costumeId);
}
- 数据库索引优化:在常用查询字段上建立索引
- 前端懒加载:汉服列表图片采用懒加载技术
- CDN加速:静态资源通过CDN分发
4.2 安全措施
- SQL注入防护:使用MyBatis预编译
- XSS防护:前端使用vue-sanitize处理用户输入
- CSRF防护:虽然RESTful API本身不易受CSRF攻击,但仍添加了Token验证
- 密码安全:使用BCrypt加密存储
java复制public class PasswordUtil {
private static final BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
public static String encode(String rawPassword) {
return encoder.encode(rawPassword);
}
public static boolean matches(String rawPassword, String encodedPassword) {
return encoder.matches(rawPassword, encodedPassword);
}
}
4.3 部署方案
推荐部署环境:
- 服务器:2核4G(学生优惠服务器即可)
- 操作系统:CentOS 7.x
- 中间件:Nginx + JDK8 + MySQL5.7 + Redis5
部署步骤:
- 后端打包:
mvn clean package - 前端构建:
npm run build - 配置Nginx反向代理
- 使用PM2管理Node进程(如需SSR)
5. 常见问题与解决方案
5.1 跨域问题
解决方案:后端配置CORS
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.maxAge(3600);
}
}
5.2 图片上传大小限制
解决方案:调整SpringBoot配置
properties复制spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
5.3 订单超时处理
实现方案:使用延迟队列处理超时订单
java复制@Scheduled(fixedRate = 60000) // 每分钟检查一次
public void checkOrderTimeout() {
List<Order> unpaidOrders = orderMapper.selectUnpaidOrders();
unpaidOrders.forEach(order -> {
if(System.currentTimeMillis() - order.getCreateTime().getTime() > 30*60*1000) {
order.setStatus(OrderStatus.CANCELLED.getCode());
orderMapper.updateById(order);
// 恢复库存
costumeService.increaseStock(order.getCostumeId(), order.getRentDays());
}
});
}
5.4 并发下单问题
解决方案:使用数据库乐观锁
java复制@Transactional
public boolean createOrder(Order order) {
// 检查库存时使用乐观锁
Costume costume = costumeMapper.selectByIdForUpdate(order.getCostumeId());
if(costume.getCostumeStock() < order.getRentDays()) {
return false;
}
// 扣减库存
costumeMapper.decreaseStock(order.getCostumeId(), order.getRentDays());
// 创建订单
return orderMapper.insert(order) > 0;
}
6. 项目扩展方向
在实际开发过程中,我发现这个项目还有以下几个可以扩展的方向:
- 社交功能扩展:增加用户评价、汉服搭配分享等社区功能
- 智能推荐:基于用户浏览和租赁历史推荐相关汉服
- 租赁保险:引入第三方保险服务,为贵重汉服提供保障
- 线下门店整合:与线下汉服体验店合作,实现线上预约线下体验
- 会员体系:建立积分和会员等级制度,提高用户粘性
技术层面可以考虑:
- 引入Elasticsearch实现更强大的搜索功能
- 使用WebSocket实现实时通知
- 接入微信小程序扩大用户覆盖面
- 实现分布式架构应对高并发场景
这个项目从技术选型到功能实现都充分考虑了高校学生的实际需求和技术特点。在开发过程中,特别注重了系统的实用性和易用性,避免过度设计。对于计算机专业的学生来说,这个项目涵盖了Web开发的各个环节,是一个很好的学习案例。