版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.csdn.net/modelmd/ https://blog.csdn.net/modelmd/article/details/78746561
最近遇到个问题，晚上加班点菜，人数太多，大家都在微信上发菜名，起初人数比较少时，可以使用excel记录，现在加班的人多的，用excel记录，就麻烦
整个点餐流程是如下：
1.在微信群聊上发起点餐信号，如"点餐了"
2.微信群聊中的小伙伴点某快餐店的菜
3.发出点餐结束信号，如"点餐结束"
4.统计微信群聊上每个人点的菜
5.给快餐店打电话，提供每种菜个几份，总的份数
整个JS点餐的列表已存入Mysql数据库，数据如下
+----+--------+----------------+------+
| id | zwjp | zwmz | dj |
+----+--------+----------------+------+
| 1 | jd | 煎蛋 | 2 |
| 2 | mtdf | 麻婆豆腐饭 | 12 |
| 3 | xlrm | 雪里肉沫饭 | 12 |
| 4 | sdjrm | 酸豆角肉沫饭 | 12 |
| 5 | xjdf | 湘家豆腐饭 | 13 |
| 6 | sljz | 酸辣鸡杂饭 | 15 |
| 7 | bcrp | 包菜肉片饭 | 15 |
| 8 | hlbrs | 胡萝卜肉丝饭 | 15 |
| 9 | dgrp | 冬菇肉片饭 | 15 |
| 10 | opcr | 藕片炒肉饭 | 15 |
| 11 | hccr | 花菜炒肉饭 | 15 |
| 12 | csrs | 脆笋肉丝饭 | 15 |
| 13 | wsrp | 莴笋肉片饭 | 15 |
| 14 | jzgrs | 金针菇肉丝饭 | 16 |
| 15 | scxsm | 酸菜小笋肉沫饭 | 12 |
| 16 | xghgr | 香干回锅肉 | 16 |
| 17 | schgr | 酸菜回锅肉饭 | 16 |
| 18 | lyymc | 鲮鱼油麦菜饭 | 13 |
| 19 | tdhsr | 土豆红烧肉饭 | 17 |
| 20 | ydfhsr | 油豆腐红烧肉饭 | 17 |
| 21 | slbrs | 酸萝卜肉丝饭 | 13 |
| 22 | qght | 青瓜火腿饭 | 13 |
| 23 | gtrhbd | 骨头肉荷包蛋饭 | 17 |
| 24 | njytx | 农家一桶香 | 17 |
| 25 | fqcd | 番茄炒蛋饭 | 13 |
| 26 | lgcd | 凉瓜炒蛋饭 | 13 |
| 27 | blsj | 板栗烧鸡 | 17 |
| 28 | bctj | 爆炒田鸡 | 17 |
| 29 | qjcd | 青椒炒蛋饭 | 13 |
| 30 | jccd | 韭菜炒蛋饭 | 13 |
| 31 | zjyf | 仔姜鸭饭 | 17 |
| 32 | schc | 酸菜回肠饭 | 18 |
| 33 | tdrs | 土豆丝肉丝饭 | 13 |
| 34 | qcxgrs | 芹菜香干肉丝饭 | 14 |
| 35 | slbzd | 酸萝卜猪肚饭 | 18 |
| 36 | mckr | 梅菜扣肉饭 | 18 |
| 37 | zcrs | 榨菜肉丝饭 | 14 |
| 38 | hthd | 火腿滑蛋饭 | 14 |
| 39 | fznn | 腐竹牛腩饭 | 18 |
| 40 | tdnn | 土豆牛腩饭 | 18 |
| 41 | wpcqz | 外婆菜茄子饭 | 14 |
| 42 | dghd | 冬菇滑鸡饭 | 14 |
| 43 | slbnr | 酸萝卜牛肉饭 | 18 |
| 44 | jzgnr | 金针菇牛肉饭 | 18 |
| 45 | ycrs | 洋葱肉丝饭 | 14 |
| 46 | lgrs | 凉瓜肉丝饭 | 14 |
| 47 | csnr | 脆笋牛肉饭 | 18 |
| 48 | xxxg | 攸县香干肉丝 | 15 |
| 49 | nbdhbd | 腊八豆荷包蛋饭 | 14 |
| 50 | hsyk | 红烧鱼块饭 | 15 |
| 51 | sjdrs | 四季豆肉丝饭 | 15 |
| 52 | xcnr | 小炒牛肉饭 | 18 |
| 53 | mxr | 木须肉饭 | 15 |
| 54 | hlzg | 滑嫩猪肝饭 | 15 |
| 55 | xcr | 小炒肉饭 | 15 |
| 56 | qgcr | 青瓜炒肉饭 | 15 |
| 57 | gtr | 骨头肉饭 | 15 |
+----+--------+----------------+------+设计思路如下:
1.Ajax发送请求获取Mysql数据表的数据，在后台将整个表的数据封装成JSON
2.前端使用JQuery解析JSON放入数据中
3.使用DOM操作动态增加节点，每一行放4种菜，每一种菜有文本框，加、减按钮，价格放入隐藏域
4.html初始页面有统计总份数按钮，总价格
源码如下：
1.HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<script type='text/javascript' src='../../jquery/jquery-3.2.1.js'></script>
<script type="text/javascript" src='../../common/commonconstants.js'></script>
<script type="text/javascript" src='../../menu/adddom.js'></script>
<style>
#menutable {
border:1px solid #ff3399;
}
</style>
</head>
<body>
<div align="center" id = "main">
<table id = "menutable">
</table>
</div>
<div id = "price">
</div>
<div align="center" id = "buttons">
<input type = "button" value = "份数" onclick = "count()" /><input type="text" id = "count" name = "count" />
<input type = "button" value = "价格" onclick = "price()" /><input type="text" id = "allprice" name = "allprice" />
<!--<input type = "button" value = "提交" onclick = "submitData()">-->
<!--<input type = "button" value = "重置" onclick = "resetdiv()" />-->
</div>
</body>
</html>2.adddom.js
var dishesArray = [];
var table;
var pricediv;
$(document).ready(function(){
if(!getDishes()){ //数据加载不成功，就不继续跑了
return ;
}
initTable();
});
function initTable(){
table = document.getElementById('menutable');
pricediv = document.getElementById('price');
var dishesLen = dishesArray.length;
for(var i = 0; i < parseInt(dishesLen / 4); i++){
var tr = document.createElement("tr");
for(var j = 0; j < 4; j++){
var data = dishesArray[i*4 + j];
addtdNode(tr, data);
}
table.appendChild(tr);
}
if(dishesLen % 4 != 0){
var tr = document.createElement("tr");
for(var i = dishesLen - dishesLen % 4; i < dishesLen; i++){
var data = dishesArray[i];
addtdNode(tr, data);
table.appendChild(tr);
}
}
initText();
}
function addtdNode(tr, data){
var td1 = document.createElement("td");
var zwmz = document.createTextNode(data['zwmz']);
var td2 = document.createElement("td");
var name = data['zwjp'];
var id = 'text_' + data['zwjp'];
var txid = id ;
var innerhtml = '<input name="'+name+ '"' + ' type="text" id="'+ id + '"' + '/>' +
'<input type="button" value="+" onclick="add(' + txid + ')"/>' +
'<input type="button" value="-" onclick="sub(' + txid + ')"/>';
td1.appendChild(zwmz);
td2.innerHTML = innerhtml;
tr.appendChild(td1);
tr.appendChild(td2);
var priceid = 'price_' + data['zwjp'];
var dj = data['dj'];
var pricehtml = '<input type="hidden" name="' + priceid + '" id="' + priceid + '" value="' + dj + '"/>';
pricediv.innerHTML = pricediv.innerHTML + pricehtml;
}
function getDishes(){
var dataInit = false;
$.ajax({
type: "POST",
async:false,
url: contextPath + "/getDishes.do",
success: function(msg){
//window.alert(msg);
if(msg.indexOf('<!DOCTYPE') != -1){
window.alert('请先登录!!!');
window.location.href = contextPath + "/login/login.jsp"
// document.write(msg);
}else{
dishesArray = $.parseJSON(msg);
dataInit = true;
}
}
});
return dataInit;
}
function initText(){
$("[id^=text_]").each(function () {
$(this).val(0);
});
}
function add(t_id){
var n = parseInt($(t_id).val()) + 1;
$(t_id).val(n);
}
function sub(t_id){
var n = parseInt($(t_id).val()) - 1;
if(n > 0 ){
$(t_id).val(n);
}
else if(n == 0){
$(t_id).val(0);
}
}
function count(){
var sum = 0;
$("[id^=text_]").each(function () {
sum = sum + parseInt($(this).val());
});
$("#count").val(sum);
}
function price(){
var pricesum = 0;
$("[id^=text_]").each(function () {
var price_id = '#' + 'price_' + this.id.split('_')[1];
pricesum = pricesum + parseInt($(this).val()) * parseInt($(price_id).val());
});
$("#allprice").val(pricesum);
}页面如下：
开始快乐的点餐了
整个设计过程中，数据录入数据库比较麻烦，后期想法直接从宣传单获取数据 ：
1.实现图片文字识别
2.中文拼音首字母获取
第2个想法已经实现了，第1个比较有难度啊，从图片上获取中文识别不了，使用了，识别不出汉字
Tesseract-OCR>tesseract -v
tesseract 3.02
leptonica-1.68 (Mar 14 2011, 10:43:03) [MSC v.1500 LIB Release 32 bit]
libgif 4.1.6 : libjpeg 8c : libpng 1.4.3 : libtiff 3.9.4 : zlib 1.2.5
Tesseract-OCR>tesseract –list-langs
List of available languages (3):
chi_sim
eng
osd