基于SpringBoot+Vue+小程序的剧本杀管理系统的设计与实现

一、 项目背景与意义随着“剧本杀”等沉浸式社交娱乐活动的兴起线下门店和线上平台对高效、智能的管理系统需求日益迫切。传统的人工预约、剧本分发、角色分配和结算方式效率低下易出错且难以满足玩家对游戏体验和社交互动的更高要求。因此设计并实现一个集门店管理、剧本库管理、玩家预约、游戏进程控制、结算支付于一体的综合性剧本杀管理系统具有重要的现实意义和应用价值。本系统旨在通过现代化的技术栈为剧本杀商家提供一个功能完善、操作便捷、稳定可靠的管理平台同时为玩家提供流畅的线上预约、选本、组队和支付体验从而提升整个行业的运营效率和服务质量。二、 技术栈选型与架构设计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 系统架构系统采用前后端分离的架构模式表现层: Vue管理后台供商家使用 微信小程序供玩家使用。网关层: Nginx实现反向代理、负载均衡和静态资源服务。应用层: SpringBoot构建的微服务或单体应用提供核心业务API。数据层: MySQL存储结构化数据Redis作为缓存和会话存储。中间件: 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, Listlt;Stringgt; 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 Pagelt;Scriptgt; listScripts(String keyword, String category, Pagelt;Scriptgt; page) { LambdaQueryWrapperlt;Scriptgt; wrapper new LambdaQueryWrapperlt;gt;(); 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 -amp;gt; { 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 amp;amp; 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 amp;amp; 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沉浸式体验集成、大数据分析经营报表等功能进一步拓展系统的商业价值和竞争力。