共计 1178 个字符，预计需要花费 3 分钟才能阅读完成。
上一节里咱们已经实现了第一个接口，并在请求接口时收到了返回的 {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 的前后端交互思路了。