vue+Django项目的axios教学
时间: 2023-11-28 18:06:36 浏览: 120
首先,需要在前端安装axios:
```
npm install axios
```
然后在Vue项目中使用axios,需要在Vue组件中引入axios:
```js
import axios from 'axios'
```
可以将axios封装成Vue插件,方便在Vue项目中使用,如下:
```js
// api.js
import axios from 'axios'
const API = axios.create({
baseURL: 'http://localhost:8000/api/',
timeout: 1000,
headers: {
'Content-Type': 'application/json'
}
})
export default {
install(Vue) {
Vue.prototype.$api = API
}
}
```
在main.js中引入api.js并将其作为Vue插件使用:
```js
import Vue from 'vue'
import App from './App.vue'
import api from './api'
Vue.use(api)
new Vue({
render: h => h(App),
}).$mount('#app')
```
在Vue组件中使用axios:
```js
this.$api.get('users/')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
```
其中,`get()`方法可以替换成其他HTTP方法,如`post()`、`put()`、`delete()`等。
在后端Django中,需要设置CORS来允许前端跨域访问。可以使用django-cors-headers来设置CORS,具体使用方法可以参考其官方文档。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)