您的位置:首页 > 产品设计 > UI/UE

vue实现数据的绑定以及如何进行和后台php就行数据的交互

2018-01-27 13:30 891 查看
用vue实现登录的简单的页面对了,我这个是直接下载了vue.min.js和vue-resource.min.js这两个文件到我自己的框架上面,你们也可以直接引用线上的代码如下所示:
<style>
body{
background-color:#92d2af;
}
</style>
<h2align="center">登录系统</h2>
<bodyid="app">
<divalign="center"class="ab">
<p>
用户名:<inputtype="text"v-model="zhanghao"placeholder="输入用户名">
</p>
<p>密码 :<inputtype="password"v-model="mima"placeholder="输入密码"></p>

<!--<inputtype="reset"value="重置">-->
<!--<button@click="register">重置</button>-->
<button@click="login">登录</button>

</div>
<script>
Vue.http.options.emulateJSON=true;//这个的设置了提交的方式的是post的方式提交
varvue=newVue({//这个是实现对数据的绑定
el:'#app',
data:{
zhanghao:"",
mima:""
},
methods:{
login:function(){
//console.log("你好!");

this.$http.post("/application/huoqu",{//这里是将表单的数据提交到该地址
zhanghao:this.zhanghao,//我将表单的两个文本传过去
mima:this.mima
}).then(function(data){//这个是获取到了刚传过去文件该文件的整个数据
if(data.body.results)//如果返回的数据的值是true那么久说明登录成功
{//获取传过去文件的返回值,如果是为true的话就跳转到登录成功的页面
console.log(data.body.results);
window.location.href="/application/bbb";
}
//console.log(data.body.result);
//window.location.href="/application/aaa";
else{//反之则跳转到失败的页面
con
a9a0
sole.log(data.body.results);
window.location.href="/application/aaa";
}
})

}
}
})
</script>
<h5align="center"><ahref="http://zf11.com/application/sign">返回注册</a></h5>
</body>
--------------------------------------------------------------------------------------------
对于后台,我是通过php的zf框架写的,所以可能会有所不同,但是在其他应该也是这样的思路:
returnnewJsonModel(array('results'=>false));
这样,在前台能获取到我的results的值

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  第一次