一个简单的登录表单的创建及使用

前言

登录表单，最常见的就是一个账号输入框、一个密码输入框，一个验证码框、一个复选框（勾选某某协议）、一个登录按钮，这些元素

上图是一个很简单的登录表单

先创建一个基本的表单

表单的基本样式和结构 我们这里使用 elment 的插件

我们先安装包

npm i element-ui -S

安装好包后 就需要在对应的文件内去引用了, 而引用分为两种: 一种是全部引入, 另一种是按需引入

全部引入的好处就是方便,引入一次之后就可以用里面的所有组件,缺点是体积太大,有很多的我们并不需要

按需引入的好处就是体积小,稍微有点麻烦的就是用哪个就要引入哪一个

这里使用 按需引入的方法:

在对应的组件内引入 form :  

import { form, input, checkbox, button } from 'element-ui';

然后就在对应的vue文件内直接使用

参考代码如下: 

  
    
  
  
    
  
  
    
      用户平台使用协议
    
  
  
    登录
  

结构就是 el-form 内包含 el-form-item

       

               

       

        ......

而 checkbox / button 位置和 input 的位置一样

在标签内添加 placeholder 属性 可以在输入框内添加提示信息

这个时候一个基本的登录表单就出来了

但是 光有样子不行 得能实现真正的登录效果

数据绑定

我们需要得到用户输入的内容 所以需要使用到 v-model 进行双向数据绑定

v-model 是语法糖 可以进行两个操作:  v-bind绑定一个value属性. v-on指令给当前元素绑定input事件

所以这个时候我们需要在 data 内创建一个表单对象 给账号密码一个空值

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',  // 账号
        password: '',  // 密码
        isAgree: false // 复选框
      },
    }
  }
}

然后再给表单和输入框进行双向数据绑定 

:model: 'loginForm'>

        props:'username'>

                loginForm.username' />

       

        ......

这个时候数据能够双向绑定了 但是还缺少一步 就是输入的内容是否符合我们需要的标准

所以我们需要定义一下规则

登录表单校验

给el-form 绑定rules规则

:model: 'loginForm' :rules="rules">

在data内定义具体的规则

data() {
  return {
    ...
    rules: {
      username: [
        {required: true,message: '请输入账号',trigger: 'blur'}, 
        {min: 2,max: 12,message,message: '账号格式不正确',trigger: 'blur'}
      ],
      password: [
        {required: true,message: '请输入密码',trigger: 'blur'},
        {min: 6,max: 16,message: '密码长度应该为6-16位之间',trigger: 'blur'}
      ]
    }
  }

自定义校验

复选框需要校验是否选中 所以需要自定义的去校验

登录

终于到了登录了, 要想实现登录效果 我们首先要给登录按钮绑定登录事件

点击按钮触发事件 这个时候我们需要再进行一次校验 这次校验又称为兜底校验

校验成功后 就需要调用action内的方法

在action内  调用接口 携带表单数据去发送请求  (此处的表单数据是点击登录时传递过来的)

得到接口返回后的数据(token)后 储存到vuex和本地

Vuex数据持久化

Vuex 有一个问题 每次刷新页面后 数据就会丢失 所以我们需要做持久化处理

我们刚才把数据也储存到浏览器本地了一份, 所以可以在本地去获取 

const state = {
  token: getToken(), // 从缓存中读取初始值
}

在登录触发的事件最后 进行页面跳转

this.$router.push('/')   // 此处的 / 是主页地址

在登录成功跳转之前 还有一个重要的一步 就是导航守卫内判断

因为有一些页面 用户是可以使用游客模式去访问 不需要任何的权限,而有一些页面是需要登录后才能详情的去访问

所以我们在前置导航守卫内做判断

判断是否有后端返回给我们的token值, 如果判断成功就放行,

如果判断没有 就拦截下来不让通行,会返回到登录页

总结

此时此刻 一个拥有登录功能的登录表单就这样做好了

感谢屏幕前的你阅读