自习室预约小程序

Name: 自习室预约小程序
Brand: AI源码
SKU: study-room-reservation-min
Price: 300 CNY
Availability: InStock

这是一个完整的自习室预约管理平台，包含微信小程序端和PC管理后台。系统实现了自习室展示、座位预约、器材租赁、订单管理、钱包充值、会员管理等核心功能，采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。

评分:4.8/5.0

销量:34

发布:2025/12/2

难度:L2 进阶级

💬 联系咨询观看视频介绍

✓永久使用权限

✓免费更新维护

✓技术支持服务

项目封面

项目说明

自习室预约小程序

项目简介

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 5.7+
数据库驱动	mysql 2.18.1
身份认证	jsonwebtoken (JWT)
文件上传	multer
跨域处理	cors
UUID生成	uuid 9.0.1
热重载	nodemon 3.0.2
进程管理	PM2

管理后台技术

技术	版本/说明
前端框架	Vue 2.6.11
UI组件库	Element UI 2.15.6
路由管理	Vue Router 3.0.7
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.24.0
富文本编辑器	Quill 1.3.7
CSS预处理器	Less

小程序端技术

技术	版本/说明
开发框架	微信小程序原生框架
开发语言	JavaScript (ES6+)
样式语言	WXSS
模板语言	WXML

项目特点

前后端分离：后端提供RESTful API，前端独立开发部署
完整预约流程：涵盖自习室浏览、座位预约、支付、签到全流程
多店铺管理：支持多个自习室门店管理
区域座位管理：支持按区域划分座位，不同区域不同价格
器材租赁：支持充电器、风扇等器材租赁服务
钱包系统：内置钱包充值和消费记录
会员体系：支持普通用户、VIP、SVIP等级
时段预约：支持按小时预约，灵活选择时间段
优惠折扣：VIP用户享受预约折扣

功能模块

小程序端功能

1. 首页模块 (`pages/index`)

自习室门店列表展示
门店封面图片
营业时间显示
地址信息
收藏功能
快速预约入口

2. 自习室详情模块 (`pages/detail`)

门店详细信息
区域座位列表
区域价格展示
可选器材列表
器材价格说明
预约按钮

3. 预约确认模块 (`pages/comfirm`)

选择预约日期
选择预约时段（按小时）
选择座位区域
选择租赁器材
填写联系信息
价格计算（含折扣）
提交预约

4. 订单管理模块

订单列表 (pages/orderList)
- 全部订单
- 待付款订单
- 已完成订单
- 已取消订单
订单详情 (pages/orderDetail)
- 订单信息查看
- 订单状态显示
- 取消订单
- 完成订单

5. 钱包模块

钱包首页 (pages/wallet)
- 余额显示
- 累计充值金额
- 消费记录列表
充值页面 (pages/walletAdd)
- 快捷充值金额
- 自定义充值
- 充值记录

6. 公告模块

公告列表 (pages/newsList)
公告详情 (pages/newsDetail)
富文本内容展示

7. 收藏模块 (`pages/star`)

我的收藏列表
取消收藏
快速预约

8. 个人中心模块 (`pages/my`)

用户信息展示
会员等级显示
我的订单
我的钱包
我的收藏
问题反馈 (pages/question)
用户信息编辑 (pages/userInfo)
实名认证 (pages/auth)

管理后台功能

1. 首页仪表盘 (`Welcome.vue`)

数据统计概览
订单统计
用户统计
收入统计

2. 门店管理 (`Shop`)

门店列表
新增/编辑/删除门店
门店图片上传
营业时间设置
地址管理

3. 区域管理 (`Cate`)

座位区域列表
新增/编辑/删除区域
区域价格设置
关联门店

4. 器材管理 (`Equ`)

器材列表
新增/编辑/删除器材
器材价格设置
器材图片上传

5. 订单管理 (`Order`)

订单列表
订单详情查看
订单状态管理
订单统计分析

6. 用户管理 (`User.vue`)

用户列表
用户信息查看
会员等级管理
用户状态管理

7. 公告管理 (`News`)

公告列表
新增/编辑/删除公告
富文本编辑
公告发布

8. 收藏管理 (`Star.vue`)

收藏记录列表
收藏统计

9. 问题反馈 (`Question.vue`)

反馈列表
回复处理

10. 充值记录 (`Paylist.vue`)

充值记录列表
消费记录列表
退款记录
财务统计

项目结构

