上一节里我们已经实现了第一个接口，并在请求接口时收到了返回的{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的先后端交互思路了。