Vue使用axios发送get请求并携带参数
Vue 参数 请求 发送 get Axios 携带 使用
2023-09-11 14:22:31 时间
前言
其实关于Vue使用axios发送get请求并携带参数,我之前写过一篇,但是昨天又发现了另外一种方式,所以就单独写一篇进行总结。
之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式
感兴趣可以参考: Vue使用axios进行get请求拼接参数的两种方式
关于如何使用安装下载axios,我之前也写过,感兴趣的话可以看看。
前台传参
这里我有一个业务场景,登录的时候需要把输入的账号和密码传递给后端:
这里前后端没做加密逻辑,只是为了举例子解释说明!正常是要加密的,不能是要明文密码登录!
前端传递的时候,可以借助axios的params属性:
注意:axios的回调函数,一定要使用箭头函数,不然this的指向不是vue示例
相关代码如下:
login(){
axios.get('http://localhost:9090/user/login', {
// 传递的参数
params: {
// 账号
account:this.formLogin.account,
// 密码
password:this.formLogin.password,
// 测试参数
testParam:'hello world'
}
// 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
}).then(res =>{
// 如果状态为400,说明登录失败
if(res.data.status===400){
// 登录失败提示
this.$message({showClose: true, message: '登录失败,请检查账号和密码!',type: 'error', duration:2000,center:true});
}else{
// 登录成功提示
this.$message({showClose: true, message: '登录成功!',type: 'success', duration:2000,center:true});
// 跳转到首页路由
this.$router.push("/main/home");
}
}).catch(error =>{
console.log(error)
})
},
可以通过控制台查看完整的get请求:
http://localhost:9090/user/login?account=wyh19991101&password=123456&testParam=hello+world
也可以通过控制台查看传递的参数:
后台接参
前台代码以及写完了,再看下后台是否可以正常接收吧
可以发现,也是没有任何问题的。
这样就完成了一个简单的使用axios发送get请求并携带参数的方式了。并且涉及到前后端交互。
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- vue :style 动态绑定style
- Ant Design Of Vue 组件库中获取 <a-range-picker>日期滑块选择器的参数
- vue资料:vue一个下拉框值改变,另一个值清空
- npm升级自身和@vue/cli (node v14.17.1)
- vue框架-基础4-vue-使用vue-cli工具
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Import component into page
- vue.js3:文本对比或比较(codemirror@5.65.5 / vue@3.2.37)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue v-show指令
- vue的插值语法及el和data、methods语法释义
- vue-element-admin后台管理模板脚手架
- Vue入门教程:node安装vue命令行工具及启动项目
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 怎样安装vue2和vue3的Vue.js devtools
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- 运行vue项目eslint 校验错误
- vue拦截器qs踩坑记录:qs.parse()、qs.stringify()使用方法,以及数组参数处理
- Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- vue-router2路由参数注意问题
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Vue实战狗尾草博客管理系统第二章
- Vue中vue-i18n结合element-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue中一个组件导入另一个组件
- Vue学习笔记——vue-router
- vue路由传递参数的几种方式详解
- 测试开发之Vue学习笔记-H5实例百度音乐