VUE点餐系统开发（完整版包含前后端和数据库）

本例子中使用vue脚手架构建SPA项目,详细演示了vue组件开发，组件之间的参数传递、表单验证、数据双向绑定、列表渲染、使用VUEX进行全局变量状态控制、使用axios与webapi进行数据交换，此教程不仅仅讲解了前端，还深入讲解了数据库设计及后台管理系统开发，例如后台登录模块、产品发布模块、订单管理模块、用户管理等模块等，为了演示接口创建和调用，全程演示了webapi的创建和部署。通过本套教程的

夜鹰教程网

4771人浏览 · 2020-04-18 18:10:33

夜鹰教程网 · 2020-04-18 18:10:33 发布

先看界面：

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

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>

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

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>

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

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

.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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^