黑马程序员课程Vue实战项目_Element_UI——实现登录功能笔记

黑马程序员课程视频

 

登录业务流程

1.在登录页面输入用户名和密码

2.点击登录时调用后台接口进行验证

3.验证通过后，根据后台响应状态跳转到项目主页

目录

一.项目开始前的处理

1.使用vscode打开项目文件夹

2.添加vue-cli-plugin-element插件和axios依赖

二.创建组件Login.vue

1.创建基本结构

2.将组件通过路由的方式渲染到根组件上

3.实现登录组件的布局

 4.登录组件表单的数据绑定

 5.登录组件表单的数据验证

 6.登录组件实现表单的重置

 7.登录组件登录前的预验证

 8.登录组件根据预验证是否发起请求

 9.登录组件配置弹框提示

 10.登录组件登录成功后的行为

11.路由导航守卫控制访问权限

 12.退出功能

13.优化element-ui按需组件的导入形式

 14.提交登录功能代码

---

一.项目开始前的处理

1.使用vscode打开项目文件夹

在终端输入：

git status //查看工作区是否干净

git checkout -b login(分支名字) //创建分支 ,名字自定义

git branch //查看当前项目的所有分支

2.添加vue-cli-plugin-element插件和axios依赖

添加完成后运行项目 ，并对项目进行梳理，将不必要的代码和组件删除

 

 

 

运行成功后点击“启动app”

删完不要的文件后的资源管理器

删除代码后：

router/index.js:

 

App.vue:

 

二.创建组件Login.vue

这里的vue是单文件组件，由三部分组成：结构，样式，行为

1.创建基本结构

less表示支持less语法，scoped表示当前样式只在这个组件生效

2.将组件通过路由的方式渲染到根组件上

在router文件夹中的index.js导入登录组件，并添加路由规则，

当访问到/login时，就会展示Login组件

添加了路由规则还不行，还需要在App.vue中添加路由占位符

保存之后会报错，是因为没有安装less和less-loader，选择开发依赖进行安装 

 设置重定向：当用户访问到了根路径，就重定向到/login

我们需要在路由规则中添加一个重定向路由规则

 这样子的话，用户访问到/的时候，就会自动跳转到登录组件

3.实现登录组件的布局

element_ui文档

使用Element_UI组件实现布局

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

设置一下全局样式：