Django+Vue项目学习第三篇：使用axios发送get请求，解决跨域问题，调通前后端

传送门：

通过前两篇，已经把后端和前端的架子搭起来了，并且后端写好方法返回数据，本篇将详细介绍如何使用axios发送get请求，并且解决django+vue的跨域问题

前端页面如下

先分析下我的需求：

（1）我希望点击不同按钮，触发不同的请求，例如点击【手机号码】，会调用后台生成手机号的方法；点击【身份证ID】，会调用后台生成id的方法；

（2）目前页面有3个按钮是需要绑定事件来触发后台请求的，最好3个按钮能绑定同一个事件，通过判断点击了哪个按钮，来区分调用哪个请求；

（3）textarea标签展示后台返回的数据；

（4）【身份证ID】和【人名】按钮后分别有一个输入框，我需要获取input输入框的值传给后端；

下面在main_page.vue中编写代码来实现上述需求

1、定义接收2个input标签的参数以及textera标签的参数

在data()函数下定义3个参数，num1、num2、info分别表示2个input输入框和textera标签

<script>
export default {
  name: "main_page",
  data() {
    return {
      num1: null, // 默认值设置为null
      num2: null,
      info: null,
    }
  },
}
<script/>

在input标签中使用v-model来双向绑定num1、num2

这样可以实现num1、num2参数接收input标签输入的值

......
<input class="input_style" type="text" name="card_id" id="id_num" value="" placeholder="请输入个数" v-model="num1">
......
<input class="input_style" type="text" name="name" id="name_num" value="" placeholder="请输入个数" v-model="num2">
......

当前端发送请求得到响应数据后，可以把响应内容赋给info参数，通过Mustache语法把info的内容展示到textera中，所以代码如下

......
<div><textarea class="textera" id="result">{{info}}</textarea></div>
......

2、判断前端点击的哪个按钮来触发不同请求

如果想知道前端点击的是哪个按钮，可以在定义函数时传入event参数，获取浏览器的event对象

在methods下定义一个函数 create_data(event)函数，里面传入一个参数event

<script>
export default {
  name: "main_page",
  data() {
    return {
      num1: null,
      num2: null,
      info: null,
    }
  },
  
  methods: {
    
    create_data(event) {
      console.log('点击元素的id='+event.target.id) //打印看下结果
      
      if (event.target.id === "b01") {  //通过event.target.id，获取浏览器监听到的点击事件，并查看点击元素的id，通过比对id值判断触发哪个请求
        ......
        ......
        ......
      } else if (event.target.id === "b02") {
        ......
        ......
        ......
      } else if (event.target.id === "b03") {
        ......
        ......
        ......
      }
    }
  }
}
</script>

对应的html代码中，给按钮绑定事件时，需要传入$event,如下

......
<div class="b1"><button type="button" id="b01" @click="create_data($event)">手机号码</button></div>
......
<button  type="button" id="b02" @click="create_data($event)">身份证ID</button>
......
<div class="b1"><button type="button" id="b03" @click="create_data($event)">人名</button>

运行代码，看下 console.log('点击元素的id='+event.target.id)打印的结果

确实是我给按钮【手机号码】定义的id属性 "b01"

所以我们是可以通过这种方式来判断前端是点击了哪个按钮的

3、使用axios发送get请求(不带参数)

先安装axios，在终端输入安装命令

npm install axios

在create_data()函数中添加axios发送请求的代码，先实现一个不带参数的get请求：生成电话号码

<script>
import axios from 'axios'

export default {
  name: "main_page",
  data() {
    return {
      num1: null,
      num2: null,
      info: null,
    }
  },

  methods: {

    create_data(event) {

      if (event.target.id === "b01") {  //通过event.target.id，获取浏览器监听到的点击事件，并查看点击元素的id，通过比对id值判断触发哪个请求
        axios({
          url: "http://localhost:8000/create_data/phone"  //如果不指定method，默认发送get请求
        }).then(res => {
          this.info = res.data
          console.log(res)

        })
      }
    }
  }
}
</script>

url那里写的是后端【生成电话号码】配置的路由；
this.info = res.data，表示把请求结果输出到info参数；

如果不只明请求方法的话，axios默认发送get请求，所以这里先简单这样写

因为在前面我们已经给按钮绑定了事件，写好代码后，在前端点击【手机号码】按钮，出现如下结果

查了下资料，这表示产生了跨域问题：前端用vue写的，服务器端口是8080，后端是django写的，服务器端口是8000，我们在通过前端来调用后端的服务这样就产生了跨域请求(具体含义请自行查找资料)

4、解决跨域问题

在django项目下，安装一个第三方包来解决跨域问题

pip install django-cors-headers

相关配置

打开settings.py

INSTALLED_APPS = [
    'create_data',
    'polls',
    'study_models_app',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',  # 新增这一行配置
]

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 新增这一行配置，网上都说要放在这里，所以我们也放在这里
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',  
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True # 在添加这一行，允许任何域访问

其实做完上述配置就可以访问get请求了，不过还有一些其他的通用配置，配置上也无妨

# 允许的请求头
CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]
# 允许的http请求
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]