Vue+node全栈手机商城【4】——创建get和send接口，接收数据更新视图

上一节我们已经实现了第一个接口，并在请求接口时接收到返回的{a:123}，那么接下来，我们实现一个简单的get和set接口，通过返回的数据更新pageview。这就是我们要实现的页面视图，代码如下，基本操作就是这样，当你点击发送按钮，它会将你输入到左边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+'----anything')});这样，当你点击第一个按钮的时候，会调用node_a接口，因为你使用的是get语法，所以数据在req.query中。拿到数据后，将数据存入公共变量中，因为这里没有用到数据库。当你点击第二个按钮的时候，其实根据js的作用域原则，可以在函数中获取函数外变量的值，将结果拼写成字符串，返回res.send给客户端。运行后是这样的。本节内容非常简单。同学们可以自己实现一下，就可以基本了解js+node的前后端交互思路了。