鱼C论坛

 找回密码
 立即注册
查看: 8111|回复: 4

[学习笔记] 网页版餐厅点餐系统(五)

[复制链接]
发表于 2017-7-5 08:21:58 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
今天先把json那个路由做出来,就是在注册页面上面script标签那个post的路由,把主启动文件代码修改为:
  1. var express = require('express');
  2. var mymodel=require('./db/db.js');
  3. var doregist = require('./control/doregist.js');
  4. var bodyParser=require('body-parser');
  5. var dosignin = require('./control/dosignin.js');
  6. var app = express();
  7. app.set('view engine','ejs');
  8. app.use(express.static('./public'));
  9. app.use(bodyParser.urlencoded({ extended: false }));
  10. app.use(bodyParser.json());
  11. app.get('/',function(req,res,next){
  12.     res.render('./home.ejs');
  13. });
  14. app.get('/regist', function (req,res,next) {
  15.     res.render('./regist.ejs');
  16. });
  17. app.post('/myjson',function(req,res,next){
  18.     mymodel.find({},function(err,result){
  19.         res.json(result);
  20.     });
  21. });
  22. app.get('/signin',function(req,res,next){
  23.     res.render('signin.ejs');
  24. });
  25. app.post('/doregist',doregist);
  26. app.post('/dosignin',dosignin);
  27. app.listen(3000);
复制代码

然后还要做signin.ejs文件,在views目录下新建signin.ejs文件:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <title>FISHC RESTAURANT</title>
  7.     <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
  8.     <script src="bootstrap3/js/jquery.min.js"></script>
  9.     <script src="bootstrap3/js/bootstrap.min.js"></script>
  10.     <script>
  11.             var name=[];
  12.             var flag=true;
  13.             $.post(
  14.                     '/myjson',
  15.                     function (data) {
  16.                         for(i=0;i<data.length;i++){
  17.                             name[i]=JSON.stringify({username:data[i].username,password:data[i].password});
  18.                         }
  19.                     });
  20.     </script>
  21. </head>
  22. <body class="container">
  23. <%include header.ejs%>
  24. <h1 class="page-header text-center">Welcome to sign in page</h1>
  25. <form action="dosignin" method="post" onsubmit="return myjson()">
  26. <div class="input-group">
  27.     <span class="input-group-addon">@</span>
  28.     <input id="username" name="username" style="ime-mode:disabled" type="text" class="form-control" placeholder="Username">
  29. </div>
  30. <div class="input-group">
  31.     <span class="input-group-addon">@</span>
  32.     <input id="password" name="password" type="password" class="form-control" placeholder="password">
  33. </div>
  34. <button class="btn btn-default">submit</button>
  35. </form>
  36. <div class="text"></div>
  37. <script>
  38.     function myjson() {
  39.         var a=JSON.stringify({username:$('#username').val(),password:$('#password').val()});
  40.         if((name.indexOf(a))==-1){
  41.             flag=false;
  42.             alert('您的用户名和密码不匹配,请重新登录');
  43.             window.location='http://127.0.0.1:3000/signin'
  44.         }
  45.         return flag;
  46.     }
  47. </script>
  48. </body>
  49. </html>
复制代码

这个页面主要是验证一下数据库里是否有这个用户名跟密码,如果有就转到下个页面。
我们还是同样要在control目录下新建dosignin.js文件,然后把下列代码写进去:
  1. module.exports = function(req,res,next){
  2.     res.render('dosignin.ejs',{username:req.body.username});
  3. }
复制代码

