初学者登录界面的简单业务逻辑问题

        做一个网站离不开一个登录界面，作为初学者，我们介绍一下一个登录界面的网页搭建，由于时间不多，我们初略的讲一下，我们先展示一下静态效果图。

        搭建界面太简单，这里我们不仔细讲静态页面的搭建，主要讲述业务逻辑的实现中会遇到的问题，样式搭建的代码如下：

<template>
  <div>
    <van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)"/>
    <div class="container">
         <h2>手机号登录</h2>
         <div class="text">未注册的手机号登陆后将自动注册</div>
         <input type="text" v-model="phoneNumber" placeholder="请输入手机号码">
         <hr>
         <div class="img">
          <input type="text" v-model="picCode" placeholder="请输入图形验证码"><span class="img">
            <img v-if="picUrl" :src=" picUrl " alt="" @click="getPicCode"></span>
         <!-- 有图片的时候显示 -->
         </div>
         <hr>
         <div class="btn">
          <input type="text" v-model="msgCode" placeholder="请输入短信验证码">
          <button :disabled=" SecondTime < 60 " :class="{die: SecondTime < 60, live: SecondTime === 60}" @click="getCodeTime">
            {{ SecondTime === 60 ? '获取验证码' : SecondTime + '秒后重新发送'}}
          </button>
         </div>
         <hr>
         <div @click="login" class="loginBtn">
          登录
         </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  padding: 50px 40px;
  h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .text {
    font-size: 17px;
    color: #c0c0c0;
    margin-bottom: 40px;
  }
  input {
    color: #A9A9A9;
    font-size: 16px;
    margin-top: 10px;
    border: none;
    height: 60px;
  }
  img {
    width: 110px;
    height: 40px;
  }
  .img {
    display: flex;
    align-items: center;
  }
  .btn button {
    background-color: transparent;
    border: none;
    line-height: 70px;
    float: right;
  }
  .loginBtn {
    line-height: 40px;
    text-align: center;
    margin-top: 30px;
    border-radius: 20px;
    height: 40px;
    color: #fff;
    font-size: 20px;
    background-color: #FFA500;
  }
  .die {
    color: #A9A9A9;
  }
  .live {
    color: #FFA500;
  }
}

</style>

 样式用到了vant2组件，大家可以详细见官方文档。 

我们针对几个会遇到的问题来为大家解读一下各个业务逻辑。

1.判断输入的手机号是否正确：

               我们可以使用JavaScript的正则表达式，来判断用户输入的手机号是否正确。

      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phoneNumber)) {
        this.$toast('请输入正确的手机号')
        return false
      }

                该正则表达式参考 各大运营商手机号码段正则表达式

 输入错误的手机号则return不再执行下面的代码并弹出提示框，告知用户手机号码输入有误。

2.从后台服务器接口获取验证码（记得导入axios）

        我们可以在utils文件夹下创建request.js文件，来创建axios实例，将来创建出来的实例，进行自定义配置，这样就不会污染原始的axios实例。

const instance = axios.create({
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  timeout: 5000
})

         接下来在api文件夹里封装接口文件，记得根据接口文档写，代码如下

// 获取图形验证码
import request from '@/utils/request'
export const getPicCode = () => {
  return request.get('/captcha/image')
}

         将请求得到的图片在DOM元素中渲染

<span class="img"><img v-if="picUrl" :src=" picUrl " alt="" @click="getPicCode"></span>

           创建一个getCodeTime方法，并设置获取验证码按钮，在触发事件后弹出提示框“短信发送成功，请注意查收” 

async getCodeTime () {
      if (this.checkFn()) {
        await getMsgCode(this.picCode, this.picKey, this.phoneNumber)
        this.$toast('短信发送成功，注意查收')

        this.start = setInterval(() => {
          this.SecondTime = this.SecondTime - 1
          if (this.SecondTime === 0) {
            clearInterval(this.start)
            this.SecondTime = 60
          }
        }, 1000)
      }
    },

         在button中添加点击事件执行getCodeTime方法，并且设置了disabled属性，使其在点击后的60面内不可再次点击。（v-bind控制css类中用到了三元运算法注意哦）。

<button :disabled=" SecondTime < 60 " :class="{die: SecondTime < 60, live: SecondTime === 60}" @click="getCodeTime">
            {{ SecondTime === 60 ? '获取验证码' : SecondTime + '秒后重新发送'}}
          </button>

         接下来用v-model在输入框中获取用户输入的验证码，并对用户输入的验证码，也进行正则表达式的判断，防止用户瞎写验证码，减少给服务器带来的压力。

if (!/^\w{4}$/.test(this.picCode)) {
        this.$toast('请输入正确的图形验证码')
        return false
      }
      return true

用获取到的验证码与用户输入的验证码进行对比.........

通过后再从服务器GET短信验证码，与用户所输入的进行比对，如果正确，点击登录后则向服务器接口POST提交数据，将用户信息提交给服务器。

提交成功后弹出提示框，提醒用户登录成功，并返回到主页面，提升用户体验

      this.$toast('登录成功')
      this.$router.push('/')

回到/路径，再用路由重定向到指定/home路径

const routes = [
  { path: '/', redirect: '/home' },
]

3.有些页面，需要用户登录后才能访问

因此还需要配置全局前置导航守卫，所有的路由，在被访问到之前，都会先经过全局前置守卫，只有放行了，才会到达，所以我们可以定义一个数组，专门存放用户需要权限访问的页面路径，前置守卫就不展示了，不是很难