Java點餐系統和點餐小程序新加排號等位功能

最近忙着創業，好久沒有寫文章了。今天就抽空給點餐系統加一個排號等位功能，想加這個功能很久了，一直沒有瞅到時間寫。今天就把這個功能實現了，順便寫個文章出來。

老規矩，先給大家看效果圖

只顧實現功能了，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";
    }
}

管理頁對應的代碼很簡單，就是一個顯示當前排號數據列表，另外一個就是操作到號用戶入座，後面還會添加到號後微信訂閱消息通知相應用戶的功能。
到這裏完整的點餐排號等位功能就差不多實現了，相應的講解視頻和源碼我會放到網盤，感興趣的同學可以聯繫石頭哥vx: 2501902696