vue页面由三部分组成

结构 template

script 行为

样式  style

为了防止组件之间的样式冲突

背景色设置

设置登录表单盒子

增加表单输入项，element复制表单输入项

npm install element-ui --save  安装

npm i element-ui -S 安装ui文件

main.js包中导入对应接口

文本框css文件

配置输入框前得小图标

更换小图标方法

1.导入资源包 fonts

2.main方法中导入接口名称

3.方法中，增加图标序号

登录组件得数据绑定

表单的数据验证  鼠标离开输入框，对输入内容的合法性进行验证

输入框设置标签

整体表单增加规则方法

最终显示效果

重置按钮 实现表单重置功能

实例对象 form methods  访问resetFields

前端显示效果

效果：

点击前

点击后，验证消失

登录前预验证 内容是否合法

调用函数 实现预验证

valid 验证的形参 布尔值（正确/错误）

预验证发起请求

使用axios 网络访问工具

安装：npm install axios

npm install --save axios vue-axios

main函数终导入axios

启动mysql 后台服务

优化 async await。异步取数据

根据数据包中，选择data其中为真实的返回数据

显示返回结果，用户不存在

登录失败

登录成功