71 vue-axios plug, django-cors plug-ins, and how to use a third-party front-end vue Style Library: element / jQuery / bootstrap

A, vue of ajax plugin: axios

1, the installation axios

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

2, axios parameters

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); // 可以打印具体的报错信息
});

Two, CORS cross-domain problem (same origin policy)

Homologous: http same protocol, the same server ip address, application port the same app.

Cross-domain: protocol, ip addresses, use a different port, it is the cross-domain.

Django default same-origin policy, does not receive cross-domain requests.

1, Django solve the problem of cross-domain method CORS

The use of third-party modules: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

Third, the front-end request carries parameters and how to get Django background

1, splicing parameters way to carry and access parameters

Send a front end:

Any request (get, post ...) can carry url parameters by way of stitching.

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);
    });
}

Back-end acquisition:

In request.GET get in.

2, the parameters carried in the packet mode and access

Send a front end:

Sending a request to the front end of the rear end, get embodiment is not carrying packet parameters.

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);
    });
}

Back-end acquisition:

In request.body get in.

Four, Vue placed 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);

Five, Vue jQuery and bootstrap configuration

1, the configuration environment jQuery

installation:

>: cnpm install jquery

Configuration jQuery: configuration vue.config.js in (not just manually create this file in the project root directory)

const webpack = require("webpack");

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

2, the configuration BootStrap environment

installation:

>: cnpm install bootstrap@3

Configuration BootStrap: the configuration main.js

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

Supplementation knowledge

en HTML file header into zh browser can not show whether the translation bomb box.

css pseudo-class: nth-child (5n) may acquire multiple index label 5.

TODO comment.