欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Spring Boot + Vue 前后端分離開發(fā)之前端網(wǎng)絡請求封裝與配置

 更新時間:2019年05月21日 10:17:39   作者:江南一點雨  
這篇文章主要介紹了Spring Boot + Vue 前后端分離開發(fā)之前端網(wǎng)絡請求封裝與配置方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下

前端網(wǎng)絡訪問,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,網(wǎng)絡訪問較多的采用 vue-resources,Vue2.0 之后,官方不再建議使用 vue-resources ,這個項目本身也停止維護,目前建議使用的方案是 axios。今天松哥就帶大家來看看 axios 的使用。

axios 引入

axios 使用步驟很簡單,首先在前端項目中,引入 axios:

npm install axios -S

裝好之后,按理說可以直接使用了,但是,一般在生產(chǎn)環(huán)境中,我們都需要對網(wǎng)絡請求進行封裝。

因為網(wǎng)絡請求可能會出錯,這些錯誤有的是代碼錯誤導致的,也有的是業(yè)務錯誤,不管是哪一種錯誤,都需要開發(fā)者去處理,而我們不可能在每一次發(fā)送請求時都去枚舉各種錯誤情況。

因此我們需要對前端請求進行封裝,封裝完成后,將前端錯誤統(tǒng)一處理,這樣,開發(fā)者只需要在每一次發(fā)送請求的地方處理請求成功的情況即可。

請求封裝

在 axios 中,我們可以使用 axios 自帶的攔截器來實現(xiàn)對錯誤的統(tǒng)一處理。

在 axios 中,有請求攔截器,也有響應攔截器。

請求攔截器中可以統(tǒng)一添加公共的請求參數(shù),例如單點登錄中前端統(tǒng)一添加 token 參數(shù)。

響應攔截器則可以實現(xiàn)對錯誤的統(tǒng)一處理。

另外一個需要注意的地方則是錯誤的展示需要使用一種通用的方式,而不可以和頁面綁定(例如,登錄失敗,在用戶名/密碼輸入框后面展示錯誤信息,不支持這種錯誤顯示方式),這里推薦使用 ElementUI 中的 Massage 來展示錯誤信息,這是一個頁面無關的組件。

封裝后的 axios 如下:

import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(config => {
 return config;
}, err => {
 Message.error({message: '請求超時!'});
})
axios.interceptors.response.use(data => {
 if (data.status && data.status == 200 && data.data.status == 500) {
 Message.error({message: data.data.msg});
 return;
 }
 if (data.data.msg) {
 Message.success({message: data.data.msg});
 }
 return data.data;
}, err => {
 if (err.response.status == 504 || err.response.status == 404) {
 Message.error({message: '服務器被吃了⊙﹏⊙∥'});
 } else if (err.response.status == 403) {
 Message.error({message: '權限不足,請聯(lián)系管理員!'});
 } else if (err.response.status == 401) {
 Message.error({message: err.response.data.msg});
 } else {
 if (err.response.data.msg) {
  Message.error({message: err.response.data.msg});
 }else{
  Message.error({message: '未知錯誤!'});
 }
 }
})

代碼解釋:

1.首先導入 axios 和 Massage 組件
2.接下來定義一個請求攔截器
3.最后定義一個響應攔截器,這個攔截器有兩個參數(shù),第一個參數(shù) data 表示服務端處理成功的響應,第二個 err 表示服務端處理失敗的響應。對照著 jQuery 中的 Ajax ,第一個相當于 success 回調,第二個相當于 error 回調。
4.響應的 data 表示服務端返回的數(shù)據(jù),數(shù)據(jù)格式是 {data:{status:200,msg"",obj:{}},status:200} 其中,data 中的對象就是服務端返回的具體的 JSON ,外面的 status 表示 HTTP 響應碼,里邊的 status 是自定義的 RespBean 中返回的數(shù)據(jù)
5.首先判斷 HTTP 響應碼為 200 ,并且服務端返回的 status 為 500 ,表示業(yè)務邏輯錯誤,此時直接通過 Message 將錯誤信息展示出來,然后 return 即可。
6.如果服務端返回的字段中包含 msg ,則將 msg 顯示出來,這個 msg 一般是成功的提示。
7.最后返回 data.data ,即將服務端返回的數(shù)據(jù) return ,這個數(shù)據(jù)最終會來到請求調用的地方。
8.當 HTTP 響應碼大于等于 400 時,進入 err 中。

方法封裝

請求封裝完成后,還需要對方法進行封裝,方便調用:

let base = '';
export const postRequest = (url, params) => {
 return axios({
 method: 'post',
 url: `${base}${url}`,
 data: params,
 headers: {
  'Content-Type': 'application/json'
 }
 });
}
export const putRequest = (url, params) => {
 return axios({
 method: 'put',
 url: `${base}${url}`,
 data: params,
 headers: {
  'Content-Type': 'application/json'
 }
 });
}
export const deleteRequest = (url) => {
 return axios({
 method: 'delete',
 url: `${base}${url}`
 });
}
export const getRequest = (url) => {
 return axios({
 method: 'get',
 url: `${base}${url}`
 });
}

由于在前后端分離項目中,大多數(shù)情況下,后端接口都采用 RESTful 風格來設計,所以前端主要封裝 GET\POST\PUT\DELETE 方法,然后所有的請求參數(shù)都是用 JSON。

這里一開始定義了一個 base 變量,這是請求的前綴,方便后期維護(如果需要統(tǒng)一修改請求前綴)。

制作 Vue 插件

封裝好的方法已經(jīng)可以直接使用了,但是比較麻煩,每次使用時,都需要在相關的 vue 文件中引入方法,像下面這樣:
import {postRequest} from "../utils/api";

