一、前后台分離項目交互流程
1）啟動前后台項目
2）前台配置頁面路由，渲染前台頁面 | 后台配置數據路由，響應數據（處理好跨域問題）
3）前台通過ajax請求后台接口
i）將前台數據提交給后台
ii）得到后台的響應結果
iii）根據響應結果的數據，最后完成頁面的局部刷新、整體刷新、頁面跳轉
4）
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
})
圖片
1
2
3
5）前台提交數據的兩種方式：
i）url拼接參數：
所有請求都擁有的提交數據的方式
該方式會將數據都在請求url后用?拼接的方式提交給后台
提交數據只能采用url字符串方式提交給后台，數據是不安全的
axios插件可以用params屬性攜帶url拼接參數
結果
ii）數據包參數：
除get請求外的所有請求都擁有的提交數據的方式
該方式會將數據進行加密，打包成數據包方式提交給后台
打包加密數據有三種方式：urlencoded(form默認的方式)、form-data(可以提交文件)、json(提交json數據)
axios插件可以用data屬性攜帶數據包參數
拼接參數 解析到GET中。 數據包參數 解析到body中
結果
圖片
結果
注意項：
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框架是提供了三種類型的數據包參數解析
二、JsonResponse