这里面又要用上dosignin.ejs这个模板文件,我们也要在views目录下新建这个文件代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <title>FISHC RESTAURANT</title>
  7.     <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
  8.     <script src="bootstrap3/js/jquery.min.js"></script>
  9.     <script src="bootstrap3/js/bootstrap.min.js"></script>
  10. </head>
  11. <body class="container" ng-app="">
  12. <%include header.ejs%>
  13. <h5 class="page-header text-left" id="username"><%=username%></h5>
  14. <h1 class="page-header text-center">您已登录成功&nbsp请点餐</h1>
  15. <table class="table table-hover" ng-controller="cartcontroler">
  16.     <label style="width: 100%">查找<input type="text" class="form-control" style="width: 20%" ng-model="search"></label>
  17.     <tr><th>id</th><th>菜名</th><th>购买数量</th><th>价钱</th><th>状态</th><th>总价</th><th></th></tr>
  18.     <tr ng-repeat="item in cart|filter:search">
  19.         <td>{{item.id}}</td>
  20.         <td>{{item.name}}</td>
  21.         <td><button type="button" class="btn btn-danger glyphicon glyphicon-plus" ng-click="add(item.id)"></button>
  22.             &nbsp;{{item.count}}&nbsp;
  23.             <button type="button" class="btn btn-danger glyphicon glyphicon-minus" ng-click="sub(item.id)"></button>
  24.         </td>
  25.         <td>{{item.price|currency}}</td>
  26.         <td>{{item.statu}}</td>
  27.         <td>{{item.price*item.count|currency}}</td>
  28.     </tr>
  29.     <tr>
  30.         <td colspan="5">您购买的总价格:{{totalprice()|currency}}</td>
  31.         <td><form action="admin" method="post"></form>
  32.                 <button type="button" class="btn btn-danger" ng-click="fn()">提交</button>
  33.         </td>
  34.     </tr>
  35. </table>
  36. <script>
  37.     if($('#username').html()=='admin'){
  38.         $('<input type="submit" class="btn btn-danger" value="管理员页">').appendTo($('form'))
  39.     }
  40.     var cartcontroler=function($scope) {
  41.         $scope.cart=[{
  42.             id:1,
  43.             name:'宫保鸡丁',
  44.             count:0,
  45.             price:100,
  46.             statu:'有货'
  47.         },{
  48.             id:2,
  49.             name:'鱼香肉丝',
  50.             count:0,
  51.             price:100,
  52.             statu:'有货'
  53.         },{
  54.             id:3,
  55.             name:'红烧甲鱼',
  56.             count:0,
  57.             price:100,
  58.             statu:'有货'
  59.         },{
  60.             id:4,
  61.             name:'燕京纯生',
  62.             count:0,
  63.             price:50,
  64.             statu:'有货'
  65.         },{
  66.             id:5,
  67.             name:'米饭',
  68.             count:0,
  69.             price:10,
  70.             statu:'有货'
  71.         },{
  72.             id:6,
  73.             name:'羊肉串',
  74.             count:0,
  75.             price:20,
  76.             statu:'有货'
  77.         }];
  78.         function findIndex(id){
  79.             var index=-1;
  80.             angular.forEach($scope.cart,function(item,key){
  81.                 if(item.id==id){
  82.                     index=key;
  83.                 }
  84.             });
  85.             return index
  86.         }
  87.         $scope.add = function (id){
  88.             var index=findIndex(id);
  89.             if(index!=-1){
  90.                 $scope.cart[index].count++;
  91.             }
  92.         }
  93.         $scope.sub = function (id){
  94.             var index=findIndex(id);
  95.             var item=$scope.cart[index].count;
  96.             if(index!=-1){
  97.                 if(item>0) {
  98.                     $scope.cart[index].count--;
  99.                 }
  100.             }
  101.         }
  102.         $scope.fn=function(){
  103.             var myfood={};
  104.             var foods=[];
  105.             myfood.user=$('#username').html();
  106.             angular.forEach($scope.cart,function(item,key) {
  107.                     if(item.count!=0){
  108.                         foods.push(item.name+item.count);
  109.                     }
  110.                 });
  111.             myfood.price=$scope.totalprice();
  112.             myfood.foods=foods.join();
  113.             var a=confirm(myfood.user+'您定了'+myfood.foods+'总价:'+myfood.price);
  114.             if(a){
  115.                 $.post(
  116.                     '/myjson2',
  117.                         myfood
  118.                 );
  119.                 window.location='http://127.0.0.1:3000/submit'
  120.             }
  121.         }
  122.         $scope.totalprice=function(){
  123.             var total=0;
  124.             angular.forEach($scope.cart,function(item){
  125.                 total+=(item.price*item.count);
  126.             });
  127.             return total;
  128.         }
  129.     }
  130. </script>
  131. <script src="angular-1.2.32.min.7zip.js"></script>
  132. </body>
  133. </html>
复制代码

还要在public目录下(我们之前建的静态文件夹)放进已经下载好的angular模块的文件。
这是最复杂的一个后端模板文件,里面用到了后端模板的变量例如<%=username%>这个就是我们从后端传来的用户名,还用到了angular这种前端模板的变量例如{{item.name}},这是点的菜的名字。angular善于处理表格,这种动态代码如果用原生的写要上千行代码可能。下面我们展示一下这个页面: jdfw.gif
这个页面的数字会随着点击加减按钮自动变换,这就是angular可以做到数据双向绑定,实时更新数据的特性,因为我用的是管理员账户登录所以会出现管理员按钮,如果用普通用户名就没有这个按钮。明天进行最后一讲

评分

参与人数 2荣誉 +5 鱼币 +11 贡献 +3 收起 理由
小甲鱼 + 6
1137381680 + 5 + 5 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-7-5 09:48:59 | 显示全部楼层
我们当时也做过一个电影管理系统,用的是wamp弄得,当时没好好学,现在看你的这个感觉有点后悔啊,话说我们那个比较简单,还没用angularjs呢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-7-5 09:52:45 | 显示全部楼层
1137381680 发表于 2017-7-5 09:48
我们当时也做过一个电影管理系统,用的是wamp弄得,当时没好好学,现在看你的这个感觉有点后悔啊,话说我们 ...

你这头像是什么啊?密密麻麻的都看不清楚
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-5 09:54:56 | 显示全部楼层
头像是ascii码,缩小就看不清了,一直也没换,话说你应该把这个合集打包然后申请加精啊,这个虽然对初学者来说难了些,但是对真正练手的还是有很大帮助的。不保留下来的话白瞎了。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-6-25 17:20:42 | 显示全部楼层
怎么出现了那么多错误
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 20:58

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表