初学Vue(三) -- 前后端数据交互
栏目: JavaScript · 发布时间: 5年前
内容简介:在vue中并没有方法让我们进行前后端数据交互,但是有个人写了个插件叫下载代码:
- 推荐学了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
示范代码接上文,默认在方法内开始写:
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 部分的代码书写
要导入的模块有:
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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员2005精华本
《程序员》杂志社 / 电子工业 / 2006-1 / 45.00元
本书为集结了《程序员》杂志与《msdn开发精选》杂志精华。分上、下两册,内容包括人物&报道、管理与实践、程序员手册、年鉴、《程序员》技术专题、《msdn开发精选》文章精选等。一起来看看 《程序员2005精华本》 这本书的介绍吧!