前端MVC Vue2學習總結（六）——axios與跨域HTTP請求、Lodash工具庫

来源:https://www.cnblogs.com/best/archive/2018/01/05/8202370.html
-Advertisement-
Play Games

一、axios Vue更新到2.0之後宣告不再對vue-resource更新，推薦使用axios，axios是一個用於客戶端與伺服器通信的組件，axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端javaScript工具。通俗來說可以實現客戶端請求伺服器端提供的服務 ...


一、axios

Vue更新到2.0之後宣告不再對vue-resource更新，推薦使用axios，axios是一個用於客戶端與伺服器通信的組件，axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端javaScript工具。通俗來說可以實現客戶端請求伺服器端提供的服務獲得數據。

源碼與幫助：https://github.com/axios/axios

伺服器端跨域支持請查看：http://www.cnblogs.com/best/p/6196202.html#_label2

1.1、特點

  • 從瀏覽器中創建 XMLHttpRequest
  • 從 node.js 發出 http 請求
  • 支持 Promise API
  • 攔截請求和響應
  • 轉換請求和響應數據
  • 取消請求
  • 自動轉換JSON數據
  • 客戶端支持防止 CSRF/XSRF

1.2、瀏覽器相容性

1.3、依賴辦法

$ npm install axios
$ cnpm install axios //taobao
$ bower install axios
或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 瀏覽器可以引入js文件

1.4、快速入門

1.4.0、伺服器端

控制器：

package com.zhangguo.springmvc08.controller;

import com.zhangguo.springmvc08.entity.User;
import com.zhangguo.springmvc08.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;

@RestController
@RequestMapping(path = "/emps")
public class EmpController extends BaseController {

    @Autowired
    UserService userService;

    @RequestMapping(path = "")
    public AjaxState getAllEmps(HttpServletRequest request, HttpServletResponse response) {
        List<User> users=userService.queryAllUsers();
        boolean result=users!=null;
        return new AjaxState(result?"success":"error",users,result?"獲得數據成功！":"獲得數據失敗!");
    }

    @RequestMapping(path = "/{id}", method = RequestMethod.GET)
    public AjaxState getEmpById(@PathVariable int id) {
        User user=userService.getUserById(id);
        boolean result=user!=null;
        return new AjaxState(result?"success":"error",user,result?"獲得數據成功！":"獲得數據失敗!");
    }

    @RequestMapping(path = "/getEmpById", method = RequestMethod.GET)
    public AjaxState getEmpById(HttpServletRequest request) {
        int id=Integer.parseInt(request.getParameter("id"));
        User user=userService.getUserById(id);
        boolean result=user!=null;
        return new AjaxState(result?"success":"error",user,result?"獲得數據成功！":"獲得數據失敗!");
    }

    @RequestMapping(path = "", method = RequestMethod.POST)
    public AjaxState addEmp(@RequestBody User user) {
        boolean result=userService.addUser(user);
        return new AjaxState(result?"success":"error",user,result?"添加成功！":"添加失敗");
    }

    @RequestMapping(path = "", method = RequestMethod.PUT)
    public AjaxState updateEmp(@RequestBody User user) {
        boolean result=userService.editUser(user);
        return new AjaxState(result?"success":"error",user,result?"修改成功！":"修改失敗");
    }

    @RequestMapping(path = "/{id}", method = RequestMethod.DELETE)
    public AjaxState deleteEmpById(@PathVariable int id) {
        Boolean result=userService.deleteUser(id);
        return new AjaxState(result?"success":"error",id,result?"刪除成功！":"刪除失敗");
    }

}

class  AjaxState{
    public String state;
    public Object data;
    public String message;

    public AjaxState(String state, Object data, String message) {
        this.state = state;
        this.data = data;
        this.message = message;
    }

    public AjaxState(){}
}

跨域設置（任選一種）：

方法1：Servlet，MVC都可以，Web.xml

    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>http://127.0.0.1:8020</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>POST,GET,OPTIONS,DELETE,PUT</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Content-Type,Accept,Origin,XRequestedWith,ContentType,LastModified</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <param-value>SetCookie</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>

    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

方法2：Spring MVC，修改Spring 配置文件，低Spring版本不支持

    <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="http://127.0.0.1:8020"
                     allowed-methods="POST,GET, OPTIONS,DELETE,PUT"
                     allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With"
                     allow-credentials="true"/>
    </mvc:cors>

