Django+Vue项目学习第四篇:使用axios发送携带参数的get请求
2023-09-11 14:21:25 时间
传送门:
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认证问题
相关文章
- Django组件:django-simple-captcha 使用
- django-vue 混合开发
- Django之cookie验证
- Django ~ 2
- 第三百七十八节,Django+Xadmin打造上线标准的在线教育平台—django自带的admin后台管理介绍
- django 简易博客开发 3 静态文件、from 应用与自定义
- python-django-fastdfs+Nginx的安装和配置_20191122
- [Django] Auth django app with rest api
- DJANGO里让用户自助修改邮箱地址
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Get up and running with vue-router
- Django管理工具django-admin.py创建项目
- Python Django安装MySQL库
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- Vue中vue-i18n结合element-ui实现国际化
- Django项目之【学员管理系统】
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(二)vue 指令及用法举例
- Django(19)-ORM条件查询
- Django上传头像中具体问题的解决方案
- Vue: vue-router路由
- Vue:第一个vue-cli项目
- Vue学习笔记——vue-router