- 推荐学了node.js、vue.js入门或了解普通js与node传输数据的观看
在vue实例中用vue的方式将数据传递到后台
利用插件vue-resource
在vue中并没有方法让我们进行前后端数据交互，但是有个人写了个插件叫
vue-resource，这个插件可以让我们正常的进行前后端数据交互
vue-resource下载
- 用cnpm/npm/bower 都可以下载这个插件
- 用cmd 进入想要安装的目录底下后下载
下载代码：
cnpm/npm/bower install vue-resource$http 方法
下载完之后就可以设定一个事件让登陆注册触发
- 首先要使用当然是要先将插件的代码链入
<script src="vue-resource.js"></script>
- 利用双向绑定将前端数据在vue 实例中绑定
html部分：
用户名：<input type="text" v-model="user"><br/>
密码：<input :type="passwordBtn" v-model="password"><br/>
<input type="button" value="submit" @click="login">
js部分：
new Vue({
el:'body',
data:{
user:'',
password:'',
},
methods:{
login:function(){
console.log(this.$http);
}
}
})- 可以尝试去掉
vue-resource插件的链入，那么console.log(this.$http);就会失效，控制台显示undefined，因为$http方法是由这个插件赋予的
vue-resource插件的用法
- 这个插件主要就是提供了个方法可以传递前后端数据，而这个方法也就是
$http - 方法后面接传输方式
get/post - 第一个参数放入node 写的地址
- 第二个参数以json 的形式放入数据名与数据
示范代码接上文，默认在方法内开始写：
login():function{
this.$http.get('http://localhost:****',{
user:this.user,
pass:this.pass
});
}- 在方法后面还能用
then方法加入一个报错判断，方法内传入两个处理函数 - 第一个处理函数有个形参，形参是后台定义的传入信息，自定义的，根据你想要的可以更改判断信息为任何条件，假设我们从后台传入的信息为一个json
{'ok':1} - 第一个函数的形参是后端发送给前端的一个数据包，里面包含了所有后端发送过来的数据，有一个
data属性是我们所需要的，是我们自定义send过来的，ok则是我们自定义的内容 - 第二个处理函数则是如果信息无法传入给后端的话怎么处理
login():function{
this.$http.get('http://localhost:****',{
user:this.user,
pass:this.pass
}).then(function(dat){
if(dat.data.ok==1){
alert('登陆成功');
}else{
alert('登陆失败');
}
},function(){
console.log('传输失败');
});
}- 第二个函数也可以不要，因为这是一个错误处理函数，我们也可以用
then方法的catch方法，效果一样
login():function{
this.$http.get('http://localhost:****',{
user:this.user,
pass:this.pass
}).then(function(dat){
if(dat.data.ok==1){
alert('登陆成功');
}else{
alert('登陆失败');
}
}).catch(functino(){
console.log('传输失败');
});
}下面是后台node 部分的代码书写
要导入的模块有：
- express，body-parser
- 当然，要先下载才能导入使用，下载方法也是用
cnpm/npm/bower这几个包管理器
var express=require('express');
var bodyParser=require('body-parser');
var server = express();- 导入完毕后设定一个接口号，前端
$http方法内的地址用到
server.listen(****);
- 再通过express() 的use 设定bodyparser 模块解析方式为urlencoded()
server.use(bodyParser.urlencoded());
- 设定一个静态访问路径，用于本地服务器访问前端前端页面
server.use(express.static('./'));
- 自定义一个用户信息
var json = {
'bill':'111'
}- 将登陆代码模块我们设立一个特别的路径来和注册区分
- 因为前端设定的传输方式是
get，所以这里通过req.query来解析前端发送到后端的数据 - 判断条件是，如果前端的
user值作为json的key值或得到的json.user的value值恒等于前端的pass值则发送一个json数据，否则发送另一个json数据，这里发送的数据将在前端then方法的第一个参数传入使用
server.use('/a',function(req,res){
console.log(req.query);
if(json[req.query.user]==req.query.pass){
res.send({ok:1,'msg':'登陆成功'});
}else{
res.send({ok:0,'msg':'用户名或密码错误'});
}
})判断条件详解
- 首先要知道json是键值对的形式
key:value，可以用中括号[]代替.来访问到key所对应的value。 - 而我们自定义的json
key对应的是bill，value对应的是111，req.query.user获得到的前端数据是用户输入双向绑定到了vue实例的data内的user，req.query.pass获取到的数据是用户输入双向绑定到data 的pass - 假设用户输入了user是bill，pass是111，那么判断条件的代码就是
json[bill]==111 =》111==111
