Vue+element-ui+axios实现登录注册接口(二)
关于在写接口之前的准备工作在我的上一篇博客之中已有说明,不清楚的小伙伴可以先去看一眼,链接在此准备工作+登录接口。
这一篇我们来讨论下注册。其实接口这块,一通百通,尤其是登录和注册这两个,非常相似。
1、postman测试
首先我们在接口文档找到注册的后台地址:
这里我们可以清楚的看到注册地址是http://localhost:8181/api/v1/sign,并且需要body参数name和password。接下来我们打开postman,输入对应url、method、header里边的content-type,并且在body下面的raw里边输入参数作为注册的账号和密码(注意一定要是先前还没有注册过的,就是说要是数据库里的用户信息里边没有的)。我的测试如下:
这里显示success就说明注册成功啦。
2、两次密码的一致性校验
由于注册要输入两次密码,防止用户犯输入性错误,因此这里需要进行密码的一致性校验。
就像登录界面那样,我们对用户名和密码的格式增加了校验规则,不过是用了rule规则来校验。在这里呢我们可以自己定义一个校验器validator,把它发到rule里面就可以。
部分script代码:
首先我们在data里面定义两个校验器,检验输入框是否为空以及两次密码是否一致。
//在data里面定义两个校验器
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.signForm.repassword !== '') {
this.$refs.signForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.signForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
之后我们在rule里面引入校验器:
signRules: {
username: [
{required: true, trigger: 'change' },
{min:11,max:11,message:'请输入11位手机号',trigger: 'blur'}
],
password: [
{ required: true, trigger: 'change' },
{min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
{ validator: validatePass, trigger: 'blur' }
],
repassword: [
{required: true, trigger: 'change' },
{min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
{ validator: validatePass2, trigger: 'blur'}
]
},
这样子校验规则就可以使用了。
3、注册按钮+axios获取后台数据
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.signForm.repassword !== '') {
this.$refs.signForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.signForm.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
signForm: {
username: '',
password: '',
repassword:''
},
// 发生改变时触发validate事件
signRules: {
username: [
{required: true, trigger: 'change' },
{min:11,max:11,message:'请输入11位手机号',trigger: 'blur'}
],
password: [
{ required: true, trigger: 'change' },
{min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
{ validator: validatePass, trigger: 'blur' }
],
repassword: [
{required: true, trigger: 'change' },
{min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
{ validator: validatePass2, trigger: 'blur'}
]
},
passwordType: 'password',
capsTooltip: false,
loading: false,
redirect: undefined,
}
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
//点完显示密码后聚焦输入框
this.$nextTick(() => {
this.$refs.password.focus()
})
},
handleRegister() {
this.$refs.signForm.validate(valid => {
// 获取loginform的实例(el-form),找到validate方法,根据验证规则rules校验是否valid
if (valid) {
this.loading = true
this.$axios({
method: 'post',
url: '/api/v1/sign',
headers: {
'Content-Type': "application/json;charset=UTF-8"
},
data: {
name: this.signForm.username,
password: this.signForm.password
}
})
.then(res=>{ //请求成功后执行函数
if(res.data.message === 'SUCCESS'){
this.$router.push('/login') //登录验证成功路由实现跳转
this.$notify({
title: '提示',
message: '注册成功',
duration: 3000
});
}else{
this.$notify({
title: '提示',
message: '用户登录失败',
duration: 3000
});
}
})
.catch(() => {
his.$notify({
title: '提示',
message: '用户访问错误',
duration: 3000
});
console.log(err)
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
对于按钮,我们首先用一句this.$refs.signForm.validate(valid => {}
来判断是否满足校验规则,即输入框格式、两次密码一致性等等。
之后就跟上一篇的登录很像,以res.data.message === 'SUCCESS’是否成立来判断可不可以注册成功。
最后附上部分html代码:
<el-form
ref="signForm"
:model="signForm"
:rules="signRules"
class="login-form" autocomplete="on"
label-position="left"
/>
<el-form-item prop="username">
<span class="iconfont svg-container">

</span>
<el-input
ref="username"
v-model="signForm.username"
placeholder="请输入手机号"
name="username"
type="text"
tabindex="1"
autocomplete="on"
/>
</el-form-item>
<el-form-item prop="password">
<span class="iconfont svg-container">

</span>
<el-input
:key="passwordType"
ref="password"
v-model="signForm.password"
:type="passwordType"
placeholder="请输入密码"
name="password"
tabindex="2"
autocomplete="on"
@blur="capsTooltip = false"
@keyup.enter.native="handleRegister"
/>
<span class="el-icon-view show-pwd" @click="showPwd">
</span>
</el-form-item>
<el-form-item prop="repassword">
<span class="iconfont svg-container">

</span>
<el-input
:key="passwordType"
ref="repassword"
v-model="signForm.repassword"
:type="passwordType"
placeholder="再次确认密码"
name="repassword"
tabindex="2"
autocomplete="on"
@blur="capsTooltip = false"
@keyup.enter.native="handleRegister"
/>
<span class="el-icon-view show-pwd" @click="showPwd">
</span>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleRegister">注册</el-button>
</el-form>
4结语
关于登录注册功能就分享到这里,咱下次见。
本篇文章如有错的地方,欢迎在评论指正。喜欢在微信看技术文章,可以微信搜索「胡录乱影」,回复【Python】【前端基础】【vue开发】即可获得视频资源,回复【答辩PPT】【演讲PPT】即可获得超级实用PPT模板,还有更多资料,建议后台留言或者直接私信我。
另,如果觉得这本篇文章写得不错,有点东西的话,各位人才记得来个三连【点赞+关注+分享】。