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的前後端交互思路了。