axios插件:完成前后台ajax交互

时间:2022-11-04 18:50:49

axios插件

使用方法:

1)安装:在前端项目根目录下的终端

cnpm install axios

2)项目配置:main.js

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

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:

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

iii)添加中间件

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

iv)允许跨域源

# settings.py
 
CORS_ORIGIN_ALLOW_ALL = True

前后台分离项目交互流程

1)启动前后台项目

2)前台配置页面路由,渲染前台页面 | 后台配置数据路由,响应数据(处理好跨域问题)

3)前台通过ajax请求后台接口

  • 将前台数据提交给后台
  • 得到后台的响应结果
  • 根据响应结果的数据,最后完成页面的局部刷新、整体刷新、页面跳转

异步请求细节

1)vue框架用axios完成ajax异步请求

语法:

beforeMount() {
    // 请求后台
    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
    })
 
 
// 语法注意事项:
// this.$axios({}).then(response => {}).catch(error => {}) 中的then和catch回调函数,不能写function,因为实际vue项目开发,一定会在回调逻辑用到this语法(代表vue对象),而在function中使用了this语法,function就不是普通函数了(可以理解为类,this就不能代表vue对象了)

2)前台提交数据的两种方式

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