基于uniapp和Node.js的餐厅点餐小程序开发实战-代码聚汇网

基于uniapp和Node.js的餐厅点餐小程序开发实战

夏天的火苗

1. 项目概述

最近在开发一个餐厅点餐小程序，前后端都搞定了，现在把整个开发过程整理出来分享给大家。这个小程序主要解决传统餐厅点餐效率低、人力成本高的问题，顾客可以自助扫码点餐，后厨直接接收订单，老板还能通过后台管理系统实时掌握经营数据。

这个项目采用前后端分离架构，前端用uniapp开发小程序，后端用Node.js+MySQL实现。整套系统包含用户端和管理端两大模块，用户端实现点餐、支付、订单查询等功能，管理端则负责菜品管理、订单处理、数据统计等后台操作。

提示：这套系统特别适合中小型餐厅使用，开发成本低但功能齐全，老板不用额外购买昂贵的点餐设备，顾客用自己手机就能完成点餐全过程。

2. 技术选型与开发环境搭建

2.1 前端技术栈选择

选择uniapp作为前端框架有几个重要考虑：

跨平台能力：一套代码可以编译到微信小程序、H5、App等多个平台
开发效率：基于Vue.js语法，学习成本低，组件生态丰富
性能表现：接近原生小程序的运行体验

开发工具使用HBuilder X，它对uniapp有很好的支持，提供了代码提示、真机调试等实用功能。实测下来，HBuilder X的热重载速度比微信开发者工具快不少，大大提升了开发效率。

2.2 后端技术架构设计

后端采用Node.js主要基于以下考量：

与前端JavaScript技术栈统一，团队学习成本低
非阻塞I/O模型适合高并发的点餐场景
丰富的npm生态，可以快速集成支付、短信等第三方服务

数据库选择MySQL 5.7.26版本，这个版本稳定性和性能都不错。表设计时特别注意了以下几点：

订单表做了水平分表设计，避免单表数据量过大
菜品表增加了冗余字段，减少联表查询
所有表都建立了合适的索引，特别是高频查询字段

2.3 开发环境配置实操

2.3.1 后端环境搭建

安装Node.js 16.x版本（建议使用nvm管理多版本）

bash复制nvm install 16
nvm use 16

初始化项目并安装核心依赖

bash复制npm init -y
npm install express mysql2 sequelize jsonwebtoken bcryptjs cors --save

数据库配置（config/database.js）

javascript复制module.exports = {
  database: 'restaurant',
  username: 'root',
  password: 'yourpassword',
  host: 'localhost',
  dialect: 'mysql',
  pool: {
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  }
};

2.3.2 前端环境准备

HBuilder X安装后需要配置小程序开发相关插件
创建uniapp项目时选择"小程序"模板
安装必要的npm包

bash复制npm install @dcloudio/uni-ui vuex --save

注意：开发过程中发现HBuilder X对node_modules的依赖处理有时会有问题，建议将常用组件直接放在项目目录下，而不是完全依赖npm管理。

3. 核心功能模块实现

3.1 用户端功能开发

3.1.1 登录注册模块

采用手机号+验证码的登录方式，比账号密码更符合餐饮场景。关键实现点：

使用阿里云短信服务发送验证码
验证码5分钟有效期的redis缓存实现
JWT token鉴权机制

登录接口核心代码：

javascript复制router.post('/login', async (ctx) => {
  const { phone, code } = ctx.request.body;
  
  // 验证码校验
  const cacheCode = await redis.get(`sms:${phone}`);
  if (code !== cacheCode) {
    throw new Error('验证码错误');
  }
  
  // 用户不存在则自动注册
  let user = await User.findOne({ where: { phone } });
  if (!user) {
    user = await User.create({ phone });
  }
  
  // 生成token
  const token = jwt.sign(
    { userId: user.id },
    config.jwtSecret,
    { expiresIn: '7d' }
  );
  
  ctx.body = { token };
});

3.1.2 点餐流程实现

