温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！

一、 项目背景与意义

随着“剧本杀”等沉浸式社交娱乐活动的兴起，线下门店和线上平台对高效、智能的管理系统需求日益迫切。传统的人工预约、剧本分发、角色分配和结算方式效率低下，易出错，且难以满足玩家对游戏体验和社交互动的更高要求。因此，设计并实现一个集门店管理、剧本库管理、玩家预约、游戏进程控制、结算支付于一体的综合性剧本杀管理系统，具有重要的现实意义和应用价值。

本系统旨在通过现代化的技术栈，为剧本杀商家提供一个功能完善、操作便捷、稳定可靠的管理平台，同时为玩家提供流畅的线上预约、选本、组队和支付体验，从而提升整个行业的运营效率和服务质量。

二、 技术栈选型与架构设计

2.1 后端技术栈 (SpringBoot)

• 核心框架: Spring Boot 2.7+， 提供快速应用构建和自动配置。
• Web框架: Spring MVC， 处理RESTful API请求。
• 数据持久层: MyBatis-Plus， 简化数据库操作，提供强大的CRUD功能。
• 数据库: MySQL 8.0， 存储核心业务数据（用户、剧本、订单等）。
• 缓存: Redis， 用于存储会话信息、热门剧本缓存、验证码等。
• 安全与认证: Spring Security + JWT (JSON Web Token)， 实现用户认证与授权。
• 消息队列: RabbitMQ， 处理异步任务，如订单超时取消、消息通知等。
• API文档: Knife4j (Swagger增强)， 自动生成和调试API接口文档。

2.2 前端技术栈 (Vue.js)

• 核心框架: Vue 3 (Composition API)， 构建响应式用户界面。
• 构建工具: Vite， 提供极速的开发服务器和构建体验。
• UI组件库: Element Plus， 提供丰富的桌面端UI组件。
• 状态管理: Pinia， Vue官方推荐的状态管理库。
• 路由: Vue Router 4， 实现单页面应用的路由管理。
• HTTP客户端: Axios， 用于与后端API进行通信。

2.3 移动端技术栈 (微信小程序)

• 开发框架: 微信小程序原生框架或 uni-app (用于跨端)。
• UI组件: Vant Weapp 或 uni-ui， 提供小程序端UI组件。
• 网络请求: 微信小程序内置的wx.request或 uni-app的uni.request。
• 地图与支付: 集成微信小程序地图、微信支付等原生能力。

2.4 系统架构

系统采用前后端分离的架构模式：

1. 表现层: Vue管理后台（供商家使用） + 微信小程序（供玩家使用）。
2. 网关层: Nginx实现反向代理、负载均衡和静态资源服务。
3. 应用层: SpringBoot构建的微服务或单体应用，提供核心业务API。
4. 数据层: MySQL存储结构化数据，Redis作为缓存和会话存储。
5. 中间件: RabbitMQ用于解耦异步业务，Elasticsearch可选用于剧本搜索。

三、 核心功能模块设计与实现

3.1 用户与权限管理模块

功能: 实现玩家、店员、店长、系统管理员等多角色注册、登录、信息管理和权限控制。

核心代码 (SpringBoot + Spring Security):

// JWT工具类 (部分代码) @Component public class JwtUtil { private static final String SECRET_KEY = "your-secret-key"; private static final long EXPIRATION = 86400000L; // 24小时 public String generateToken(String username, List<String> roles) { return Jwts.builder() .setSubject(username) .claim("roles", roles) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION)) .signWith(SignatureAlgorithm.HS512, SECRET_KEY) .compact(); } public Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); } } // Spring Security配置 (部分代码) @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Autowired private JwtAuthenticationFilter jwtAuthenticationFilter; @Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) .and() .authorizeRequests() .antMatchers("/api/auth/", "/swagger-ui/", "/v3/api-docs/").permitAll() .antMatchers("/api/admin/").hasRole("ADMIN") .antMatchers("/api/store/").hasAnyRole("STORE_OWNER", "STAFF") .antMatchers("/api/player/").hasRole("PLAYER") .anyRequest().authenticated() .and() .addFilterBefore(jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class); } }

3.2 剧本库管理模块

功能: 剧本的CRUD、分类标签管理、剧本详情（人数、难度、时长、简介）、库存管理、热度统计。

核心代码 (MyBatis-Plus + SpringBoot):

// 剧本实体类 @Data @TableName("script") public class Script { @TableId(type = IdType.AUTO) private Long id; private String title; private String author; private Integer playerMin; private Integer playerMax; private Integer duration; // 分钟 private String difficulty; // 简单、中等、困难 private String category; // 恐怖、推理、情感、机制 private String description; private String coverImage; private Integer stock; // 库存数量 private Integer heat; // 热度 @TableField(fill = FieldFill.INSERT) private Date createTime; @TableField(fill = FieldFill.INSERT_UPDATE) private Date updateTime; } // 剧本服务层 @Service public class ScriptService { @Autowired private ScriptMapper scriptMapper; public Page<Script> listScripts(String keyword, String category, Page<Script> page) { LambdaQueryWrapper<Script> wrapper = new LambdaQueryWrapper<>(); if (StringUtils.hasText(keyword)) { wrapper.like(Script::getTitle, keyword).or().like(Script::getAuthor, keyword); } if (StringUtils.hasText(category)) { wrapper.eq(Script::getCategory, category); } wrapper.orderByDesc(Script::getHeat, Script::getCreateTime); return scriptMapper.selectPage(page, wrapper); } }

