vue點餐系統開發

時間  2019-11-13
標籤 vue 系統 開發 简体版
原文   原文鏈接

隨着互聯網+的興起，愈來愈多的餐飲店也開始信息化，好比利用互聯網進行點餐。信息化對於不少企業來講，成本高，開支大，對於一些中小型餐飲店，想作卻又不想投入過多的財力。如何實現投入少，又能解決網上點餐，手機掃碼下就能下單的功能呢？爲此夜鷹教程網特別錄製了一套視頻教程供你們學習。html

 

本套教程以點餐系統爲例，講解了使用vue腳手架構建SPA項目,詳細演示了vue組件開發，組件之間的參數傳遞、表單驗證、數據雙向綁定、列表渲染、使用VUEX進行全局變量狀態控制、使用axios與webapi進行數據交換，此教程不單單講解了前端，還深刻講解了數據庫設計及後臺管理系統開發，例如後臺登陸模塊、產品發佈模塊、訂單管理模塊、用戶管理等模塊等，爲了演示接口建立和調用，全程演示了webapi的建立和部署。經過本套教程的學習，你不只能夠學到vue的高級知識，還能學到數據庫設計、後臺管理系統開發、webapi的提供和調用等大型項目中必須掌握的關鍵技術。歡迎廣大的編程愛好者和學員加微信號yyjcw10000 或者 QQ：1416759661 進行技術交流。前端

 

 

VUE點餐系統

 

VUE點餐系統

 

02.png

 

03.png

09.png

 

06-1.png

 

10.png

 

11.png

12.png

 

04.png

 

08.png

 

07.png

 

 

 

關鍵代碼以下：vue

 

用戶註冊頁：node

 

<template>
<div class="wrapper">
<Header :isHideSettingBtn="true"/>
<div class="main">
  <div class="login">
    <p><input type="text" class="txt" v-model="LoginName" placeholder="用戶名" id="LoginName" /></p>
    <p><input type="password" class="txt" v-model="PassWord" placeholder="密碼" id="PassWord" /></p>
    <p><input type="text" class="txt" v-model="TrueName" placeholder="真實姓名" id="TrueName" /></p>
    <p><input type="text" class="txt" v-model="Tel" placeholder="手機號" id="Tel" /></p>
    <p><input type="button" @click="userreg" value="註冊" class="btnlogin" /></p>
    <p class="tipmsg">{{tipmsg}}</p>
  </div>
</div>
<Footer/>
</div>
</template>

<script>

import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'UserReg',
  data () {
    return {
      tipmsg:'',
      LoginName:'',
      PassWord:'',
      TrueName:'',
      Tel:''
    }
  },
  components:{
    Header,
    Footer
  },
  methods:{
    userreg:function () {
        var that=this;
        var webapiip=this.$store.getters.webapiip;
        this.tipmsg="";
        var LoginName=this.LoginName;
        var PassWord=this.PassWord;
        var TrueName=this.TrueName;
        var Tel=this.Tel;

        if(!(LoginName.length>0))
        {
            document.getElementById("LoginName").focus();
            this.tipmsg="請輸入用戶名！";
            return;
        }
        if(!(PassWord.length>0))
        {
            document.getElementById("PassWord").focus();
            this.tipmsg="請輸入密碼！";
            return;
        }
        if(!(TrueName.length>0))
        {
            document.getElementById("TrueName").focus();
            this.tipmsg="請輸入真實姓名！";
            return;
        }
        if(!(Tel.length>0))
        {
            document.getElementById("Tel").focus();
            this.tipmsg="請輸入電話號碼！";
            return;
        }


        this.$ajax({
               method: 'post',
               url: webapiip+'/api/diancan/PostAddUser',
               data: {
                  LoginName:LoginName,
                  PassWord:PassWord,
                  TrueName:TrueName,
                  Tel:Tel
               }
         }).then(res=>{
            console.log(res);

            if(res.data.flag=="0")
            {
                
                this.tipmsg=res.data.data;  
            }
            else
            {
                this.tipmsg="註冊成功";
                setTimeout(function(){
                    that.$router.push({
                      name: 'Login'
                    });
                },3000);
            }

            
               
         }).catch(err=>{
                  console.log("錯誤："+err);
                  this.tipmsg="錯誤："+err;
         });





    }

  }
}
</script>


<style scoped>

.wrapper{
   width:100%;
   height:100%;
}

.main{
  width:100%;
  height:calc(100% - 60px);
  position:fixed;
  top:30px;
  left:0px;
  overflow-y:scroll;
}

.login{
  width:calc(100% - 100px);
  height:200px;
  position:absolute;
  left:50px;
  top:calc(50% - 100px);
}
.main input{
    width:100%;
    height:32px;
    margin-top:5px;
    border:solid 1px #eee;
    border-radius:3px;
    outline:none;
}

.main input.txt{
    width:calc(100% - 5px);
    height:30px;
    margin-top:5px;
    padding-left:3px;
}

