博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue+node全栈移动商城【4】-创建get、send接口,接收数据更新视图
阅读量:5960 次
发布时间:2019-06-19

本文共 1227 字,大约阅读时间需要 4 分钟。

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

图片描述

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

基本的操作是这样,

点击发送按钮时,会把你输入左边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的前后端交互思路了。

图片描述

转载地址:http://pguax.baihongyu.com/

你可能感兴趣的文章
ecshop验证码图片无法显示终极解决办法
查看>>
php中session_start()函数的作用
查看>>
Leetcode: Encode and Decode Strings
查看>>
iOS - Swift NSDate 时间
查看>>
采用ODAC,ODBC连接Oracle【转】
查看>>
多列等高布局
查看>>
C++语言基础(4)-构造函数和析构函数
查看>>
ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text
查看>>
对计算机软件专业学生的忠告
查看>>
Visual Studio 2010 单元测试目录(转)
查看>>
【JS】引用类型之Function
查看>>
【CSS3初探之背景边框相关】奇葩的与老大吵了一架,奇葩的五分钟offer,奇葩的一天。。。...
查看>>
剑指 offer set 2 从头到尾打印链表
查看>>
Java信号量Semaphore
查看>>
电子邮件的正则表达式
查看>>
ios使用openUrl进行应用跳转
查看>>
MySQL: Set user variable from result of query
查看>>
JVM调优之jstack找出最耗cpu的线程并定位代码
查看>>
厉害了,我的李楠!魅蓝E3发布会要上演“打飞机”?
查看>>
拿下中国物流界奥斯卡三项大奖,京东X事业部还有哪些黑科技
查看>>