纵有疾风起
人生不言弃

Java点餐系统和点餐小程序新加排号等位功能

最近忙着创业,好久没有写文章了。今天就抽空给点餐系统加一个排号等位功能,想加这个功能很久了,一直没有瞅到时间写。今天就把这个功能实现了,顺便写个文章出来。

老规矩,先给大家看效果图

Java点餐系统和点餐小程序新加排号等位功能插图

Java点餐系统和点餐小程序新加排号等位功能插图(1)

Java点餐系统和点餐小程序新加排号等位功能插图(2)

Java点餐系统和点餐小程序新加排号等位功能插图(3)

Java点餐系统和点餐小程序新加排号等位功能插图(4)

只顾实现功能了,ui没怎么美化,后面有时间再做下ui美化吧。下面就来给大家讲解下。
讲之前,先给大家看一个简单的流程图。

Java点餐系统和点餐小程序新加排号等位功能插图(5)

流程其实很简单,就是客户端(小程序端)操作,点击排位。

Java点餐系统和点餐小程序新加排号等位功能插图(6)

然后Java后台,入库,并生成排位的号码,用户端可以看到自己当前排在第几号。

Java点餐系统和点餐小程序新加排号等位功能插图(7)

然后管理员在后台操作,排到位的客户可以入座。

Java点餐系统和点餐小程序新加排号等位功能插图(8)

等到号的用户,就会出现可入座的标识。后面会增加排到号的用户接受微信订阅消息通知的功能。敬请期待。

Java点餐系统和点餐小程序新加排号等位功能插图(9)

流程基本上讲完了,接下来就给大家讲解代码部分。这里只把重要的代码贴出来给到大家,顺便给大家讲下思路。后面也会录制完整的讲解视频:《点餐系统,java后台+点餐小程序》

一,小程序端代码

1,排号相关代码

Java点餐系统和点餐小程序新加排号等位功能插图(10)

我们先来讲讲排号相关的代码,从上图可以看出,我们排号的wxml文件里可以显示两种状态,未排号和已排号。上图展示的是未排号的状态,用户点击完取号以后,就可以展示已排号状态了。

Java点餐系统和点餐小程序新加排号等位功能插图(11)

其实排号的小程序端代码很简单。下面再把paihao.js的代码贴出来给到大家。

