Django+Vue项目学习第四篇：使用axios发送携带参数的get请求

传送门：

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()函数，在里面添加如下代码

上述标红的代码是这次添加的代码，

(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认证问题