前后台交互方式（重點）

"""
1）form表單方式
    i）get | post 兩種請求方式，get請求包含直接在瀏覽器中輸入url回車后發送的請求
    ii）該方式的特點是一定會發生頁面的跳轉（刷新頁面叫本頁跳轉） - 后台決定頁面路由
    
2）ajax異步方式
    i）get | post | patch | put | delete 等眾多請求方式，請求的目的都是異步獲取后台的數據
    ii）該方式的特點是不會刷新頁面，只是得到新的數據，前台自己完成頁面的局部刷新、整體刷新、頁面跳轉 - 前台決定頁面路由
    
注：
i）前后台不分離項目，采用form表單請求，可以完成頁面跳轉，同步ajax異步請求完成頁面局部刷新
ii）前后台分離項目，不采用form表單請求，頁面刷新、頁面跳轉的請求，都是由ajax完成，只不過頁面跳轉，后台響應的是跳轉的目標url，前台再自己完成跳轉
iii）前后台分離項目，前台也會出現大量的form表單，但是form表單的提交按鈕，走的不是form表單的submit提交，而是ajax請求
"""

axios插件

axios插件：用來完成前后台ajax交互

"""
1）安裝：在前端項目根目錄下的終端
cnpm install axios

2）項目配置：main.js
import axios from 'axios'
Vue.prototype.$axios = axios;

3）在任何一個組件的邏輯中，都可以訪問 this.$axios()
beforeMount() {
    // 請求后台
    this.$axios({
        url: this.$settings.base_url + '/test/',
        method: 'delete',
    })
}
"""

同源策略- 跨域問題

django默認是同源策略，所以前后台分離項目，訪問django會出現CORS跨域問題的報錯

一、什么叫跨域

i）ip不同：前后台（兩個服務器）不在一台主機上運行的
ii）port不同：前后台（兩個服務器）是相互獨立的，運行在不同的端口之上
iii）協議不同：http與https之間也同樣是跨域問題
注：三者滿足一個，就是跨域

二、解決跨域

兩種方式：
i）偽裝：將前台請求偽裝成后台自己對自己發生的請求
ii）后台主動允許跨域：后台配置允許跨域即可（在響應頭中處理）

三、Django解決跨域

i）安裝模塊：
    pip install django-cors-headers
ii）注冊app：
INSTALLED_APPS = [
    ...
    'corsheaders'
]
iii）添加中間件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]
iv）允許跨域源
CORS_ORIGIN_ALLOW_ALL = True

前后台分離項目交互流程

"""
1）啟動前后台項目

2）前台配置頁面路由，渲染前台頁面 | 后台配置數據路由，響應數據（處理好跨域問題）

3）前台通過ajax請求后台接口
    i）將前台數據提交給后台
    ii）得到后台的響應結果
    iii）根據響應結果的數據，最后完成頁面的局部刷新、整體刷新、頁面跳轉

異步請求細節

"""
1）vue框架用axios完成ajax異步請求
    語法：this.$axios().then().catch();
    解讀：$axios()是請求邏輯 | then()是正常響應邏輯 | catch()是錯誤響應邏輯
    具體語法：
    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
    })

2）前台提交數據的兩種方式：
    i）url拼接參數：
        所有請求都擁有的提交數據的方式
        該方式會將數據都在請求url后用?拼接的方式提交給后台
        提交數據只能采用url字符串方式提交給后台，數據是不安全的
        axios插件可以用params屬性攜帶url拼接參數
        
    ii）數據包參數：
        除get請求外的所有請求都擁有的提交數據的方式
        該方式會將數據進行加密，打包成數據包方式提交給后台
        打包加密數據有三種方式：urlencoded(form默認的方式)、form-data(可以提交文件)、json(提交json數據)
        axios插件可以用data屬性攜帶數據包參數
        
"""

"""
注意項：
1）this.$axios({}).then(response => {}).catch(error => {}) 中的then和catch回調函數，不能寫function，因為實際vue項目開發，一定會在回調邏輯用到this語法(代表vue對象)，而在function中使用了this語法，function就不是普通函數了(可以理解為類，this就不能代表vue對象了）

2）原生django沒有提供所有類型的數據包數據解析規則，但是數據會在request.body中，可以自己解析；Django-rest-framework框架是提供了三種類型的數據包參數解析
"""