AI源码
AI源码AI 精选 · 优质源码 · 助力学习

小程序点餐系统(单店版)

这是一个完整的微信小程序点餐系统(单店版),包含用户端小程序、商家端小程序和后端服务。系统实现了在线点餐、购物车、订单管理、优惠券、微信支付、实时通知等核心功能,采用前后端分离架构,适合作为餐饮类小程序全栈开发学习项目或计算机设计参考。

评分:4.8/5.0
销量:98
发布:2025/12/2
难度:L2 进阶级
💬 联系咨询
永久使用权限
免费更新维护
技术支持服务

项目说明

小程序点餐系统(单店版)

项目简介

这是一个完整的微信小程序点餐系统(单店版),包含用户端小程序、商家端小程序和后端服务。系统实现了在线点餐、购物车、订单管理、优惠券、微信支付、实时通知等核心功能,采用前后端分离架构,适合作为餐饮类小程序全栈开发学习项目或计算机设计参考。

技术栈

后端技术(双服务架构)

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
WebSocketws 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. 数据库配置

  1. 创建MySQL数据库
CREATE DATABASE rest CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
  1. 导入数据库文件
mysql -u root -p rest < rest.sql
  1. 修改数据库配置

编辑 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. 运行用户端小程序

  1. 打开微信开发者工具
  2. 选择"导入项目"
  3. 选择 min 目录
  4. 填入AppID(可使用测试号)
  5. 点击"导入"

7. 运行商家端小程序

  1. 打开微信开发者工具
  2. 选择"导入项目"
  3. 选择 shop 目录
  4. 填入AppID(可使用测试号)
  5. 点击"导入"

8. 配置小程序API地址

编辑 min/app.jsshop/app.js,修改API基础地址:

const apiHost = 'http://localhost:7002'; // 修改为你的后端地址

手机预览配置

如果没有服务器,想在手机上预览项目:

  1. 启动本地服务(确保MySQL数据库已启动)
cd server
npm i
node app.js
  1. 手机开启热点,电脑连接该热点

  2. 查看电脑IP地址(Windows: ipconfig, Mac: ifconfig

  3. 将小程序的 apiHost 替换成 http://电脑IP:7002

  4. 在微信开发者工具中开启"不校验合法域名"选项

  5. 即可在手机上预览小程序

默认账号

管理员账号

  • 用户名:admin
  • 密码:admin

测试用户

  • 用户:陆鹏
  • 手机号:18818219934

订单状态说明

状态码状态名称说明
0待处理订单已创建,等待商家处理
1已完成订单已完成
2已取消订单已取消

优惠券类型

类型说明使用规则
1满减券订单满指定金额可使用
2单品券购买指定商品可使用

界面预览

项目包含多张截图文件,位于 screenshot/ 目录:

  • WechatIMG36.jpeg - 首页展示
  • WechatIMG38.jpeg - 菜品列表
  • wechatIMG39.jpg - 结算页面
  • WechatIMG50.jpeg - 订单详情
  • WechatIMG52.jpeg - 订单列表

扩展建议

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

  1. 后台管理系统:Web端管理后台(Vue/React)
  2. 配送功能:外卖配送和骑手管理
  3. 会员系统:会员等级和积分体系
  4. 营销功能:拼团、秒杀、限时优惠
  5. 数据分析:销售报表和数据可视化
  6. 多店铺支持:连锁店管理
  7. 评价系统:用户评价和晒单
  8. 排队叫号:现场排队取号功能
  9. 打印功能:订单小票打印
  10. 库存管理:原料库存和预警

注意事项

  1. 本项目为学习演示项目,仅供交流学习使用
  2. 生产环境部署需要配置HTTPS
  3. 小程序上线需要完成微信认证
  4. 微信支付功能需要企业认证和商户资质
  5. 建议定期备份数据库数据
  6. 七牛云配置为可选项,不配置不影响基本功能
  7. 项目包含微信支付证书,实际使用需替换为自己的证书

常见问题

Q: 数据库连接失败?

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

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

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

Q: 微信支付功能无法使用?

A:

  1. 确认是否为企业认证小程序
  2. 检查微信配置文件中的AppID、商户ID、商户密钥是否正确
  3. 确认微信支付证书是否正确替换

Q: 图片上传失败?

A: 检查七牛云配置是否正确,或暂时不使用图片上传功能

Q: 手机预览时无法访问?

A:

  1. 确认手机和电脑在同一网络
  2. 检查电脑防火墙设置
  3. 确认API地址配置正确

Q: 为什么有两个后端服务?

A: 项目采用双服务架构,Express服务处理基础API,Koa服务处理支付和实时通知等复杂业务

技术交流

本项目仅供学习交流使用,欢迎Star和Fork。

许可证

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

技术分类

包含内容

完整源码
项目说明文档
演示材料

适用人群

学习参考与二次开发

关于 AI源码

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

QQ: 861077046
邮箱: 861077046@qq.com
已服务 98+ 位用户
立即咨询

相关推荐

查看全部 →
冰淇淋小程序
小程序
进阶

冰淇淋小程序

这是一款以唐朝文化为主题的冰淇淋电商微信小程序,采用纯原生微信小程序开发,无需后端服务,所有数据存储在本地。小程序融合了中国传统文化元素,将冰淇淋产品与唐朝名胜、诗词意境相结合,打造独特的文化消费体验。

小程序
4.822
点餐小程序系统
SpringBoot
进阶

点餐小程序系统

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

SpringBoot小程序Vue3+1
4.879
奶茶点餐小程序
小程序
进阶

奶茶点餐小程序

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

小程序Vue2
4.823
凤梨系列奶茶点餐小程序
Node
进阶

凤梨系列奶茶点餐小程序

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

NodeVue2Vue3
4.894