Django+Vue專案學習第三篇：使用axios傳送get請求，解決跨域問題，調通前後端

阿新 • • 發佈：2021-11-24

傳送門：

Django+Vue專案學習第一篇：django後臺搭建

Django+Vue專案學習第二篇：vue專案建立

通過前兩篇，已經把後端和前端的架子搭起來了，並且後端寫好方法返回資料，本篇將詳細介紹如何使用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,
      // CsrfToken: token()
    }
  },
  
  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',
]