目录
1、表单数据绑定和校验
1.1 登录表单属性绑定
1.2 添加数据校验规则
2、登录
2.1 绑定 登录 点击事件
2.2 Cookie 的安装与使用
2.3 编码、解码
2.4、cookie 与 jsencrypt 整合使用
需求分析:
①、创建 login.vue 页面时,需要从 cookie 中获取 用户名、密码 和 记住我
②、添加表单的数据校验功能
③、点击登录按钮, 完成登录功能
此时若勾选了 "记住我" , 则需要将 用户名、密码和 记住我 添加到 cookie 中
发送异步登录请求
若请求成功,页面跳转到 "首页" 或 "重定向到之前访问被拦截的页面"
若请求失败,重写刷新验证码
login.vue 文件
el-form 标签中绑定 loginForm
el-input 标签中绑定 loginForm.username, loginForm.password, loginForm.code, loginForm.remeberMe
在 data 数据中定义 loginForm 对象如下:
loginForm: {
username: '',
password: '',
rememberMe: false,
code: '',
uuid: ''
}
login.vue 文件
el-form 标签中定义 :rules 属性
el-form-item 标签中定义 prop 属性
在 data 数据定义校验规则
loginRules: {
username: [
{ required: true, trigger: 'blur', message: '用户名不能为空' }
],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' }
],
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
}
el-form 标签中添加 ref 属性, 这个 ref 属性在能帮助我们获取整个表单对象
el-button 标签中 添加 click
登录
在 methods 方法中添加 handleLogin 方法
handleLogin () {
this.$refs.loginForm.validate(valid => {
console.log('校验结果: ' + valid)
})
}
测试表单数据校验
至少有一个没满足校验要求的情况
填写数据满足校验规则的情况:
2.2.3 安装 js-cookie
在 vscode 中 按住 ctrl + shift + ~ ,调出终端
npm install js-cookie --save
2.2.4 引入 cookie
在 login.vue 中