初学Vue三-前后端数据交互

40次阅读

共计 2577 个字符,预计需要花费 7 分钟才能阅读完成。

  • 推荐学了 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对应的是 billvalue 对应的是 111req.query.user 获得到的前端数据是用户输入双向绑定到了 vue 实例的 data 内的 user,req.query.pass获取到的数据是用户输入双向绑定到 data 的 pass
  • 假设用户输入了 user 是 bill,pass 是 111,那么判断条件的代码就是

json[bill]==111 =》111==111

正文完
 0