脚本宝典收集整理的这篇文章主要介绍了

vue+node全栈移动商城【4】-创建get、send接口,接收数据更新视图

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

上一节里咱们已经实现了第一个接口,并在请求接口时收到了返回的{a:123},那么接下来,咱们就实现一个简单的get、set接口,并通过返回的数据来更新页面视图。

图片描述

这是我们要实现的页面视图,代码如下,

<template>
  <div>
    <h1>{{ msg }}</h1>

    <div class="wrapDiv">
          <input type='text' class='leftDiv' ref='inputRef' placeholder="请输入" />
          <div class="rightDiv"> {{txt_data}} </div>
    </div>

    <van-button type="danger" @click="sendBtn">发送</van-button>
    <van-button type="danger" @click="getBtn">获取</van-button>
  </div>
</template>

基本的操作是这样,

点击发送按钮时,会把你输入左边input的数据传递至node处理;
点击获取按钮时,会获取你在node里处理之后的数据,并更新在右边的input里

Js部分的代码是这样,

sendBtn(){
    let _val = this.$refs.inputRef.value;
    // console.log( _val )

    axios.get('http://localhost:5678/node_a',{
                params:{ xxval:_val }
          });
},
getBtn(){
    axios.get('http://localhost:5678/node_b')
          .then( _d=>{
                console.log( _d.data );
                this.txt_data = _d.data;
          })
}

从上面的两个方法来看,需要二个接口在node里,

// 用来临时的存数据
var _xxObj = null;

// 第一个nodeJs接口,接收
app.get('/node_a', function(req, res){
    console.log( req.query.xxval );
    _xxObj = req.query;
    res.end();
});

// 第二个接口,发送
app.get('/node_b', function(req, res){
    res.send( _xxObj.xxval + '----随便什么东西' )
});

这样,当你点击第一个按钮的时候,调用了node_a接口。因为你是get语法,所以数据是在req.query里,得到之后数据之后,把数据存在公共变量里,因为这里没有使用数据库。


你点击第二个按钮的时候,其实就是根据js的作用域的原理,在函数内可以获得函数之外的变量的值,把结果进行字符串的拼写之后res.send返回到客户端。

运行之后,就是这样,
图片描述

这一节的内容很简单,同学们可以自己实现一下,之后就基本能理解,js+node的前后端交互思路了。

图片描述

总结

以上是脚本宝典为你收集整理的

vue+node全栈移动商城【4】-创建get、send接口,接收数据更新视图

全部内容,希望文章能够帮你解决

vue+node全栈移动商城【4】-创建get、send接口,接收数据更新视图

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过