3.3 预约与订单模块

功能: 玩家通过小程序选择剧本、场次、房间，提交预约订单，支持在线支付（微信支付），店员后台确认订单，管理订单状态（待支付、已预约、进行中、已完成、已取消）。

核心代码 (SpringBoot + RabbitMQ):

// 订单服务，处理超时取消 @Service public class OrderService { @Autowired private RabbitTemplate rabbitTemplate; public void createOrder(Order order) { // 1. 保存订单到数据库 (状态: 待支付) orderMapper.insert(order); // 2. 发送延迟消息，30分钟后检查订单状态 rabbitTemplate.convertAndSend( "order.delay.exchange", "order.delay.routingKey", order.getId(), message -> { message.getMessageProperties().setDelay(30 * 60 * 1000); // 30分钟延迟 return message; } ); } @RabbitListener(queues = "order.check.queue") public void checkOrderTimeout(Long orderId) { Order order = orderMapper.selectById(orderId); if (order != null && "PENDING".equals(order.getStatus())) { order.setStatus("CANCELLED"); orderMapper.updateById(order); // 释放库存等后续操作 releaseInventory(order); } } }

3.4 游戏进程管理模块

功能: 店员后台创建游戏房间，分配玩家角色，管理游戏阶段（阅读、搜证、讨论、投票、复盘），推送线索卡片，计时器管理。

核心代码 (Vue 3 + WebSocket):

// Vue组件内使用WebSocket管理游戏房间状态 import { ref, onMounted, onUnmounted } from 'vue'; export default { setup() { const gameState = ref({}); const socket = ref(null); const connectWebSocket = (roomId) => { const wsUrl = `ws://your-backend/ws/game/${roomId}`; socket.value = new WebSocket(wsUrl); socket.value.onopen = () => { console.log('WebSocket连接已建立'); }; socket.value.onmessage = (event) => { const data = JSON.parse(event.data); // 更新游戏状态：阶段、剩余时间、当前线索等 gameState.value = data; }; socket.value.onclose = () => { console.log('WebSocket连接已关闭'); }; }; const sendAction = (action, payload) => { if (socket.value && socket.value.readyState === WebSocket.OPEN) { socket.value.send(JSON.stringify({ action, ...payload })); } }; onMounted(() => { connectWebSocket(123); // 假设房间ID为123 }); onUnmounted(() => { if (socket.value) { socket.value.close(); } }); return { gameState, sendAction }; } };

四、 数据库设计核心表结构

-- 用户表 CREATE TABLE `user` ( `id` bigint PRIMARY KEY AUTO_INCREMENT, `username` varchar(50) UNIQUE NOT NULL, `password` varchar(255) NOT NULL, `nickname` varchar(50), `phone` varchar(20), `avatar` varchar(500), `role` enum('PLAYER', 'STAFF', 'STORE_OWNER', 'ADMIN') NOT NULL DEFAULT 'PLAYER', `status` tinyint DEFAULT 1 COMMENT '1正常 0禁用', `create_time` datetime DEFAULT CURRENT_TIMESTAMP ); -- 剧本表 CREATE TABLE script ( id bigint PRIMARY KEY AUTO_INCREMENT, title varchar(100) NOT NULL, author varchar(50), player_min int NOT NULL, player_max int NOT NULL, duration int COMMENT '预计时长(分钟)', difficulty enum('EASY', 'MEDIUM', 'HARD'), category varchar(50), description text, cover_image varchar(500), stock int DEFAULT 0, heat int DEFAULT 0, create_time datetime DEFAULT CURRENT_TIMESTAMP ); -- 订单表 CREATE TABLE order ( id bigint PRIMARY KEY AUTO_INCREMENT, order_no varchar(64) UNIQUE NOT NULL COMMENT '订单号', user_id bigint NOT NULL, script_id bigint NOT NULL, store_id bigint, room_id bigint, play_time datetime NOT NULL COMMENT '预约游玩时间', player_count int NOT NULL, total_amount decimal(10,2) NOT NULL, status varchar(20) NOT NULL COMMENT 'PENDING, PAID, CONFIRMED, IN_PROGRESS, COMPLETED, CANCELLED', pay_time datetime, create_time datetime DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES user (id), FOREIGN KEY (script_id) REFERENCES script (id) ); -- 游戏房间表 CREATE TABLE game_room ( id bigint PRIMARY KEY AUTO_INCREMENT, room_code varchar(10) UNIQUE NOT NULL COMMENT '房间号', script_id bigint NOT NULL, store_id bigint NOT NULL, host_id bigint COMMENT '主持人(店员)ID', current_stage varchar(50) COMMENT '当前游戏阶段', stage_start_time datetime, status varchar(20) DEFAULT 'WAITING' COMMENT 'WAITING, IN_PROGRESS, FINISHED', create_time datetime DEFAULT CURRENT_TIMESTAMP );

五、 总结与展望

本文详细阐述了基于SpringBoot、Vue.js和微信小程序技术的剧本杀管理系统的设计与实现。系统采用前后端分离架构，涵盖了用户权限、剧本管理、预约订单、游戏进程等核心业务模块，并提供了关键代码示例和数据库设计。

该系统能有效提升剧本杀门店的运营效率，优化玩家体验。未来可考虑加入智能推荐剧本、玩家社交系统、VR/AR沉浸式体验集成、大数据分析经营报表等功能，进一步拓展系统的商业价值和竞争力。