13 Vue-配置axios 插件

配置Axios完成ajax请求

1. 安装

在Vue项目下打开终端窗口
cnpm install axios

2. 配置环境

// 配置axios 来完成前后台ajax请求
// main.js项目入口文件下

import Axios from 'axios'

// 添加$ajax 到Vue对象的属性中
Vue.prototype.$ajax = Axios;

3. 示例

// vue有专门用来完成ajax请求的插件：axios

this.$ajax({
    url: 'ajax访问url地址',
    method: 'ajax请求的方式(post/get)', 
    params: {
        // 这里发送的是 url拼接的数据
    },
    data: {
        // post请求携带的数据报数据
    }
}).then((response) => {     // 注意，这个response是发过来的一个大字典，里面是HTTP响应的各种信息。
    console.log(response);
    this.cars_data = response.data; // 数据都在data中
}).catch(error => {
    console.log(error)
})

注意（重点）

前端通过axios发到django后台服务器的端口上会出一个错误。跨域请求错误。

原因就是django默认是一个前后端不分离的web框架，它默认只接收django前台发来的请求。不同的主机端口发来的请求就会出现这个问题。

如何解决，需要 django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)

详情看