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

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

前台传参

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

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

注意:axios的回调函数,一定要使用箭头函数,不然this的指向不是vue示例

相关代码如下

         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请求并携带参数的方式了。并且涉及到前后端交互。