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