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