第08课:开发进行时之小小登陆页

第08课:开发进行时之小小登陆页

前面六篇文章已经将 Vue.js 的基础内容都做了讲解,接下来的内容我们将使用之前讲述的内容来进行项目开发,在项目开发中去提升自己,如何将学到的东西化为自己的经验,这才是重要的。

在开发过程中,重要的是思路,是想法,而不是技术本身,使用 Vue.js,你需要建立你自己的思路,做每一个功能都有千万种方法,区别在于实现功能的方法是否简洁,有没有做很多无用功。

在后续的课程中,我们将实现一个个功能,为大家提供各种解决问题的方法思路,在完成的过程中,大家要去想为什么这样实现?而不是这些代码可以实现这个功能,如果只是拷贝代码,拷贝了一千次你的经验还是一样。

登录与注册

登录与注册是一个网站的基本功能,也是必不可少的功能,在登录与注册中所涉及的内容并不比一般的页面少。

在项目开展前期,就应该规划好每一块内容是什么,需要做些什么,UI 的样式有些什么,页面的功能有些什么。

登录注册页我们需要有哪些功能?基本需要以下三项。

1.输入验证;

2.登录切换;

3.随机验证码。

输入验证

有的人可能会问,我们做输入验证做什么,直接把用户输入的值提交给后台,让后台判断不行吗?能让后台做的事为什么要在我这里处理呢?

在我们前端的工作中,异步交互这一步是最不可控的,在项目优化工作中要尽量较少交互请求,交互都是讲必要性,需符合需求。

而用户输入的内容,我们不可预知。他们可能输入各种各样的内容,在前端,我们首先应该按照相应的账号限制进行判断,如果不满足这些规则就直接提示用户,而不是向后台发送请求。

首先对于每个网站而言,对于输入内容都有不同的限制,比如以下限制条件。

1.长度限制,最短多少,最长多长;

2.首字母必须是字母;

3.只能以字母或数字或者下划线"_"组成;

4.账号只能是手机或者邮箱。

你的网站中登录或注册页面的输入内容可能需要满足上面的一到多条限制。

当我在完成这样一个功能块的时候怎么来处理内容呢?

首先我会在 data 中定义这几个变量:userName、userNameLength、userNameRigth、userNameMsg。将 userName 通过 v-model 绑定到用户名的输入框,userName 设置默认值为空,userNameLength 默认值设为 0,userNameRigth 设置为true。

为用户名输入框绑定失去焦点事件 checkUserName(),在事件中定义我们的规则去判断(附带常用正则表达式),见下面代码。

var userNameRigth=true

//获取用户名输入的长度

this.userNameLength=this.userName.length;

//检测首字母及长度的正则表达式

var userReg = /^[a-zA-Z]\w{4,17}$/;

var userRegRight=userReg.test(this.userName);

//检测账号是否是手机号的正则表达式

//19为今年电信新推出的号段

var phone = /0?(13|14|15|17|18|19)[0-9]{9}/;

var phoneRight=phone.test(this.userName);

//检测账号是否是邮箱的正则表达式

var email = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;

var emailRight=email.test(this.userName);

//然后根据你的需求来进行逻辑判断,比如只需要长度判断

if(this.userNameLength<3||this.userNameLength>16){
    userNameRigth=false;
    this.userNameMsg='账号长度应该为3至16位';
}

this.userNameRigth=userNameRigth

//或者你需要多重判断,你可以选择其中你需要的串行判断

if(!userRegRight){
    userNameRigth=false;
    this.userNameMsg='账号首位只能为字母且长度为3-16位';
}else if(!phoneRight){
    userNameRigth=false;
    this.userNameMsg='您输入的不是手机号';
}else if(!emailRight){
    userNameRigth=false;
    this.userNameMsg='您输入的不是电子邮箱';
}

