09 使用Vue+el-form+form-validate实现管理端登录接口联调前准备工作实战

前言

这是《Vue + SpringBoot前后端分离项目实战》专栏的第7篇博客，感谢你能从成千上万篇博客中打开这一篇，和我一起学习前端开发实战知识，让我们一起开始吧。

目录

前言

一、上节回顾和本节介绍

1. 上节回顾

2. Vue + SpringBoot前后端分离项目实战的目录更新介绍

3. 本节介绍 

二、两种不同的登录界面

1. 第1种 - form居中

2. 第1种 - form居中实现过程

3. 第2种 - 左图右表单

4. 第2种 - 左图右表单 实现过程 

三、使用form-validate进行登录前验证

1. form表单添加必须属性

2. 在data数据依赖处添加formRules验证规则

3. 登录方法的验证实现

4. 登录验证过程流程图

四、el-input组件的自研实现

1. tg-input自研组件需要实现的最基础功能

2. 虚拟DOM部分的使用

3. tg-input组件的引入和定义

4. tg-input实现代码

5. 更加丰富的tg-input应该具备的功能

五、 本项目进展图例介绍

1. 内容架构

2.  代码目录

六、读完本小节需要思考的几个问题 

---

一、上节回顾和本节介绍

1. 上节回顾

上一节我们主要针对 用户随意输入url，而这个url系统中又没有提前预设情况下出现问题 的解决，我们采用了全局路由守卫的方式，进行异常非法路由进行了拦截；而后又实现了404错误页，并且自研实现了tg-button组件。