最近忙着创业，好久没有写文章了。今天就抽空给点餐系统加一个排号等位功能，想加这个功能很久了，一直没有瞅到时间写。今天就把这个功能实现了，顺便写个文章出来。
老规矩，先给大家看效果图
只顾实现功能了，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";
}
}
管理页对应的代码很简单，就是一个显示当前排号数据列表，另外一个就是操作到号用户入座，后面还会添加到号后微信订阅消息通知相应用户的功能。
到这里完整的点餐排号等位功能就差不多实现了，相应的讲解视频和源码我会放到网盘
