Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
本文實(shí)例為大家分享了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離的具體代碼,供大家參考,具體內(nèi)容如下
前言
我們需要進(jìn)行前后端分離開(kāi)發(fā),那么前后端的跨域問(wèn)題就是無(wú)可避免的問(wèn)題,前后端的請(qǐng)求也是無(wú)可避免的,Vue之中有一個(gè)請(qǐng)求組件是axios,我們可以對(duì)axios進(jìn)行封裝作為我們請(qǐng)求的工具組件
# 一、封裝axios
vue.config.js 配置文件
module.exports = {
configureWebpack: {
resolve: {
alias: {
api: '@/api',
assets: '@/assets',
components: '@/components',
layouts: '@/layouts',
router: '@/router',
store: '@/store',
utils: '@/utils',
views: '@/views'
}
}
},
devServer: {
//端口
port: 8081,
//后端接口
proxy: {
'/api': {
target: 'http://localhost:8099', // 目標(biāo)代理接口地址
changeOrigin: true, // 開(kāi)啟代理,在本地創(chuàng)建一個(gè)虛擬服務(wù)端
// ws: true, // 是否啟用websockets
pathRewrite: {
'^/api': ''
}
}
}
}
}
request.js,封裝組件
//配置axios
import axios from 'axios'
const instance = axios.create({
baseURL: '/api',
timeout: 6000
})
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
//請(qǐng)求攔截器
instance.interceptors.request.use(
function(config) {
return config
},
function(error) {
//對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error)
}
)
//響應(yīng)攔截器
instance.interceptors.response.use(
function(response) {
return response.data
},
function(error) {
//對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
return Promise.reject(error)
}
)
export default function(method, url, data = '', config = '') {
method = method.toLowerCase()
if (method === 'post') {
if (config !== '') {
return instance.post(url, data, config)
} else {
return instance.post(url, data)
}
} else if (method === 'get') {
return instance.get(url, {params: data})
} else if (method === 'delete') {
return instance.delete(url, {params: data})
} else if (method === 'put') {
return instance.put(url, data)
} else {
console.error('未知的method' + method)
return false
}
}
api.js,接口文件
import req from '@/utils/request'
/**
* 批量查詢
* @param params
*/
export const list = params => req("get", "/resource/list", params);
具體的頁(yè)面之中進(jìn)行導(dǎo)入使用即可
總結(jié)
這就是vue中對(duì)于axios的初步封裝使用,后續(xù)會(huì)持續(xù)更新
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專(zhuān)題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue arco.design錨點(diǎn)Anchor使用方式
這篇文章主要介紹了vue arco.design錨點(diǎn)Anchor使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue項(xiàng)目中vue.config.js常用配置項(xiàng)詳解
在 Vue CLI 創(chuàng)建的項(xiàng)目中,vue.config.js 是核心配置文件,用于定制化構(gòu)建、開(kāi)發(fā)和部署流程,本文詳細(xì)解析了該文件的常用配置項(xiàng),并結(jié)合代碼示例和表格說(shuō)明,幫助開(kāi)發(fā)者高效管理項(xiàng)目配置,提升開(kāi)發(fā)體驗(yàn),需要的朋友可以參考下2025-04-04
Nginx部署前端Vue項(xiàng)目的步驟、常見(jiàn)問(wèn)題與解決方案
在現(xiàn)代Web開(kāi)發(fā)中,Vue.js成為前端開(kāi)發(fā)者構(gòu)建單頁(yè)應(yīng)用的熱門(mén)框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項(xiàng)目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的步驟、常見(jiàn)問(wèn)題與解決方案,需要的朋友可以參考下2024-09-09
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
vue3+echarts實(shí)現(xiàn)漸變色環(huán)形圖過(guò)程
這篇文章主要介紹了vue3+echarts實(shí)現(xiàn)漸變色環(huán)形圖過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)在進(jìn)行增刪改操作后刷新頁(yè)面
這篇文章主要介紹了vue實(shí)現(xiàn)在進(jìn)行增刪改操作后刷新頁(yè)面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08

