Warning: Illegal string offset 'download' in /www/wwwroot/www.oilcn.net.cn/wp-content/themes/wpzt-hot/template-parts/single/single-pc.php on line 4

html5网站源码下载 定单(html5网站源码带后台)

17次
2021-06-23

Web点餐系统(前端开发)

一、系统简介

该Web点餐系统是为了给餐厅提供下一天的食材做参考,使用HTML5 + CSS3 + JS(jQuery)进行后端开发,数据库选用本地数据库WebSQL,不使用前端开发。 系统实现以下基本功能:

二、系统设计

系统功能结构图:

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第1张

三、系统实现 · 首页(当天食材)/推荐食材/热买食材

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第2张

页面布局的核心html文件

让按键或标签实现跳转界面:嵌套添加超链接即可。

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第3张

<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('点击关闭!');
      }
    });
});

· 已选食材

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第4张

查询数据库,获取数据显示至界面上,js文件

WebSQL数据库——获取表单数据:

第一步: openDatabase()打开/创建数据库

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第5张

第二步: 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,每当递交操作发生时html5网站源码下载 定单,首先进行表单备份,即:把表单MsgData中的所有数据添加至新争创的表单Dingdan中,然后再执行删掉MsgData表单操作,既实现了已选食材中数据清空,又实现了我的订单中数据回显。

· 我的订单

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第6张

点击“删除”后执行删掉数据库表单操作,js文件

WebSQL数据库——删除表单数据:

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第7张

删除表单数据和获取表单数据的方法是一样的,只不过我这儿写了一个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>

· 订单统计

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第8张

使用Chart.js图表库描绘四种统计图(这里只展示一种图的描绘代码)

1.Chart.js使用:

引入Chart.js库

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

定义一张画笔

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第9张

<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来放列表,调整位置关系即可:

3.隐藏div,点击菜单栏选项后才显示:

除了第一个div,其余的款式设置为掩藏:

html5网站源码下载 定单(html5网站源码带后台) (https://www.oilcn.net.cn/) 综合教程 第10张

<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后端觉得蛮好玩的,你能很快地看见自己作出的疗效html5网站源码下载 定单,很有成就感。虽然这个过程中也碰到不少问题,但通过查阅资料跟使用工具调试都得到了解决,第一次做Web后端学到不少东西,记录一下。有问题请多指教~~

五、源码下载

源码开放在此,仅作学习参考~

END

发表评论