.btnlogin{
  background-color:#3CB371;
  color:#fff;
  cursor:pointer;
}
.tipmsg{
  color:red;
}
</style>

用戶登陸：ios

 

<template>
<div class="wrapper">
<Header :isHideBackBtn="true" :isHideSettingBtn="true"/>
<div class="main">
  <div class="login">
    <p><input type="text" class="txt" v-model="username" placeholder="用戶名" id="username" /></p>
    <p><input type="password" class="txt" v-model="password" placeholder="密碼" id="password"/></p>
    <p><input type="button" value="登陸" @click="login" class="btnlogin" /></p>
    <p><input type="button" value="註冊" @click="userreg" class="btnreg" /></p>
    <p class="tipmsg">{{tipmsg}}</p>
  </div>
</div>
<Footer/>
</div>
</template>

<script>

import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'Login',
  created(){
    this.$store.commit('SET_APPTITLE',"快易樂點餐系統v1.0-登陸");

  },
  data () {
    return {
      tipmsg:'',
      username:'',
      password:''
    }
  },
  components:{
    Header,
    Footer
  },
  methods:{
    userreg:function() {
      this.$router.push({name: 'UserReg'});
    },
    login:function(){
        var username=this.username;
        var password=this.password;
        var deskid=this.$route.query.id;
        if(!(username.length>0))
        {
            this.tipmsg="請輸入用戶名";
            document.getElementById("username").focus();
            return;
        }

        if(!(password.length>0))
        {
            this.tipmsg="請輸入密碼";
            document.getElementById("password").focus();
            return;
        }

        if(!deskid)
        {
            deskid=1;
        }
        var webapiip=this.$store.getters.webapiip;
        //向webapi發起一個ajax請求，驗證用戶名和密碼
        this.$ajax({
               method: 'post',
               url:webapiip+'/api/diancan/PostLogin',
               data: {
                  LoginName:username,
                  PassWord:password
               }
         }).then(res=>{

            if(res.data.data.ds.length>0)
            {
                //登陸成功
                this.tipmsg="";
                var currentuser=res.data.data.ds[0];
                localStorage.setItem("userid",currentuser.ID);
                localStorage.setItem("TrueName",currentuser.TrueName);
                localStorage.setItem("Tel",currentuser.Tel);
                localStorage.setItem("deskid",deskid);
                this.$router.push({
                      name: 'FoodList',
                      params: {
                        userId: currentuser.ID
                      }
                });
                
            }
            else
            {
                //登陸失敗
                this.tipmsg="錯誤：用戶名或密碼錯誤";
            }

            console.log(res.data.data.ds[0]);
               
         }).catch(err=>{
                  console.log("錯誤："+err);
                  this.tipmsg="錯誤："+err;
         });


    }

  }

}
</script>


<style scoped>

.wrapper{
   width:100%;
   height:100%;
}

.main{
  width:100%;
  height:calc(100% - 60px);
  position:fixed;
  top:30px;
  left:0px;
  overflow-y:scroll;
}

.login{
  width:calc(100% - 100px);
  height:200px;
  position:absolute;
  left:50px;
  top:calc(50% - 100px);
}
.main input{
    width:100%;
    height:32px;
    margin-top:5px;
    border:solid 1px #eee;
    border-radius:3px;
    outline:none;
}

.main input.txt{
    width:calc(100% - 5px);
    height:30px;
    margin-top:5px;
    padding-left:3px;
}

.btnlogin{
  background-color:#3CB371;
  color:#fff;
  cursor:pointer;
}

.tipmsg{
  color:red;
}

</style>

 

詳細目錄以下，須要視頻教程的朋友能夠加微信號:yyjcw10000 或者QQ:1416759661 web

https://www.yyjcw.com/html/ke/41.htmlajax