点餐是核心功能，主要解决以下技术难点：

购物车数据实时同步：使用Vuex管理全局状态
菜品规格选择：实现灵活的多规格组合选择器
座位绑定：扫码自动关联桌号

购物车数据结构设计：

javascript复制{
  tableId: 'A12',      // 桌号
  items: [
    {
      dishId: 101,
      name: '宫保鸡丁',
      price: 38,
      specs: ['微辣', '不要花生'],  // 规格选择
      quantity: 2,
      remark: '少放盐'             // 备注
    }
  ],
  total: 76
}

3.2 管理端功能开发

3.2.1 菜品管理模块

采用树形分类+列表的展示方式，支持：

多级分类管理（如：热菜/凉菜→川菜/粤菜）
菜品上下架状态控制
库存预警功能

数据库设计关键字段：

sql复制CREATE TABLE `dishes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category_id` int(11) NOT NULL COMMENT '分类ID',
  `name` varchar(50) NOT NULL COMMENT '菜品名称',
  `price` decimal(10,2) NOT NULL COMMENT '价格',
  `cost` decimal(10,2) DEFAULT NULL COMMENT '成本价',
  `image` varchar(255) DEFAULT NULL COMMENT '图片URL',
  `description` text COMMENT '描述',
  `status` tinyint(1) DEFAULT '1' COMMENT '1上架 0下架',
  `stock` int(11) DEFAULT '-1' COMMENT '库存(-1表示不限量)',
  `specs` json DEFAULT NULL COMMENT '规格选项',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2.2 订单处理系统

订单状态机设计：

code复制待支付 → 已支付 → 制作中 → 已上菜 → 已完成
           ↓
        已取消

关键业务逻辑：

超时未支付自动取消（使用定时任务检查）
后厨分单打印（对接厨房打印机）
订单统计报表（按日/周/月生成销售数据）

4. 部署与上线实操

4.1 后端服务部署

推荐使用PM2管理Node进程：

bash复制npm install pm2 -g
pm2 start app.js --name "restaurant-api"
pm2 save
pm2 startup

数据库建议配置：

开启binlog用于数据恢复
设置合适的innodb_buffer_pool_size（建议为内存的70%）
配置定期自动备份

4.2 小程序发布流程

在HBuilder X中运行"发行→小程序-微信"
生成的代码包上传到微信开发者工具
提交微信审核（特别注意支付类目要选对）
审核通过后发布

踩坑记录：第一次审核被拒是因为没提供测试账号，后来在审核备注中加了测试账号信息就通过了。

5. 常见问题与解决方案

5.1 性能优化经验

接口响应慢：
- 启用Redis缓存热门菜品数据
- 数据库查询添加适当的索引
- 使用JOIN替代多次单表查询
高并发下单问题：
- 使用数据库事务保证数据一致性
- 热门菜品采用乐观锁控制库存
- 订单号生成改用雪花算法

5.2 实际运营中的问题

顾客误操作退出的恢复：
- 本地存储购物车数据
- 重新进入时自动恢复未提交的订单
- 增加确认弹窗减少误操作
打印机断线处理：
- 实现打印失败自动重试机制
- 未打印订单在管理端醒目提示
- 增加语音播报提醒后厨

6. 扩展功能建议

会员积分系统：
- 消费积分累积
- 积分兑换优惠券
- 会员等级权益
智能推荐功能：
- 基于历史订单的菜品推荐
- 搭配推荐（如点了水煮鱼推荐解辣饮品）
- 时段推荐（早餐/午餐/晚餐不同菜单）
数据统计分析：
- 菜品销售排行
- 顾客消费频次分析
- 营业趋势预测

这套系统我在三家餐厅实际部署过，运行最久的已经稳定工作8个月。最大的感受是初期需要花1-2周培训服务员和厨师适应新系统，但一旦用顺了，能减少30%以上的人力成本，顾客等待时间也明显缩短。特别是高峰期，传统人工点餐经常漏单错单，这套系统基本杜绝了这类问题。