vue 登录页面创建-列表创建验证功能

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其中为真实的返回数据

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

登录失败

登录成功