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

忘是亡心i 2021-09-18 08:42 128阅读 0赞

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