目录
- [Java 核心与应用：基于Django和Vue的棋牌室预约小程序](#Java 核心与应用：基于Django和Vue的棋牌室预约小程序)
- 基于Django和Vue的棋牌室预约小程序系统设计与实现
-
- 摘要
- [1 绪论](#1 绪论)
-
- [1.1 研究背景](#1.1 研究背景)
- [1.2 研究意义](#1.2 研究意义)
- [1.3 系统目标](#1.3 系统目标)
- [1.4 论文组织结构](#1.4 论文组织结构)
- 本章小结
- [2 相关技术介绍](#2 相关技术介绍)
-
- [2.1 Django框架](#2.1 Django框架)
- [2.2 ORM与Django Models](#2.2 ORM与Django Models)
- [2.3 SQLite数据库](#2.3 SQLite数据库)
- [2.4 JWT身份认证](#2.4 JWT身份认证)
- [2.5 Vue 3与前端工程化](#2.5 Vue 3与前端工程化)
- [2.6 UniApp跨平台开发](#2.6 UniApp跨平台开发)
- [2.7 ECharts数据可视化](#2.7 ECharts数据可视化)
- [2.8 技术栈总结](#2.8 技术栈总结)
- 本章小结
- [3 系统分析](#3 系统分析)
-
- [3.1 可行性分析](#3.1 可行性分析)
-
- [3.1.1 技术可行性](#3.1.1 技术可行性)
- [3.1.2 经济可行性](#3.1.2 经济可行性)
- [3.1.3 操作可行性](#3.1.3 操作可行性)
- [3.2 需求分析](#3.2 需求分析)
-
- [3.2.1 功能性需求](#3.2.1 功能性需求)
- [3.2.2 非功能性需求](#3.2.2 非功能性需求)
- [3.3 用例分析](#3.3 用例分析)
-
- [3.3.1 系统总体用例图](#3.3.1 系统总体用例图)
- [3.3.2 用户预约流程用例图](#3.3.2 用户预约流程用例图)
- 本章小结
- [4 系统设计](#4 系统设计)
-
- [4.1 系统架构设计](#4.1 系统架构设计)
-
- [4.1.1 系统架构图](#4.1.1 系统架构图)
- [4.1.2 登录鉴权交互流程](#4.1.2 登录鉴权交互流程)
- [4.2 功能模块设计](#4.2 功能模块设计)
- [4.3 数据库设计](#4.3 数据库设计)
-
- [4.3.1 E-R图设计](#4.3.1 E-R图设计)
- [4.3.2 数据表结构设计](#4.3.2 数据表结构设计)
- [4.4 接口设计](#4.4 接口设计)
- [4.5 安全设计](#4.5 安全设计)
- 本章小结
- 本章给出了系统总体架构、功能模块划分、数据库设计、接口设计，并说明了核心安全策略。通过结构化设计为后续模块实现与测试提供了清晰蓝图。
- [5 系统实现](#5 系统实现)
-
- [5.1 后端实现](#5.1 后端实现)
- [5.2 前端管理系统实现](#5.2 前端管理系统实现)
-
- [5.2.1 登录页面实现](#5.2.1 登录页面实现)
- [5.2.2 数据统计仪表盘实现](#5.2.2 数据统计仪表盘实现)
- [5.2.3 用户管理页面实现](#5.2.3 用户管理页面实现)
- [5.2.4 棋牌室管理页面实现](#5.2.4 棋牌室管理页面实现)
- [5.2.5 预约管理页面实现](#5.2.5 预约管理页面实现)
- [5.2.6 订单管理页面实现](#5.2.6 订单管理页面实现)
- [5.3 移动端小程序实现](#5.3 移动端小程序实现)
-
- [5.3.1 登录注册页面实现](#5.3.1 登录注册页面实现)
- [5.3.2 首页实现](#5.3.2 首页实现)
- [5.3.3 棋牌室列表页面实现](#5.3.3 棋牌室列表页面实现)
- [5.3.4 棋牌室详情页面实现](#5.3.4 棋牌室详情页面实现)
- [5.3.5 预约管理页面实现](#5.3.5 预约管理页面实现)
- [5.3.6 订单管理页面实现](#5.3.6 订单管理页面实现)
- [5.3.7 个人中心页面实现](#5.3.7 个人中心页面实现)
- [5.4 页面交互与体验说明](#5.4 页面交互与体验说明)
- 本章小结
- [6 系统测试](#6 系统测试)
-
- [6.1 测试环境](#6.1 测试环境)
- [6.2 测试方法](#6.2 测试方法)
- [6.3 典型测试用例](#6.3 典型测试用例)
- [6.4 性能测试](#6.4 性能测试)
- [6.5 测试结果分析](#6.5 测试结果分析)
- 本章小结
- [7 总结与展望](#7 总结与展望)
-
- [7.1 总结](#7.1 总结)
- [7.2 展望](#7.2 展望)
- 参考文献
- 致谢
- 参考文献
- 致谢
Java 核心与应用：基于Django和Vue的棋牌室预约小程序
系统演示视频 ：点击查看B站视频
基于Django和Vue的棋牌室预约小程序系统设计与实现
摘要
随着移动互联网技术的快速发展和数字化服务的普及，传统棋牌室的经营管理模式面临着诸多挑战。传统的电话预约、现场排队等方式不仅效率低下，而且用户体验较差，难以满足现代消费者对便捷服务的需求。为解决上述问题，本文设计并实现了一套基于 Django 与 Vue 3 的棋牌室预约小程序系统。
系统采用前后端分离的B/S架构，同时提供Web管理端和移动端小程序两种访问方式。后端以Django为核心框架，使用Django ORM进行数据持久化，采用SQLite数据库存储业务数据；使用PyJWT实现基于JWT的身份认证与权限控制。前端管理系统采用Vue 3框架，使用Element Plus构建用户界面，借助Vue Router实现路由管理，Pinia完成状态管理，Axios完成接口请求；移动端采用UniApp框架开发，支持微信小程序等多端部署。
系统实现了用户登录注册、棋牌室浏览与搜索、房间详情查看、在线预约与取消、订单管理、个人中心管理等用户端功能，以及用户管理、棋牌室管理、预约管理、订单管理、数据统计等后台管理功能。经测试，系统功能完整、运行稳定，可为棋牌室经营提供一体化的信息化支撑。
关键词：棋牌室预约；Django；Vue 3；UniApp；JWT；前后端分离；微信小程序
1 绪论
1.1 研究背景
棋牌娱乐作为中国传统文化的重要组成部分，在现代社会中仍然具有广泛的群众基础。随着人们生活水平的提高和休闲娱乐需求的增长，棋牌室作为重要的休闲娱乐场所，在全国各地得到了快速发展。然而，传统的棋牌室经营管理模式存在诸多问题：预约方式落后多依赖电话预约或现场排队，效率低下且容易出错；信息不透明用户无法实时了解房间状态和价格信息；管理成本高人工管理预约记录和订单信息工作量大且容易出错；用户体验差无法提供便捷的移动端服务。
随着移动互联网技术的不断发展，特别是微信小程序等轻量级应用的普及，为传统行业的数字化转型提供了新的机遇。通过构建基于小程序的预约系统，可以有效解决传统棋牌室经营中的痛点问题，提升服务质量和管理效率。
因此，开发一套功能完善、操作便捷、支持多端访问的棋牌室预约管理系统，对于推动棋牌室行业的数字化转型、提升用户体验和经营效率具有重要的现实意义。
1.2 研究意义
本课题的研究意义主要体现在以下几个方面：
理论意义：验证前后端分离架构在"休闲娱乐---预约管理"业务体系中的可行性，为同类系统设计提供参考；探索移动端小程序与Web管理端数据统一的技术方案，为跨平台应用开发提供实践经验。
实践意义：通过数字化手段改造传统棋牌室经营模式，提升行业信息化水平；为用户提供便捷的移动端预约服务，改善用户体验；为经营者提供高效的管理工具，降低运营成本，提高管理效率。
社会意义：推动传统服务业的数字化转型，促进行业健康发展；满足人们日益增长的休闲娱乐需求，丰富群众文化生活。
1.3 系统目标
系统在功能上需要覆盖用户认证（账号密码登录和注册）、棋牌室浏览与搜索、房间详情展示、在线预约与取消、订单生成与支付、个人中心管理、后台用户管理、棋牌室管理、预约记录管理、订单管理、数据统计与可视化等核心业务；在性能上需要能够支撑典型棋牌室预约场景的并发访问，页面响应时间控制在合理范围内，并保证系统稳定运行。
具体目标包括：
- 实现完整的用户注册登录体系，支持用户信息管理
- 提供直观的棋牌室信息展示，包括房间类型、价格、状态等
- 实现便捷的预约流程，支持时间段选择和预约确认
- 提供完善的订单管理功能，支持订单生成、支付、退款等操作
- 构建高效的后台管理系统，支持业务数据的统一管理
- 实现数据统计分析功能，为经营决策提供数据支撑
1.4 论文组织结构
本文共分为7个章节，依次为绪论、相关技术介绍、系统分析、系统设计（含数据库表结构与E-R图）、系统实现、系统测试以及总结与展望。
本章小结
本章介绍了课题研究背景、意义与系统目标，并给出了论文整体结构。通过对传统棋牌室经营模式痛点的分析，为后续技术选型与系统设计提供依据。
2 相关技术介绍
2.1 Django框架
Django是一个高级Python Web框架，鼓励快速开发和简洁、实用的设计。Django遵循MTV（Model-Template-View）架构模式，提供了ORM、表单处理、用户认证、管理后台等丰富的内置功能。本项目采用Django 4.2构建REST风格API，通过URL路由配置将不同功能模块的接口进行组织，将认证、用户管理、棋牌室管理、预约管理、订单管理等功能分别封装为独立模块，便于维护与扩展。
Django的主要优势包括：
- 完善的ORM系统，简化数据库操作
- 内置的管理后台，快速构建管理界面
- 强大的安全机制，防范常见的Web攻击
- 丰富的第三方库生态，加速开发进程
- 良好的文档和社区支持
2.2 ORM与Django Models
系统使用Django内置的ORM层，利用Models的模型映射能力将数据库表结构映射为Python类（如User、Room、Reservation、Order等），简化CRUD操作，同时保持对复杂查询与事务能力的支持。ORM层还能自动处理SQL注入防护，提升系统安全性。Django ORM支持多种数据库后端，本系统在开发阶段选择SQLite作为数据库，便于开发和测试。
2.3 SQLite数据库
SQLite是一款轻量级的关系型数据库管理系统，具有零配置、无服务器、自包含等特点。本系统选择SQLite的原因在于：开发便捷无需安装和配置数据库服务器；部署简单数据库文件可以随应用一起部署；性能优秀对于中小型应用具有良好的读写性能；跨平台支持可在各种操作系统上运行。
2.4 JWT身份认证
系统采用JWT（JSON Web Token）实现无状态身份认证。用户登录成功后获得Token，之后的接口请求在请求头携带Token，后端通过自定义中间件进行校验并识别当前用户身份，实现权限控制。JWT的无状态特性使得系统更易于水平扩展，同时避免了服务端Session存储的开销。系统使用PyJWT库实现Token的生成与验证，支持设置Token过期时间。
2.5 Vue 3与前端工程化
前端管理系统使用Vue 3构建SPA（单页应用），结合Vite进行开发构建。系统在前端侧通过Vue Router完成路由管理并区分不同功能页面，使用Pinia进行状态管理以管理用户登录状态和全局配置，采用Element Plus提供统一的UI组件能力，并通过Axios完成与后端API的数据交互。Vue 3的Composition API使得代码组织更加灵活，响应式系统的优化也带来了更好的性能表现。
2.6 UniApp跨平台开发
移动端采用UniApp框架开发，UniApp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web以及各种小程序等多个平台。本系统主要面向微信小程序平台，利用UniApp的跨平台能力，实现了与Web管理端数据互通的移动预约体验。UniApp提供了丰富的组件和API，能够调用设备原生能力，满足移动端的交互需求。
2.7 ECharts数据可视化
后台管理系统的数据统计模块采用ECharts实现数据可视化。ECharts是百度开源的一个基于JavaScript的数据可视化图表库，提供了丰富的图表类型和交互功能。系统使用ECharts实现了用户统计、预约统计、收入统计等数据的可视化展示，帮助管理员直观了解经营状况。
2.8 技术栈总结
系统整体技术栈为：后端采用Django 4.2 + Django ORM连接SQLite数据库，使用PyJWT实现JWT鉴权，使用django-cors-headers处理跨域请求；前端管理系统采用Vue 3，配合Element Plus、Vue Router、Pinia、Axios与ECharts完成页面与交互；移动端采用UniApp框架开发，支持微信小程序部署。
本章小结
本章对系统所用的后端框架、数据库、认证方案、前端工程化技术以及跨平台开发框架进行了详细介绍，为系统实现提供技术基础。
3 系统分析
3.1 可行性分析
3.1.1 技术可行性
Django与Vue 3均为成熟的主流技术栈，相关组件（ORM、JWT、UI组件库）生态完善。UniApp是国内广泛使用的跨平台开发框架，已在多个商业项目中得到验证。系统采用模块化后端路由与分层服务架构，技术实现路径清晰。SQLite数据库轻量级且稳定，能够满足系统的数据存储需求。
3.1.2 经济可行性
系统采用开源技术栈，无需额外许可费用；SQLite数据库免费使用；UniApp框架免费且支持多端部署，降低了移动端开发成本；系统可部署在普通云服务器上，整体成本可控，适合中小型棋牌室使用。
3.1.3 操作可行性
前端基于Element Plus，交互一致性与可用性较好；移动端采用符合用户习惯的小程序界面设计；系统界面简洁直观，用户无需专业培训即可使用；预约流程简单，操作步骤少，学习成本低。
3.2 需求分析
3.2.1 功能性需求
功能性需求主要分为两类：
移动端用户功能需要支持：
- 用户注册与登录（手机号注册、密码登录）
- 棋牌室浏览（房间列表展示、分类筛选）
- 房间详情查看（房间信息、价格、状态、时间段选择）
- 在线预约（选择时间段、确认预约、生成订单）
- 预约管理（查看预约记录、取消预约）
- 订单管理（查看订单详情、支付订单、申请退款）
- 个人中心（个人信息管理、修改密码、预约统计）
后台管理功能需要完成：
- 管理员登录认证
- 数据统计仪表盘（用户统计、预约统计、收入统计、趋势图表）
- 用户管理（用户的增删改查、状态管理、批量操作）
- 棋牌室管理（房间的增删改查、状态管理、价格设置）
- 预约管理（预约记录查询、状态管理、确认/取消操作）
- 订单管理（订单查询、支付状态管理、退款处理、数据导出）
3.2.2 非功能性需求
系统在非功能性方面需要满足：
安全性：密码加密存储、JWT鉴权与前后端双重路由守卫、权限控制确保普通用户无法访问管理功能。
可维护性：前后端分离并在后端以模块化方式组织代码、清晰的项目结构便于后续维护和功能扩展。
兼容性：Web端支持主流浏览器、移动端支持微信小程序平台。
性能：页面加载时间控制在2秒以内、支持多用户并发访问、数据库查询优化保证响应速度。
可靠性：业务数据准确记录、系统稳定运行、异常情况下的错误处理和用户提示。
3.3 用例分析
3.3.1 系统总体用例图
普通用户
登录/注册
浏览棋牌室
查看房间详情
预约房间
管理预约
查看订单
个人中心
管理员
后台管理
用户管理
棋牌室管理
预约管理
订单管理
数据统计
3.3.2 用户预约流程用例图
预约流程
用户
浏览棋牌室列表
查看房间详情
选择预约时间
确认预约信息
生成订单
完成支付
本章小结
本章完成了可行性与需求分析，并通过用例对关键业务流程进行说明，为系统设计与数据库建模确定边界与重点。
4 系统设计
4.1 系统架构设计
系统采用前后端分离的B/S架构，其中前端分为Web管理端和移动端小程序两部分，Web管理端基于Vue 3与Element Plus负责后台管理功能，移动端基于UniApp负责用户预约功能；后端通过Django提供REST API处理认证、业务逻辑与数据访问；数据层使用SQLite存储业务数据，文件存储系统存储用户头像等静态资源。
4.1.1 系统架构图
数据持久层
业务逻辑层
表示层
/admin/api
/api
Vue 3 Web管理端
UniApp 移动端
Element Plus
Django 后端
认证模块
用户模块
棋牌室模块
预约模块
订单模块
SQLite
文件存储
4.1.2 登录鉴权交互流程
系统支持用户端和管理端两种登录方式，分别对应普通用户和管理员角色。在"登录获取Token → 访问受保护资源"这一链路上采用前后端协同的鉴权策略：前端负责路由守卫与Token存储，后端负责Token校验与身份识别。
SQLite数据库 Django后端 前端应用 用户 SQLite数据库 Django后端 前端应用 用户 输入用户名密码 POST /api/login 或 /admin/api/login 查询用户信息 返回用户数据 验证密码 返回JWT Token 存储Token 携带Token访问业务接口 JWT中间件验证Token 返回业务数据
4.2 功能模块设计
系统功能分为移动端用户界面与Web后台管理界面两部分：
移动端提供：
- 首页（棋牌室推荐、分类入口）
- 棋牌室列表（分类浏览、搜索功能、状态筛选）
- 房间详情（房间信息、价格、时间段选择、预约操作）
- 预约管理（我的预约、预约状态、取消预约）
- 订单管理（订单列表、支付、退款）
- 个人中心（个人信息、修改密码、统计数据）
后台提供：
- 数据统计仪表盘（用户数量、预约数量、收入统计、趋势图表）
- 用户管理（用户的增删改查、状态启用/禁用、密码重置）
- 棋牌室管理（房间的增删改查、状态管理、价格设置）
- 预约管理（预约记录查询、确认/取消预约、状态管理）
- 订单管理（订单查询、支付状态管理、退款处理、数据导出）
4.3 数据库设计
数据库采用SQLite，核心数据表由后端models模块中的模型类定义，主要包括用户表、棋牌室表、预约记录表和订单表。
4.3.1 E-R图设计
makes
creates
contains
generates
USERS
int
id
PK
string
username
string
password
string
phone
string
role
boolean
is_active
datetime
create_time
datetime
update_time
RESERVATIONS
int
id
PK
int
user_id
FK
int
room_id
FK
datetime
start_time
datetime
end_time
string
status
datetime
create_time
datetime
update_time
ORDERS
int
id
PK
string
order_no
int
user_id
FK
int
room_id
FK
int
reservation_id
FK
decimal
amount
string
status
datetime
create_time
datetime
update_time
ROOMS
int
id
PK
string
name
string
room_type
int
capacity
decimal
price
string
status
boolean
is_active
datetime
create_time
datetime
update_time
4.3.2 数据表结构设计
用户表（user）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INT | PK, AUTO_INCREMENT | 用户ID |
| username | VARCHAR(50) | NOT NULL, UNIQUE | 用户名 |
| password | VARCHAR(128) | NOT NULL | 用户密码（加密存储） |
| phone | VARCHAR(11) | UNIQUE | 手机号 |
| role | VARCHAR(10) | DEFAULT 'user' | 用户角色:user/admin |
| is_active | BOOLEAN | DEFAULT TRUE | 状态:0禁用,1启用 |
| create_time | DATETIME | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
| update_time | DATETIME | ON UPDATE CURRENT_TIMESTAMP | 更新时间 |
棋牌室表（room）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INT | PK, AUTO_INCREMENT | 房间ID |
| name | VARCHAR(50) | NOT NULL | 房间名称 |
| room_type | VARCHAR(20) | NOT NULL | 房间类型（麻将、棋牌等） |
| capacity | INT | NOT NULL | 容纳人数 |
| price | DECIMAL(10,2) | NOT NULL | 每小时价格 |
| status | VARCHAR(20) | DEFAULT 'available' | 房间状态:available/occupied |
| is_active | BOOLEAN | DEFAULT TRUE | 是否可用 |
| create_time | DATETIME | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
| update_time | DATETIME | ON UPDATE CURRENT_TIMESTAMP | 更新时间 |
预约记录表（reservation）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INT | PK, AUTO_INCREMENT | 预约ID |
| user_id | INT | FK(user.id) | 用户ID |
| room_id | INT | FK(room.id) | 房间ID |
| start_time | DATETIME | NOT NULL | 开始时间 |
| end_time | DATETIME | NOT NULL | 结束时间 |
| status | VARCHAR(20) | DEFAULT 'pending' | 预约状态:pending/confirmed/cancelled/completed |
| create_time | DATETIME | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
| update_time | DATETIME | ON UPDATE CURRENT_TIMESTAMP | 更新时间 |
订单表（order）
| 字段名 | 类型 | 约束 | 说明 |
|---|---|---|---|
| id | INT | PK, AUTO_INCREMENT | 订单ID |
| order_no | VARCHAR(32) | UNIQUE | 订单编号 |
| user_id | INT | FK(user.id) | 用户ID |
| room_id | INT | FK(room.id) | 房间ID |
| reservation_id | INT | FK(reservation.id) | 预约ID |
| amount | DECIMAL(10,2) | NOT NULL | 订单金额 |
| status | VARCHAR(20) | DEFAULT 'unpaid' | 订单状态:unpaid/paid/cancelled/refunded |
| create_time | DATETIME | DEFAULT CURRENT_TIMESTAMP | 创建时间 |
| update_time | DATETIME | ON UPDATE CURRENT_TIMESTAMP | 更新时间 |
4.4 接口设计
系统采用REST API设计风格，接口按模块划分为认证、用户管理、棋牌室管理、预约管理、订单管理等。主要接口包括：
认证相关接口：
POST /admin/api/login（管理员登录）POST /api/login（用户登录）POST /api/register（用户注册）POST /admin/api/password/update（修改密码）
棋牌室相关接口：
GET /api/rooms（获取棋牌室列表）GET /api/rooms/<id>（获取棋牌室详情）POST /admin/api/rooms（添加棋牌室）PUT /admin/api/rooms/<id>（更新棋牌室）DELETE /admin/api/rooms/<id>（删除棋牌室）
预约相关接口：
GET /api/reservations（获取预约记录）POST /api/reservations（创建预约）POST /api/reservations/<id>/cancel（取消预约）POST /admin/api/reservations/<id>/confirm（确认预约）
订单相关接口：
GET /api/orders（获取订单列表）POST /api/orders（创建订单）POST /api/orders/<id>/pay（支付订单）POST /api/orders/<id>/refund（申请退款）
统计相关接口：
GET /admin/api/dashboard（获取仪表盘数据）GET /api/reservations/stats（获取预约统计）
4.5 安全设计
系统采用JWT Token作为认证手段，用户密码通过Django内置的密码加密算法安全存储，并在访问控制上由前端对需要登录的路由进行token校验、对管理员路由进行权限校验，同时后端通过自定义JWT中间件保护敏感接口并额外验证管理员接口的role字段。系统使用django-cors-headers处理跨域请求，配置了CORS白名单策略。敏感操作如用户状态变更、棋牌室删除等需要管理员权限才能执行。
本章小结
本章给出了系统总体架构、功能模块划分、数据库设计、接口设计，并说明了核心安全策略。通过结构化设计为后续模块实现与测试提供了清晰蓝图。
5 系统实现
本章重点介绍系统的页面实现与功能实现方式，并通过页面截图展示主要业务流程；后端部分仅作为接口与数据支撑，不展开具体代码细节。
5.1 后端实现
后端主要为移动端与后台管理页面提供统一的业务接口与数据服务，包括登录鉴权、用户管理、棋牌室管理、预约管理、订单管理、数据统计等能力，前端通过统一的API调用完成数据加载与状态更新，从而保证"页面交互---业务处理---数据落库"的完整闭环。
后端项目采用Django标准架构，manage.py作为项目管理入口，back目录包含项目配置文件（settings.py、urls.py等），api目录作为主应用包含数据模型层（models.py定义用户、棋牌室、预约、订单等数据结构）、认证模块（auth.py实现登录注册逻辑）、中间件（middleware/auth.py实现JWT验证）。views子目录按功能划分为admin（后台管理相关视图）和api（移动端相关视图）两部分，admin包含user（用户管理）、room（棋牌室管理）、reservation（预约管理）、order（订单管理）、dashboard（数据统计）等模块，api包含对应的用户端接口实现。
5.2 前端管理系统实现
前端管理系统采用Vue 3 + Element Plus实现页面布局与交互体验，整体为管理员提供完整的后台管理功能；页面在加载时根据路由进入对应模块，必要时进行登录校验，随后通过接口获取数据并渲染。
前端项目结构中api目录封装了与后端交互的接口调用（auth.js、user.js、room.js、reservation.js、order.js、dashboard.js等），router目录定义了路由配置与守卫逻辑，stores目录使用Pinia管理用户登录状态，utils目录包含请求封装、日期处理、表单验证等工具函数，views目录包含所有页面组件分为登录页面（login）、仪表盘（dashboard）、用户管理（user）、棋牌室管理（room）、预约管理（reservation）、订单管理（order）等模块，layout目录包含后台管理的整体布局组件，components目录包含图表等可复用组件。
5.2.1 登录页面实现
登录页面供管理员登录后台管理系统。管理员输入用户名和密码点击登录按钮提交表单，后端验证用户身份和角色（必须为admin角色），验证成功后返回JWT Token。登录页面采用居中卡片式布局，包含系统Logo、登录表单，界面简洁直观。前端在登录成功后将Token存储到localStorage，并跳转到后台首页。
登录页面使用响应式设计，支持不同屏幕尺寸的设备访问。表单验证包括用户名长度验证（3-20个字符）和密码长度验证（6-20个字符），确保输入数据的有效性。登录过程中显示加载状态，提升用户体验。
5.2.2 数据统计仪表盘实现
数据统计仪表盘是管理员登录后的首页，展示平台的整体运营数据，包括统计卡片（显示用户总数、房间总数、预约总数、今日收入）、订单趋势图（使用ECharts折线图展示近7天订单数量趋势）、收入趋势图（使用ECharts折线图展示近7天收入趋势）、最近订单列表（展示最新的5条订单记录）、新增用户列表（展示最新注册的5个用户）。仪表盘页面帮助管理员快速了解平台运营状况并提供数据决策支持。
仪表盘采用栅格布局，统计卡片使用不同颜色区分不同类型的数据，图表组件封装为独立的Vue组件便于复用。数据通过dashboard接口统一获取，前端负责数据格式化和图表渲染。
5.2.3 用户管理页面实现
用户管理页面供管理员管理系统用户，以用户列表为主展示所有用户信息，支持按用户名、手机号、角色搜索，提供新增用户（创建新用户账号，可设置角色）、编辑用户（修改用户信息）、删除用户（删除用户账号）、状态管理（启用/禁用用户账号）、密码重置（重置用户密码为默认值）等操作。列表以表格形式展示，包含用户ID、用户名、手机号、角色、状态、创建时间等字段，支持分页浏览。
用户管理页面实现了完整的CRUD操作，支持单个操作和批量操作。表单验证确保用户名唯一性和手机号格式正确性。密码重置功能仅对普通用户开放，管理员密码需要通过其他方式修改。
5.2.4 棋牌室管理页面实现
棋牌室管理页面是后台管理的核心功能页面，供管理员管理平台棋牌室。页面以棋牌室列表为主，支持按房间名称、类型、状态筛选，提供新增棋牌室（填写房间基本信息、设置价格）、编辑棋牌室（修改房间信息）、删除棋牌室、状态管理（设置房间为可用/占用状态）等操作。棋牌室表单包含房间名称、类型、容纳人数、每小时价格、状态等字段。
棋牌室管理支持不同类型的房间（麻将、棋牌等），价格设置支持小数点后两位。房间状态管理帮助管理员实时了解房间使用情况。
5.2.5 预约管理页面实现
预约管理页面供管理员查看和管理所有用户的预约记录，支持全员预约查询（查看所有用户的预约记录）、多条件筛选（按用户、房间、状态、日期筛选）、预约确认（管理员确认用户预约）、预约取消（管理员可以帮助用户取消预约）。列表展示预约ID、用户信息、房间信息、预约时间、状态等字段，支持分页浏览。
预约管理页面提供了完整的预约生命周期管理，从待确认到已完成的各个状态都有对应的操作。时间显示采用友好的格式，便于管理员快速识别。
5.2.6 订单管理页面实现
订单管理页面供管理员管理所有订单，支持订单列表查询（查看所有订单记录）、多条件筛选（按用户、订单状态、日期筛选）、支付管理（确认支付状态）、退款处理（处理用户退款申请）、数据导出（导出订单数据为Excel文件）。列表展示订单编号、用户信息、房间信息、金额、状态、创建时间等字段。
订单管理页面是财务管理的重要工具，支持订单状态的完整管理流程。数据导出功能便于财务对账和数据分析。
5.3 移动端小程序实现
移动端采用UniApp框架开发，主要面向普通用户提供棋牌室浏览、预约、订单管理等功能。小程序采用底部TabBar导航，包含首页、预约、订单、我的四个主要入口。
5.3.1 登录注册页面实现
登录页面供用户登录小程序，用户输入用户名和密码点击登录按钮，后端验证成功后返回JWT Token和用户信息。注册页面供新用户注册账号，需要填写用户名、手机号、密码等信息。登录成功后Token存储到本地，用于后续接口请求的身份验证。
小程序登录注册页面采用简洁的设计风格，符合微信小程序的设计规范。表单验证包括手机号格式验证和密码强度验证。
5.3.2 首页实现
首页是用户进入小程序后的第一个页面，包含棋牌室分类入口（展示不同类型棋牌室的入口）、热门推荐（展示热门棋牌室）、最新棋牌室（展示新添加的棋牌室）。首页设计简洁美观，帮助用户快速发现感兴趣的棋牌室。
首页采用卡片式布局，每个棋牌室显示房间名称、类型、价格、状态等关键信息。支持下拉刷新获取最新数据。
5.3.3 棋牌室列表页面实现
棋牌室列表页面展示平台所有可用棋牌室，支持类型筛选（按棋牌室类型过滤）、状态筛选（只显示可用房间）、价格排序（按价格升序或降序排列）、列表展示（以卡片形式展示棋牌室，包含名称、类型、容纳人数、价格、状态等信息）、下拉刷新和上拉加载更多。点击棋牌室卡片可进入详情页面。
列表页面支持多种筛选和排序方式，帮助用户快速找到合适的棋牌室。加载状态和空数据状态都有相应的提示。
5.3.4 棋牌室详情页面实现
棋牌室详情页面展示棋牌室的完整信息，包含棋牌室基本信息（名称、类型、容纳人数、每小时价格、当前状态）、时间段选择（用户可以选择预约的开始时间和结束时间）、价格计算（根据选择的时间段自动计算总价格）、预约按钮（确认预约信息后提交预约）。
详情页面提供直观的时间选择器，支持选择当天及未来几天的时间段。价格计算实时更新，让用户清楚了解费用。
5.3.5 预约管理页面实现
预约管理页面展示用户的所有预约记录，包含预约列表（显示预约的棋牌室、时间、状态等信息）、状态筛选（按预约状态过滤）、预约详情（查看预约的详细信息）、取消预约（用户可以取消未确认的预约）。
预约管理页面帮助用户跟踪预约状态，支持对不同状态的预约进行相应操作。界面清晰地显示预约的时间和费用信息。
5.3.6 订单管理页面实现
订单管理页面展示用户的所有订单记录，包含订单列表（显示订单编号、棋牌室、金额、状态等信息）、支付功能（对未支付订单进行支付）、退款申请（对已支付订单申请退款）、订单详情（查看订单的完整信息）。
订单管理页面是用户财务管理的重要工具，支持订单的完整生命周期管理。支付和退款功能集成了相应的业务逻辑。
5.3.7 个人中心页面实现
个人中心页面展示用户的个人信息和功能入口，包含用户信息卡片（头像、用户名、手机号）、统计数据（预约次数、订单数量、消费金额）、功能菜单（个人资料编辑、修改密码、退出登录）。
个人中心采用简洁的卡片式设计，功能入口清晰明了。统计数据帮助用户了解自己的使用情况。
5.4 页面交互与体验说明
为保证使用体验，系统在前端侧保持统一的视觉风格与交互反馈：Web管理端基于Element Plus组件库保持界面一致性，移动端采用符合小程序设计规范的界面风格；关键操作给出明确的成功/失败提示，数据加载时显示loading状态，输入表单进行前端验证减少无效请求；未登录用户访问需要认证的页面时自动跳转到登录页，非管理员用户无法访问后台管理系统；页面的数据加载与错误提示尽量保持一致以减少用户学习成本并提升可用性。
系统在交互设计上注重用户体验，采用响应式设计适配不同设备，使用合适的动画效果提升操作反馈，通过合理的信息架构降低用户的认知负担。
本章小结
本章围绕Web后台管理界面与移动端小程序界面，说明了系统主要功能的实现方式与典型业务流程，从而直观体现系统的可用性与完整性。
6 系统测试
6.1 测试环境
测试环境为Windows系统，后端采用Python 3.8+运行Django 4.2，数据库使用SQLite，前端管理系统采用Node.js 16+运行Vue 3 + Vite，移动端使用微信开发者工具进行小程序测试，浏览器使用Chrome/Edge。
6.2 测试方法
采用黑盒测试为主，覆盖核心业务流程：用户认证、棋牌室管理、预约流程、订单管理、后台管理等功能模块。测试类型包括功能测试（验证各功能模块是否按预期工作）、边界测试（测试边界条件和异常情况）、安全测试（验证权限控制和数据安全）以及兼容性测试（测试不同浏览器和小程序的兼容性）。
6.3 典型测试用例
| 用例编号 | 模块 | 操作步骤 | 期望结果 |
|---|---|---|---|
| TC-01 | 用户登录 | 输入正确的用户名和密码，点击登录 | 登录成功，跳转到首页，返回JWT Token |
| TC-02 | 用户登录 | 输入正确用户名和错误密码，点击登录 | 登录失败，显示错误提示 |
| TC-03 | 用户注册 | 填写用户名、手机号、密码，点击注册 | 注册成功，提示用户登录 |
| TC-04 | 用户注册 | 使用已存在的用户名注册 | 注册失败，提示用户名已存在 |
| TC-05 | 棋牌室浏览 | 进入棋牌室列表页面 | 正确显示所有可用棋牌室 |
| TC-06 | 棋牌室筛选 | 按类型筛选棋牌室 | 返回匹配类型的棋牌室列表 |
| TC-07 | 棋牌室详情 | 点击棋牌室卡片进入详情页 | 正确显示棋牌室信息、价格、状态 |
| TC-08 | 用户预约 | 登录后选择时间段点击预约 | 预约成功，生成预约记录 |
| TC-09 | 重复预约 | 对同一时间段重复预约 | 提示时间段冲突 |
| TC-10 | 取消预约 | 点击取消预约按钮 | 预约取消成功，状态变为已取消 |
| TC-11 | 订单生成 | 预约确认后生成订单 | 正确生成订单，显示订单详情 |
| TC-12 | 订单支付 | 点击支付按钮完成支付 | 支付成功，订单状态变为已支付 |
| TC-13 | 权限控制 | 未登录状态下尝试预约 | 跳转到登录页面 |
| TC-14 | 权限控制 | 普通用户尝试访问管理后台 | 登录失败，提示非管理员账号 |
| TC-15 | 棋牌室管理 | 管理员添加新棋牌室 | 棋牌室添加成功，列表中显示新棋牌室 |
| TC-16 | 棋牌室管理 | 管理员修改棋牌室信息 | 棋牌室信息更新成功 |
| TC-17 | 棋牌室管理 | 管理员删除棋牌室 | 棋牌室删除成功，列表中不再显示 |
| TC-18 | 用户管理 | 管理员禁用用户账号 | 用户状态变为禁用，无法登录 |
| TC-19 | 预约管理 | 管理员确认用户预约 | 预约状态变为已确认 |
| TC-20 | 数据统计 | 管理员访问仪表盘页面 | 正确显示用户数、预约数、收入等统计数据 |
6.4 性能测试
系统性能测试结果显示：棋牌室列表页面加载时间平均为0.5-1秒，棋牌室详情页面加载时间平均为0.3-0.8秒，预约操作响应时间平均为0.2-0.5秒，后台管理页面加载时间平均为0.5-1.5秒，数据统计接口响应时间平均为0.5-2秒（取决于数据量）。
6.5 测试结果分析
经测试，系统各模块在典型业务流程下运行稳定，接口返回结构统一；前端路由鉴权与后端JWT鉴权均能有效阻止未授权访问。
从功能测试结果看，用户认证功能正常支持登录和注册，棋牌室浏览和筛选功能正常能够正确展示和筛选房间，预约功能正常能够正确处理预约状态和时间冲突，订单管理功能正常能够正确处理支付和退款，后台管理功能正常且权限控制有效。
从性能测试结果看，页面加载时间在可接受范围内，接口响应速度较快，系统能够支持中等规模并发访问。
需要注意的是，当棋牌室数量和用户数量增长到较大规模时，部分统计查询可能需要优化；当前系统适合中小型棋牌室使用，大规模部署需要考虑数据库优化、缓存策略和负载均衡等方案。
本章小结
本章通过典型用例对系统关键流程进行了验证，结果表明功能闭环可用且权限控制有效；同时指出了系统在大规模数据场景下的优化方向。
7 总结与展望
7.1 总结
本文围绕棋牌室预约管理需求，基于Django与Vue 3设计并实现了棋牌室预约小程序系统。系统采用前后端分离架构，通过SQLite存储核心业务数据，利用JWT实现身份认证与权限控制，同时提供Web管理端和移动端小程序两种访问方式。
系统主要特点包括：采用前后端分离架构使得系统具有良好的可维护性和可扩展性，Web管理端和移动端小程序共用后端API实现数据统一，棋牌室管理功能完善支持房间信息、价格设置、状态管理等多维度管理，预约流程简洁用户可以方便地浏览、预约、支付和管理订单，后台管理功能齐全提供用户管理、棋牌室管理、预约管理、订单管理、数据统计等完整功能，数据可视化通过ECharts图表直观展示平台运营数据。
技术实现亮点包括：后端采用Django框架结合ORM实现数据持久化代码结构清晰，使用自定义中间件实现JWT认证统一处理接口鉴权，前端采用Vue 3 Composition API使得代码组织更加灵活，使用Pinia进行状态管理实现用户登录状态的全局共享，移动端采用UniApp框架实现一套代码多端部署，密码加密存储、JWT鉴权、前后端双重权限控制保障系统安全。
系统局限性在于当前系统适合中小型棋牌室使用大规模部署需要进一步优化，SQLite数据库在高并发场景下性能有限可考虑升级到MySQL或PostgreSQL，支付功能目前为模拟实现需要集成真实的支付接口，移动端目前主要支持微信小程序其他平台的适配需要进一步测试。
7.2 展望
后续可从以下方向进行优化和扩展：
在功能扩展方面可增加实时通讯功能支持用户与棋牌室的在线沟通，增加会员系统功能支持会员等级和优惠政策，增加评价系统功能支持用户对棋牌室的评价和评分，增加推荐算法根据用户预约历史智能推荐棋牌室，增加营销功能支持优惠券、活动推广等营销工具，增加数据分析功能提供更详细的经营分析报告。
在架构优化方面可引入Redis缓存优化热点数据访问性能，升级数据库到MySQL或PostgreSQL提高并发处理能力，引入消息队列处理异步任务如短信通知、邮件提醒等，支持分布式部署提高系统可用性，容器化部署（Docker/Kubernetes）便于运维管理。
在安全增强方面可集成真实的支付接口确保资金安全，增加操作审计日志记录敏感操作，支持多因素认证提升账号安全性，加强数据加密和隐私保护，完善异常监控和告警机制。
在用户体验方面可优化移动端界面设计提升视觉效果，增加深色模式支持，优化加载性能减少等待时间，增加离线缓存支持部分内容离线访问，支持多语言国际化。
在业务扩展方面可支持多门店管理满足连锁经营需求，增加库存管理功能管理棋牌用具等物品，支持团体预约功能满足团队活动需求，增加积分系统提升用户粘性，支持第三方平台接入扩大用户来源。
参考文献
1\] Django Documentation. https://docs.djangoproject.com/ \[2\] Vue.js 3 设计与实现. 霍春阳. 人民邮电出版社, 2022. \[3\] UniApp官方文档. https://uniapp.dcloud.net.cn/ \[4\] Element Plus Documentation. https://element-plus.org/ \[5\] SQLite Documentation. https://www.sqlite.org/docs.html \[6\] JSON Web Token Introduction. https://jwt.io/introduction \[7\] ECharts Documentation. https://echarts.apache.org/ \[8\] Vite Documentation. https://vitejs.dev/ \[9\] Pinia Documentation. https://pinia.vuejs.org/ \[10\] 微信小程序开发文档. https://developers.weixin.qq.com/miniprogram/dev/framework/ \[11\] Python Web开发实战. 董伟明. 电子工业出版社, 2021. \[12\] 现代前端技术解析. 张成文. 人民邮电出版社, 2020. *** ** * ** *** ### 致谢 *** ** * ** *** ### 参考文献 \[1\] Django Documentation. https://docs.djangoproject.com/ \[2\] Vue.js 3 设计与实现. 霍春阳. 人民邮电出版社, 2022. \[3\] UniApp官方文档. https://uniapp.dcloud.net.cn/ \[4\] Element Plus Documentation. https://element-plus.org/ \[5\] SQLite Documentation. https://www.sqlite.org/docs.html \[6\] JSON Web Token Introduction. https://jwt.io/introduction \[7\] ECharts Documentation. https://echarts.apache.org/ \[8\] Vite Documentation. https://vitejs.dev/ \[9\] Pinia Documentation. https://pinia.vuejs.org/ \[10\] 微信小程序开发文档. https://developers.weixin.qq.com/miniprogram/dev/framework/ \[11\] Python Web开发实战. 董伟明. 电子工业出版社, 2021. \[12\] 现代前端技术解析. 张成文. 人民邮电出版社, 2020. *** ** * ** *** ### 致谢 在本论文的撰写过程中，感谢指导老师的悉心指导和帮助，感谢同学们的支持与鼓励。同时感谢开源社区提供的优秀技术框架和工具，使得本系统的开发得以顺利完成。特别感谢Django、Vue.js、UniApp等开源项目的贡献者，为现代Web应用开发提供了强大的技术支撑。