2. 程式人生 > >點餐系統開發簡單總結

點餐系統開發簡單總結

阿新 • • 發佈：2019-01-05

本例子中使用vue腳手架構建SPA專案,詳細演示了vue元件開發，元件之間的引數傳遞、表單驗證、資料雙向繫結、列表渲染、使用VUEX進行全域性變數狀態控制、使用axios與webapi進行資料交換，此教程不僅僅講解了前端，還深入講解了資料庫設計及後臺管理系統開發，例如後臺登入模組、產品釋出模組、訂單管理模組、使用者管理等模組等，為了演示介面建立和呼叫，全程演示了webapi的建立和部署。通過本套教程的學習，你不僅可以學到vue的高階知識，還能學到資料庫設計、後臺管理系統開發、webapi的提供和呼叫等大型專案中必須掌握的關鍵技術。

歡迎廣大的程式設計愛好者和學員加微訊號yyjcw10000 或者 QQ：1416759661 進行技術交流。

先看介面：

基於VUE開發的，可能對於初學的朋友來說，有店困難，建議先學習下VUE基礎教程。

下面將分別介紹各模組：

一、註冊模組：

<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>
 

二、登入模組：

<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>

後續模組陸續更新。

最近開發比較忙碌，總是抽不出時間，可以先看下

相關推薦

點餐系統開發簡單總結

本例子中使用vue腳手架構建SPA專案,詳細演示了vue元件開發，元件之間的引數傳遞、表單驗證、資料雙向繫結、列表渲染、使用VUEX進行全域性變數狀態控制、使用axios與webapi進行資料交換，此教程不僅僅講解了前端，還深入講解了資料庫設計及後臺管理系統開發，例如後臺登入

小程序點餐系統開發軟件

自動生成 延伸 聯系 cnblogs 應用 小程序 速查 餐廳 元素 小程序點餐系統開發（陳琦：138-2848-7919可微）小程序點餐APP平臺，小程序點餐模式開發，小程序點餐系統模式，小程序點餐定制開發，小程序點餐商城開發，小程序點餐開發軟件 微信小

二維碼點餐系統開發app

公眾 打開 解決方案 營銷 門店 賬號 體驗 采集 平臺 二維碼點餐系統開發（陳琦：138-2848-7919可微）二維碼點餐模式開發，二維碼點餐系統平臺，二維碼點餐平臺APP，二維碼點餐定制開發，二維碼點餐軟件APP，二維碼點餐定制模式，二維碼點餐商城平臺。 微信自助點餐

基於Springboot+SpringCloud的微信點餐系統開發視頻教程

技術 pri 是我 o2o cloud 根據 redis 我們 分享 基於Springboot+SpringCloud的微信點餐系統開發視頻教程課程分享鏈接:https://pan.baidu.com/s/1q7h9zn8sGf_e0k38pc69tw 密碼:fk9w 隨

簡單的點餐系統

str lec count 組合 move count-1 添加 add box 使用了menuStrip 菜單組件，">"為button1,"<"為button2，"下單"為button3 ，兩個ListBox 畫好菜單後 private void but

web前端實用案例-開發餓了麽LBS移動地圖點餐系統

前端 javascript 餓了麽 點餐 LBS 知識點：html/css，標簽運用、樣式講解、靜態開發布局、行業標準。JS基礎、if判斷、jq方法 Dom操作、邏輯思維。 html代碼： <div class="top"> <div class=

開發一個小程序點餐系統多少錢？

功能 方便 永久 技術 窗口 簡單 登錄 div pla 餐飲行業開發一個類似美團的點餐外賣小程序，屬於自己的平臺，不需要繳納各種費用，而且背靠微信，有充足的流量為後盾，可謂一舉多得。那麽小程序點餐系統多少錢？開發小程序+點餐系統價格多少？ 微信點餐外賣小程序優勢：

SpringBoot微信點餐系統—2、開發環境的搭建，3、新建專案

2.1匯入已裝好的虛擬機器，需要安裝virtual box（報記憶體不能writen錯誤，後面使用VMware） 2.2虛擬機器說明文件 2.3網路配置 橋接網路→全部允許 保證虛擬機器與本機ping的通 2.4試試虛擬機器中的應用 2.4.1

SpringBoot 微信點餐系統學習記錄六-訂單表和訂單詳情表的後端開發

