vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现,帮助我们迅速搭建一个后台的前端页面。本文只介绍其中axios模块的使用,想要更深入的了解请参考官方文档。
框架中请求后台数据的函数在api包下:
初始打开有很多js文件,这是该框架里面自带的,如果你不想用它提供的,你可以自己创建一个js文件,下面是该文件中一个示例内容:
import request from '@/utils/request'
//更新电影
export function updateMovie(data) {
return request({
//请求的后端接口,拿到后台数据
url: 'http://localhost:8090/ssm/movie/updateMovieById',
//请求方式
method: 'post',
//提交的参数,其中本应该是data:data形式,但是因为request中参数data与该函数参数同名就只用写一个data即可
data
})
}
说明: import request from '@/utils/request'
是必须要写的,其中@指src,我们点开src/utils/request.js该路径下的文件:
发现其实框架已经为我们封装好axios模块了
,其中发现有一个参数为request的箭头函数和一个参数为response的箭头函数:
//request匿名函数
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['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
//response匿名函数
response => {
const res = response.data
//这里20000是请求完数据,后台响应成功的状态码,我们也可以自定义
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
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
}
},
看到这里发现在api包下我们自定义的访问接口的文件中先要有import request from '@/utils/request'
即导入src/utils/request文件,然后就可以使用该文件中上述两个匿名函数实现对接口的访问。
简单地说上述框架已经帮我们配置好了,我们只需要传入接口和我们的数据即可访问后台,完成前后端的交互
那么页面如何使用我们定义的函数呢?
如下图所示:
<script>
//1.首先要在该页面中导入我们自定义的函数 updateMovie
import { updateMovie } from '@/api/movie'
//2.直接调用该函数,传递我们的数据 yourData
updateMovie(yourData).then((response)=>{
//这里进入回调函数,即拿到后台响应的数据 response
//后续再对数据进行你想要的一些操作
this.XXX=response.data;
}
)
</script>