初學(xué)Vue(三) -- 前后端數(shù)據(jù)交互

Ethan815 發(fā)布于2019-08-23 18:29 / 901人閱讀

摘要：而我們自定義的對(duì)應(yīng)的是，對(duì)應(yīng)的是，獲得到的前端數(shù)據(jù)是用戶輸入雙向綁定到了實(shí)例的內(nèi)的，獲取到的數(shù)據(jù)是用戶輸入雙向綁定到的假設(shè)用戶輸入了是，是，那么判斷條件的代碼就是

推薦學(xué)了node.js、vue.js入門(mén)或了解普通js與node傳輸數(shù)據(jù)的觀看

在vue實(shí)例中用vue的方式將數(shù)據(jù)傳遞到后臺(tái)

完整html代碼

完整js代碼

利用插件vue-resource

在vue中并沒(méi)有方法讓我們進(jìn)行前后端數(shù)據(jù)交互，但是有個(gè)人寫(xiě)了個(gè)插件叫vue-resource，這個(gè)插件可以讓我們正常的進(jìn)行前后端數(shù)據(jù)交互

vue-resource下載

用cnpm/npm/bower 都可以下載這個(gè)插件

用cmd 進(jìn)入想要安裝的目錄底下后下載

下載代碼：

cnpm/npm/bower install vue-resource

$http 方法

下載完之后就可以設(shè)定一個(gè)事件讓登陸注冊(cè)觸發(fā)

首先要使用當(dāng)然是要先將插件的代碼鏈入

利用雙向綁定將前端數(shù)據(jù)在vue 實(shí)例中綁定

html部分：
用戶名：

密碼：



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

可以嘗試去掉vue-resource插件的鏈入，那么console.log(this.$http);就會(huì)失效，控制臺(tái)顯示undefined，因?yàn)?b>$http方法是由這個(gè)插件賦予的

vue-resource插件的用法

這個(gè)插件主要就是提供了個(gè)方法可以傳遞前后端數(shù)據(jù)，而這個(gè)方法也就是$http

方法后面接傳輸方式get/post

第一個(gè)參數(shù)放入node 寫(xiě)的地址

第二個(gè)參數(shù)以json 的形式放入數(shù)據(jù)名與數(shù)據(jù)

示范代碼接上文，默認(rèn)在方法內(nèi)開(kāi)始寫(xiě)：

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

在方法后面還能用then方法加入一個(gè)報(bào)錯(cuò)判斷，方法內(nèi)傳入兩個(gè)處理函數(shù)

第一個(gè)處理函數(shù)有個(gè)形參，形參是后臺(tái)定義的傳入信息，自定義的，根據(jù)你想要的可以更改判斷信息為任何條件，假設(shè)我們從后臺(tái)傳入的信息為一個(gè)json{"ok":1}

第一個(gè)函數(shù)的形參是后端發(fā)送給前端的一個(gè)數(shù)據(jù)包，里面包含了所有后端發(fā)送過(guò)來(lái)的數(shù)據(jù)，有一個(gè)data屬性是我們所需要的，是我們自定義send過(guò)來(lái)的，ok則是我們自定義的內(nèi)容

第二個(gè)處理函數(shù)則是如果信息無(wú)法傳入給后端的話怎么處理

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("傳輸失敗");
    });
}

第二個(gè)函數(shù)也可以不要，因?yàn)檫@是一個(gè)錯(cuò)誤處理函數(shù)，我們也可以用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("傳輸失敗");
    });
}

下面是后臺(tái)node 部分的代碼書(shū)寫(xiě)

要導(dǎo)入的模塊有：

express，body-parser

當(dāng)然，要先下載才能導(dǎo)入使用，下載方法也是用 cnpm/npm/bower 這幾個(gè)包管理器

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

導(dǎo)入完畢后設(shè)定一個(gè)接口號(hào)，前端$http方法內(nèi)的地址用到

server.listen(****);

