上一节里咱们已经实现了第一个接口,并在请求接口时收到了返回的{a:123},那么接下来,咱们就实现一个简单的get、set接口,并通过返回的数据来更新页面视图。
这是我们要实现的页面视图,代码如下,
{ { msg }}
{ {txt_data}}发送 获取
基本的操作是这样,
点击发送按钮时,会把你输入左边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的前后端交互思路了。