但是這種操作方式太麻煩,所以我們可以考慮將方法進一步封裝成 Vue 的插件,這樣在每一個 vue 文件中,不需要引入方法就能夠直接調用方法了。

參考 Vue 官方文檔 https://cn.vuejs.org/v2/guide/plugins.html,如下:

官方給出了 5 種插件制作方式,我們這里采用第 4 種方案。

 具體操作就是在 main.js 中引入所有的封裝好的方法,然后掛載到 Vue.prototype 上即可,如下:

import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {getRequest} from "./utils/api";
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.postRequest = postRequest;

封裝完成后,以后在 vue 文件中,直接通過 this 就可以獲取到網(wǎng)絡請求方法的引用了,如下:

this.postRequest("/doLogin", this.user).then(msg=>{
 if (msg) {
 //登錄成功,頁面跳轉
 }
})

注意 ,then 中的 msg 就是響應攔截器中返回的 msg ,這個 msg 如果沒有值,表示請求失?。ㄊ∫呀?jīng)在攔截器中進行處理了),如果有值,表示請求成功!

配置請求轉發(fā)

在前后端分離中,前端和后端在不同的端口或者地址上運行,如果前端直接向后端發(fā)送請求,這個請求是跨域的。

但是在項目部署時,前端打包編譯后拷貝到 Java 項目中,和 Java 項目一起運行,此時不存在跨域問題。

所以這里我們的解決思路不是解決跨域問題,而是通過配置 NodeJS 的請求轉發(fā),來實現(xiàn)網(wǎng)絡請求順利發(fā)送。

請求轉發(fā)在 vue 項目的 config/index.js 文件中配置:

添加了請求轉發(fā)配置之后,一定要重啟前端項目才會生效。

此時啟動前端項目,就可以順利發(fā)送網(wǎng)絡請求了。

總結

本文主要和大伙分享了在前后端分離的情況下,如何對前端網(wǎng)絡請求進行封裝,并且如何配置請求轉發(fā),這是前后端分離中的基礎課,小伙伴們有問題歡迎留言討論。松哥將自己封裝的網(wǎng)絡請求庫已經(jīng)放在 GitHub 上,歡迎大家參考 https://github.com/lenve/javaboy-code-samples。

相關文章

  • 已有的springcloud+mybatis項目升級為mybatis-plus的方法

    已有的springcloud+mybatis項目升級為mybatis-plus的方法

    這篇文章主要介紹了已有的springcloud+mybatis項目升級為mybatis-plus,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-03-03
  • 詳解Java?ThreadPoolExecutor的拒絕策略

    詳解Java?ThreadPoolExecutor的拒絕策略

    這篇文章主要介紹了Java?ThreadPoolExecutor的拒絕策略,本文對于線程的池的幾種策略進行詳細的講解,在實際的生產(chǎn)中需要集合相關的場景來選擇合適的拒絕策略,需要的朋友可以參考下
    2022-08-08
  • eclipse項目在IDEA中打開并運行的詳細圖文教程

    eclipse項目在IDEA中打開并運行的詳細圖文教程

    這篇文章主要給大家介紹了關于eclipse項目在IDEA中打開并運行的詳細圖文教程,至從使用IDEA開發(fā)工具以來,不少次有使用IDEA運行Eclipse項目或非Maven項目,所以這里給大家總結下,需要的朋友可以參考下
    2023-09-09
  • Maven之導入thymeleaf依賴飄紅問題及解決

    Maven之導入thymeleaf依賴飄紅問題及解決

    這篇文章主要介紹了Maven之導入thymeleaf依賴飄紅問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Spring Gateway的入門概述及主要功能

    Spring Gateway的入門概述及主要功能

    Spring Gateway是Spring Cloud微服務生態(tài)下的網(wǎng)關組件,網(wǎng)絡層使用了基于非阻塞的 Netty使用異步IO增加了系統(tǒng)的性能,Gateway 是基于 Spring 5 和 Spring Boot 2 搭建的,這篇文章主要介紹了Spring Gateway的入門概述簡介,需要的朋友可以參考下
    2024-04-04
  • 如何利用Java8 Stream API對Map按鍵或值排序

    如何利用Java8 Stream API對Map按鍵或值排序

    這篇文章主要給大家介紹了關于如何利用Java8 Stream API對Map按鍵或值排序的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者使用Java8具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-11-11
  • SpringBoot JdbcTemplate批量操作的示例代碼

    SpringBoot JdbcTemplate批量操作的示例代碼

    本篇文章主要介紹了SpringBoot JdbcTemplate批量操作的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • 程序猿必須要掌握的多線程安全問題之鎖策略詳解

    程序猿必須要掌握的多線程安全問題之鎖策略詳解

    在筆者面試過程時,經(jīng)常會被問到各種各樣的鎖,如樂觀鎖、讀寫鎖等等,非常繁多,在此做一個總結,介紹的內容如下,需要的朋友可以參考下
    2021-06-06
  • springboot框架的全局異常處理方案詳解

    springboot框架的全局異常處理方案詳解

    這篇文章主要介紹了springboot框架的全局異常處理方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-03
  • SpringBoot中間件ORM框架實現(xiàn)案例詳解(Mybatis)

    SpringBoot中間件ORM框架實現(xiàn)案例詳解(Mybatis)

    這篇文章主要介紹了SpringBoot中間件ORM框架實現(xiàn)案例詳解(Mybatis),本篇文章提煉出mybatis最經(jīng)典、最精簡、最核心的代碼設計,來實現(xiàn)一個mini-mybatis,從而熟悉并掌握ORM框架的涉及實現(xiàn),需要的朋友可以參考下
    2023-07-07

最新評論