vue点餐系统开发

其他 2018-07-29 10:17:02 阅读次数: 0

随着互联网+的兴起，越来越多的餐饮店也开始信息化，比如利用互联网进行点餐。信息化对于很多企业来说，成本高，开支大，对于一些中小型餐饮店，想做却又不想投入过多的财力。如何实现投入少，又能解决网上点餐，手机扫码下就能下单的功能呢？为此夜鹰教程网特别录制了一套视频教程供大家学习。

本套教程以点餐系统为例，讲解了使用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

关键代码如下：

用户注册页：

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

详细目录如下，需要视频教程的朋友可以加微信号:yyjcw10000 或者QQ:1416759661 

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

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-优化服务器配置.swf

详细目录如下，需要视频教程的朋友可以加微信号:yyjcw10000 或者QQ:1416759661 

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

猜你喜欢

转载自www.cnblogs.com/yyjcw/p/9384295.html
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022