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',
]再访问一下试试，可以正常调用请求得到返回数据
本篇先到这里，主要说了一下前端如何绑定事件以及利用axios发送一个简单的get请求，并且解决了跨域问题
下一篇继续说下发送get请求，但是会在请求中携带参数
附上几篇参考的博文：
- http://www.axios-js.com/docs/#axios-get-url-config
- https://www.jianshu.com/p/007fe1a6f444
- https://www.cnblogs.com/bdxily/p/14642152.html
- https://blog.csdn.net/haeasringnar/article/details/80868534
腾讯云开发者
