vue+node全栈移动商城【4】-创建get、send接口，接收数据更新视图

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

vue+node全栈移动商城【4】-创建get、send接口，接收数据更新视图相关推荐

vue+node全栈移动商城【10】注册页面传值到node中间件
上一节咱们已经实现了注册页面的基本结构,在这一节,咱们把注册页面的值,传入到nodeJs的中间件中,为接下来的保存用户注册信息做好准备. 我们已经在vant的组件输入框上,以v-model的方式双向绑 ...
vue+node全栈移动商城【6】-node接口配置文件
接上一节,咱们现在已经有了二个接口,分别是, app.get('/node_a' 和 app.get('/node_a' 以后还会有更多的接口,那么有必要在一个单独的地方来统一管理所有的接口. 在sr ...
Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(一)
文章目录 [全栈之巅]Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(一) 工具安装和环境搭建初始化项目基于ElementUI的后台管理基础界面搭建创建分类(客户端) 创建分类 ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（4.1-4.10）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(4.1-4.10) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://git ...
Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台
前言最近在跟着Johnny的全栈之巅系列视频教程学习使用NodeJS+Express+Element-UI+MongoDB等开发王者荣耀,服务端server,移动端web,admin,学到了不少东西 ...
学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（2.10-2.12）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gitee.com/blaunic ...
学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（2.8-2.9）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gitee.com/blaunic ...
学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记（1.1-2.5）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gitee.com/blaunic ...
【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（3.13-3.15）
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.13-3.15) 本项目是学习Bilibili 全栈之巅视频教程相关源码和体会 https://gi ...

vue+node全栈移动商城【4】-创建get、send接口，接收数据更新视图

vue+node全栈移动商城【4】-创建get、send接口，接收数据更新视图相关推荐

最新文章

热门文章