老规矩，先给大家看效果图
只顾实现功能了，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.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") @Slf4j public 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，管理员端
管理员就是用来操作谁可以入座的。
这个页面主要是用freemarker写的前端页面。代码如下图。
对应的后台接口。
/** * 排号相关 */ @Controller @RequestMapping("/adminPaihao") @Slf4j public 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"; } }
管理页对应的代码很简单，就是一个显示当前排号数据列表，另外一个就是操作到号用户入座，后面还会添加到号后微信订阅消息通知相应用户的功能。
