vue登录注册

vue登录注册

1. 注册
   1.1 注册页面的布局
   1.2 注册业务逻辑的实现
   1.3封装api
2. 登录
   3.导航守卫
3. 注册
   1.1 注册页面的布局
   需要用到Vant的Field组件
   1.views下新建一个注册页面 ，完成基本布局。引入Vue和Field并使用。
   3.给注册页面添加一个单独的路由，注册页面不需要底部。（注意，相关样式需要引入不同的组件，请细心查看官方文档，按需拿取内容）
4. 利用计算属性给输入框做条件判断。本案例以手机号为例。

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