将用户的输入框进行绑定,在方法中定义每种可能,在用户输入框失去焦点的时候进行串行或并行判断,如果不满足任意一项就将 userNameRigth 设置为 false,并将错误信息 this.userNameMsg 反馈给用户,最后再把 userNameRigth 赋值给全局的 this.userNameRigth,当你在点击登录或者注册按钮的时候,如果 this.userNameRigth 不为true就反馈错误信息,只有为 true 才进行登录或者注册。

如果你在登录或者注册的时候需要输入其他内容,采用一样的方式进行判断,是否满足你们的输入要求,如果满足才执行,不满足一样的设置 this.userNameRigth 为 false,并将错误信息反馈给用户。

当然你也可以使用第三方插件进行验证,网上有很多第三方的验证组件,需要的可以去百度下。

在线正则表达式生成工具中有常用的正则表达式生成、表达式规则介绍、生成的表达式测试等功能。

登录切换(参考百度登录)

如今,我们的项目中都可能存在多种登录,如账号密码登录、手机验证码登录、第三方登录、扫码登录等等。而我们不可能在一个页面为用户展示这么多的登录方式,我们都是通过 button 让用户进行不同的登录方式切换。除去第三方登录跳转之外,其他的登录方式在页面上都只存在部分内容的区别,可能输入区内容不一样,可能没有输入区而是二维码,这时,我们应该如何处理呢?

条件渲染

我们先将页面上相同的部分代码写好,切换按钮写好,然后再将几种登录方式分别作为一个模块,将他们的 HTML 代码装在一个 DOM 节点内,代码如下。

<div class="login_by_username" v-if="loginType=='byUserName'">
    <div class="username_box">
        <input type="text" name="fname"  class="username_input"/>
    </div>
    <div class="password_box">
        <input type="password" name="fname"  class="password_input"/>
    </div>
    <button type="button" class="login_btn">
        <span>登录</span>
    </button>
</div>

<div class="login_by_phoneCode" v-if="loginType=='byPhoneCode'">
    <div class="phone_box">
        <input type="text" name="fname"  class="phone_input"/>
    </div>
    <button type="button" class="send_code">
        <span>发送验证码</span>
    </button>
    <div class="phone_code_box">
        <input type="text" name="fname"  class="phone_code_input"/>
    </div>
    <button type="button" class="login_btn">
        <span>登录</span>
    </button>
</div>

<div class="login_by_QRCode" v-if="loginType=='QRCode'">
    <div class="QRCode_box">
    </div>
</div>

我们将逻辑样式写好,在页面的 data 中定义一个 loginType,初始默认值设置为 byUserName。当它点击切换按钮的时候去改变 loginType 的值,如点击二维码登录,this.loginType='QRCode',这样当你选择哪一种登录方式的时候页面上就会渲染哪种方式。

当你的技术有一定的积累之后,就可以尝试使用组件 + 条件渲染来完成这一块,将不同的内容封装为一个个组件,然后再引用,通过父组件对子组件进行控制。

随机验证码

在网站登录或者注册的时候,都需要用户填写验证码,或者是数字或者是字母,或者是其他一些复杂的验证方式。

本文我们讲的是数字 + 字母的验证方式。

一般网站的数字字母类验证码由前端自行验证控制,也有从后台请求数据控制的。而这里给大家讲解的是,前端自动生产的验证码。

下面来看看实现的逻辑与代码。

首先,我们在 data 中定义三个变量,一个是 code,即验证码,绑定在 HTML 中进行展示,一个是 codeRight,判断验证码的输入正确与否,还有一个是 inputCode,绑定验证码的输入框。

data:{
    code:'',
    codeRight;.:false,
    inputCode:''
}

接着,我们需要随机生产验证码的内容,并在页面渲染之后执行一次,并将验证码所在的 DOM 绑定点击事件,这样点击验证码就可以更换新的验证码。

createCode:function(codeLength){//codeLength 为验证码的长度,可以通过传参来控制,也可以直接在方法中固定
  var code='';//将初识验证码设置为文本空,为了避免随机连续生成两个数字相加执行加法运算。
  var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];//随机产生的范围,你想做汉字也可以,只需要在这里将 random 数组中加入汉字
  for(var i = 0; i < codeLength; i++) {
   var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)根据你上面的 random 长度来决定
   code += random[index];//根据索引取得随机数加到 code 上 
  } 
  this.code = code;//把 code 值赋给验证码 
},

