Web點餐系統（前端開發）

一、系統簡介

該Web點餐系統是爲了給食堂提供下一天的菜品做參考，使用HTML5 + CSS3 + JS(jQuery)進行前端開發，數據庫採用本地數據庫WebSQL，不使用後端開發。系統實現以下基本功能：

首頁導航有三個：首頁、我的訂單、訂單統計
在首頁中：
(1) 展示當天菜品、熱賣菜品、推薦菜品，顯示完整的信息。
(2) 實現點菜，結果顯示在合適位置中，所點的菜能夠取消。
(3) 點菜的“提交”是將數據保存到本地，然後在“我的訂單”中重現這些數據。
在我的訂單頁面中，能夠從保存在本地的數據中心提取出數據並能顯示，並能添加和刪除。
在訂單統計頁面中，用圖表顯示當天熱賣前三的菜品統計結果。統計結果用不同類型的圖表展示以下維度：菜品、價格、口味、食材。

二、系統設計

系統功能結構圖：

三、系統實現

· 首頁（當天菜品）/推薦菜品/熱買菜品

頁面佈局的核心html文件
讓按鈕或標籤實現跳轉界面：嵌套<a href=""></a>添加超鏈接即可。

<div>
    <div  class="nav_bg">
        <div class="wrap"> 
            <ul id="nav" class="nav clearfix">
                <li class="nLi" style="font-size: 30px;">
                    <h3 class="e"><a  href="#" style="font-size: 23px;">餓了呀</a></h3>
                </li>
                <li class="nLi">
                  <h3 class="d"><a  href="./index.html">首頁</a></h3>
                </li>
                <li class="nLi ">
                  <h3 class="d"><a href="myorder.html">我的訂單</a></h3>
                </li>       
                <li class="nLi ">
                  <h3 class="d"><a href="order-statistic.html">訂單統計</a></h3>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="left" >
          <ul class="leftborder">
              <li class="border1">
                <a href="myorder.html">
                    <img src='../images/dingdan.png' width=14 height=14 />
                    <span class="outer">  我的訂單</span>
                    <br>
                    <br>
                    <span class="inner">近三個月的訂單</span>      
                </a>
            </li>
            <li class="border2">
                <a href="./today.html">
                    <img src='../images/remaicaipin.png' width=14 height=14 />
                    <span class="outer">當天菜品</span>
                </a>
            </li>
            <li class="border3">
                <a href="./recommend.html">
                    <img src='../images/tuijian.png' width=14 height=14 />
                    <span class="outer">推薦菜品</span>
                </a>
            </li>
            <li class="border4clicked">
                <a href="./hot.html">
                    <img src='../images/menu.png' width=14 height=14 />
                    <span class="outer">熱賣菜品</span>
                </a>
            </li>
            <li class="border5">
                    <a href="./selected.html">
                        <img src='../images/today.png' width=14 height=14 />
                        <span class="outer">已選菜品</span>    
                    </a>
            </li>              
            </ul>
    </div>
</div>

當用戶點擊“點餐”按鈕時執行的操作，js文件
WebSQL數據庫操作，後面有詳細描述。

$('#order1').click(function() {
    $.sendConfirm({
      withCenter: true,
      title: '點餐交易確認',
      msg: '您確定要點此菜品嗎？',
      button: {
        confirm: '確認',
        cancel: '取消',
        cancelFirst: true
      },
      onConfirm: function() {
          
    $.sendMsg('點菜成功,菜品已加入購物車', 3000, function() {
      // 第一種
      console.log('sendMsg closed');
      var span = $('#first').html(); 
      var picname=span.split("\n")[1].split("src")[1].slice(2,8);
      var dishname=span.split("\n")[2].split(">")[1].split("<")[0].replace(/(^\s+)|(\s+$)/g,"");
      var dishdisc=span.split("\n")[3].split(">")[1].split("<")[0];
      var dishprice=span.split("\n")[4].split(">")[1].split("<")[0];
      var dishnum=span.split("\n")[5].split(">")[1].split("<")[0];
      var db = openDatabase('dishes', '1.0', '點餐數據庫', 30*1024*1024);
      var msg;
      addData(picname, dishname, dishdisc,dishprice,dishnum);
      function addData(picname, dishname, dishdisc,dishprice,dishnum) {
      db.transaction(function(tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []);
          tx.executeSql("INSERT INTO MsgDate VALUES (?,?,?,?,?)", [picname, dishname, dishdisc,dishprice,dishnum], function(tx, rs) {   
              },
              function(tx, error) {
                  alert(error.source + "::" + error.message);
              })
      })
  }
  });
      },
      onCancel: function() {  
    $.sendMsg('點菜失敗', 3000, function() {
      console.log('sendMsg closed');
  });
      },
      onClose: function() {
    $.sendMsg('點菜失敗', 3000, function() {
      console.log('sendMsg closed');
  });
        console.log('點擊關閉！');
      }
    });
});

