初学Vue(三) -- 先后端数据交互

• 推荐学了node.js、vue.js入门或了解普通js与node传输数据的观看

在vue实例中用vue的方式将数据传递到后台

• 完整html代码
• 完整js代码

利用插件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