然后,我们在绑定一个验证码输入框失去焦点事件。

inputBlur:function(){
    if(this.code==this.inputCode){//在这里你还可以根据用户的输入正确与否添加提示信息
        this.codeRight=true
    }else{
        this.codeRight=false
    }
}

最后当用户点击登录或者注册的时候,你根据 this.codeRight 的值来进行判断,如果 this.codeRight 为真,则继续执行,如果为假,就进行提示。

自定义选择框

在注册的时候可能会让用户进行一些选择,比如爱好选择,又比如同意用户注册协议。HTML 自带的选择框的样式可能不是很满足我们对样式的需求,而且还需要对输入框的值进行处理才能传递给后台。

如何自定义呢?

自定义的选择框需要有两种样式,一种为选择状态,一种为未选中状态。你可以叫 UI 提供两张图片替代选择框。

整体思路即数据驱动页面。每个选项就是一个对象,其中包括选项展示的名称,是否被选中,与后台交互时约定的值。

用 v-for 渲染每个选项,选项中选中与未选中的状态由数据来控制,在点击每个选项的时候通过传递参数来进行判断,与后台交互的时候根据每个数据的是否选中状态来判断该传递什么给后台。

1.单选框

以性别选择为例。

示例代码如下。

<template>
  <div id="app">
   <div class="sex_box">
     <div class="sex_one" v-for="(item,index) in sexData" @click="selectSex(index,item.code)">
       <img src="../image/login/isSelect.png" alt="" v-if="item.isSelect==true" class="select_ico">
       <img src="../image/login/unSelect.png" alt="" v-if="item.isSelect==false" class="select_ico">
       <span>{{item.text}}</span>
     </div>
   </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      sexData: [{
        text:'男',
        code:0,
        isSelect:false
      },{
        text:'女',
        code:1,
        isSelect:false
      }],
      sexCode:null
    }
  },
  methods:{
    selectSex:function (index,code) {
      var data=this.sexData;
      var dataLen=data.length;
      for(var i=0;i<dataLen;i++){//循环选项
        if(i==index){//判断并设置当前选中的选项
          this.sexData[i].isSelect=true;
          this.sexCode=code
        }else {//更改为选中的状态
          this.sexData[i].isSelect=false
        }
      }
    }
  }
}
</script>

2.复选框

上图效果实现代码如下。

<template>
  <div id="app">
    <div class="hobby_box">
      <div class="hobby_one" v-for="(item,index) in hobbyData" @click="selectSex(index)">
        <img src="../image/login/isSelect.png" alt="" v-if="item.isSelect==true" class="select_ico">
        <img src="../image/login/unSelect.png" alt="" v-if="item.isSelect==false" class="select_ico">
        <span>{{item.text}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data() {
      return {
        hobbyData: [{
          text: '睡觉',
          code: 0,
          isSelect: false
        }, {
          text: '吃饭',
          code: 1,
          isSelect: false
        }, {
          text: '打豆豆',
          code: 2,
          isSelect: false
        }, {
          text: '写代码',
          code: 3,
          isSelect: false
        }]
      }
    },
    methods: {
      selectSex: function (index) {
        if(this.hobbyData[index].isSelect==true){
          this.hobbyData[index].isSelect = false;
        }else {
          this.hobbyData[index].isSelect = true;
        }
      }
    }
  }
</script>

看完两者的实现方法,你可以通过上述方法实现编写是否同意注册协议的按钮,赶紧试一试吧。

结语

用户登录注册模块一般包含登录、注册、修改密码、找回密码等页面内容,其中除去样式以外,主要的内容就是输入判断,根据用户输入的正确与否进行提示或者执行下一步。而容易出错的地方是串行执行的多种条件判断。如果你在后续做此模块的时候遇见任何问题,欢迎到我的读者圈留言。

上一篇
下一篇
目录