1.4.1、發送Get請求

//向具有指定ID的用戶發出請求
axios.get('/user?ID=123')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
　　console.log(error);
});
 
//也可以通過 params 對象傳遞參數
axios.get('/user', {
params: {
　　ID: 12345
}
})
.then(function (response) {
　　console.log(response);
})
.catch(function (error) {
　　console.log(error);
});

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>axios</title>
    </head>
    <body>
        <div id="vm">
            <button type="button" @click="get">Get請求</button>
            <button type="button" @click="getParam">Get請求帶參數</button>
            <h3>{{msg}}</h3>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    msg: ""
                },
                methods: {
                    get: function() {
                        var that = this;
                        axios.get("http://localhost:8080/mvc08/emps").then(function(response) {
                            console.log(response);
                            //this.msg=JSON.stringify(response.data);  //錯誤this指向window
                            vm.msg = JSON.stringify(response.data);
                            that.msg = JSON.stringify(response.data);
                        }).catch(function(error) {
                            console.log(error);
                        })
                    },
                    getParam: function() {
                        axios.get("http://localhost:8080/mvc08/emps/getEmpById", {
                            params: {
                                id: 1
                            }
                        }).then(function(response) {
                            vm.msg = JSON.stringify(response.data);
                        }).catch(function(error) {
                            console.log(error);
                        })
                    }
                }
            });
        </script>
    </body>
</html>

結果：

get請求

帶參數：

預設的content-type為：application/json;charset=UTF-8

1.4.2、發送Post請求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

示例(添加一個用戶)：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>axios</title>
    </head>

    <body>
        <div id="vm">
            <button type="button" @click="get">Get請求</button>
            <button type="button" @click="getParam">Get請求帶參數</button>
            <button type="button" @click="post">Post請求帶參數</button>
            <h3>{{msg}}</h3>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    msg: ""
                },
                methods: {
                    get: function() { //get請求
                        var that = this;
                        axios.get("http://localhost:8080/mvc08/emps").then(function(response) {
                            console.log(response);
                            //this.msg=JSON.stringify(response.data);  //錯誤this指向window
                            vm.msg = JSON.stringify(response.data);
                            that.msg = JSON.stringify(response.data);
                        }).catch(function(error) {
                            console.log(error);
                        })
                    },
                    getParam: function() { //帶參數的get
                        axios.get("http://localhost:8080/mvc08/emps/getEmpById", {
                            params: {
                                id: 1
                            }
                        }).then(function(response) {
                            vm.msg = JSON.stringify(response.data);
                            console.log(response);
                        }).catch(function(error) {
                            console.log(error);
                        })
                    },
                    post: function() { //post
                        var user = {
                            "id": 1,
                            "name": "張一三",
                            "birthday": "1998-09-08",
                            "address": "中國北京",
                            "phone": "18989891122"
                        };
                        
                        axios
                        .post("http://localhost:8080/mvc08/emps", user)
                        .then(function(response) {
                            vm.msg=response.data.data;
                            console.log(response);
                        })
                        .catch(function(error){
                            console.log(error);
                        });
                    }
                }
            });
        </script>
    </body>

</html>
View Code

結果：

1.4.3、發送多個併發請求

function getUserAccount() {
return axios.get('/user/12345');
}
 
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//兩個請求現已完成
}));

示例（同時獲得編號為1與編號為2的學生，通過兩個請求完成）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>axios</title>
    </head>
    <body>
        <div id="vm">
            <button type="button" @click="all">all請求（併發請求）</button>
            <h3>{{msg}}</h3>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    msg: ""
                },
                methods: {
                    all:function(){
                        //獲得用戶對象1
                        var getUser1=function(){
                            return axios.get("http://localhost:8080/mvc08/emps/1");
                        };
                        //獲得用戶對象2
                        var getUser2=function(){
                            return axios.get("http://localhost:8080/mvc08/emps/2");
                        };
                        //併發請求處理結果
                        axios.all([getUser1(),getUser2()])
                        .then(axios.spread(function(response1,response2){
                            var result="";
                            result+=JSON.stringify(response1.data.data);
                            result+=JSON.stringify(response2.data.data);
                            vm.msg=result;
                        }))
                        .catch(function(error){
                            console.log(error);
                        });
                    }
                }
            });
        </script>
    </body>