· 已選菜品

查詢數據庫，獲取數據顯示到界面上，js文件
WebSQL數據庫——獲取表單數據：
第一步： openDatabase()打開/創建數據庫
第二步： db.transaction()事務處理函數，它有三個參數，三個參數均爲函數。第一個是事務提交函數，在這裏面使用tx.executeSql()來執行查詢任務，將對應元素讀取出來。第二個參數和第三個參數分別是成功回調和失敗回調函數，不是必要的，只要第一個參數也ok的。

Q: 從數據庫中讀取的數據如何放到頁面上？
A: 寫一個showData()函數，作爲前面說的事務提交函數。比如我的頁面結構是：div–ul–li，那麼首先我得聲明一個var字符串，然後用document.getElementById()函數得到div對象，可以對其進行引用。再聲明一個var，使用document.createElement()函數引用一個ul對象，最後使用document.getElementById()函數引用li對象，參數要寫成數據庫表單的內容：第幾行的某個元素。這個應該對應之前在html中提前設置好的li的id，id即數據庫表單的鍵值元素。即可對應起來。最後需要用appendChild()函數將他們一個一個連接起來就ok了。

<script>
    var db = openDatabase('dishes', '1.0', '點餐數據庫', 30*1024*1024);
    var datatable = document.getElementById("first");
    var dishnames=new Array();

    showAllData(datatable);
    function showData(row,datatable,i) {
        console.log(dishnames.indexOf(row.dishname));
    if(dishnames.indexOf(row.dishname)!=-1)
   {
       console.log("repeated");
   }
    else{ dishnames.push(row.dishname)
    var ul=document.createElement("ul");
    ul.className="order_lists";
    var check=document.getElementById("check"+(i+2));
    var li1 = document.getElementById(row.dishname.replace(/(^\s+)|(\s+$)/g,""));
    
    var li2= document.createElement("li");
    li2.className="list_info";
    li2.innerHTML=row.dishdisc;
    var li3= document.createElement("li");

    li3.className="list_price";
    var p1=document.createElement("p");
    p1.className="price"
    var pri=row.disprice.split("(")[0];
    p1.innerHTML='￥'+pri;
    li3.appendChild(p1);
    var li4= document.getElementById("box"+(i+1));
    var li5= document.createElement("li");
    li5.className="list_sum";
    var p2=document.createElement("p");
    p2.className="sum_price"
    p2.innerHTML='￥'+parseInt(pri);
    li5.appendChild(p2);
    var li6=document.getElementById("op"+(i+1));
    
    ul.appendChild(check);
    ul.appendChild(li1);
    ul.appendChild(li2);
    ul.appendChild(li3);
    ul.appendChild(li4);
    ul.appendChild(li5);
    ul.appendChild(li6);
    datatable.appendChild(ul);
    console.log(datatable)
    }
    }
    function showAllData(datatable) {
    db.transaction(function(tx) {
        tx.executeSql("CREATE TABLE IF NOT EXISTS MsgDate(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []);
        tx.executeSql("SELECT * FROM MsgDate  ", [], function(tx, rs) {
            
            for(var i = 0; i < rs.rows.length; i++) {
                showData(rs.rows.item(i),datatable,i)
            }
        })
    })
}
</script>

注意： 在已選菜品中是在不斷地讀取數據庫表單的數據來顯示到當前頁面，因此只有當表單數據清空才能讓頁面清空點擊，所以在點擊“提交"後，則需要執行刪除表單MsgData中的數據操作。但是由於我需要在我的訂單中回顯提交後的數據，如果刪除了表單那就沒地方讀取數據了，那麼這裏可以採取創建一個新的數據庫表單Dingdan，每當提交操作發生時，首先進行表單備份，即：把表單MsgData中的所有數據添加到新創建的表單Dingdan中，然後再執行刪除MsgData表單操作，既實現了已選菜品中數據清空，又實現了我的訂單中數據回顯。

· 我的訂單

點擊“刪除”後執行刪除數據庫表單操作，js文件
WebSQL數據庫——刪除表單數據：
刪除表單數據跟獲取表單數據的步驟是一樣的，只不過我這裏寫了一個DeleteData()函數來封裝db.transaction()，方便其他地方直接調用DeleteData()對其進行引用。

<script type="text/javascript">
    $('.del').click(function () {
        $order_lists = $(this).parents('.order_lists');
        $order_content = $order_lists.parents('.order_content');
        namer= $(this).parents('.order_lists').find('.food').html();
        $('.model_bg').fadeIn(300);
        $('.my_model').fadeIn(300);
});

    //關閉模態框
    $('.closeModel').click(function () {
        closeM();
    });
    $('.dialog-close').click(function () {
        closeM();
    });
    function closeM() {
        $('.model_bg').fadeOut(300);
        $('.my_model').fadeOut(300);}

    //確定按鈕，移除商品
    $('.dialog-sure').click(function () {
        $order_lists.remove();
        if($order_content.html().trim() == null || $order_content.html().trim().length == 0){
            $.sendMsg('訂單裏空空如也!', 1000, function() {
                console.log('sendMsg closed');
            });
        }
        closeM();
       
        var db = openDatabase('dishes', '1.0', '點餐數據庫', 30*1024*1024);
        Deletedish();
        function Deletedish(datatable) {
            db.transaction(function(tx) {
                tx.executeSql("CREATE TABLE IF NOT EXISTS Dingdan(picname TEXT,dishname TEXT,dishdisc TEXT,disprice TEXT,dishnum TEXT)", []);
                tx.executeSql("DELETE FROM Dingdan WHERE dishname=(?)", [namer], function(tx, rs) {
                   console.log("delete success!")
                })
            })
        }
    })
</script>

· 訂單統計

使用Chart.js圖表庫繪製四種統計圖（這裏只展示一種圖的繪製代碼）
1.Chart.js使用：

引入Chart.js庫

<script src="../js/Chart.js"></script>

定義一張畫布

<div>
	<canvas id="popChart1" width="800" height="500">
</div>

利用2d上下文傳遞畫布的節點，實例化Chart類

var popCanvas1 =document.getElementById("popChart1").getContext("2d"); 
var barChart = new Chart(popCanvas1, {
  type: 'bar',
  data: {
     labels: ["回鍋肉", "青椒玉米", "擔擔麪"],
     datasets: [{
       label: '訂購數量',
       data: [34, 27, 40],
       backgroundColor: [
       'rgba(255, 99, 132, 0.6)',
       'rgba(54, 162, 235, 0.6)',
       'rgba(255, 206, 86, 0.6)',
       'rgba(153, 102, 255, 0.6)'
       ]
     }]
   }
});

2.左側菜單欄：
定義兩個div，一個放菜單欄，一個放內容。將兩個div放在同一行，在css中設置div爲浮動：

.left{
	position: relative;
	float: left;
}

菜單欄div中用一個li來放列表，調整位置關係即可：

.left li {height:40px;  position:relative;  display:block;padding:20px 0 0 120px;}

3.隱藏div，點擊菜單欄選項後才顯示：
除了第一個div，其餘的樣式設置爲隱藏：

<div style="display: none;">

利用jQuery中的函數將li和div按序匹配起來，使用條件語句，如果點擊不爲第一個div對應的li時，就獲取當前的div索引，然後把原來的div的class屬性給它，把其他同級的class屬性remove掉。使用show()函數和hide()函數分別進行顯示和隱藏，參數爲動畫的速度。可設置速度參數爲“fast”，如果是使用數字參數的話，則會根據速度在隱藏和顯示過程中逐漸改變div的高度、寬度、邊距等。

    $(function(){
    	$(".left li").click(
    		function(){
    			var divShow = $(".content").children("div");
    			if(!$(this).hasClass("selected")){
    				var index = $(this).index();   
    				$(this).addClass("selected");            
            $(this).siblings("li").removeClass("selected");                     
            $(divShow[index]).show("fast");
            $(divShow[index]).siblings("div").hide("fast");
          }
    		}
    	)
    })

PS: 我當時遇到一個非常莫名其妙的問題，在經過多次切換後，所有圖表都變得越來越小，甚至可以變得比最初小十分之一去了，看着怪嚇人的，因爲我絕對沒有在任何地方改變過div的大小，剛開始以爲是速度參數的問題，但是我改變了fast參數之發現這個問題依然存在，而且無參數更連動畫效果都沒有。最後查看開發者工具，進行多次調試，觀察長寬的改變情況。發現了問題所在：

對div的父容器設置長寬要用百分比才行。

我原來用的是數值，顯示是invalid的，最後把寬度設置成百分比就會發現div的大小沒有再改變了。

<div class="content" style="width:50%">

四、總結

做Web前端感覺挺好玩的，你能很快地看到自己做出的效果，很有成就感。雖然這個過程中也遇到不少問題，但通過查閱資料和使用工具調試都得到了解決，第一次做Web前端學到不少東西，記錄一下。有問題請多指教~~

五、源碼下載

Web點餐系統（前端開發）源碼

Web端點餐系統（HTML5 + CSS3 + JS(jQuery)）

Web點餐系統（前端開發）

一、系統簡介

二、系統設計

三、系統實現

· 首頁（當天菜品）/推薦菜品/熱買菜品

· 已選菜品

· 我的訂單

· 訂單統計

四、總結

五、源碼下載

計網核心總結（測試開發面試常問題目）

LeetCode經典算法題目二（樹、排序、查找、動態規劃、回溯、貪心）

數據庫系統（PostgreSQL）

Git拉取和提交到GitLab的命令

Java基礎知識彙總（測開面試）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結