最近忙著創(chuàng)業(yè),好久沒有寫文章了。今天就抽空給點餐系統(tǒng)加一個排號等位功能,想加這個功能很久了,一直沒有瞅到時間寫。今天就把這個功能實現(xiàn)了,順便寫個文章出來。
老規(guī)矩,先給大家看效果圖
只顧實現(xiàn)功能了,ui沒怎么美化,后面有時間再做下ui美化吧。下面就來給大家講解下。
講之前,先給大家看一個簡單的流程圖。
流程其實很簡單,就是客戶端(小程序端)操作,點擊排位。
然后Java后臺,入庫,并生成排位的號碼,用戶端可以看到自己當(dāng)前排在第幾號。
然后管理員在后臺操作,排到位的客戶可以入座。
等到號的用戶,就會出現(xiàn)可入座的標識。后面會增加排到號的用戶接受微信訂閱消息通知的功能。敬請期待。
流程基本上講完了,接下來就給大家講解代碼部分。這里只把重要的代碼貼出來給到大家,順便給大家講下思路。后面也會錄制完整的講解視頻:《點餐系統(tǒng),java后臺+點餐小程序》
一,小程序端代碼
1,排號相關(guān)代碼
我們先來講講排號相關(guān)的代碼,從上圖可以看出,我們排號的wxml文件里可以顯示兩種狀態(tài),未排號和已排號。上圖展示的是未排號的狀態(tài),用戶點擊完取號以后,就可以展示已排號狀態(tài)了。
其實排號的小程序端代碼很簡單。下面再把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,管理員端
管理員就是用來操作誰可以入座的。
這個頁面主要是用freemarker寫的前端頁面。代碼如下圖。
對應(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
本文摘自 :https://blog.51cto.com/u