Vue使用axios发送get请求并携带参数

àì夳堔傛蜴生んèń 2023-09-23 23:37 156阅读 0赞

## 前言 ##

其实关于Vue使用axios发送get请求并携带参数，我之前写过一篇，但是昨天又发现了另外一种方式，所以就单独写一篇进行总结。

> 之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式

感兴趣可以参考： [Vue使用axios进行get请求拼接参数的两种方式][Vue_axios_get]

关于如何使用安装下载axios，我之前也写过，感兴趣的话可以看看。

## 前台传参 ##

这里我有一个业务场景，登录的时候需要把输入的账号和密码传递给后端：

> 这里前后端没做加密逻辑，只是为了举例子解释说明！正常是要加密的，不能是要明文密码登录！

![在这里插入图片描述][7cbda99b642d4adf9ca04fdfe5133d5a.png]

前端传递的时候，可以借助axios的params属性：

![在这里插入图片描述][d9e9f8e305f74a288c5e15a02526bfd4.png]

> 注意: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

![在这里插入图片描述][0b3f3fb0a9f54ca2a913a56bbf57e286.png]

也可以通过控制台查看传递的参数：

![在这里插入图片描述][4cf9a6b6bcd7410faad0e1daefdbee8b.png]

## 后台接参 ##

前台代码以及写完了，再看下后台是否可以正常接收吧

可以发现，也是没有任何问题的。

![在这里插入图片描述][6197247bbc124eeda14767308a24e86b.png]

这样就完成了一个简单的使用axios发送get请求并携带参数的方式了。并且涉及到前后端交互。

[Vue_axios_get]: https://blog.csdn.net/weixin_46713508/article/details/127952926
[7cbda99b642d4adf9ca04fdfe5133d5a.png]: https://img-blog.csdnimg.cn/7cbda99b642d4adf9ca04fdfe5133d5a.png
[d9e9f8e305f74a288c5e15a02526bfd4.png]: https://img-blog.csdnimg.cn/d9e9f8e305f74a288c5e15a02526bfd4.png
[0b3f3fb0a9f54ca2a913a56bbf57e286.png]: https://img-blog.csdnimg.cn/0b3f3fb0a9f54ca2a913a56bbf57e286.png
[4cf9a6b6bcd7410faad0e1daefdbee8b.png]: https://img-blog.csdnimg.cn/4cf9a6b6bcd7410faad0e1daefdbee8b.png
[6197247bbc124eeda14767308a24e86b.png]: https://img-blog.csdnimg.cn/6197247bbc124eeda14767308a24e86b.png