study-room-reservation-min/
├── admin/                          # 管理后台（Vue2 + Element UI）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   ├── assets/                 # 静态资源
│   │   ├── components/             # 公共组件
│   │   ├── router/                 # 路由配置
│   │   ├── store/                  # Vuex状态管理
│   │   ├── utils/                  # 工具函数
│   │   ├── views/                  # 页面视图
│   │   │   ├── Cate/               # 区域管理
│   │   │   ├── Equ/                # 器材管理
│   │   │   ├── News/               # 公告管理
│   │   │   ├── Order/              # 订单管理
│   │   │   ├── Shop/               # 门店管理
│   │   │   ├── Home.vue            # 主布局
│   │   │   ├── Login.vue           # 登录页
│   │   │   ├── Paylist.vue         # 充值记录
│   │   │   ├── Question.vue        # 问题反馈
│   │   │   ├── Star.vue            # 收藏管理
│   │   │   ├── User.vue            # 用户管理
│   │   │   └── Welcome.vue         # 首页仪表盘
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vue.config.js               # Vue配置
│
├── express/                        # 后端服务（Express + MySQL）
│   ├── bin/
│   │   └── www                     # 启动入口
│   ├── config/
│   │   ├── db.js                   # 数据库配置
│   │   └── index.js                # 全局配置
│   ├── public/
│   │   └── images/                 # 上传图片存储
│   ├── routes/
│   │   ├── admin/                  # 管理端API
│   │   │   ├── cate.js             # 区域接口
│   │   │   ├── equ.js              # 器材接口
│   │   │   ├── news.js             # 公告接口
│   │   │   ├── order.js            # 订单接口
│   │   │   ├── shop.js             # 门店接口
│   │   │   ├── star.js             # 收藏接口
│   │   │   ├── user.js             # 用户接口
│   │   │   └── paylist.js          # 充值记录接口
│   │   ├── web/                    # 小程序端API
│   │   │   ├── cate.js             # 区域接口
│   │   │   ├── equ.js              # 器材接口
│   │   │   ├── news.js             # 公告接口
│   │   │   ├── order.js            # 订单接口
│   │   │   ├── shop.js             # 门店接口
│   │   │   ├── star.js             # 收藏接口
│   │   │   ├── user.js             # 用户接口
│   │   │   ├── wallet.js           # 钱包接口
│   │   │   └── question.js         # 问题反馈接口
│   │   ├── index.js                # 路由入口
│   │   └── upload.js               # 文件上传
│   ├── util/
│   │   ├── index.js                # 工具函数
│   │   └── wechat.js               # 微信相关工具
│   ├── app.js                      # Express应用配置
│   ├── ecosystem.config.js         # PM2配置
│   └── package.json
│
├── min/                            # 微信小程序
│   ├── components/                 # 自定义组件
│   ├── images/                     # 图片资源
│   │   └── tabbar/                 # TabBar图标
│   ├── pages/                      # 页面目录
│   │   ├── index/                  # 首页
│   │   ├── detail/                 # 自习室详情
│   │   ├── comfirm/                # 预约确认
│   │   ├── orderList/              # 订单列表
│   │   ├── orderDetail/            # 订单详情
│   │   ├── wallet/                 # 我的钱包
│   │   ├── walletAdd/              # 钱包充值
│   │   ├── newsList/               # 公告列表
│   │   ├── newsDetail/             # 公告详情
│   │   ├── star/                   # 我的收藏
│   │   ├── my/                     # 个人中心
│   │   ├── userInfo/               # 用户信息
│   │   ├── auth/                   # 实名认证
│   │   └── question/               # 问题反馈
│   ├── utils/
│   │   ├── api.js                  # API接口封装
│   │   ├── request.js              # 请求封装
│   │   └── util.js                 # 工具函数
│   ├── app.js                      # 小程序入口
│   ├── app.json                    # 小程序配置
│   ├── app.wxss                    # 全局样式
│   └── project.config.json         # 项目配置
│
├── 截图/                           # 项目截图
│   ├── 小程序/                     # 小程序截图
│   └── 管理后台/                   # 管理后台截图
├── db_study_room.sql               # 数据库SQL文件
├── mysql.sh                        # MySQL脚本
├── mysql操作手册.md                # MySQL操作说明
├── 数据库创建方法.md               # 数据库创建说明
├── 新 - 运行必读.docx              # 运行说明文档
└── 演示视频.mp4                    # 演示视频

数据模型

用户表 (users)

{
  id: int,                    // 用户ID
  phone: varchar(255),        // 手机号
  password: varchar(255),     // 密码
  username: varchar(255),     // 姓名
  sex: varchar(255),          // 性别
  nickname: varchar(255),     // 昵称
  active: varchar(255),       // 状态 (0正常)
  openId: varchar(1100),      // 微信OpenID
  avatar: varchar(255),       // 头像
  role: int,                  // 角色 (0普通用户, 99管理员)
  vip: varchar(11)            // 会员等级 (0普通 1vip 2svip)
}

门店表 (shop)

