上一節裏我們已經實現了第一個接口，並在請求接口時收到了返回的{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的先後端交互思路了。