【Side Project】点菜单功能实作 - 建立关联式的资料表

上一篇我们说到怎样才算是把菜单送到老板手上呢?
送出菜单有两个步骤

顾客送出菜单
老板接收菜单

我们这边采用的方式是顾客把菜单放到某个地方，等老板要看的时候在自己去拿起来看。
翻成我们程序上的逻辑就是

先将顾客填好的表单写入资料库
老板需要看的时候再从资料库去找

新增资料库表单

我们先来分析一下菜单的组成。
一张菜单是由一个单号(电话号码)，加上一到多个商品(品名/单价/数量)所组成。
老板可能需要依照建立的时间来分应该要先做哪一张单子，
所以我们这边可能还需要给一个单子的建立时间。
这样我们就可以得出我们要建两张Table(表单)
表头(menulisth):

uid(流水号)
formnum(表单号码/电话号码)
createtime(建立时间)

表身(menulistb):

uid(流水号)
h_uid(与表头对应的uid)
item(品名)
price(单价)
count(数量)

(这边可以养成一个好习惯，不管甚麽表单都要给primary key)

调整前端画面

前面我们在做表单的时候没有制作输入电话号码的栏位，
原本表单上的假资料也需要清除。
调整部分:

删除假资料
新增输入电话号码的栏位
将元件改成bootstrap的原件
适当地给上id或class(方便之後取资料使用)

表单部分更动(画面):

<div>

    <table id="menu"
           class="table table-bordered table-warning">
        <thead>
            <tr class="table-active">
                <th colspan="3" class="text-center "><h1>店名</h1></th>
            </tr>
            <tr class="table-light">
                <th data-field="item">品名</th>
                <th data-field="price">单价</th>
                <th data-field="count">数量</th>
            </tr>
        </thead>
        <tbody id="menu_body">
            
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2"></td>
                <th class="bg-warning">小计</th>
            </tr>
            <tr>
                <td colspan="2" >
                    <div class="input-group flex-nowrap">
                        <span class="input-group-text" id="phoneText">手机</span>
                        <input type="text" id="phoneNum" class="form-control" placeholder="手机号码" aria-label="phoneNumber" aria-describedby="phoneText">
                    </div>
                </td>
                
                <th class="bg-warning">0</th>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td>
                    <button id="submitBtn" type="button" class="btn btn-primary">
                        送出
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
    <input id="menu_data" style="visibility:hidden" [email protected] />
</div>

JS 新增菜单资料的function更动:

function addItemRow(uid, item, price) {
        var data = `
            <tr id=uid`+ uid + `>
                <td class="item"> `+ item + `</td>
                <td class="price">`+ price + `</td>
                <td class="count">
                    <div class="input-group mb-3">
                      <input type="text" class="form-control" placeholder="" aria-label="Count">
                    </div>
                </td>
            </tr>
`
        $('#menu_body').append(data);
    }