vue中params传参请求后端数据的一种方式（以获取手机验证码为例）

vue中params传参请求后端数据的一种方式

1、要达到的效果

这是后端给出的接口文档中的获取短信验证码的接口，我们可以明白这是利用params来请求数据，并且header中的content-type要改成application/x-www-form-urlencoded。

接着我们在postman测试是否能行：

从postman可以看到，我们成功地获取了手机动态验证码data。
从后端转前端，我们想要达到的效果就是在用户输完手机号点击获取验证码的时候，把手机号作为telephone的值放到参数里作为请求地址。

接着我们就可以从后台获取到我们的验证码：

2、部分html

<div class="code-input">
<!--验证码输入框-->
    <el-input
       placeholder="验证码"
       v-model="codeNumber"
       onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
       maxlength="5"
    >
    </el-input>
<!--验证码按钮-->
    <el-button type="primary" @click.native.prevent="SendCode" :disabled="disabled=!show">
       <span v-show="show">获取验证码</span>
       <span v-show="!show" class="count">{{count}} s</span>
    </el-button>
</div>

由于我的这个验证码组件和手机号组件是分开来的，它们是兄弟组件，获取验证码需要先知道手机号，因此涉及到兄弟组件传值的问题，具体解决方案参见我的上一篇博客就能明白或者点击这里跳转。

3、部分script

export default {
  props: {
    isphone:{
      type:String
    }
  },
  //更改倒计时时间
  data () {   
    return {
      phone:this.isphone,
      show: true,  // 初始启用按钮
      count: '',   // 初始化次数
      timer: null,
      codeNumber: '',
      isSendCode: false,
    }
  },
  methods: {
    SendCode () {
      this.isSendCode = true;
      //计时器开始
      const TIME_COUNT= 60;
      if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.show = true;
                    clearInterval(this.timer);  // 清除定时器
                    this.timer = null;
                  }
                }, 1000)
              };
      //计时器结束
      this.$axios({
        method: 'post',
        url: '/api/v1/users/getotp',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        params:{
          telephone:this.phone
        }  
      })
      .then(res=>{  
        if(res.data.message === 'SUCCESS'){
           console.log("res")
        }else{
           console.log("err")
        }
      })
      .catch(err=>{                   //请求错误后执行函数
        console.log(err)
      })
    }
  }
}

这里主要看sendCode()方法的axios部分，注意这里的Content-Type是application/x-www-form-urlencoded而不是json了，另外params的格式一定是key：value，不然很可能获取不到噢。