小程序点餐系统(单店版)
这是一个完整的微信小程序点餐系统(单店版),包含用户端小程序、商家端小程序和后端服务。系统实现了在线点餐、购物车、订单管理、优惠券、微信支付、实时通知等核心功能,采用前后端分离架构,适合作为餐饮类小程序全栈开发学习项目或计算机设计参考。
项目说明
小程序点餐系统(单店版)
项目简介
这是一个完整的微信小程序点餐系统(单店版),包含用户端小程序、商家端小程序和后端服务。系统实现了在线点餐、购物车、订单管理、优惠券、微信支付、实时通知等核心功能,采用前后端分离架构,适合作为餐饮类小程序全栈开发学习项目或计算机设计参考。
技术栈
后端技术(双服务架构)
Express服务 (express/)
| 技术 | 版本/说明 |
|---|---|
| 运行环境 | Node.js |
| Web框架 | Express 4.16.1 |
| 数据库 | MySQL 5.7+ |
| 数据库驱动 | mysql 2.18.1 |
| 身份认证 | jsonwebtoken 9.0.2 |
| 文件上传 | multer |
| 跨域处理 | cors 2.8.5 |
| UUID生成 | uuid 9.0.1 |
| HTTP请求 | axios 1.6.3 |
| 热重载 | nodemon 3.0.2 |
Koa服务 (server/)
| 技术 | 版本/说明 |
|---|---|
| 运行环境 | Node.js |
| Web框架 | Koa 2.0 |
| 数据库 | MySQL |
| 数据库驱动 | mysql 2.15.0 |
| ORM框架 | Sequelize 3.27.0 |
| 路由管理 | koa-router 7.0.0 |
| 请求体解析 | koa-bodyparser 3.2.0 |
| 跨域处理 | koa-cors 0.0.16 |
| WebSocket | ws 5.1.1 |
| 云存储 | qn (七牛云) 1.3.0 |
| 时间处理 | moment 2.22.1 |
| XML解析 | xml2js 0.4.19 |
小程序端技术
用户端小程序 (min/)
| 技术 | 版本/说明 |
|---|---|
| 开发框架 | 微信小程序原生框架 |
| 开发语言 | JavaScript (ES6+) |
| 样式语言 | WXSS |
| 模板语言 | WXML |
| 支付功能 | 微信支付API |
商家端小程序 (shop/)
| 技术 | 版本/说明 |
|---|---|
| 开发框架 | 微信小程序原生框架 |
| 开发语言 | JavaScript (ES6+) |
| 样式语言 | WXSS |
| 模板语言 | WXML |
项目特点
- 双端小程序:用户端和商家端独立小程序,功能分离
- 双服务架构:Express + Koa 双后端服务,职责分明
- 完整点餐流程:浏览菜品、加入购物车、下单、支付、订单管理全流程
- 微信支付集成:完整的微信支付功能(需企业认证)
- 优惠券系统:支持满减券、单品券等多种优惠方式
- 实时通知:WebSocket实时订单通知
- 规格选择:支持商品多规格(温度、糖度、配料等)
- 预约功能:支持预约取餐时间
- 订单管理:完整的订单状态流转和管理
- 营业时间管理:可配置店铺营业时间
功能模块
用户端小程序功能 (min/)
1. 首页模块 (pages/index)
- 店铺信息展示
- 菜品分类导航
- 热门菜品推荐
- 购物车入口
- 营业时间显示
2. 菜品列表模块 (pages/list)
- 按分类浏览菜品
- 菜品详细信息
- 规格选择(温度、糖度、配料)
- 加入购物车
- 数量调整
3. 购物车模块
- 购物车商品列表
- 商品数量修改
- 商品删除
- 价格计算
- 优惠券选择
- 去结算
4. 订单模块 (pages/order)
- 订单确认
- 订单列表
- 订单详情
- 订单状态查看
- 取餐码显示
- 订单取消
5. 优惠券模块
- 我的优惠券
- 优惠券领取
- 优惠券使用
- 优惠券状态管理
6. 个人中心模块 (pages/my)
- 用户信息展示
- 我的订单
- 我的优惠券
- 问题反馈 (
pages/question) - 用户信息编辑 (
pages/userInfo)
商家端小程序功能 (shop/)
1. 首页模块 (pages/index)
- 今日订单统计
- 待处理订单提醒
- 营业状态管理
- 快捷功能入口
2. 订单管理模块 (pages/order)
- 实时订单列表
- 订单详情查看
- 订单状态更新
- 订单完成确认
- 订单打印
3. 菜品管理模块 (pages/list)
- 菜品列表
- 菜品上下架
- 库存管理
- 菜品信息查看
4. 优惠券管理 (pages/cut)
- 优惠券列表
- 优惠券创建
- 优惠券状态管理
- 优惠券统计
5. 数据统计 (pages/logs)
- 销售统计
- 订单统计
- 营业额统计
6. 店铺管理 (pages/mine)
- 店铺信息设置
- 营业时间设置
- 管理员信息
项目结构
mini-program-ordering/
├── express/ # Express后端服务
│ ├── bin/
│ │ └── www # 启动入口
│ ├── config/
│ │ ├── db.js # 数据库配置
│ │ └── index.js # 全局配置
│ ├── public/
│ │ └── images/ # 上传图片存储
│ ├── routes/ # 路由文件
│ │ ├── admin/ # 管理端API
│ │ ├── web/ # 小程序端API
│ │ ├── index.js # 路由入口
│ │ └── upload.js # 文件上传
│ ├── util/ # 工具函数
│ ├── app.js # Express应用配置
│ └── package.json
│
├── server/ # Koa后端服务
│ ├── config/
│ │ ├── wxConfig.js # 微信配置(AppID、密钥等)
│ │ └── db.js # 数据库配置
│ ├── controllers/ # 控制器
│ │ ├── wx_pay/ # 微信支付相关
│ │ │ ├── apiclient_cert.p12 # 微信支付证书
│ │ │ ├── apiclient_cert.pem # 微信支付证书
│ │ │ └── apiclient_key.pem # 微信支付证书
│ │ └── index.js # 控制器入口(七牛云配置)
│ ├── app.js # Koa应用配置
│ ├── entry.js # 入口文件
│ ├── sql.js # 数据库配置
│ └── package.json
│
├── min/ # 用户端小程序
│ ├── components/ # 自定义组件
│ ├── images/ # 图片资源
│ │ ├── icons/ # 图标资源
│ │ └── tabbar/ # TabBar图标
│ ├── pages/ # 页面目录
│ │ ├── index/ # 首页
│ │ ├── list/ # 菜品列表
│ │ ├── order/ # 订单页
│ │ ├── my/ # 个人中心
│ │ ├── mine/ # 我的
│ │ ├── userInfo/ # 用户信息
│ │ └── question/ # 问题反馈
│ ├── utils/ # 工具函数
│ │ ├── api.js # API接口封装
│ │ ├── request.js # 请求封装
│ │ └── util.js # 工具函数
│ ├── app.js # 小程序入口
│ ├── app.json # 小程序配置
│ ├── app.wxss # 全局样式
│ ├── project.config.json # 项目配置
│ └── README.md
│
├── shop/ # 商家端小程序
│ ├── images/ # 图片资源
│ ├── pages/ # 页面目录
│ │ ├── index/ # 首页
│ │ ├── order/ # 订单管理
│ │ ├── list/ # 菜品管理
│ │ ├── cut/ # 优惠券管理
│ │ ├── logs/ # 数据统计
│ │ └── mine/ # 店铺管理
│ ├── utils/ # 工具函数
│ ├── app.js # 小程序入口
│ ├── app.json # 小程序配置
│ ├── app.wxss # 全局样式
│ ├── project.config.json # 项目配置
│ └── README.md
│
├── screenshot/ # 项目截图
│ ├── WechatIMG36.jpeg # 首页截图
│ ├── WechatIMG38.jpeg # 列表截图
│ ├── wechatIMG39.jpg # 结算截图
│ ├── WechatIMG50.jpeg # 订单详情截图
│ └── WechatIMG52.jpeg # 订单列表截图
│
├── rest.sql # 数据库SQL文件
├── README.md # 项目说明
└── LICENSE # 许可证
数据模型
用户表 (user)
{
id: int, // 用户ID
nickName: varchar(255), // 昵称
avatarUrl: varchar(255), // 头像
password: varchar(255), // 密码
role: int, // 角色
root: int, // 权限
resum: int, // 余额
province: varchar(255), // 省份
gender: int, // 性别
city: varchar(255), // 城市
openId: varchar(255), // 微信OpenID
phone: varchar(255), // 手机号
create_time: datetime, // 创建时间
last_loginTime: datetime // 最后登录时间
}
管理员表 (admin)
{
id: int, // 管理员ID
userName: varchar(255), // 用户名
password: varchar(255), // 密码
last_login_time: datetime, // 最后登录时间
role: varchar(255) // 角色 (0普通管理员, 1超级管理员)
}
菜单分类表 (menu)
{
id: int, // 分类ID
type: varchar(255) // 分类名称
}
菜品表 (foods)
{
id: int, // 菜品ID
type: varchar(255), // 分类ID
name: varchar(255), // 菜品名称
price: int, // 价格
img: varchar(255), // 图片
num: int, // 销量
enName: varchar(255), // 英文名称
status: int, // 状态 (0下架 1上架)
desc: varchar(255), // 描述
tem: varchar(1000), // 温度规格(JSON)
size: varchar(1000) // 配料规格(JSON)
}
订单表 (order)
{
id: int, // 订单ID
openId: varchar(255), // 用户OpenID
sumMoney: int, // 订单总价
cupNumber: int, // 商品数量
cartList: varchar(2000), // 购物车列表(JSON)
time: datetime, // 下单时间
orderId: varchar(255), // 订单号
cathNumber: varchar(255), // 取餐码
model: varchar(255), // 取餐方式 (0自取 1预约)
appointTime: varchar(255), // 预约时间
status: int, // 状态 (0待处理 1已完成 2已取消)
disTime: datetime, // 完成时间
cutMonney: int, // 优惠金额
packages: varchar(1000), // 支付包ID
cutText: varchar(200), // 优惠说明
note: varchar(1000) // 备注
}
优惠券表 (reduction)
{
id: int, // 优惠券ID
type: varchar(255), // 类型 (1满减券 2单品券)
typeDes: varchar(255), // 优惠券描述
rule: int, // 使用规则(满多少或商品ID)
cut: int, // 优惠金额
startDate: datetime, // 开始时间
endDate: datetime, // 结束时间
status: int, // 状态 (0启用 1禁用)
img: varchar(255) // 优惠券图片
}
用户优惠券表 (mycut)
{
id: int, // 记录ID
openid: varchar(40), // 用户OpenID
reduction: int, // 优惠券ID
status: int, // 状态 (0未使用 1已使用)
getTime: datetime, // 领取时间
useTime: datetime // 使用时间
}
预约表 (appoint)
{
id: int, // 预约ID
userName: varchar(255), // 预约人姓名
phone: varchar(255), // 联系电话
num: int, // 预约人数
appointTime: time, // 预约时间
user: varchar(255) // 预约人
}
营业时间表 (shoptime)
{
id: int, // ID
open: int, // 开始营业时间(小时)
close: int // 结束营业时间(小时)
}
菜品分类示例
| 分类名称 | 说明 |
|---|---|
| 泰潮系列 | 泰式风味饮品 |
| 泰高冷系列 | 冰沙类饮品 |
| 泰好喝系列 | 经典茶饮 |
| 泰咖系列 | 咖啡类饮品 |
| 泰特别系列 | 特色饮品 |
| 泰炫彩系列 | 创意饮品 |
| 象丸系列 | 珍珠奶茶系列 |
运行环境要求
后端环境
- Node.js 14.0+
- MySQL 5.7+
- npm 或 yarn
小程序端
- 微信开发者工具(最新稳定版)
- 基础库版本 2.0.0+
- 需要有效的AppID
- 微信支付功能需要企业认证
快速开始
1. 数据库配置
- 创建MySQL数据库
CREATE DATABASE rest CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
- 导入数据库文件
mysql -u root -p rest < rest.sql
- 修改数据库配置
编辑 server/sql.js:
const mysql = require('mysql');
const connection = mysql.createConnection({
host: 'localhost', // 主机地址
user: 'root', // 用户名
password: 'root', // 密码(修改为你的密码)
database: 'rest', // 数据库名称
port: '3306', // 端口号
});
2. 微信配置(重要)
编辑 server/config/wxConfig.js:
module.exports = {
appid: 'your_appid', // 小程序AppID
appsecret: 'your_appsecret', // 小程序AppSecret
Mch_id: 'your_mch_id', // 商户ID(支付功能需要)
Mch_key: 'your_mch_key', // 商户密钥(支付功能需要)
};
注意:
- 如果是个人小程序,无法使用微信支付功能
- 企业小程序需要在微信支付平台下载证书,替换
server/controllers/wx_pay/目录下的三个证书文件
3. 七牛云配置(可选)
如果需要使用图片上传功能,编辑 server/controllers/index.js:
const qiniu = {
accessKey: 'your_access_key', // 七牛云AccessKey
secretKey: 'your_secret_key', // 七牛云SecretKey
bucket: 'your_bucket_name', // 存储空间名称
domain: 'your_domain', // CDN域名
};
4. 启动Koa后端服务
# 进入server目录
cd server
# 安装依赖
npm install
# 启动服务
node app.js
Koa服务默认运行在 http://localhost:7002
5. 启动Express后端服务
# 进入express目录
cd express
# 安装依赖
npm install
# 启动服务(开发模式)
npm run dev
Express服务默认运行在 http://localhost:3000
6. 运行用户端小程序
- 打开微信开发者工具
- 选择"导入项目"
- 选择
min目录 - 填入AppID(可使用测试号)
- 点击"导入"
7. 运行商家端小程序
- 打开微信开发者工具
- 选择"导入项目"
- 选择
shop目录 - 填入AppID(可使用测试号)
- 点击"导入"
8. 配置小程序API地址
编辑 min/app.js 和 shop/app.js,修改API基础地址:
const apiHost = 'http://localhost:7002'; // 修改为你的后端地址
手机预览配置
如果没有服务器,想在手机上预览项目:
- 启动本地服务(确保MySQL数据库已启动)
cd server
npm i
node app.js
-
手机开启热点,电脑连接该热点
-
查看电脑IP地址(Windows:
ipconfig, Mac:ifconfig) -
将小程序的
apiHost替换成http://电脑IP:7002 -
在微信开发者工具中开启"不校验合法域名"选项
-
即可在手机上预览小程序
默认账号
管理员账号
- 用户名:admin
- 密码:admin
测试用户
- 用户:陆鹏
- 手机号:18818219934
订单状态说明
| 状态码 | 状态名称 | 说明 |
|---|---|---|
| 0 | 待处理 | 订单已创建,等待商家处理 |
| 1 | 已完成 | 订单已完成 |
| 2 | 已取消 | 订单已取消 |
优惠券类型
| 类型 | 说明 | 使用规则 |
|---|---|---|
| 1 | 满减券 | 订单满指定金额可使用 |
| 2 | 单品券 | 购买指定商品可使用 |
界面预览
项目包含多张截图文件,位于 screenshot/ 目录:
WechatIMG36.jpeg- 首页展示WechatIMG38.jpeg- 菜品列表wechatIMG39.jpg- 结算页面WechatIMG50.jpeg- 订单详情WechatIMG52.jpeg- 订单列表
扩展建议
如需进一步完善项目,可考虑以下扩展:
- 后台管理系统:Web端管理后台(Vue/React)
- 配送功能:外卖配送和骑手管理
- 会员系统:会员等级和积分体系
- 营销功能:拼团、秒杀、限时优惠
- 数据分析:销售报表和数据可视化
- 多店铺支持:连锁店管理
- 评价系统:用户评价和晒单
- 排队叫号:现场排队取号功能
- 打印功能:订单小票打印
- 库存管理:原料库存和预警
注意事项
- 本项目为学习演示项目,仅供交流学习使用
- 生产环境部署需要配置HTTPS
- 小程序上线需要完成微信认证
- 微信支付功能需要企业认证和商户资质
- 建议定期备份数据库数据
- 七牛云配置为可选项,不配置不影响基本功能
- 项目包含微信支付证书,实际使用需替换为自己的证书
常见问题
Q: 数据库连接失败?
A: 检查MySQL服务是否启动,数据库配置是否正确
Q: 小程序无法请求后端?
A: 检查app.js中的apiHost配置,开发时需在微信开发者工具中关闭"不校验合法域名"
Q: 微信支付功能无法使用?
A:
- 确认是否为企业认证小程序
- 检查微信配置文件中的AppID、商户ID、商户密钥是否正确
- 确认微信支付证书是否正确替换
Q: 图片上传失败?
A: 检查七牛云配置是否正确,或暂时不使用图片上传功能
Q: 手机预览时无法访问?
A:
- 确认手机和电脑在同一网络
- 检查电脑防火墙设置
- 确认API地址配置正确
Q: 为什么有两个后端服务?
A: 项目采用双服务架构,Express服务处理基础API,Koa服务处理支付和实时通知等复杂业务
技术交流
本项目仅供学习交流使用,欢迎Star和Fork。
许可证
本项目仅供学习交流使用,请勿用于商业用途。
技术分类
包含内容
适用人群
学习参考与二次开发
关于 AI源码
AI源码 专注优质项目源码分享,提供完整源码、详细文档与技术支持,助力源码设计与课程作业。
相关推荐
查看全部 →
冰淇淋小程序
这是一款以唐朝文化为主题的冰淇淋电商微信小程序,采用纯原生微信小程序开发,无需后端服务,所有数据存储在本地。小程序融合了中国传统文化元素,将冰淇淋产品与唐朝名胜、诗词意境相结合,打造独特的文化消费体验。

点餐小程序系统
这是一个完整的餐饮点餐系统,支持多端发布(微信小程序、H5、APP等8个平台),包含用户端小程序、商家管理后台、平台管理后台和收银台系统。系统支持外卖配送、店内就餐、打包带走等多种就餐方式,采用前后端分离架构,适合作为餐饮行业数字化解决方案或计算机设计参考。

奶茶点餐小程序
这是一个仿奶茶品牌的微信小程序,采用 UniApp 框架开发,使用本地Mock数据模拟后端接口。项目完整实现了奶茶点餐、取餐、会员系统、积分商城、订单管理、地址管理等核心功能,适合作为微信小程序开发学习项目或计算机设计参考。

凤梨系列奶茶点餐小程序
这是一个完整的前后端分离奶茶点餐系统,包含微信小程序(用户端)、商家后台管理系统(Admin端)和后端服务(Express)。项目实现了完整的奶茶点餐业务流程,支持到店取餐和外卖配送,适合作为全栈开发学习项目或计算机设计参考。