</html>

結果：

1.4.4、發送Put請求

示例（修改編號為1的用戶信息）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>axios</title>
    </head>

    <body>
        <div id="vm">
            <button type="button" @click="all">all請求（併發請求）</button>
            <button type="button" @click="put">put請求（修改數據）</button>
            <h3>{{msg}}</h3>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    msg: ""
                },
                methods: {
                    all: function() {
                        //獲得用戶對象1
                        var getUser1 = function() {
                            return axios({
                                url:"http://localhost:8080/mvc08/emps/1",
                                method:"get"
                            });
                        };
                        //獲得用戶對象2
                        var getUser2 = function() {
                            return axios.get("http://localhost:8080/mvc08/emps/2");
                        };
                        //併發請求處理結果
                        axios.all([getUser1(), getUser2()])
                            .then(axios.spread(function(response1, response2) {
                                var result = "";
                                result += JSON.stringify(response1.data.data);
                                result += JSON.stringify(response2.data.data);
                                vm.msg = result;
                            }))
                            .catch(function(error) {
                                console.log(error);
                            });
                    },
                    put: function() {
                        var user = {
                            "id": 1,
                            "name": "張學霸",
                            "birthday": "1988-09-08",
                            "address": "中國珠海",
                            "phone": "13223456786"
                        };
                        axios.put("http://localhost:8080/mvc08/emps",user)
                        .then(r=>vm.msg=r.data.data)
                        .catch(e=>console.log(e));
                    }
                }
            });
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SQL Server 2016 行級別許可權控制
    背景 假如我們有關鍵數據存儲在一個表裡面，比如人員表中包含員工、部門和薪水信息。只允許用戶訪問各自部門的信息，但是不能訪問其他部門。一般我們都是在程式端實現這個功能，而在sqlserver2016以後也可以直接在資料庫端實現這個功能。 解決 安全已經是一個數據方面的核心問題，每一代的MS資料庫都有關 ...
  • 時空大數據的內容
    智慧城市時空大數據與雲平臺建設技術大綱（2017年8月版） ...
  • 講述Sagit.Framework解決：雙向引用導致的IOS記憶體泄漏（上）
    今天不寫教程，和大伙分享一下IOS在記憶體泄漏方面的文章..... ...
  • Android破解學習之路（六）——Android游戲 方塊冒險 破解
    前言： 可能大家看到標題會有些懵逼，以為我發錯了，這應該是五才對吧，其實，五我已經發了，不過被管理大大移出首頁了，不知道這一篇是不是也會是同樣的命運。。 今天所寫的是關於支付寶內購的破解 原版 鏈接: https://pan.baidu.com/s/1nuUEnyh 密碼: 6666 破解版 鏈接: ...
  • 在android studio中配置運行時簽名
    做項目的時候，有時需要用到第三方介面，而基本第三方介面都是要求我們要先進行簽名。結果每次調試都得手動進行簽名一次，實在麻煩。所以android studio提供了一種在運行的時候自動進行簽名的方法，在build.gradle（Module：app）中進行配置，剛剛開始我們不知道如何直接用代碼配置，那 ...
  • 高仿二次元網易GACHA
    高仿二次元網易GACHA，所有介面均通過Charles抓取而來,圖片資源通過 https://github.com/yuedong56/Assets.carTool 工具提取。 詳情見github地址：https://github.com/Brances/ZMBCY iOS 本項目全部由純代碼編寫， ...
  • 開發中關於Git那些事(續:Git變基)
    其實上一篇寫的內容僅僅是Git的冰山一角，如果你認為Git就是簡簡單單的幾行命令，那隻能說明你還沒有真正瞭解Git這個強大的內容定址文件系統。這篇文章，還是接著介紹一些實用但是很少有人知曉的一些命令，好比說具有魔性的Git變基(git rebase)以及常用的GUI。 我之前詢問過一些人，討論到Gi ...
  • 【讀書筆記】iOS-MVC
    用戶的每一個動作都是以一個View的Action方式傳遞給Controller,然後，Controller再發送消息通知Model做出響應的邏輯處理，當Model層面上的業務邏輯處理有了結果之後，Model會以通知（Notification）的形式能知Controller.這時Controller收 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類