axios plug: complete front and back ajax interaction

axios plug

Instructions:

1) installed: a terminal at the distal end project root

cnpm install axios

2) Project Configuration: main.js

import axios from 'axios'  // 导入axios插件
Vue.prototype.$axios = axios;  // 将axios添加到Vue类属性中，类似单例，可以在后面其他组件中使用

3) In any of the logic assembly, can access this. $ Axios ()

beforeMount() {
    // 请求后台
    this.$axios({
        url: this.$settings.base_url + '/test/',
        method: 'delete',
    })
}

Origin policy - cross-domain issues

A, django default same-origin policy, so the front and back separate projects, cross-domain access django error CORS problems occur

Second, what is called cross-domain
i) different ip: operating the front-stage (two servers) is not a host
of different ii) port: Foreground (two servers) are independent of each other, run on different ports
iii ) different protocols: between http and https cross-domain issues are equally
Note: a three meet, it is the cross-domain

Third, the cross-domain solution
i) Camouflage: The foreground a background request disguise their own request occurs
ii) background Active allowed Cross: background configuration to allow cross-domain (the processing in the response header)

Four, Django solve cross-domain

i) mounting the module:

pip install django-cors-headers

ii) registration app:

# settings.py
 
INSTALLED_APPS = [
    ...
    'corsheaders'
]

iii) adding middleware

# settings.py
 
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]

iv) allowing cross-domain source

# settings.py
 
CORS_ORIGIN_ALLOW_ALL = True

Taiwan before and after the interaction flow separation project

1) Start projects around Taiwan

2) Front page routing configuration, rendering the front page | background configuration data routing, response data (to deal with cross-domain issue)

3) Reception ajax request by the interface background

Data will be submitted to the foreground to the background
The results obtained in response to the background
The data in response to the result of the last page is completed partial refresh, refresh the whole page jump

Asynchronous Request Details

1) vue ajax asynchronous request frame is completed with axios

grammar:

beforeMount() {
    // 请求后台
    this.$axios().then().catch();
}
 
// $axios()是请求逻辑 | then()是正常响应逻辑 | catch()是错误响应逻辑

Concrete syntax:

    this.$axios({
        url: '后台接口链接',
        method: '请求方式',
        params: {},  // url拼接参数
        data: {},  // 数据包参数
        headers: {}  // 请求头参数
    }).then(response => {
        // response是http状态2xx的响应结果，响应数据是response.data
    }).catch(error => {
        // error是http状态4xx、5xx的响应结果，错误响应对象是error.response，错误响应数据是error.response.data
    })
 
 
// 语法注意事项：
// this.$axios({}).then(response => {}).catch(error => {}) 中的then和catch回调函数，不能写function，因为实际vue项目开发，一定会在回调逻辑用到this语法(代表vue对象)，而在function中使用了this语法，function就不是普通函数了(可以理解为类，this就不能代表vue对象了）

2) reception of data submitted in two ways

i）url拼接参数：
    所有请求都拥有的提交数据的方式
    该方式会将数据都在请求url后用?拼接的方式提交给后台
    提交数据只能采用url字符串方式提交给后台，数据是不安全的
    axios插件可以用params属性携带url拼接参数
 
ii）数据包参数：
    除get请求外的所有请求都拥有的提交数据的方式
    该方式会将数据进行加密，打包成数据包方式提交给后台
    打包加密数据有三种方式：urlencoded(form默认的方式)、form-data(可以提交文件)、json(提交json数据)
    axios插件可以用data属性携带数据包参数
 
 
注意项：
原生django没有提供所有类型的数据包数据解析规则，但是数据会在request.body中，可以自己解析；Django-rest-framework框架是提供了三种类型的数据包参数解析