顾客使用的点菜单

点菜单已经成为我们日常生活中不可或缺的东西之一了，
那我们在开始设计菜单的样式之前，我们先来整理一下菜单需要有哪些元素。

点菜单的组成元素

点菜单在我们日常中应该已经成为一个不可或缺的要素之一了，
那我们在开始设计我们的点菜单之前，我们先来思考平常时我们是如何点餐的?

在点餐的时候第一个会注意到的应该就是商品名称，
之後可能会去看一下每项商品的单价和我今天口袋的深度来决定要点甚麽餐，
因为并不是每一次都只是购买一个人的份量，
所以可能会对同一个商品有不同数量的需求。
最後把单子给老板的时候，老板可能会需要我们写上桌号或是给我们号码牌，
方便老板知道这个餐点是属於谁的。

这样就完成了我们一次的点餐。接着解析一下这个流程，
我们可以得到点菜单所需要的元素:

• 品名
• 单价
• 数量
• 号码牌

因为我们是网页点菜单，不像实体店面可以看到招牌，
所以我们必须在我们的画面上加上店家名称，
也因为我们用网页还可以顺便帮顾客直接计算好这次的消费金额，
另外怕餐点被误取或是记错号码，
我们也将号码牌改成手机号码方便来取餐的时候才不会弄错。
点完餐点之後，还需要让顾客有一个送出的按钮让他可以提交他的餐点。
所以就变成了:

• 店名
• 品名
• 单价
• 数量
• 小计
• 手机号码
• 送出按钮

画面排版

根据上面的元素，在脑海中大概构思了一下我们菜单的样子。

画面设计(Coding)

1. 打开 Customer.cshtml
   
2. 首先把我们要的表格外框生出来
   程序码:

<table>
        <thead>
            <tr>
                <th>店名</th>
            </tr>
            <tr>
                <td>品名</td>
                <td>数量</td>
                <td>单价</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Aaaaa</td>
                <td>10</td>
                <td>70</td>
            </tr>
            <tr>
                <td>Bbbbb</td>
                <td>0</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Ccccc</td>
                <td>0</td>
                <td>120</td>
            </tr>
            <tr>
                <td>Dddd</td>
                <td>0</td>
                <td>70</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <th>小计</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <th>700</th>
            </tr>
            <tr>
                <td>
                    送出
                </td>
            </tr>
        </tfoot>
    </table>

3. 接着我们把数量变成可让顾客输入的文字框，
然後把送出变成按钮
文字框语法:

<td><input type="text"></td>

提交语法:

 <input type="submit" value="送出">

4. 接下来我们执行後，点 顾客-点菜单 :
   
   这样我们就有了一个画面的雏型了。

结语

基本上整个画面到这边就完成了。
有些小夥伴可能会问为什麽脑袋里的想像很丰满，做出来的现实确很骨感，
怎麽不添加一些css属性、稍微排版一下?

这边刚好可以引出一个小观念，就是每次都以最快的速度把核心功能开发出来。
专案是由含有测试人员的团队来开发时，当你花大把大把的时间再把所有细项都开发出来，
你们家的测试人员只能在那边发呆等你的程序，若我们每一次都有交付一个核心功能给测试人员，
不仅让他们专注测试核心功能，也能够减少他们的闲置时间。
(绝对不是因为偷懒而不做)