{
  id: int,                    // 门店ID
  title: varchar(255),        // 门店名称
  cover: varchar(255),        // 门店封面
  address: varchar(1000),     // 门店地址
  time: varchar(255),         // 营业时间
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

区域表 (cate)

{
  id: int,                    // 区域ID
  title: varchar(255),        // 区域名称
  cover: varchar(255),        // 区域图片
  remark: varchar(100),       // 备注
  shop_id: int,               // 所属门店ID
  money: double               // 每小时价格
}

器材表 (equ)

{
  id: int,                    // 器材ID
  title: varchar(255),        // 器材名称
  cover: varchar(255),        // 器材图片
  remark: varchar(100),       // 备注
  shop_id: int,               // 所属门店ID
  money: double               // 租赁价格
}

订单表 (orders)

{
  id: int,                    // 订单ID
  cate_id: int,               // 区域ID
  user_id: int,               // 用户ID
  shop_id: int,               // 门店ID
  day: varchar(100),          // 预约日期
  time: varchar(100),         // 预约时段（逗号分隔）
  username: varchar(100),     // 联系人
  phone: varchar(11),         // 联系电话
  total_price: double,        // 订单总价
  remark: varchar(1000),      // 备注
  status: int,                // 状态 (0待付款 1已付款 2已取消 3已完成)
  order_no: varchar(1000),    // 订单号
  equ: varchar(10000),        // 器材信息（JSON）
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

钱包表 (wallet)

{
  id: int,                    // 钱包ID
  user_id: int,               // 用户ID
  money: varchar(255),        // 当前余额
  total_money: int,           // 累计充值金额
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

充值记录表 (paylist)

{
  id: int,                    // 记录ID
  user_id: varchar(255),      // 用户ID
  type: int,                  // 类型 (1主动充值 2消费 3退款)
  money: varchar(255),        // 金额
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

公告表 (news)

{
  id: int,                    // 公告ID
  title: varchar(255),        // 公告标题
  content: longtext,          // 公告内容（富文本）
  shop_id: int,               // 所属门店ID
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

收藏表 (star)

{
  id: int,                    // 收藏ID
  user_id: int,               // 用户ID
  shop_id: int                // 门店ID
}

问题反馈表 (question)

{
  id: int,                    // 反馈ID
  user_id: int,               // 用户ID
  cover: varchar(2000),       // 图片
  remark: varchar(1000),      // 反馈内容
  email: varchar(100),        // 邮箱
  reply: varchar(1000),       // 回复内容
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

业务流程

预约流程

用户浏览自习室门店列表
选择门店查看详情
选择座位区域和预约时段
选择需要租赁的器材（可选）
填写联系信息
系统计算价格（VIP享受折扣）
使用钱包余额支付
生成订单
到店签到使用
完成订单

会员折扣

普通用户：原价
VIP用户：95折
SVIP用户：9折

订单状态流转

待付款(0) → 已付款(1) → 已完成(3)
         ↓
      已取消(2)

运行环境要求

后端环境

Node.js 14.0+
MySQL 5.7+
npm 或 yarn

管理后台

Node.js 14.0+
npm 或 yarn
现代浏览器（Chrome、Firefox、Edge等）

小程序端

微信开发者工具（最新稳定版）
基础库版本 2.19.0+
需要有效的AppID

快速开始

1. 数据库配置

创建MySQL数据库

CREATE DATABASE db_study_room CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

导入数据库文件

mysql -u root -p db_study_room < db_study_room.sql

修改数据库配置编辑 express/config/db.js：

var db = mysql.createConnection({
  database: "db_study_room",   // 数据库名称
  port: "3306",               // 端口号
  host: "localhost",          // 主机地址
  user: "root",               // 用户名
  password: "root",           // 密码（修改为你的密码）
});

2. 启动后端服务

# 进入后端目录
cd express

# 安装依赖
npm install

# 启动服务（开发模式）
npm run dev

# 或使用PM2启动（生产模式）
npm run prod

后端服务默认运行在 http://localhost:3564

3. 启动管理后台

# 进入管理后台目录
cd admin

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:8080

4. 运行小程序

打开微信开发者工具
选择"导入项目"
选择 min 目录
填入AppID（可使用测试号）
点击"导入"

5. 配置小程序API地址

编辑 min/utils/request.js，修改API基础地址：

const baseUrl = 'http://localhost:3564'  // 修改为你的后端地址

默认账号

管理后台

手机号：1871502xxxx
密码：123456

小程序端

支持微信授权登录
首次登录自动创建账号

示例数据

门店示例

门店名称	地址	营业时间
小叮当自习室静安店	上海市静安区彭浦新村123弄	08:00-23:00
小叮当自习室徐汇店	上海市徐汇区123弄北楼102	09:00-21:00
小叮当自习室宝山店	上海市宝山区高境镇123弄	06:00-20:00
小叮当自习室闵行店	上海闵行区123弄	06:00-17:00

区域价格示例

区域名称	价格（元/小时）
A区	14
B区	10
C区	10
靠窗区域	30
中央区域	14
大厅	8

器材租赁示例

器材名称	价格（元）
充电器和线	3
小风扇	3
纸笔	0（免费）

界面预览

项目包含演示视频文件：

演示视频.mp4 - 完整功能演示

项目包含截图文件夹：

截图/小程序/ - 小程序端界面截图
截图/管理后台/ - 管理后台界面截图

扩展建议

如需进一步完善项目，可考虑以下扩展：

微信支付：集成微信支付功能
签到功能：扫码签到和离场
座位地图：可视化座位选择
预约提醒：微信模板消息提醒
评价系统：用户评价和评分
优惠券系统：优惠券领取和使用
积分系统：消费积分和兑换
团购功能：多人拼团预约
数据分析：座位使用率分析
智能推荐：基于用户习惯推荐座位

注意事项

本项目为学习演示项目，部分数据为模拟数据
生产环境部署需要配置HTTPS
小程序上线需要完成微信认证
钱包充值功能需要接入真实支付接口
建议定期备份数据库数据
图片上传路径需要根据实际部署环境调整

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确，确保public/images目录有写入权限

Q: 小程序无法请求后端？

A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"

Q: 管理后台登录失败？

A: 确认数据库中users表有管理员账号（role=99）

Q: 钱包余额不足？

A: 在小程序端进入"我的钱包"页面进行充值

Q: 预约时提示价格计算错误？

A: 检查区域表和器材表中的价格字段是否正确设置

Q: 订单状态无法更新？

A: 检查订单表的status字段值是否在有效范围内（0-3）

许可证

本项目仅供学习交流使用，请勿用于商业用途。

技术分类

Node 小程序 Vue2 MySQL

包含内容

✓完整源码

✓项目说明文档

✓演示材料

适用人群

学习参考与二次开发

关于 AI源码

AI源码专注优质项目源码分享，提供完整源码、详细文档与技术支持，助力源码设计与课程作业。

•QQ: 861077046

•邮箱: 861077046@qq.com

•已服务 34+ 位用户

立即咨询

自习室预约小程序

项目封面

项目说明

自习室预约小程序

项目简介

技术栈

后端技术

管理后台技术

小程序端技术

项目特点

功能模块

小程序端功能

1. 首页模块 (pages/index)

2. 自习室详情模块 (pages/detail)

3. 预约确认模块 (pages/comfirm)

4. 订单管理模块

5. 钱包模块

6. 公告模块

7. 收藏模块 (pages/star)

8. 个人中心模块 (pages/my)

管理后台功能

1. 首页仪表盘 (Welcome.vue)

2. 门店管理 (Shop)

3. 区域管理 (Cate)

4. 器材管理 (Equ)

5. 订单管理 (Order)

6. 用户管理 (User.vue)

7. 公告管理 (News)

8. 收藏管理 (Star.vue)

9. 问题反馈 (Question.vue)

10. 充值记录 (Paylist.vue)

项目结构

数据模型

用户表 (users)

门店表 (shop)

区域表 (cate)

器材表 (equ)

订单表 (orders)

钱包表 (wallet)

充值记录表 (paylist)

公告表 (news)

收藏表 (star)

问题反馈表 (question)

业务流程

预约流程

会员折扣

订单状态流转

运行环境要求

后端环境

管理后台

小程序端

快速开始

1. 数据库配置

2. 启动后端服务

3. 启动管理后台

4. 运行小程序

5. 配置小程序API地址

默认账号

管理后台

小程序端

示例数据

门店示例

区域价格示例

器材租赁示例

界面预览

扩展建议

注意事项

常见问题

Q: 数据库连接失败？

Q: 图片无法显示？

Q: 小程序无法请求后端？

Q: 管理后台登录失败？

Q: 钱包余额不足？

Q: 预约时提示价格计算错误？

Q: 订单状态无法更新？

许可证

技术分类

包含内容

适用人群

关于 AI源码

1. 首页模块 (`pages/index`)

2. 自习室详情模块 (`pages/detail`)

3. 预约确认模块 (`pages/comfirm`)

7. 收藏模块 (`pages/star`)

8. 个人中心模块 (`pages/my`)

1. 首页仪表盘 (`Welcome.vue`)

2. 门店管理 (`Shop`)

3. 区域管理 (`Cate`)

4. 器材管理 (`Equ`)

5. 订单管理 (`Order`)

6. 用户管理 (`User.vue`)

7. 公告管理 (`News`)

8. 收藏管理 (`Star.vue`)

9. 问题反馈 (`Question.vue`)

10. 充值记录 (`Paylist.vue`)