71 vue-axios插件、django-cors插件、及vue如何使用第三方前端样式库：element/jQuery/bootstrap

一、vue的ajax插件：axios

1、安装axios

// 1）安装插件(一定要在项目目录下)：
    >: cnpm install axios
    
// 2）在main.js中配置：
    import axios from 'axios'
    Vue.prototype.$axios = axios;
    

2、axios参数

this.$axios({
    // 后端服务器端口
    url: 'http://127.0.0.1:8000/cars/',
    // 相当于ajax的type
    method: 'get',
}).then(response => {
    console.log(response);
    // this.cars = response.data;
}).catch(error => {  // 网络状态码为4xx、5xx
    console.log(error); // 可以打印具体的报错信息
});

二、CORS跨域问题（同源策略）

同源：http协议相同、ip服务器地址相同、app应用端口相同。

跨域：协议、ip地址、应用端口有一个不同，就是跨域。

Django默认是同源策略，不接收跨域请求。

1、Django解决CORS跨域问题方法

使用第三方模块：django-cors-headers

# 1）Django安装cors模块(可在cmd中，要注意切换到项目文件夹中；也可以直接在pycharm中的terminal中安装)：
    >: pip3 install django-cors-headers
    
# 2）在settings注册模块，配置中间件：
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]

# 3）在settings开启允许跨域：
    CORS_ORIGIN_ALLOW_ALL = True

三、前端请求携带参数及Django后台如何获取

1、拼接参数方式携带参数和获取

前端发送：

任何请求(get、post...)都可以通过url拼接的方式携带参数。

created() {
    // 完成ajax请求后台，获得数据库中的数据
    this.$axios({
        url: this.$settings.base_url + '/cars/',
        method: 'post',
        params: {  // url拼接参数：任何请求都可以携带
            a: 1,
            b: 2,
            c: 3
        },
    }).then(response => {
        // console.log('正常', response);
        this.cars = response.data;
    }).catch(error => {  // 网络状态码为4xx、5xx
        console.log('异常', error.response);
    });
}

后端获取：

在request.GET中获取。

2、数据包方式携带的参数和获取

前端发送：

前端向后端发送请求，get方式是无法携带数据包参数的。

created() {
    // 完成ajax请求后台，获得数据库中的数据
    this.$axios({
        url: this.$settings.base_url + '/cars/',
        method: 'post',
        params: {  // url拼接参数：任何请求都可以携带
            a: 1,
            b: 2,
            c: 3
        },
        data: {  // 数据包参数：get请求是无法携带的
            x: 10,
            y: 20,
        }
    }).then(response => {
        // console.log('正常', response);
        this.cars = response.data;
    }).catch(error => {  // 网络状态码为4xx、5xx
        console.log('异常', error.response);
    });
}

后端获取：

在request.body中获取。

四、Vue配置ElementUI

// 1）安装插件(一定要在项目目录下)：
    >: cnpm install element-ui
    
// 2）在main.js中配置：
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

五、Vue配置jQuery和bootstrap

1、配置jQuery环境

安装：

>: cnpm install jquery

配置jQuery：在vue.config.js中配置(没有此文件就手动在项目根目录下新建)

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

2、配置BootStrap环境

安装：

>: cnpm install bootstrap@3

配置BootStrap：在main.js中配置

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

补充小知识点

HTML文件头的en换成zh可以使浏览器不显示是否翻译弹框。

css伪类：nth-child(5n)可以获取索引5的倍数的标签。

TODO注释。