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

去年用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. 其他

回到顶部