一、前后台分离项目交互流程
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
