當(dāng)前位置:首頁 > IT技術(shù) > 微信平臺 > 正文

Java點餐系統(tǒng)和點餐小程序新加排號等位功能
2021-08-06 13:42:20

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

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

Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐小程序_02
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_小程序_03
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐小程序_04
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐_05
只顧實現(xiàn)功能了,ui沒怎么美化,后面有時間再做下ui美化吧。下面就來給大家講解下。
講之前,先給大家看一個簡單的流程圖。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐小程序_06
流程其實很簡單,就是客戶端(小程序端)操作,點擊排位。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐系統(tǒng)_07
然后Java后臺,入庫,并生成排位的號碼,用戶端可以看到自己當(dāng)前排在第幾號。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐_08
然后管理員在后臺操作,排到位的客戶可以入座。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_小程序_09
等到號的用戶,就會出現(xiàn)可入座的標識。后面會增加排到號的用戶接受微信訂閱消息通知的功能。敬請期待。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_java_10
流程基本上講完了,接下來就給大家講解代碼部分。這里只把重要的代碼貼出來給到大家,順便給大家講下思路。后面也會錄制完整的講解視頻:《點餐系統(tǒng),java后臺+點餐小程序》

一,小程序端代碼

1,排號相關(guān)代碼

Java點餐系統(tǒng)和點餐小程序新加排號等位功能_java_11
我們先來講講排號相關(guān)的代碼,從上圖可以看出,我們排號的wxml文件里可以顯示兩種狀態(tài),未排號和已排號。上圖展示的是未排號的狀態(tài),用戶點擊完取號以后,就可以展示已排號狀態(tài)了。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐小程序_12
其實排號的小程序端代碼很簡單。下面再把paihao.js的代碼貼出來給到大家。

let app = getApp()
Page({
  data: {
    num: 1111, //當(dāng)前排號
    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)這門課的同學(xué),都知道如何獲取openid,我課程配套的視頻也有講。

二,Java后臺代碼講解

如果有仔細看上面第一步小程序端代碼,應(yīng)該可以看到wx.request網(wǎng)絡(luò)請求部分,其實這個網(wǎng)絡(luò)請求就是請求的我們Java后臺。下面先把Java后臺源碼貼出來。

/**
 * 小程序端排號相關(guān)接口
 */
@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("當(dāng)前排號數(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));
    }
    /*
     * 查詢當(dāng)前排號
     * */
    @GetMapping("/getNum")
    public ResultVO getNum(@RequestParam("openid") String openid) {
        //獲取當(dāng)前小桌入座情況
        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 0);
        //獲取當(dāng)前大桌入座情況
        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 1);
        //查詢當(dāng)前客戶的排號情況
        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);
    }
}

可以看到我們一共給小程序前端提供兩個接口,一個是取號,一個是查詢當(dāng)前排號狀態(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("當(dāng)前排號數(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));
    }

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

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

    @GetMapping("/getNum")
    public ResultVO getNum(@RequestParam("openid") String openid) {
        //獲取當(dāng)前小桌入座情況
        List<Paihao> listSmall = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 0);
        //獲取當(dāng)前大桌入座情況
        List<Paihao> listBig = repository.findByDayAndRuzuoAndTypeOrderByNum(TimeUtils.getYMD(), true, 1);
        //查詢當(dāng)前客戶的排號情況
        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);
    }

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

3,管理員端

管理員就是用來操作誰可以入座的。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_小程序_13
這個頁面主要是用freemarker寫的前端頁面。代碼如下圖。
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_點餐系統(tǒng)_14
對應(yīng)的后臺接口。

/**
 * 排號相關(guān)
 */
@Controller
@RequestMapping("/adminPaihao")
@Slf4j
public class AdminPaihaoController {

    @Autowired
    PaihaoRepository repository;

    /*
     * 頁面相關(guān)
     * */
    @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";
    }
}

管理頁對應(yīng)的代碼很簡單,就是一個顯示當(dāng)前排號數(shù)據(jù)列表,另外一個就是操作到號用戶入座,后面還會添加到號后微信訂閱消息通知相應(yīng)用戶的功能。
到這里完整的點餐排號等位功能就差不多實現(xiàn)了,相應(yīng)的講解視頻和源碼我會放到網(wǎng)盤,感興趣的同學(xué)可以聯(lián)系石頭哥vx: 2501902696
Java點餐系統(tǒng)和點餐小程序新加排號等位功能_java_15

本文摘自 :https://blog.51cto.com/u

開通會員,享受整站包年服務(wù)立即開通 >