vue登录注册
- 注册
1.1 注册页面的布局
1.2 注册业务逻辑的实现
1.3封装api - 登录
3.导航守卫 - 注册
1.1 注册页面的布局
需要用到Vant的Field组件
1.views下新建一个注册页面 ,完成基本布局。引入Vue和Field并使用。
3.给注册页面添加一个单独的路由,注册页面不需要底部。(注意,相关样式需要引入不同的组件,请细心查看官方文档,按需拿取内容) - 利用计算属性给输入框做条件判断。本案例以手机号为例。
1.在views目录下创建三个文件
1.1、一个RetrievePass.vue文件写入注册的代码块
1.2、一个Register.vue文件写入手机验证码登录
1.3、一个Login.vue文件写入密码登录
RetrievePass.vue文件注册
<template>
<!-- 注册 -->
<div>
<div class="zhx_retrieve">
<van-field v-model="sms" center clearable placeholder="请输入手机号">
<template #button>
<a size="small" type="primary">发送验证码</a>
</template>
</van-field>
<van-cell-group>
<van-field v-model="sss" placeholder="请输入验证码" />
</van-cell-group>
<van-cell-group>
<van-field v-model="password" placeholder="请输入密码" />
</van-cell-group>
</div>
<div class="zhx_login_button">
<button>登录</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sms: "",
sss: "",
password: "",
};
},
};
</script>
<style>
.zhx_retrieve {
width: 100%;
height: 25vh;
}
.zhx_login_button {
width: 100%;
height: 10vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
}
.zhx_login_button button {
width: 90%;
height: 7vh;
background: orange;
border-radius: 18px;
border: none;
}
</style>
1.2 注册业务逻辑的实现
注:在此之前,记住要先去路由页面添加一个注册页面的路由。
1.补充了密码以及验证码的计算属性判断
密码:如果为空返回空,如果不符合正则,返回格式错误,否则表示可以直接返回空
验证码:如果为空返回空,否则不为五位,返回验证码格式错误,否则成功返回空
2.验证码
绑定点击事件senCode
将提示信息{
{buttonmsg}}放在按钮内容中。
定义函数:(定时器注意用箭头函数)每一秒钟定义一次,先提前声明时间,在计时器内让时间减减,当时间为零时,清除定时器,同时btn的内容改为发送验证码,最后return。未return时,让按钮内的内容为时间减减+后重新发送(注意:在开启定时器时,要让按钮禁止点击,在清除定时器后再让按钮可点。)
Register.vue文件手机验证码登录
<template>
<!-- 手机验证登录 -->
<div>
<div class="zhx