vue登录时点击登录之后显示cannot post/
框架:vue请求插件:axios场景:实现登录功能错误场景:点击登录按钮之后,页面跳转并显示cannot post/,请求后台的接口未被调用。源码如下:<form method="post" action="" class="layui-form" ><input name="usern
·
框架:vue
请求插件:axios
场景:
实现登录功能
错误场景:
点击登录按钮之后,页面跳转并显示cannot post/
,请求后台的接口未被调用。
源码如下:
<form method="post" action="" class="layui-form" >
<input name="username" placeholder="用户名" type="text" class="layui-input" v-model="username">
<hr class="hr15">
<input name="password" placeholder="密码" type="password" class="layui-input" v-model="password">
<hr class="hr15">
<input value="登录" style="width:100%;" type="submit" @click="submitFunc()">
<hr class="hr20" >
</form>
submitFunc(){
if(this.username.trim() === ''){
alert('用户名不能为空');
return 0;
}
if(this.password.trim() === ''){
alert('密码不能为空');
return 0;
}
this.$axios({
method:'post',
url:'/api/portal/page/login',
data:{
username:this.username.trim(),
password:this.password.trim()
}
}).then(res => {
console.log(res)
}).catch(reason => {
console.log(reason)
});
}
原因:
登录按钮的类型为submit
,点击之后进行了表单信息的校验,再请求后台接口。
解决办法:
将登录按钮类型改为button
,或者登录按钮类型为submit
时,加 return true
或false
例:<input type="submit" name="Submit" value="注 册" onClick=" return check();">
,在JS中判断的时候 写return true
; 或者return false
;
更多推荐
所有评论(0)