傳送門：

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

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

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

上一篇實現了用axios傳送get請求，並解決了vue+django跨域的問題，但是那個請求沒有攜帶任何引數，

所以這次來看下如何傳送攜帶引數的get請求

本次要實現的功能是：點選【人名】按鈕後生成指定數量的資料

1、後端處理邏輯

後端程式碼之前已經在views.py中寫好了，如下

def create_name(num):
    """生成姓名"""
    names = [fake.name() for
 
 i in range(int(num))]  # 生成多個
    return " ".join(names)


def name(request):
    """
    生成姓名的檢視方法
    :param request: 
    :return: 
    """
    num = request.GET.get("num")
    # print(num)
    if num == "" or num is None:
        data = create_name(20)
    else:
        data = create_name(num)
    
 
return HttpResponse(data)

重點：上述程式碼中，通過_{num = request.GET.get("num")}，來獲取前端get請求中的引數"num"的值

2、前端處理邏輯

開啟main_page.vue，找到methos下的create_data()函式，在裡面新增如下程式碼

<script>
import axios from 'axios'

console.log('cookie='+document.cookie)
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)

        })
      } else if (event.target.id === "b03") {
        let payload = {
          num: this.num2
        }
        console.log(payload)
        axios({
          method: "get",
          params: payload,  //傳送get請求，使用params關鍵字接收請求引數
          url: "http://localhost:8000/create_data/name"
        }).then(res => {
          this.info = res.data
          console.log(res)
        })
      }
    }
  }
}
</script>

上述標紅的程式碼是這次新增的程式碼，

(1)定義了一個引數 payload

let payload = {
          num: this.num2
        }

這裡面是隨著請求傳送的引數，當引數很多時，可以用這種方式來把所有引數放到一個物件中；

(2)觀察axios下的程式碼邏輯，其中

method: 'get'， 添加了method引數，它的值為get，表明這是一個get請求；

params: payload, axios傳送get請求時，需要用params關鍵字接收引數，我們把payload傳給了它；

url: xxx， 這裡面是配置的請求地址；

這樣前後端程式碼就寫好了，到頁面點選一下，可以看到如下結果

從下一篇開始，將重點介紹vue+django如何傳送post請求並尋求解決django的csrf認證問題