再通過(guò)express() 的use 設(shè)定bodyparser 模塊解析方式為urlencoded()

server.use(bodyParser.urlencoded());

設(shè)定一個(gè)靜態(tài)訪問(wèn)路徑，用于本地服務(wù)器訪問(wèn)前端前端頁(yè)面

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

自定義一個(gè)用戶信息

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

將登陸代碼模塊我們?cè)O(shè)立一個(gè)特別的路徑來(lái)和注冊(cè)區(qū)分

因?yàn)榍岸嗽O(shè)定的傳輸方式是get，所以這里通過(guò)req.query來(lái)解析前端發(fā)送到后端的數(shù)據(jù)

判斷條件是，如果前端的user值作為json的key值或得到的json.user的value值恒等于前端的pass值則發(fā)送一個(gè)json數(shù)據(jù)，否則發(fā)送另一個(gè)json數(shù)據(jù)，這里發(fā)送的數(shù)據(jù)將在前端then方法的第一個(gè)參數(shù)傳入使用

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":"用戶名或密碼錯(cuò)誤"});
    }
})

判斷條件詳解

首先要知道json是鍵值對(duì)的形式key:value，可以用中括號(hào)[]代替.來(lái)訪問(wèn)到key所對(duì)應(yīng)的value。

而我們自定義的json key對(duì)應(yīng)的是bill，value對(duì)應(yīng)的是111，req.query.user獲得到的前端數(shù)據(jù)是用戶輸入雙向綁定到了vue實(shí)例的data內(nèi)的user，req.query.pass獲取到的數(shù)據(jù)是用戶輸入雙向綁定到data 的pass

假設(shè)用戶輸入了user是bill，pass是111，那么判斷條件的代碼就是

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

GPU云服務(wù)器云服務(wù)器 webrtc前后端交互 json數(shù)據(jù)前后交互 js前后臺(tái)數(shù)據(jù)交互 java 前后交互

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105325.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Ethan815

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Python：這是一個(gè)樸實(shí)無(wú)華的爬蟲(chóng)教程，就是有點(diǎn)養(yǎng)眼

閱讀 2260·2021-11-22 09:34
云主機(jī)怎么遠(yuǎn)程連接-云主機(jī)怎么遠(yuǎn)程操作？

閱讀 2035·2021-09-22 15:22
css布局：多列等高布局

閱讀 2032·2019-08-29 15:05
數(shù)組扁平化（將多維數(shù)組降維成一維數(shù)組）

閱讀 2122·2019-08-26 10:43
JS函數(shù)防抖動(dòng)

閱讀 3419·2019-08-26 10:26
初學(xué)Vue(三) -- 前后端數(shù)據(jù)交互

閱讀 902·2019-08-23 18:29
JavaScript大師必須掌握的12個(gè)知識(shí)點(diǎn)

閱讀 3532·2019-08-23 16:42
vue編寫(xiě)的移動(dòng)端條件搜索條組件

閱讀 2007·2019-08-23 14:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

初學(xué)Vue(三) -- 前后端數(shù)據(jù)交互

vue-resource下載

判斷條件詳解

相關(guān)文章

**react-redux-express異步前后端數(shù)據(jù)交互(面向初學(xué)者,高手勿進(jìn))**

前端資源收集整理

前端資源收集整理

前端資源收集整理

淺談前后端分離與實(shí)踐（一）

發(fā)表評(píng)論

0條評(píng)論

Ethan815

男|高級(jí)講師

TA的文章

Python：這是一個(gè)樸實(shí)無(wú)華的爬蟲(chóng)教程，就是有點(diǎn)養(yǎng)眼

云主機(jī)怎么遠(yuǎn)程連接-云主機(jī)怎么遠(yuǎn)程操作？

css布局：多列等高布局

數(shù)組扁平化（將多維數(shù)組降維成一維數(shù)組）

JS函數(shù)防抖動(dòng)