房间预定系统

一个简洁优雅的房间预定系统，支持用户通过微信小程序查看房间信息、预定房间、管理订单。后端部署在本地电脑，支持局域网/内网穿透访问。

功能特性

• 📅 房间列表展示，支持按日期筛选
• 🔍 房间详情查看，包含设施、规则等信息
• ⏰ 可视化时间轴选择，避免时间冲突
• 📝 在线预定，填写联系人信息
• 📋 订单管理，查看历史订单和取消预定
• ⚙️ 管理后台，房间管理、订单审核、数据统计

技术栈

• 前端: React 18 + Vite + Tailwind CSS
• 后端: Express.js + SQLite
• 部署: Node.js 本地服务器

快速开始

1. 安装依赖

# 安装后端依赖
cd server
npm install

# 安装前端依赖
cd ../client
npm install

2. 启动开发服务器

# 终端1: 启动后端服务（端口 3000）
cd server
npm run dev

# 终端2: 启动前端开发服务器（端口 5173）
cd client
npm run dev

3. 访问应用

• 前台页面: http://localhost:5173
• 管理后台: http://localhost:5173/admin/login

默认管理员账号: admin / admin123

4. 生产部署

# 构建前端
cd client
npm run build

# 启动生产服务器（会自动服务前端静态文件）
cd ../server
npm start

生产环境访问: http://localhost:3000

微信小程序接入

方案一：H5 页面（推荐）

1. 部署后端到你的电脑，使用内网穿透工具（如 ngrok、cpolar）获取公网地址
2. 在微信小程序中使用 web-view 组件嵌入 H5 页面

<!-- 小程序页面 -->
<web-view src="https://your-domain.com"></web-view>

方案二：直接访问

1. 使用内网穿透工具暴露本地服务
2. 在微信中直接访问链接

# 使用 ngrok
ngrok http 3000

# 使用 cpolar
cpolar http 3000

项目结构

bookroom/
├── client/                 # 前端代码
│   ├── src/
│   │   ├── api/           # API 封装
│   │   ├── components/    # 公共组件
│   │   ├── pages/         # 页面组件
│   │   └── utils/         # 工具函数
│   └── dist/              # 构建输出
├── server/                 # 后端代码
│   ├── routes/            # API 路由
│   ├── middleware/        # 中间件
│   └── database.js        # 数据库配置
├── database/               # 数据库文件
│   └── bookroom.db
└── README.md

API 接口

房间相关

• GET /api/rooms - 获取房间列表
• GET /api/rooms/:id - 获取房间详情

预定相关

• POST /api/bookings - 创建预定
• GET /api/bookings/my?phone= - 获取我的订单
• PUT /api/bookings/:id/cancel - 取消订单

管理后台

• GET /api/admin/stats - 获取统计数据
• GET /api/admin/rooms - 获取所有房间
• POST /api/admin/rooms - 创建房间
• PUT /api/admin/rooms/:id - 更新房间
• DELETE /api/admin/rooms/:id - 删除房间
• GET /api/admin/bookings - 获取所有订单
• PUT /api/admin/bookings/:id/approve - 审核通过
• PUT /api/admin/bookings/:id/reject - 拒绝订单

数据模型

房间 (rooms)

字段	类型	说明
id	INTEGER	主键
name	TEXT	房间名称
capacity	INTEGER	容纳人数
description	TEXT	房间描述
facilities	TEXT	设施列表 (JSON)
images	TEXT	图片链接 (JSON)
rules	TEXT	使用规则
status	TEXT	状态

预定 (bookings)

字段	类型	说明
id	INTEGER	主键
room_id	INTEGER	房间ID
date	TEXT	预定日期
start_time	TEXT	开始时间
end_time	TEXT	结束时间
contact_name	TEXT	联系人姓名
contact_phone	TEXT	联系人电话
purpose	TEXT	使用目的
status	TEXT	订单状态

注意事项

1. 数据库使用 SQLite，数据存储在 database/bookroom.db
2. 管理员密码使用 bcrypt 加密存储
3. 生产部署时建议修改默认管理员密码
4. 内网穿透时注意网络安全，建议使用 HTTPS

许可证

MIT