傳送門：
Django+Vue項目學習第四篇：使用axios發送攜帶參數的get請求
Django+Vue項目學習第五篇：vue+django發送post請求，解決csrf認證問題
Django+Vue項目學習第六篇：vue+django發送post請求，設置不同content-type，前后端如何處理參數
通過前兩篇，已經把后端和前端的架子搭起來了，並且后端寫好方法返回數據，本篇將詳細介紹如何使用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