在dataobject資料夾建立訂單表和訂單詳情表的實體類 package com.imooc.dataobject; import com.imooc.enums.OrderStatusEnum; import com.imooc.enums.PayStatusEnum; impor

微信點餐系統（三）-開發環境配置

name mir 網絡配置 8.0 本地 ava 查看 col rem 開發環境配置： 虛擬機是課程提供的，裏面軟件都已經配置好 虛擬機配置： 虛擬機說明文檔 VitualBix-6.0.0 虛擬機系統 centos7.3 賬號 root 密碼123456 包括

微信點餐系統技術總結

1.角色劃分      買家端(手機端)  賣家端(PC端)2.功能模組劃分      詳細設計個各個功能模組        買家         賣家   商品: 商品列表資料   訂單: 訂單建立  訂單查詢 訂單取消 ...   類目: 訂單管理   商品管理 類目管理

外賣點餐系統開發平臺app

行業 針對 引導 平臺 優勢 軟件開發 都得 商城系統 評價 外賣點餐系統APP，外賣點餐軟件開發（陳琦：138-2848-7919可微）外賣點餐模式定制，外賣點餐平臺開發，外賣點餐送餐 微信小法度模範相對付這麽多天的一個快速成長，相信年夜家都對小法度模範有了必然的了解。知

小程序點餐系統app平臺

一個 edit div 展現 朋友 餐廳 人性 線上 一鍵 微信小程序已經上線半年了（陳琦：138-2848-7919 可微）在過去的半年裏這個超級流量入口微信小程序在不斷的完善，不斷的開放多種功能，從而實現顛覆線下實體的夢想，那麽對於餐飲行業如何借助小程序這個超級流量入口

小程序點餐系統 市場潛力不可估量

系統開發 每到飯點時間，很多店裏定會坐滿人。顧客多，服務員人手不夠，呼喚N遍服務員，也不見有人來，於是就引發了店顧客的各種抱怨。作為餐企經營者，你一定深有體會。面對上述餐企經營者的痛點，我司推出了基於微信的小程序，即小程序點餐系統，桌臺掃碼點餐，免去顧客排隊等待的煩惱。 一、小程序點餐系

小程序點餐系統給你的效益大於你的支出

小程序點餐系統 微信小程序點餐系統 微信小程序開放公測以來，一夜之間在各種技術社區中就火起來啦。對於它 估計大家都不陌生了，對於它未來的價值就不再贅述，簡單一句話：可以把小程序簡單理解為一個新的操作系統、新的生態，未來大部分應用場景都將給予微信小程序進行研發,在

易客——無線點餐系統

適用於 img 更多 打印 mark 方式 ike 風格 HR 易客——無限點餐系統 項目地址 https://github.com/guoyaohua/yike 宣傳視頻 http://v.youku.com/v_show/id_XNzk0Mjk0NDMy.html 開

Spring Boot企業微信點餐系統-第一章-課程介紹

win maven 開發環境 ast 介紹 前端 pri 系統 詳細說明 一、項目簡介——技術要點 前端和後端： 後端主要技術： 微信接口技術 微信支付 微信掃碼登錄 微信模板消息推送 開發環境 但實際上我用的環境和這上面還是有點不一樣，我服務器用的是win，到

微信小程序-掃碼點餐系統設計

設計 小程序 點餐 規格 程序 消費 信號 備註 狀態 實體: 　　消費者(id,微信號) 　　商家(id,商家名,商家簡介,營業執照) 　　菜單(id,商家,菜品名,菜品介紹,菜品照片,大,中,小) 　　訂單(id,商家,消費者,創建時間,數量,狀態,總價,收付款,,完成

玩轉個性化餐廳，微信掃碼點餐系統

並且 模式 完成 更多 速度 下單 人力 市場 門店 餐飲成本不斷上升，競爭又持續加劇。如何能降低餐飲成本，保持競爭優勢？這是所有餐飲老板頭疼的問題。傳統點餐流程，大概是以下幾個步驟，服務員詢問顧客是否需要點餐、為顧客點餐、確認顧客所點的菜品、將菜單拿到後廚。這些服務都要由

大學食堂餐飲窗口使用的觸摸屏點餐系統

簡單 ESS 軟件 RoCE 資料 blog 51cto 分享圖片 watermark 軟件功能實用、操作簡單、數據安全學習資料瀏覽大學食堂餐飲窗口使用的觸摸屏點餐系統