约局 · 剧本杀约局管理平台
单商家 + 多客户模式的剧本杀约局管理平台。客户可以在线浏览剧本、发起/加入约局场次、发布评测、接收消息通知;商家可以管理剧本、场次、玩家与评测,并查看经营统计数据。
技术栈
| 后端 | JDK 1.8 / Spring Boot 2.7.18 / MyBatis-Plus 3.5.3.2 / MySQL 8.0 |
| 前端 | Vue 3 / Vite 5 / Element Plus / Pinia / Vue Router |
| 认证 | JWT(jjwt 0.11.5)+ Spring Security Crypto(BCrypt 密码加密) |
项目结构
├── backend # Spring Boot 后端,接口前缀 /api,端口 8081
└── frontend # Vue3 前端,开发服务器端口 5173(/api 代理到后端)
环境要求
- JDK 1.8+
- Maven 3.6+
- MySQL 8.0+
- Node.js 18+
快速启动
1. 初始化数据库
在 MySQL 中执行初始化脚本(自动建库 yueju、建表并写入演示数据):
mysql -u root -p < backend/src/main/resources/sql/init.sql
2. 启动后端
修改 backend/src/main/resources/application.yml 中的 spring.datasource.password 为你本机 MySQL 密码
运行主类 com.yueju.YoujuApplication,接口地址为 http://localhost:8081/api
cd backend
mvn spring-boot:run
3. 启动前端
cd frontend
npm install
npm run dev
浏览器访问 http://localhost:5173,开发服务器已将 /api 代理转发到后端 8081。
默认账号
首次启动后端会自动创建以下账号(密码均为 123456):
| admin | 超级管理员(role=9) |
| merchant | 商家(role=1) |
| demo | 演示客户(role=0) |
功能模块
- 客户端:注册/登录、剧本浏览、约局场次发起与加入、我的场次、我的评测、站内消息
- 商家后台:剧本管理(上架/下架)、场次管理、玩家管理、评测审核、经营统计
界面预览
截图保存在 docs/screenshots/ 目录,可直接在 IDE 或图床中查看:
| 登录页 | ![]() |
| 注册页 | ![]() |
| 首页(客户) | ![]() |
| 剧本列表 | ![]() |
| 剧本详情弹窗 | ![]() |
| 开团场次列表 | ![]() |
| 我的约局 | ![]() |
| 我的评价 | ![]() |
| 站内消息 | ![]() |
| 商家仪表盘 | ![]() |
| 商家-剧本管理 | ![]() |
| 商家-场次管理 | ![]() |
| 商家-玩家管理 | ![]() |
| 商家-评测审核 | ![]() |
| 个人信息-头像上传 | ![]() |
接口约定
- 统一响应格式:{ code, msg, data };业务成功 code=200,业务失败 code=400,未登录 code=401,无权限 code=403。除上传等极少数场景外,HTTP 状态码一律返回 200,前端以响应体 code 为准(request.js 已统一处理跳转登录与错误提示)
- 登录后前端将 token 存入 localStorage,请求自动携带 Authorization: Bearer <token>
- 主要路由:/auth、/user、/script、/session、/mine、/review、/message、/admin/*
- 文件上传:本地磁盘 user.dir/uploads/ 目录(即后端启动目录下 uploads/),静态映射 /uploads/**,生成图片 URL 为 http://localhost:8081/api/uploads/xxx
业务设计说明(重要)
- 剧本删除限制:剧本只要关联过任何场次(含已完成/已取消)即禁止删除(400),避免历史场次与评价出现孤儿数据;停止约局请使用「下架」功能,历史场次不受影响
- 场次删除限制:仅「报名中/已满员」且没有已确认玩家的场次可删除
- 客户可见性:客户端的场次列表只展示「上架中」剧本的场次;已下架剧本的场次仅商家后台可见(历史场次 join 兜底显示为「已下架」)
- 场次人数/价格:新增场次时选择剧本会自动带出剧本默认的最少/最多人数与价格,可手动修改后保存;编辑仅限「报名中/已满员」的场次
- 满员自动流转:报名确认数达到最多人数时,场次自动从「报名中」变为「已满员」;有人取消/移除空出名额后自动恢复「报名中」
- 默认账号:admin/merchant/demo(密码均为 123456)由后端启动时自动创建。若重建了数据库,需重启后端才能恢复默认账号
数据库初始化注意事项
-
init.sql 为 UTF-8 编码,Windows 下用 cmd/PowerShell 重定向(mysql < init.sql)可能因代码页问题导致中文插入失败,建议用客户端内建命令执行:
mysql -u root -p –default-character-set=utf8mb4 -e "SOURCE <init.sql 的绝对路径>"
-
仓库内提交代码时请勿包含本机 MySQL 密码等敏感信息(application.yml 中的密码仅用于本地开发)
目录说明
backend(com.yueju)
├── common 统一返回 Result / 业务异常 / 全局异常处理
├── config MyBatis-Plus 配置 / JWT 拦截器 / 跨域 / Jackson 日期格式
├── controller 接口层
├── dto 入参对象
├── entity 实体(user script script_character session session_player review message)
├── init 启动时初始化默认账号
├── mapper MyBatis-Plus Mapper(含联查 SQL)
├── service 业务层
├── util JWT 工具
└── vo 返回对象
frontend(src)
├── api 全部接口封装 + 状态字典
├── components 剧本详情弹窗 / 场次详情弹窗
├── router 路由与登录/权限守卫
├── stores Pinia 用户状态(token/user)
├── utils/request.js axios 封装(统一错误提示、401 跳登录)
└── views 客户端页面 + 商家后台(admin/)




