001-前言.swf
002-部署項目-權限配置-附加數據庫.swf
003-部署項目-IIS安裝.swf
004-部署項目-後臺部署.swf
005-部署項目-webapi部署.swf
006-部署項目-VUE項目部署及訂單功能演示.swf
007-nodejs平臺安裝.swf
008-cnpm安裝成功.swf
009-vue-cli腳手架安裝.swf
010-利用vue-cli腳手架初始化項目.swf
011-Vue項目的目錄結構介紹.swf
012-開發-測試-生產-環境介紹.swf
013-項目運行原理.swf
014-vue根組件介紹.swf
015-HelloWord組件介紹.swf
016-組件化思想.swf
017-登陸組件開發.swf
018-頭部和底部公共組件開發.swf
019-頭部和底部公共組件樣式.swf
020-登陸組件表單樣式.swf
021-菜品列表組件建立.swf
022-菜品列表彈性盒子佈局.swf
023-菜品列表圖片樣式.swf
024-選菜按鈕和跳轉按鈕製做.swf
025-已選菜品頁面製做.swf
026-菜品詳細頁面製做.swf
027-菜品詳細頁面細節部分.swf
028-下單成功頁面製做.swf
029-下單成功頁面按鈕製做.swf
030-個人訂單佈局.swf
031-個人訂單列表佈局.swf
032-個人訂單詳情頁面製做.swf
033-控制面板製做.swf
034-用戶註冊.swf
035-新建後臺管理系統項目和數據庫.swf
036-建立用戶表.swf
037-建立菜品表.swf
038-菜單表設計.swf
039-訂單表設計.swf
040-點餐系統相關類文件的生成.swf
041-點餐系統後臺構建.swf
042-準備圖片素材和jq庫文件.swf
043-登陸頁面樣式設置.swf
044-登陸頁面表單居中技巧.swf
045-sql認證和windows認證方式.swf
046-登錄模塊後臺邏輯及用戶身份標識對稱加密.swf
047-自定義後臺頁面的身份認證.swf
048-後臺全部頁面調用靜態方法驗證身份.swf
049-frameset實現後臺框架佈局.swf
050-後臺頭部導航製做.swf
051-左側導航菜單製做.swf
052-數據庫表構建可擴展的系統菜單.swf
053-動態菜單數據綁定.swf
054-新增菜品製做.swf
055-新增菜品樣式調整.swf
056-圖片上傳技術.swf
057-菜品數據分頁顯示.swf
058-修改頁面參數傳遞.swf
059-綁定舊的數據.swf
060-修改菜品.swf
061-修改菜品刪除冗餘的圖片文件.swf
062-全選與取消全選.swf
063-刪除菜品.swf
064-Ajax請求.swf
065-批量刪除數據庫記錄及冗餘圖片.swf
066-用戶列表製做.swf
067-訂單列表製做.swf
068-訂單列表數據綁定.swf
069-訂單明細.swf
070-訂單明細數據綁定.swf
071-訂單明細樣式控制.swf
072-訂單明細價格彙總.swf
073-更改訂單支付狀態.swf
074-刪除訂單信息.swf
075-退出系統.swf
076-建立基於RESTful的webapi項目.swf
077-添加類文件和配置數據庫鏈接字符串.swf
078-用戶註冊接口編寫及跨域請求解決方案.swf
079-登陸webApi編寫及WebApiConfig增長action配置避免多個post方法衝突.swf
080-獲取菜品列表WebApi編寫.swf
081-返回絕對路徑的圖片地址.swf
082-根據ID查找菜品明細接口編寫.swf
083-添加菜品到購物車接口編寫.swf
084-測試購物車接口.swf
085-把菜品從購物車裏面移除的接口編寫.swf
086-測試移除菜品.swf
087-編寫下訂單的接口.swf
088-訂單明細添加.swf
089-清空購物車.swf
090-測試下訂單的接口.swf
091-獲取訂單列表接口.swf
092-根據訂單id獲取訂單詳情.swf
093-發佈webapi.swf
094-發佈後臺管理系統和配置接口圖片路徑.swf
095-數據雙向綁定.swf
096-VUE實現頁面跳轉.swf
097-用戶名和密碼必填的驗證.swf
098-安裝axios.swf
099-利用axios發起ajax請求.swf
100-vue處理ajax返回結果數據並存儲在localStorage中.swf
101-vue實現頁面跳轉並傳遞參數.swf
102-測試頁面跳轉效果.swf
103-用戶註冊.swf
104-this和that.swf
105-調用webapi獲取菜品列表.swf
106-VUE根據webapi數據渲染菜品列表.swf
107-利用router-link跳轉頁面並傳遞參數.swf
108-菜品詳情數據綁定.swf
109-添加菜品到購物車.swf
110-vuex狀態管理.swf
111-vuex環境配置.swf
112-vuex提交狀態變動.swf
113-經過getters獲取狀態數據並提交.swf
114-多個頁面重複使用一個組件.swf
115-webapi新增接口.swf
116-從新發布webapi接口.swf
117-調用購物車接口返回已點的菜品.swf
118-顯示已點的菜品.swf
119-移除菜品.swf
120-給操做按鈕綁定點擊事件實現頁面跳轉.swf
121-頭部組件開發.swf
122-彙總購物車菜品價格.swf
123-使用watch監聽價格變化.swf
124-動態設置頁面標題.swf
125-返回上一步和進入控制面板.swf
126-返回按鈕和設置按鈕的顯示與隱藏.swf
127-調用API實如今線下單功能.swf
128-利用localStorage保存餐桌編號.swf
129-下單成功頁面導航.swf
130-邏輯判斷-沒有點菜的時候不能下單.swf
131-獲取個人訂單.swf
132-跳轉到訂單詳情頁面.swf
133-訂單詳情接口調用.swf
134-訂單詳情數據綁定.swf
135-控制面板導航功能開發.swf
136-完善Footer組件功能.swf
137-菜品詳情功能完善.swf
138-身份驗證禁止繞過登陸直接訪問內部頁面.swf
139-發佈VUE項目和測試項目功能.swf
140-優化服務器配置.swfsql

 

詳細目錄以下，須要視頻教程的朋友能夠加微信號:yyjcw10000 或者QQ:1416759661 vuex

https://www.yyjcw.com/html/ke/41.htmlvue-cli

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程