初學Vue(三) -- 先後端數據交互

• 推薦學了node.js、vue.js入門或瞭解普通js與node傳輸數據的觀看

在vue實例中用vue的方式將數據傳遞到後臺

• 完整html代碼
• 完整js代碼

利用插件vue-resource

在vue中並無方法讓咱們進行先後端數據交互，可是有我的寫了個插件叫 vue-resource，這個插件可讓咱們正常的進行先後端數據交互

vue-resource下載

• 用cnpm/npm/bower 均可如下載這個插件
• 用cmd 進入想要安裝的目錄底下後下載

下載代碼：

cnpm/npm/bower install vue-resource

$http 方法

下載完以後就能夠設定一個事件讓登錄註冊觸發

• 首先要使用固然是要先將插件的代碼鏈入

<script src="vue-resource.js"></script>

• 利用雙向綁定將前端數據在vue 實例中綁定

html部分：
用戶名：<input type="text" v-model="user"><br/>
密碼：<input :type="passwordBtn" v-model="password"><br/>
<input type="button" value="submit" @click="login">

js部分：
new Vue({
    el:'body',
    data:{
        user:'',
        password:'',
    },
    methods:{
        login:function(){
            console.log(this.$http);
        }
    }
})

• 能夠嘗試去掉vue-resource插件的鏈入，那麼console.log(this.$http);就會失效，控制檯顯示undefined，由於$http方法是由這個插件賦予的

vue-resource插件的用法

• 這個插件主要就是提供了個方法能夠傳遞先後端數據，而這個方法也就是$http
• 方法後面接傳輸方式get/post
• 第一個參數放入node 寫的地址
• 第二個參數以json 的形式放入數據名與數據

示範代碼接上文，默認在方法內開始寫：

login():function{
    this.$http.get('http://localhost:****',{
        user:this.user,
        pass:this.pass
    });
}

• 在方法後面還能用then方法加入一個報錯判斷，方法內傳入兩個處理函數
• 第一個處理函數有個形參，形參是後臺定義的傳入信息，自定義的，根據你想要的能夠更改判斷信息爲任何條件，假設咱們從後臺傳入的信息爲一個json{'ok':1}
• 第一個函數的形參是後端發送給前端的一個數據包，裏面包含了全部後端發送過來的數據，有一個data屬性是咱們所須要的，是咱們自定義send過來的，ok則是咱們自定義的內容
• 第二個處理函數則是若是信息沒法傳入給後端的話怎麼處理

login():function{
    this.$http.get('http://localhost:****',{
        user:this.user,
        pass:this.pass
    }).then(function(dat){
        if(dat.data.ok==1){
        alert('登錄成功');
        }else{
        alert('登錄失敗');
        }
    },function(){
        console.log('傳輸失敗');
    });
}

• 第二個函數也能夠不要，由於這是一個錯誤處理函數，咱們也能夠用then方法的catch方法，效果同樣

login():function{
    this.$http.get('http://localhost:****',{
        user:this.user,
        pass:this.pass
    }).then(function(dat){
        if(dat.data.ok==1){
        alert('登錄成功');
        }else{
        alert('登錄失敗');
        }
    }).catch(functino(){
        console.log('傳輸失敗');
    });
}

---

下面是後臺node 部分的代碼書寫

要導入的模塊有：

• express，body-parser
• 固然，要先下載才能導入使用，下載方法也是用 cnpm/npm/bower 這幾個包管理器

var express=require('express');
var bodyParser=require('body-parser');
var server = express();

• 導入完畢後設定一個接口號，前端$http方法內的地址用到

server.listen(****);

• 再經過express() 的use 設定bodyparser 模塊解析方式爲urlencoded()

server.use(bodyParser.urlencoded());

• 設定一個靜態訪問路徑，用於本地服務器訪問前端前端頁面

server.use(express.static('./'));

• 自定義一個用戶信息

var json = {
    'bill':'111'
}

• 將登錄代碼模塊咱們設立一個特別的路徑來和註冊區分
• 由於前端設定的傳輸方式是get，因此這裏經過req.query來解析前端發送到後端的數據
• 判斷條件是，若是前端的user值做爲json的key值或獲得的json.user的value值恆等於前端的pass值則發送一個json數據，不然發送另外一個json數據，這裏發送的數據將在前端then方法的第一個參數傳入使用

server.use('/a',function(req,res){
    console.log(req.query);
    if(json[req.query.user]==req.query.pass){
        res.send({ok:1,'msg':'登錄成功'});
    }else{
        res.send({ok:0,'msg':'用戶名或密碼錯誤'});
    }
})

判斷條件詳解

• 首先要知道json是鍵值對的形式key:value，能夠用中括號[]代替.來訪問到key所對應的value。
• 而咱們自定義的json key對應的是bill，value對應的是111，req.query.user得到到的前端數據是用戶輸入雙向綁定到了vue實例的data內的user，req.query.pass獲取到的數據是用戶輸入雙向綁定到data 的pass
• 假設用戶輸入了user是bill，pass是111，那麼判斷條件的代碼就是

json[bill]==111 =》111==111