Spring Boot + Vue 前后端分離開(kāi)發(fā)之前端網(wǎng)絡(luò)請(qǐng)求封裝與配置
前端網(wǎng)絡(luò)訪問(wèn),主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,網(wǎng)絡(luò)訪問(wèn)較多的采用 vue-resources,Vue2.0 之后,官方不再建議使用 vue-resources ,這個(gè)項(xiàng)目本身也停止維護(hù),目前建議使用的方案是 axios。今天松哥就帶大家來(lái)看看 axios 的使用。
axios 引入
axios 使用步驟很簡(jiǎn)單,首先在前端項(xiàng)目中,引入 axios:
npm install axios -S
裝好之后,按理說(shuō)可以直接使用了,但是,一般在生產(chǎn)環(huán)境中,我們都需要對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行封裝。
因?yàn)榫W(wǎng)絡(luò)請(qǐng)求可能會(huì)出錯(cuò),這些錯(cuò)誤有的是代碼錯(cuò)誤導(dǎo)致的,也有的是業(yè)務(wù)錯(cuò)誤,不管是哪一種錯(cuò)誤,都需要開(kāi)發(fā)者去處理,而我們不可能在每一次發(fā)送請(qǐng)求時(shí)都去枚舉各種錯(cuò)誤情況。
因此我們需要對(duì)前端請(qǐng)求進(jìn)行封裝,封裝完成后,將前端錯(cuò)誤統(tǒng)一處理,這樣,開(kāi)發(fā)者只需要在每一次發(fā)送請(qǐng)求的地方處理請(qǐng)求成功的情況即可。
請(qǐng)求封裝
在 axios 中,我們可以使用 axios 自帶的攔截器來(lái)實(shí)現(xiàn)對(duì)錯(cuò)誤的統(tǒng)一處理。
在 axios 中,有請(qǐng)求攔截器,也有響應(yīng)攔截器。
請(qǐng)求攔截器中可以統(tǒng)一添加公共的請(qǐng)求參數(shù),例如單點(diǎn)登錄中前端統(tǒng)一添加 token 參數(shù)。
響應(yīng)攔截器則可以實(shí)現(xiàn)對(duì)錯(cuò)誤的統(tǒng)一處理。
另外一個(gè)需要注意的地方則是錯(cuò)誤的展示需要使用一種通用的方式,而不可以和頁(yè)面綁定(例如,登錄失敗,在用戶(hù)名/密碼輸入框后面展示錯(cuò)誤信息,不支持這種錯(cuò)誤顯示方式),這里推薦使用 ElementUI 中的 Massage 來(lái)展示錯(cuò)誤信息,這是一個(gè)頁(yè)面無(wú)關(guān)的組件。
封裝后的 axios 如下:
import axios from 'axios' import {Message} from 'element-ui' axios.interceptors.request.use(config => { return config; }, err => { Message.error({message: '請(qǐng)求超時(shí)!'}); }) 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: '服務(wù)器被吃了⊙﹏⊙∥'}); } else if (err.response.status == 403) { Message.error({message: '權(quán)限不足,請(qǐng)聯(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: '未知錯(cuò)誤!'}); } } })
代碼解釋?zhuān)?/p>
1.首先導(dǎo)入 axios 和 Massage 組件
2.接下來(lái)定義一個(gè)請(qǐng)求攔截器
3.最后定義一個(gè)響應(yīng)攔截器,這個(gè)攔截器有兩個(gè)參數(shù),第一個(gè)參數(shù) data 表示服務(wù)端處理成功的響應(yīng),第二個(gè) err 表示服務(wù)端處理失敗的響應(yīng)。對(duì)照著 jQuery 中的 Ajax ,第一個(gè)相當(dāng)于 success 回調(diào),第二個(gè)相當(dāng)于 error 回調(diào)。
4.響應(yīng)的 data 表示服務(wù)端返回的數(shù)據(jù),數(shù)據(jù)格式是 {data:{status:200,msg"",obj:{}},status:200} 其中,data 中的對(duì)象就是服務(wù)端返回的具體的 JSON ,外面的 status 表示 HTTP 響應(yīng)碼,里邊的 status 是自定義的 RespBean 中返回的數(shù)據(jù)
5.首先判斷 HTTP 響應(yīng)碼為 200 ,并且服務(wù)端返回的 status 為 500 ,表示業(yè)務(wù)邏輯錯(cuò)誤,此時(shí)直接通過(guò) Message 將錯(cuò)誤信息展示出來(lái),然后 return 即可。
6.如果服務(wù)端返回的字段中包含 msg ,則將 msg 顯示出來(lái),這個(gè) msg 一般是成功的提示。
7.最后返回 data.data ,即將服務(wù)端返回的數(shù)據(jù) return ,這個(gè)數(shù)據(jù)最終會(huì)來(lái)到請(qǐng)求調(diào)用的地方。
8.當(dāng) HTTP 響應(yīng)碼大于等于 400 時(shí),進(jìn)入 err 中。
方法封裝
請(qǐng)求封裝完成后,還需要對(duì)方法進(jìn)行封裝,方便調(diào)用:
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}` }); }
由于在前后端分離項(xiàng)目中,大多數(shù)情況下,后端接口都采用 RESTful 風(fēng)格來(lái)設(shè)計(jì),所以前端主要封裝 GET\POST\PUT\DELETE 方法,然后所有的請(qǐng)求參數(shù)都是用 JSON。
這里一開(kāi)始定義了一個(gè) base 變量,這是請(qǐng)求的前綴,方便后期維護(hù)(如果需要統(tǒng)一修改請(qǐng)求前綴)。
制作 Vue 插件
封裝好的方法已經(jīng)可以直接使用了,但是比較麻煩,每次使用時(shí),都需要在相關(guān)的 vue 文件中引入方法,像下面這樣:
import {postRequest} from "../utils/api";
但是這種操作方式太麻煩,所以我們可以考慮將方法進(jìn)一步封裝成 Vue 的插件,這樣在每一個(gè) vue 文件中,不需要引入方法就能夠直接調(diào)用方法了。
參考 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 文件中,直接通過(guò) this 就可以獲取到網(wǎng)絡(luò)請(qǐng)求方法的引用了,如下:
this.postRequest("/doLogin", this.user).then(msg=>{ if (msg) { //登錄成功,頁(yè)面跳轉(zhuǎn) } })
注意 ,then 中的 msg 就是響應(yīng)攔截器中返回的 msg ,這個(gè) msg 如果沒(méi)有值,表示請(qǐng)求失?。ㄊ∫呀?jīng)在攔截器中進(jìn)行處理了),如果有值,表示請(qǐng)求成功!
配置請(qǐng)求轉(zhuǎn)發(fā)
在前后端分離中,前端和后端在不同的端口或者地址上運(yùn)行,如果前端直接向后端發(fā)送請(qǐng)求,這個(gè)請(qǐng)求是跨域的。
但是在項(xiàng)目部署時(shí),前端打包編譯后拷貝到 Java 項(xiàng)目中,和 Java 項(xiàng)目一起運(yùn)行,此時(shí)不存在跨域問(wèn)題。
所以這里我們的解決思路不是解決跨域問(wèn)題,而是通過(guò)配置 NodeJS 的請(qǐng)求轉(zhuǎn)發(fā),來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求順利發(fā)送。
請(qǐng)求轉(zhuǎn)發(fā)在 vue 項(xiàng)目的 config/index.js 文件中配置:
添加了請(qǐng)求轉(zhuǎn)發(fā)配置之后,一定要重啟前端項(xiàng)目才會(huì)生效。
此時(shí)啟動(dòng)前端項(xiàng)目,就可以順利發(fā)送網(wǎng)絡(luò)請(qǐng)求了。
總結(jié)
本文主要和大伙分享了在前后端分離的情況下,如何對(duì)前端網(wǎng)絡(luò)請(qǐng)求進(jìn)行封裝,并且如何配置請(qǐng)求轉(zhuǎn)發(fā),這是前后端分離中的基礎(chǔ)課,小伙伴們有問(wèn)題歡迎留言討論。松哥將自己封裝的網(wǎng)絡(luò)請(qǐng)求庫(kù)已經(jīng)放在 GitHub 上,歡迎大家參考 https://github.com/lenve/javaboy-code-samples。
相關(guān)文章
已有的springcloud+mybatis項(xiàng)目升級(jí)為mybatis-plus的方法
這篇文章主要介紹了已有的springcloud+mybatis項(xiàng)目升級(jí)為mybatis-plus,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03詳解Java?ThreadPoolExecutor的拒絕策略
這篇文章主要介紹了Java?ThreadPoolExecutor的拒絕策略,本文對(duì)于線(xiàn)程的池的幾種策略進(jìn)行詳細(xì)的講解,在實(shí)際的生產(chǎn)中需要集合相關(guān)的場(chǎng)景來(lái)選擇合適的拒絕策略,需要的朋友可以參考下2022-08-08eclipse項(xiàng)目在IDEA中打開(kāi)并運(yùn)行的詳細(xì)圖文教程
這篇文章主要給大家介紹了關(guān)于eclipse項(xiàng)目在IDEA中打開(kāi)并運(yùn)行的詳細(xì)圖文教程,至從使用IDEA開(kāi)發(fā)工具以來(lái),不少次有使用IDEA運(yùn)行Eclipse項(xiàng)目或非Maven項(xiàng)目,所以這里給大家總結(jié)下,需要的朋友可以參考下2023-09-09Maven之導(dǎo)入thymeleaf依賴(lài)飄紅問(wèn)題及解決
這篇文章主要介紹了Maven之導(dǎo)入thymeleaf依賴(lài)飄紅問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08如何利用Java8 Stream API對(duì)Map按鍵或值排序
這篇文章主要給大家介紹了關(guān)于如何利用Java8 Stream API對(duì)Map按鍵或值排序的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用Java8具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11SpringBoot JdbcTemplate批量操作的示例代碼
本篇文章主要介紹了SpringBoot JdbcTemplate批量操作的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04程序猿必須要掌握的多線(xiàn)程安全問(wèn)題之鎖策略詳解
在筆者面試過(guò)程時(shí),經(jīng)常會(huì)被問(wèn)到各種各樣的鎖,如樂(lè)觀鎖、讀寫(xiě)鎖等等,非常繁多,在此做一個(gè)總結(jié),介紹的內(nèi)容如下,需要的朋友可以參考下2021-06-06SpringBoot中間件ORM框架實(shí)現(xiàn)案例詳解(Mybatis)
這篇文章主要介紹了SpringBoot中間件ORM框架實(shí)現(xiàn)案例詳解(Mybatis),本篇文章提煉出mybatis最經(jīng)典、最精簡(jiǎn)、最核心的代碼設(shè)計(jì),來(lái)實(shí)現(xiàn)一個(gè)mini-mybatis,從而熟悉并掌握ORM框架的涉及實(shí)現(xiàn),需要的朋友可以參考下2023-07-07