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

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

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

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

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

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

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

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

一，小程序端代码

1，排号相关代码

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

其实排号的小程序端代码很简单。下面再把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.typelet that = this;//如果openid不存在，就重新请求接口获取openidvar 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不存在，就重新请求接口获取openidvar 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")
@Slf4j
public class WxPaihaoController {@AutowiredPaihaoRepository 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，管理员端

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

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

对应的后台接口。

/*** 排号相关*/
@Controller
@RequestMapping("/adminPaihao")
@Slf4j
public class AdminPaihaoController {@AutowiredPaihaoRepository 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