vue中params传参请求后端数据的一种方式(以获取手机验证码为例)
vue中params传参请求后端数据的一种方式1、要达到的效果这是后端给出的接口文档中的获取短信验证码的接口,我们可以明白这是利用params来请求数据,并且header中的content-type要改成application/x-www-form-urlencoded。接着我们在postman测试是否能行:从postman可以看到,我们成功地获取了手机动态验证码data。从后端转前...
·
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,不然很可能获取不到噢。
更多推荐
已为社区贡献3条内容
所有评论(0)