Django+Vue項目學習第四篇：使用axios發送攜帶參數的get請求

傳送門：

Django+Vue項目學習第一篇：django后台搭建

Django+Vue項目學習第二篇：vue項目創建 

Django+Vue項目學習第三篇：使用axios發送請求，解決跨域問題，調通前后端 

Django+Vue項目學習第五篇：vue+django發送post請求，解決csrf認證問題

Django+Vue項目學習第六篇：vue+django發送post請求，設置不同content-type，前后端如何處理參數

上一篇實現了用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認證問題