前端項(xiàng)目實(shí)現(xiàn)請(qǐng)求后臺(tái)接口
步驟一：安裝axios組件，一般使用命令：npm install axios --save
步驟二：為了項(xiàng)目規(guī)范整潔复濒，把一些配置請(qǐng)求后臺(tái)統(tǒng)一前綴,以及一些攔截器，代碼如下(文件在@/utils/request)
import axios from 'axios'
// create an axios instance
const service = axios.create({
baseURL: 'http://10.246.34.23:10000',
timeout: 5000
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['Authorization'] = 'TOKEN ' + getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
if (res.code !== 0) {
// 處理下載文件流
if (res instanceof Blob) {
return response
}
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
步驟三：編寫統(tǒng)一存放API地址文件汉买，并且傳參數(shù)指定請(qǐng)求方式（文件在'@/api/account）：
// 交易賬號(hào)列表下載
export function accountDownload(query) {
return request({
url: '/transaction-account/information-maintenance/download',
method: 'get',
responseType: 'blob',
params: query
})
}
****** 在和后臺(tái)交互的時(shí)候瓷蛙，如果后臺(tái)返回給我們的是二進(jìn)制流數(shù)據(jù)即寡，我們就要在發(fā)送的時(shí)候加上{responseType:'blob'}這行代碼修然，這樣返回?cái)?shù)據(jù)給我們的就不是亂碼了笛钝。
步驟四：Vue頁(yè)面調(diào)用API接口，并且實(shí)現(xiàn)文件下載
<template>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-download" @click="exportExcel">
導(dǎo)出賬號(hào)信息
</el-button>
</template>
<script>
import { accountDownload } from '@/api/account'
export default {
methods: {
exportExcel () {
accountDownload().then(response => {
if (response) {
// 創(chuàng)建URL
let url = window.URL.createObjectURL(new Blob([response.data]))
// 插入一個(gè)a標(biāo)簽愕宋，隱藏玻靡，設(shè)置href屬性，觸發(fā)點(diǎn)擊方法
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '導(dǎo)出賬號(hào)信息.xlsx')
document.body.appendChild(link)
link.click()
//下載完成后
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
}
})
}
}
}
記錄碰到的問(wèn)題中贝，讓自己更進(jìn)一步
