初學Vue(三) -- 前后端數據交互

Ethan815 發布于2019-08-23 18:29 / 896人閱讀

摘要：而我們自定義的對應的是，對應的是，獲得到的前端數據是用戶輸入雙向綁定到了實例的內的，獲取到的數據是用戶輸入雙向綁定到的假設用戶輸入了是，是，那么判斷條件的代碼就是

推薦學了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 方法

下載完之后就可以設定一個事件讓登陸注冊觸發

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

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

html部分：
用戶名：

密碼：



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

云服務器 GPU云服務器 webrtc前后端交互 json數據前后交互 js前后臺數據交互 java 前后交互

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105325.html

react-redux-express異步前后端數據交互(面向初學者,高手勿進)

摘要：花了整整三天的時間來解決一個非常非常小的問題想要把一點心得體會記錄下來首先是問題的提出前端如果是后端是如何進行數據的交互總體思路以前接觸的時候前端模板用的是那時候就有些不理解的地方最為不理解的幾個問題是前端和后端怎么配合特別是前端特別復雜的花了整整三天的時間來解決一個非常非常小的問題.想要把一點心得體會記錄下來.首先是問題的提出:前端如果是react,后端是express,如何進行數...

KaltZK 2019-08-19 18:44 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

awesome23 2019-08-20 18:23 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

antyiwei 2019-08-29 13:03 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

KavenFan 2019-08-01 17:16 評論0 收藏0
淺談前后端分離與實踐（一）

摘要：前后端的界限是按照瀏覽器和服務器的劃分。前后端彼此互不關聯。關于作者本文部分圖片段落參考文章實踐中的前后端分離。淘寶前后端分離實踐本文源碼詳見服務端代碼。一、起源（故事純屬虛構，如有雷同，純屬巧合）傳說在很久很久以前，我們有志之士有了個創業的想法，于是乎開始了自己的創業之夢，但是人手不足啊，于是乎所有角色老子一個人全包了： Roles: PM, DBA, RD, FED, Des...

dantezhao 2019-08-01 17:46 評論0 收藏0