开放一个node+react移动点餐系统
发布于 6 年前 作者 sylarmeng 3727 次浏览 来自 分享

去年用node+react做的一个移动点餐项目，目前中断了，代码公开出来，有需要的可以参考。 链接https://github.com/sylarmeng/wecatering 还用react-native做了安卓简易版本，稍后再公开。

wecatering是一套轻量移动点餐系统，通过手机浏览器或微信扫码点餐。商户和用户都简单易用

wecatering web端管理页面基于reactjs和bootstrap开发，使用echarts做数据展示，静态页面使用handlebars模板。web服务server端使用nodejs和mongodb，状态转发服务server通过socket.io来同步状态信息，redis存储连接信息。同时，使用react-native开发了安卓版本的订单管理app。

1. 特点

  • 商家账户支持手机、平板、pc访问

  • 微信扫码下单

  • 手机浏览器扫码下单（可通过微信服务号回调屏蔽）

  • 实时订单

  • 订单细颗粒度状态管理

  • 支持多账户管理

    • 主账号有所有功能
    • 小号只可处理订单
    • 多账户订单状态实时同步

  • 小票打印

    • PC端支持火狐和谷歌浏览器打印小票（自动跳过打印对话框，其他浏览器都会弹出打印对话框）
    • 安卓app支持蓝牙打印小票

  • 日周数据分析

    • 订单时段分析
    • 订单流水分析
    • 单品销量分析

  • 浏览器支持

    • 火狐
    • 谷歌
    • 微信内置浏览器
    • opera
    • 360浏览器（极速模式）
    • 百度和qq浏览器功能不能完全支持

  • 接口调用次数限制

  • 订单排序

  • 客户订单查询（只有微信扫码获取客户id才可查到记录）

2. 待开发功能

  • 忘记密码找回
  • 支付功能
  • 界面需美化（看了很多很美的风格，一到我这里就变丑）
  • 运行状态监控提示
  • 运行数据管理
  • bug(小屏时，管理页面左边栏关闭显示图标反了)

3. 性能说明

  • 浏览处理百份订单占用内存300M左右（谷歌表现比狐火稍好，会自动回收内存）【同一时间积压这么多订单，生意好的不行了】。

  • 订单状态编辑时，只同步更改订单的状态，节省浏览器占用内存、减少服务器资源消耗，只有订单结束时，各账号重新拉取所有订单

  • 如果担心socket.io占资源，可以更换websocket，普通单机可支撑数万连接

  • 管理端采用了延迟加载，webpack打包的压缩文件只有110多KB；客户下单页面打包的压缩文件只有30多KB。如果需要继续减少打包文件的体积，可以更换更轻量的CSS框架

4. 框架结构

graph LR
下单SPA页面-->基础http服务
管理SPA页面-->基础http服务
管理SPA页面-->状态转发服务
订单管理APP-->基础http服务
订单管理APP-->状态转发服务

  • 基础http服务对应wecatering项目

  • 下单SPA页面对应wecatering项目内client文件夹

  • 管理SPA页面对应wecatering项目内vendor文件夹

  • 状态转发服务对应wecatsocket文件夹

5. 使用说明

启用基础http服务

//进入wecatering目录
npm run start

启用状态转发服务

//进入wecatsocket目录
node server

打包下单SPA页面和管理SPA页面

//这里请自行编写script文件和webpack config，我直接用的注释方式来选择打包哪个文件
//进入wecatsocket目录
//选择（注释）webpack.config.js中entry中对应入口
//测试
webpack
//生产
webpack -p

6. 注意问题

  • nodejs版本使用6.10.x，7.x.x早期版本可用，其他版本未测过

  • webpack请使用2.3.2版本，webpack版本4编译会出错

  • 图片功能需要使用imagemagick包才能正常使用（建议使用linux开发， windows安装imagemagick极容易碰到版本兼容的问题）

  • 使用socket.io时注意地址和端口

  • 如果要获取微信用户ID，需要设置routes/order.js文件中的req_url中appid更改为自己的微信服务号ID

  • 安卓版本稍晚放出

7. 其他

回到顶部