前言
登录表单,最常见的就是一个账号输入框、一个密码输入框,一个验证码框、一个复选框(勾选某某协议)、一个登录按钮,这些元素
上图是一个很简单的登录表单
先创建一个基本的表单
表单的基本样式和结构 我们这里使用 elment 的插件
我们先安装包
npm i element-ui -S
安装好包后 就需要在对应的文件内去引用了, 而引用分为两种: 一种是全部引入, 另一种是按需引入
全部引入的好处就是方便,引入一次之后就可以用里面的所有组件,缺点是体积太大,有很多的我们并不需要
按需引入的好处就是体积小,稍微有点麻烦的就是用哪个就要引入哪一个
这里使用 按需引入的方法:
在对应的组件内引入 form :
import { form, input, checkbox, button } from 'element-ui';
然后就在对应的vue文件内直接使用
参考代码如下:
<el-form ref="form" :model="loginForm" :rules="loginRules">
<el-form-item prop="mobile">
<el-input v-model="loginForm.mobile" placeholder="请输入手机号" />
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
</el-form-item>
<el-form-item prop="isAgree">
<el-checkbox v-model="loginForm.isAgree">
用户平台使用协议
</el-checkbox>
</el-form-item>
<el-form-item>
<el-button style="width:350px" type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
结构就是 el-form 内包含 el-form-item
<el-form>
<el-form-item>
<el-input />
</el-form-item>
......
<el-form>
而 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 // 复选框
},
}
}
}
然后再给表单和输入框进行双向数据绑定
<el-form :model: 'loginForm'>
<el-form-item props:'username'>
<el-input v-model:'loginForm.username' />
</el-form-item>
......
<el-form>
这个时候数据能够双向绑定了 但是还缺少一步 就是输入的内容是否符合我们需要的标准
所以我们需要定义一下规则
登录表单校验
给el-form 绑定rules规则
<el-form :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值, 如果判断成功就放行,
如果判断没有 就拦截下来不让通行,会返回到登录页
总结
此时此刻 一个拥有登录功能的登录表单就这样做好了
感谢屏幕前的你阅读