let app = getApp()Page({  data: {    num: 1111, //当前排号    type: 1,    currentSmall: -1,    currentBig: -1  },  onShow: function () {    this.getNum()  },  //取号  quhao(event) {    let type = event.currentTarget.dataset.type    let that = this;    //如果openid不存在,就重新请求接口获取openid    var openid = app.globalData.openid;    if (openid === null || openid === undefined) {      app.getOpenid();      wx.showToast({ //这里提示失败原因        title: 'openid为空!',        duration: 1500      })      return;    }    wx.request({      url: app.globalData.baseUrl + '/paihao/quhao',      method: "POST",      header: {        "Content-Type": "application/x-www-form-urlencoded"      },      data: {        openid: openid,        type: type,      },      success(res) {        if (res && res.data && res.data.data) {          wx.showToast({            title: '排号成功',          })          console.log(res)          that.setData({            type: res.data.data.type,            num: res.data.data.num          })        }      },      fail(res) {        console.log("排号失败", res)      }    })  },  //查询我的排号  getNum() {    let that = this;    //如果openid不存在,就重新请求接口获取openid    var openid = app.globalData.openid;    if (openid === null || openid === undefined) {      app.getOpenid();      wx.showToast({ //这里提示失败原因        title: 'openid为空!',        duration: 1500      })      return;    }    wx.request({      url: app.globalData.baseUrl + '/paihao/getNum',      data: {        openid: openid      },      success: function (res) {        if (res && res.data && res.data.data) {          let dataList = res.data.data;          console.log("请求到的排号情况", dataList)          that.setData({            type: dataList.type,            num: dataList.num,            smallOkNum: dataList.smallOkNum,            bigOkNum: dataList.bigOkNum,          })        } else {          that.setData({            num: -1          })        }      },      fail(res) {        console.log("查询排号失败", res)      }    })  }})

这里需要注意一点,就是一定要先获取用户的openid,因为openid是用户的唯一标识。每人每天只能排一次号。买我点餐系统这门课的同学,都知道如何获取openid,我课程配套的视频也有讲。

二,Java后台代码讲解

如果有仔细看上面第一步小程序端代码,应该可以看到wx.request网络请求部分,其实这个网络请求就是请求的我们Java后台。下面先把Java后台源码贴出来。

/** * 小程序端排号相关接口 */@RestController@RequestMapping("/paihao")@Slf4jpublic class WxPaihaoController {    @Autowired    PaihaoRepository repository;    /*     * 取号     * */    @PostMapping("/quhao")    public ResultVO quhao(@RequestParam(value = "type") Integer type,                          @RequestParam("openid") String openid) {        int size = repository.findByDayAndType(TimeUtils.getYMD(), type).size();        log.info("当前排号数={}", size);        Paihao paihao = new Paihao();        paihao.setDay(TimeUtils.getYMD());        paihao.setNum(size + 1);        paihao.setType(type);        paihao.setOpenid(openid);        paihao.setRuzuo(false);        return ApiUtil.success(repository.save(paihao));    }    /*     * 查询当前排号     * */    @GetMapping("/getNum")    public ResultVO getNum(@RequestParam("openid") String openid) {        //获取当前小桌入座情况        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 0);        //获取当前大桌入座情况        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 1);        //查询当前客户的排号情况        List<Paihao> listKeHu = repository.findByOpenidAndDay(openid,TimeUtils.getYMD());        //组装数据返回给小程序端        PaihaoVO paihao = new PaihaoVO();        if (listSmall != null && listSmall.size() > 0) {            paihao.setSmallOkNum(listSmall.get(listSmall.size() - 1).getNum());        } else {            paihao.setSmallOkNum(0);        }        if (listBig != null && listBig.size() > 0) {            paihao.setBigOkNum(listBig.get(listBig.size() - 1).getNum());        } else {            paihao.setBigOkNum(0);        }        if (listKeHu != null && listKeHu.size() > 0) {            paihao.setNum(listKeHu.get(listKeHu.size() - 1).getNum());            paihao.setType(listKeHu.get(listKeHu.size() - 1).getType());        } else {            paihao.setNum(0);            paihao.setType(0);        }        return ApiUtil.success(paihao);    }}

可以看到我们一共给小程序前端提供两个接口,一个是取号,一个是查询当前排号状态。

1,先给大家讲讲取号

    /*     * 取号     * */    @PostMapping("/quhao")    public ResultVO quhao(@RequestParam(value = "type") Integer type,                          @RequestParam("openid") String openid) {        int size = repository.findByDayAndType(TimeUtils.getYMD(), type).size();        log.info("当前排号数={}", size);        Paihao paihao = new Paihao();        paihao.setDay(TimeUtils.getYMD());        paihao.setNum(size + 1);        paihao.setType(type);        paihao.setOpenid(openid);        paihao.setRuzuo(false);        return ApiUtil.success(repository.save(paihao));    }

取号其实很简单,就是先查询当前已经排到第几号,然后新排号的客户号码再前面排号的基础上加一。然后数据入库就可以了。

2,再给大家讲下排号状态查询。

    @GetMapping("/getNum")    public ResultVO getNum(@RequestParam("openid") String openid) {        //获取当前小桌入座情况        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 0);        //获取当前大桌入座情况        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 1);        //查询当前客户的排号情况        List<Paihao> listKeHu = repository.findByOpenidAndDay(openid,TimeUtils.getYMD());        //组装数据返回给小程序端        PaihaoVO paihao = new PaihaoVO();        if (listSmall != null && listSmall.size() > 0) {            paihao.setSmallOkNum(listSmall.get(listSmall.size() - 1).getNum());        } else {            paihao.setSmallOkNum(0);        }        if (listBig != null && listBig.size() > 0) {            paihao.setBigOkNum(listBig.get(listBig.size() - 1).getNum());        } else {            paihao.setBigOkNum(0);        }        if (listKeHu != null && listKeHu.size() > 0) {            paihao.setNum(listKeHu.get(listKeHu.size() - 1).getNum());            paihao.setType(listKeHu.get(listKeHu.size() - 1).getType());        } else {            paihao.setNum(0);            paihao.setType(0);        }        return ApiUtil.success(paihao);    }

这一步稍微复杂一点。这一步的主要就是给小程序端返回所需的数据,比如当前大桌排到了第几号,小桌排到了第几号,当前用户的排号,当前用户是否被叫到。代码里注释都很清楚了,感兴趣的同学仔细看下上面代码即可。

3,管理员端

管理员就是用来操作谁可以入座的。

Java点餐系统和点餐小程序新加排号等位功能插图(12)

这个页面主要是用freemarker写的前端页面。代码如下图。

Java点餐系统和点餐小程序新加排号等位功能插图(13)

对应的后台接口。

/** * 排号相关 */@Controller@RequestMapping("/adminPaihao")@Slf4jpublic class AdminPaihaoController {    @Autowired    PaihaoRepository repository;    /*     * 页面相关     * */    @GetMapping("/list")    public String list(ModelMap map) {        //获取小桌未入座的用户        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), false, 0);        //获取大桌未入座的用户        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), false, 1);        map.put("listSmall", listSmall);        map.put("listBig", listBig);        return "paihao/list";    }    @GetMapping("/ruzhuo")    public String ruzhuo(@RequestParam("id") int id, ModelMap map) {        try {            Paihao paihao = repository.findById(id).orElse(null);            if (paihao == null) {                throw new DianCanException(ResultEnum.PAIHAO_NOT_EXIST);            }            if (paihao.getRuzuo()) {                throw new DianCanException(ResultEnum.PAIHAO_STATUS_ERROR);            }            paihao.setRuzuo(true);            repository.save(paihao);        } catch (DianCanException e) {            map.put("msg", e.getMessage());            map.put("url", "/diancan/adminPaihao/list");            return "zujian/error";        }        map.put("url", "/diancan/adminPaihao/list");        return "zujian/success";    }}

管理页对应的代码很简单,就是一个显示当前排号数据列表,另外一个就是操作到号用户入座,后面还会添加到号后微信订阅消息通知相应用户的功能。
到这里完整的点餐排号等位功能就差不多实现了,相应的讲解视频和源码我会放到网盘,感兴趣的同学可以联系石头哥vx: 2501902696

Java点餐系统和点餐小程序新加排号等位功能插图(14)

文章转载于:https://www.jianshu.com/p/0eea17ee5783

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » Java点餐系统和点餐小程序新加排号等位功能

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活