Vue前端项目-登录组件-登录功能(上)

目录

1、表单数据绑定和校验

1.1 登录表单属性绑定

1.2 添加数据校验规则

2、登录

2.1 绑定 登录 点击事件

2.2 Cookie 的安装与使用

2.3 编码、解码

2.4、cookie 与 jsencrypt 整合使用


需求分析:

①、创建 login.vue 页面时,需要从 cookie 中获取 用户名、密码 和 记住我 

②、添加表单的数据校验功能

③、点击登录按钮, 完成登录功能

       此时若勾选了 "记住我" , 则需要将 用户名、密码和 记住我 添加到 cookie 中

       发送异步登录请求

              若请求成功,页面跳转到 "首页" 或 "重定向到之前访问被拦截的页面"

              若请求失败,重写刷新验证码

1、表单数据绑定和校验

1.1 登录表单属性绑定

login.vue 文件

el-form 标签中绑定 loginForm

el-input 标签中绑定 loginForm.username, loginForm.password, loginForm.code, loginForm.remeberMe









在 data 数据中定义 loginForm 对象如下:

      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: ''
      }

1.2 添加数据校验规则

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: '验证码不能为空' }]
      }

2、登录

2.1 绑定 登录 点击事件

el-form 标签中添加 ref 属性, 这个 ref 属性在能帮助我们获取整个表单对象

el-button 标签中 添加 click



登录

在 methods 方法中添加 handleLogin 方法

    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        console.log('校验结果: ' + valid)
      })
    }

测试表单数据校验

至少有一个没满足校验要求的情况

Vue前端项目-登录组件-登录功能(上)_第1张图片

填写数据满足校验规则的情况:

Vue前端项目-登录组件-登录功能(上)_第2张图片

2.2 Cookie 的安装与使用

2.2.3 安装 js-cookie

在 vscode 中 按住 ctrl + shift + ~ ,调出终端

npm install js-cookie --save

2.2.4 引入 cookie

在 login.vue 中

你可能感兴趣的:(vue)