最近忙著創(chuàng)業(yè)，好久沒有寫文章了。今天就抽空給點餐系統(tǒng)加一個排號等位功能，想加這個功能很久了，一直沒有瞅到時間寫。今天就把這個功能實現(xiàn)了，順便寫個文章出來。

老規(guī)矩，先給大家看效果圖

只顧實現(xiàn)功能了，ui沒怎么美化，后面有時間再做下ui美化吧。下面就來給大家講解下。 講之前，先給大家看一個簡單的流程圖。

流程其實很簡單，就是客戶端(小程序端)操作，點擊排位。

然后Java后臺，入庫，并生成排位的號碼，用戶端可以看到自己當前排在第幾號。

然后管理員在后臺操作，排到位的客戶可以入座。

等到號的用戶，就會出現(xiàn)可入座的標識。后面會增加排到號的用戶接受微信訂閱消息通知的功能。敬請期待。

流程基本上講完了，接下來就給大家講解代碼部分。這里只把重要的代碼貼出來給到大家，順便給大家講下思路。后面也會錄制完整的講解視頻：《點餐系統(tǒng)，java后臺+點餐小程序》

一，小程序端代碼

1，排號相關代碼

我們先來講講排號相關的代碼，從上圖可以看出，我們排號的wxml文件里可以顯示兩種狀態(tài)，未排號和已排號。上圖展示的是未排號的狀態(tài)，用戶點擊完取號以后，就可以展示已排號狀態(tài)了。

其實排號的小程序端代碼很簡單。下面再把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是用戶的唯一標識。每人每天只能排一次號。買我點餐系統(tǒng)這門課的同學，都知道如何獲取openid，我課程配套的視頻也有講。

二，Java后臺代碼講解

如果有仔細看上面第一步小程序端代碼，應該可以看到wx.request網(wǎng)絡請求部分，其實這個網(wǎng)絡請求就是請求的我們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("當前排號數(shù)={}", 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()); ? ? ? ?//組裝數(shù)據(jù)返回給小程序端 ? ? ? ?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); ? ?} }

可以看到我們一共給小程序前端提供兩個接口，一個是取號，一個是查詢當前排號狀態(tài)。

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("當前排號數(shù)={}", 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)); ? ?}

取號其實很簡單，就是先查詢當前已經(jīng)排到第幾號，然后新排號的客戶號碼再前面排號的基礎上加一。然后數(shù)據(jù)入庫就可以了。

2，再給大家講下排號狀態(tài)查詢。

@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()); ? ? ? ?//組裝數(shù)據(jù)返回給小程序端 ? ? ? ?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); ? ?}

這一步稍微復雜一點。這一步的主要就是給小程序端返回所需的數(shù)據(jù)，比如當前大桌排到了第幾號，小桌排到了第幾號，當前用戶的排號，當前用戶是否被叫到。代碼里注釋都很清楚了，感興趣的同學仔細看下上面代碼即可。

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"; ? ?} }

管理頁對應的代碼很簡單，就是一個顯示當前排號數(shù)據(jù)列表，另外一個就是操作到號用戶入座，后面還會添加到號后微信訂閱消息通知相應用戶的功能。 到這里完整的點餐排號等位功能就差不多實現(xiàn)了，相應的講解視頻和源碼我會放到網(wǎng)盤