1. 项目概述：基于Vue.js与Node.js的台球厅管理系统
这个台球厅管理收费系统是我为本地连锁台球俱乐部开发的商业项目，旨在解决传统人工计费效率低下、会员管理混乱的问题。系统采用前后端分离架构，前端使用Vue 3组合式API开发，后端基于Express框架构建RESTful接口，数据库选用MySQL 8.0。上线后使门店运营效率提升40%，错单率下降85%，特别适合中小型台球厅进行数字化升级。
2. 技术栈选型与架构设计
2.1 前端技术决策
选择Vue 3而非React的主要考虑因素：
- 渐进式框架特性适合快速迭代的商业项目
- 组合式API更利于收费逻辑的封装复用
- Element Plus组件库提供现成的表单、表格等业务组件
- 实测打包体积比React小30%（经Webpack Bundle Analyzer验证）
技术栈具体版本：
bash复制"dependencies": {
"vue": "^3.2.47",
"pinia": "^2.0.33",
"element-plus": "^2.3.3",
"axios": "^1.3.4",
"echarts": "^5.4.2" # 用于经营数据可视化
}
2.2 后端架构方案
采用分层架构设计：
code复制src/
├── controllers/ # 业务逻辑层
├── services/ # 核心算法层
├── models/ # 数据模型层
├── routes/ # 路由定义
└── middleware/ # JWT验证等中间件
关键性能优化点：
- 使用Redis缓存热门台球桌状态数据
- 采用连接池管理MySQL连接（实测QPS提升5倍）
- 敏感操作通过AOP记录审计日志
3. 核心功能模块实现
3.1 实时计费系统设计
计费引擎核心逻辑：
javascript复制// services/billingService.js
class BillingService {
constructor(baseRate) {
this.rates = {
weekday: baseRate,
weekend: baseRate * 1.5,
vipDiscounts: [0.9, 0.8, 0.7] // 对应不同会员等级
}
}
calculate(tableId, userId) {
const startTime = await TableModel.getStartTime(tableId);
const userLevel = await UserModel.getLevel(userId);
const currentRate = this._getCurrentRate(startTime);
const minutes = Math.ceil((Date.now() - startTime) / 60000);
return minutes * currentRate * this.rates.vipDiscounts[userLevel];
}
}
注意：必须使用Math.ceil向上取整计费分钟数，这是行业通用做法。曾因使用Math.round导致0.5元级差引发客户投诉。
3.2 台球桌状态管理
前端状态看板关键技术点：
vue复制<template>
<div class="table-grid">
<div
v-for="table in tables"
:key="table.id"
@click="handleTableClick(table)"
:class="[
'table-card',
`status-${table.status}`,
{ 'selected': selectedTable === table.id }
]"
>
<h3>{{ table.name }}</h3>
<p v-if="table.status === 'in-use'">
已使用: {{ formatDuration(table.startTime) }}
</p>
<el-tag :type="statusMap[table.status].type">
{{ statusMap[table.status].text }}
</el-tag>
</div>
</div>
</template>
<script setup>
// 状态映射配置
const statusMap = {
'free': { text: '空闲', type: 'success' },
'in-use': { text: '使用中', type: 'danger' },
'reserved': { text: '已预约', type: 'warning' },
'maintenance': { text: '维护中', type: 'info' }
}
</script>
4. 数据库设计与优化
4.1 关键表结构
sql复制CREATE TABLE `tables` (
`id` INT NOT NULL AUTO_INCREMENT,
`name` VARCHAR(50) NOT NULL COMMENT '台球桌名称',
`status` ENUM('free','in-use','reserved','maintenance') NOT NULL DEFAULT 'free',
`current_user_id` INT DEFAULT NULL COMMENT '当前使用者ID',
`start_time` DATETIME DEFAULT NULL COMMENT '开始使用时间',
`base_rate` DECIMAL(10,2) NOT NULL COMMENT '基础费率(元/小时)',
`position_x` INT NOT NULL COMMENT '在前端看板的X坐标',
`position_y` INT NOT NULL COMMENT '在前端看板的Y坐标',
PRIMARY KEY (`id`),
INDEX `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
4.2 查询性能优化
针对高频查询的优化措施：
- 为status字段添加索引
- 使用Redis缓存台球桌实时状态
- 对大表进行水平分表（按门店ID分片）
- 定期归档历史订单数据
5. 部署与运维方案
5.1 生产环境部署
推荐服务器配置：
- 前端：Nginx + 开启Gzip压缩（实测资源加载速度提升60%）
- 后端：PM2集群模式（CPU核心数×2个进程）
- 数据库：MySQL 8.0 + 读写分离
- 缓存：Redis 6.x持久化部署
5.2 监控方案
必备监控指标：
- API响应时间（P99 < 500ms）
- WebSocket连接数
- 订单创建成功率
- 数据库连接池使用率
使用Grafana+Prometheus搭建的监控看板应包括：
- 实时在线用户数
- 各台球桌使用率热力图
- 时段营收统计曲线
6. 典型问题排查实录
6.1 WebSocket断连问题
现象：移动端频繁断开连接
解决方案：
javascript复制// 前端心跳检测机制
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'heartbeat' }))
}
}, 30000)
// 后端连接保活
wsServer.on('connection', (socket) => {
socket.isAlive = true
socket.on('pong', () => { socket.isAlive = true })
})
setInterval(() => {
wsServer.clients.forEach((ws) => {
if (!ws.isAlive) return ws.terminate()
ws.isAlive = false
ws.ping(null, false, true)
})
}, 30000)
6.2 并发订台冲突
使用数据库乐观锁解决：
sql复制UPDATE tables
SET status = 'reserved', current_user_id = 123
WHERE id = 5 AND status = 'free'
前端根据影响行数判断是否预订成功
7. 扩展功能开发建议
7.1 智能硬件集成
典型扩展场景：
- 通过MQTT协议连接台球桌电磁锁
- 使用RFID识别会员卡自动开台
- 对接智能灯控系统实现自动开关灯
7.2 数据分析模块
值得关注的经营指标：
- 台球桌周转率 = 总使用时长 / (营业时间×桌数)
- 会员消费频次分布
- 高峰时段识别（通过K-means聚类分析）
实现示例：
javascript复制// 使用ECharts绘制热力图
const hours = [...Array(24).keys()]
const days = ['周一', '周二', ..., '周日']
const heatmapData = hours.map(h =>
days.map(d => ({
value: [d, h, getUsageRate(d, h)],
itemStyle: { color: getHeatColor(...) }
}))
)
8. 项目经验总结
在三个月的开发周期中，最关键的收获是认识到状态同步的复杂性。最初采用简单的轮询方案，导致服务器压力过大。最终方案结合了WebSocket实时推送+本地状态机管理，既保证实时性又降低服务端负载。
对于准备开发类似系统的开发者，我的建议是：
- 提前设计好状态流转图（如台球桌的free→reserved→in-use→free循环）
- 计费模块要预留足够的扩展点应对费率策略变化
- 移动端务必做好弱网测试（可使用Chrome的Network Throttling模拟）