vue电商后台管理系统保姆级教程（三）——主页布局，登录和退出功能

总文章地址：

vue.js基础还不会？——看这篇文章就够了

14万字手把手教你做vue电商后台管理（全）——技术栈（vue全家桶 Webpack Git axios Element-ui）

3、主页布局，登录和退出功能

3.1登录概述

http无状态：
如果 前端和后台接口不存在跨域问题，那么使用cookie和session来保持登录状态
如果存在跨域问题，使用token维持状态。

3.2 token原理分析

3.3登录功能实现

步骤：
1、打开项目文件后在控制台创建一个新的分支，当这个分支完成之后，在合并到master分支上
创建分支：

3.4梳理项目结构

在可视化面板中启动app

main.js是整个项目的入口文件
路由写在router.js中
需要导入的文件都在此导入
页面内容写在app.vue中，初始化的时候需要把app.vue中默认的内容删了。后面我们自己写。清空路由中不需要的规则。
在完成上面的步骤之后就可以有一个干净的页面进行开发了、

3.5 渲染登录组件并实现路由重定向

1、在components组件中新建login.vue文件（单文件组件）（有三类组成 ）

template是结构
script是行为
style是样式，
scoped是一个vue的组件，用来控制组件的样式生效区间，存在表示样式只在当前页面生效，没有写的话就是在所有页面生效（建议使用）
/2、在路由中导入app.vue

3、在app根组件中放一个路由占位符

4、路由重定向

3.6 背景色和登录图标

1、在login.vue中给div绑定class类
在style里加样式

注：此处高度设置成100%

然后报错：

原因是没有安装less工具
在可视化面板中依赖安装less（下面两个都需要安装）


在面板中重新启动app
背景色生效

2、全局样式表
设置在scr中，新建css文件夹，新建global.css文件。定义相关的样式

3、在main.js中导入全局样式表

接下来就是写登录logo的 样式了

在这里插入图片描述
此时页面成功了：

3.7 绘制默认头像

在刚刚登录盒子中绘制图片及样式

效果：

3.8 绘制登录表单区域

使用element表单组件
打开element官网。找到对应组件
加入到app.vue对应的结构中。

出现报错：原因是element我们在采用的时候是按需导入（在使用vue-cli搭建的时候也可以使用全部导入，但是不建议）
import导入 vue.use注册为全局可用的组件

优化页面内容和样式；

页面效果：

优化样式：

页面效果：

3.9 绘制登录框中的小图标

使用element中带icon的输入框
使用阿里图标库导入
fonts放到src中。在main.js中导入

3.10 实现表单的数据绑定

element组件可以绑定form
第一步：

第二步：
在script中

第三步：定义数据

第四步：为每一个输入框天添加v-model属性

第五步：密码框隐藏
type：password

3.11 登录前表单预验证

点击登录的时候调用表单的函数进行校验
element组件有自带的表单校验（ref）
只需要把item项数据和表单进行绑定即可

1、为el-form通过：rules绑定验证对象

2、在date中定义验证对象

3、不同的表单使用prop验证不同的规则

3.12 表单重置功能

点击重置按钮重置表单中的数据
restFields方法：

拿到表单实例对象：
给组件加 ref=引用名称
只要获取到ref 就拿到了表单的实例对象
拿到之后就可以进行表单重置

为按钮绑定重置事件

定义函数：

3.13 表单登录时的数据验证

1.先为登录按钮绑定点击事件
2、定义登录函数：

3.14 配置axios发起请求

上节中对登录数据进行了验证，验证之后判断是否发起服务器请求
1、配置axios：在main.js中导入并挂载到vue的原型对象上（每一个vue的组件都可一通过this访问到$http）,设置axios根路径

注：这里的接口地址已近改变，最新地址为：
https://www.liulongbin.top:8888/

2、在反复中通过this访问$http发起post请求

注：先启动mysql数据库，运行node app

3、接收回调函数

4返回的对象是 promise时，使用await来返回具体的数据

最后返回对象：

data才是服务器返回的真正数据
所以我们需要在对象上使用{} 把date对象解构赋值出来

这样就省略其他数据
5、返回状态码显示登录情况

3.15 配置Message全局弹框组件

登录成功失败后页面弹框提示用户状态
利用element弹框组件
element.js中导入组件 全局挂载原型上（this直接访问）

把console.log换成Message组件：

3.16 登录之后的操作

第一步：

第二步：
通过编程式导航跳转页面

新建一个hone.vue(登录成功后跳转的页面）
路由中导入，挂载，地址

3.17 登录后退出功能

第一步：
在home页总新增退出按钮，增加样式和事件

3.18 项目中ESLint语法报错处理

格式化和eslint产生语法冲突
在scr中新建 .pretterrc

然后到每个页面格式化代码，这样就拿捏了。
eslintrc.js配置文件详解及参考文档

3.19 优化按需导入的element组件

可以把导入的组件进行合并
优化前：

优化后：

3.20 本地代码提交到码云

vscode打开终端。新建终端，
1、Git status 查看情况

上面的文件是修改了的文件，下面的文件时新增的文件
2、 Git add. 添加到暂存区
git status 检查如下添加暂存区成功

3. Git commit -m “登录功能完成 ”
如图已提交到本地分支
4、git branch查看分支

5、把login代码合并到master分支
先使用Git checkout master切换到master分支
Git merge login 合并login分支

6.把本地仓库推送到码云中
Git push

打开码云查看ok：

7.把login分支也推送到码云中
先切换到login分支，
然后使用：Git push -u origin login（把本地子分支推送到云端）