axios请求基本配置使用

axios的基体请求使用
首先在django项目中的settings文件中配置axios跨域请求

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders', #首先注册apps添加跨域请求
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.MiddlewareMixin',  #添加跨域中间件
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware', #注释掉csrf中间件
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL=True #允许全局跨域访问

然后打开vue 首先要导入axios包
在vue终端运行 npm install --save axios 下载axios包进行安装
然后在vue项目中的src文件夹下的main.is中进行配置axios全局使用

import axios from 'axios'//导入axios
axios.defaults.baseURL = 'http://127.0.0.1:8000' //进行跨域的接口
Vue.prototype.$axios = axios  //全局配置axios

配置完成以后打开一个新页面进行axios的提交方式使用

<template>
<div>
  分类：<input type="text" v-model="caveList.name">
  <button @click="postCave">添加分类</button>
</div>
</template>

添加一个盒子，然后设置一个输入页面 绑定数据，通过点击事件绑定一个方法，将数据提交给后端

<script>
export default {
name: "register",data(){
  return{
    caveList:{
      name:''
    }
  }
  },
  methods:{
  postCave(){
    this.$axios.post('cave/',this.caveList)
    .then(resp=>{
      console.log(resp.data)
      alert('添加成功')
    })
  }
  },
  mounted() {
  }
}
</script>

post请求方式

 this.$axios.post('cave/',this.caveList)
 其中this.$axios与后端进行交互,post是请求方式,('cave/',this.caveList)是请求体包含请求地址和数据,也可以通过表单来提交数据
    let form_data=new FormData()
    form_data.append('name',this.cavelist.name)
 

提交完成，成功则打印提交结果并弹框提醒提交成功

get请求方式

 this.$axios.get('cave/'?cave_id=, this.cave_id)  //通过字符串查询请求数据

 this.$axios.get('cave/',{params:{'cave_id':this.cave_id}})  //通过query_params请求数据