目录

• 1. 项目概述
• • 1.1 电商项目基本业务概述
  • 1.2 电商后台管理系统的功能
  • 1.3 电商后台管理系统的开发模式（前、后端分离）
• 1. 项目初始化
• • 2.1 前端项目初始化步骤
  • • 码云相关操作
  • 2.2 后台项目的环境安装配置
• 1. 登录 / 退出 功能
• • 3.1 登录概述
  • 3.2 登录 - token 原理分析
  • 3.3 实现登录功能
  • 3.4 实现退出功能
  • • 处理 ESLint 警告
• 1. 主页布局
• • 4.1 后台首页基本布局
  • 4.2 顶部布局，侧边栏布局
  • • 4.2.1. 顶部布局
    • 4.2.2 侧边栏菜单布局
  • 4.3 通过接口获取菜单数据
  • 4.4 动态渲染菜单数据并进行路由控制
  • 4.5 设置激活子菜单样式
  • 4.6 制作侧边菜单栏的伸缩（展开/折叠）功能
  • 4.7 在后台首页添加子级路由
  • • 4.7.1 主页 - 实现首页路由的重定向
• 1. 用户管理
• • 5.1 用户管理概述
  • 5.2 用户管理-列表展示
  • • 5.2.1 用户列表布局
    • 5.2.2 用户状态列和操作列处理
    • 5.2.3 表格数据填充
    • 5.2.4 表格数据分页
    • 5.2.5 搜索功能
  • 5.3 用户管理-用户状态控制
  • • 5.4 用户管理-添加用户
    • 5.4.1 添加用户表单弹窗布局
    • 5.4.2 表单验证
    • 5.4.3 表单提交
  • 5.5 用户管理-编辑用户
  • • 5.5.1 根据 ID 查询用户信息
    • 5.5.2 编辑提交表单
  • 5.6 用户管理-删除用户
• 6 权限管理
• • 6.1 权限管理业务分析
  • 6.2 添加权限列表路由
  • 6.3 添加面包屑导航
  • 6.2 权限列表展示
  • 6.3 角色列表展示
  • 6.4 用户角色分配
  • • 6.4.1 展示角色对话框
    • 6.4.2 完成角色分配功能
  • 6.5 角色权限分配
• ~ 未完待续 ~

项目效果展示：

1. 项目概述

1.1 电商项目基本业务概述

一般情况下客户使用的业务服务包括：PC端，小程序，移动web，移动app。

管理员使用的业务服务：PC后台管理端；

• PC后台管理端的功能

  管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计；

• 开发模式

  本项目（电商后台管理系统）采用 前、后端分离 的开发模式。

  前端项目是基于 Vue 的 SPA（单页应用程序）项目；

• 本项目技术选型

  • 前端项目技术栈（）

    • Vue；
    • Vue-Router；
    • Element-UI；
    • Axios；
    • Echarts

 *  **后端项目技术栈**（做一般了解）
     *  `Node.js`；
     *  `Express`；
     *  `Jwt`（模拟`session`）；
     *  `Mysql`；
     *  `Sequelize`（操作数据库的框架）

1.2 电商后台管理系统的功能

    电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

1.3 电商后台管理系统的开发模式（前、后端分离）

    电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是 基于 Vue 技术栈的 SPA 项目 。

什么是 前后端分离 的开发模式?

• 前端：主要 负责绘制页面，同时，基于 Ajax 技术，调用后端提供的 API 接口；
• 后端：主要负责 操作数据库，并且向前端 暴露 API 接口。

前、后端分离的开发模式，是目前 主流 的 开发模式 。

优点： 开发效率高、项目易于维护。

2. 项目初始化

2.1 前端项目初始化步骤

1. 安装 Vue 脚手架（如在此之前本机已 全局 安装过，则可略过）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 3]  
安装 Vue CLI 交互式项目脚手架（一个基于 Vue.js 进行快速开发的完整系统）。
1）cmd 中执行以下命令安装 **Vue CLI** 包：
    npm install -g @vue/cli
2）安装完成后，检查版本是否正确：
    vue --version
> Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 卸载它。
> Node 版本要求：  
> Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
更多内容请参见 Vue CLI 官方文档：[https://cli.vuejs.org/zh/guide/][https_cli.vuejs.org_zh_guide]  

1. 通过 Vue 脚手架创建项目（本项目开发采用 “ 可视化面板 ” 创建）

   1）cmd 终端中输入 ：

   vue ui

   
   运行完成后，自动打开如下页面：
   
   2）点击 “+ 创建 ” 进入到目录选择面板，选择目录后。再点击 “+ 在此创建新目录 ”按钮。

   填写项目信息：
   
   3）进入“ 预设”面板，并按如下图示勾选：
   

4）点击下一步，进入“ **功能** ”选择面板：
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 3]  
上图中，勾选了 “ 使用配置文件 ” 后，就会将不同的配置 单独 地存放为一个配置文件。点击 **下一步**，打开 配置 面板。  
5）完成如下操作：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 4]  
6）单击 下一步。提示是否保存新预设（方便下次直接选择该配置 / 也可不保存）。
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 5]  
点击 “**保存预设并创建项目**” 按钮后，系统自动创建项目如下：
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 6]

1. 配置 Vue 路由

   在上面步骤中已自动配置。

2. 配置 Element-UI 组件库：在插件中安装，搜索vue-cli-plugin-element

   1）打开“仪表盘”,单击左侧 “ 插件 ”按钮，再单击右上角的 “ + 添加插件 ”

2）搜索插件 `vue-cli-plugin-element` 并安装。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 8]  
3）跳转到 “ **配置插件** ”面板，操作如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 9]

1. 配置 axios 库：在依赖中安装,搜索axios(运行依赖)

   1）点击 左侧边栏 “ 依赖 ” 按钮，再点击右上角 “ 安装依赖 ”
   

2）安装依赖
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 11]

1. 初始化 git 远程仓库
2. 将本地项目托管到 Github 或 码云中（方便团队成员协作开发）

码云相关操作

1. 注册登录码云账号，注册地址：https://gitee.com/signup
   

2. 安装 git

   在Windows上使用 Git，可以从Git 官网直接下载安装程序进行安装。

   测试：git --version（终端中打印出版本号 即为安装成功 ）

1. 点击网站右上角“登录”，登录码云，并进行账号设置
   
   

下一步：

下一步：

1. 在本地创建公钥（终端中运行如下命令）

   ssh-keygen -t rsa -C "xxx@xxx.com"

   注 ：上述命令（示例）中的 “ xxx@xxx.com” 字样，请务必替换为自己注册 gitee 时的真实邮箱后，再回车执行！
   
   然后回车，接着连敲 3 次回车（中间不需任何操作）即可生成公钥。如图：
   

1. 找到公钥地址

   Your identification has been saved in /c/Users/My/.ssh/id_rsa；
   Your public key has been saved in /c/Users/My/.ssh/ id_rsa.pub。

   当创建公钥完毕后，请注意打印出来的信息“Your public key has been saved in”

   /c/Users/My/.ssh/id_rsa.pub : c盘下面的Users下面的My下面的.ssh下面的 id_rsa.pub 就是创建好的 公钥 了。

1. 用 记事本 或其它编辑器打开id_rsa.pub文件，复制文件中的所有代码：

   
   再点击码云中的 SSH 公钥按钮，将复制好的的公钥粘贴到公钥文本框中。
   点击”确定“按钮，再根据提示输入验证密码后，即完成ssh公钥添加：
   

1. 测试公钥是否添加成功

   在完成 gitee 设置中添加公钥后，再 cmd 终端中输入:

   ssh -T git@gitee.com

   过程中出现如下图所示的询问（是否继续连接？）时，输入 “yes” 回车继续，直到命令执行完成。
   
   首次使用需要确认并添加主机到本机SSH可信列表。若返回 Hi XXX! You’ve successfully authenticated, but Gitee.com does not provide shell access. 内容，则证明添加成功。如下图所示：
   
   再次运行命令ssh -T git@gitee.com，同样也可看到如下所示信息：
   

1. 将本地代码托管到码云中

   点击码云右上角的+号 -> 新建仓库

   
   

2. 进行git配置

   注：执行如下命令前，必须确保本机已安装过 git，否则终端中会 报错 。

   

10 **项目首次提交**
1）**检查状态**：项目根目录下输入以下命令：
    git status
运行结果显示项目中存在未跟踪的文件没有被提交 ，如下所示：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 21]  
此时需要做一下处理，即把所有的文件都添加到 暂存区。  
2）**添加到 暂存区**：运行如下命令：
    git add .
注意：命令中的 `add` 和后面的`.`（小圆点）中间有个空格，否则会报错。  
3）**本地提交**：将暂存区中的文件提交至 本地仓库中 ：
    git commit -m "add files"
再次检查状态：
    git status
运行结果如下：  
![在这里插入图片描述][20201218222504593.png]  
提示当前 “ 处于主分支，工作目录是干净的 ”，即没有要提交的文件。
但当前的这些操作只是在本地操作仓库，仓库还没上传到码云中，
4）将本地仓库与远程 `git`仓库 关联
找到并在终端中运行（你新建的码云仓库 vue\_shop 页面最底部提供的那两句）代码，如下所示：
    git remote add origin https://gitee.com/XXXXX/vue_shop.git
    git push -u origin master
**注：** XXXX 为你的码云 **帐户名称** （ 非邮箱名称）。如果运行 报错，请点击 这里 查看解决办法。
执行第二句命令时，会弹出如下安全验证，输入用户名和密码确认后，等待完成提交即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 22]  
说明：如果是第一次向码云中提交代码，会弹出码云的帐号和密码输入窗口（以后不会再出现）  
**5）检查是否上传（远程仓库）成功**
在远程仓库中点击 “刷新”，即可看到提交信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 23]  
类似这样，表示本地仓库已成功上传到了码云中。
--------------------
\*\*关于 报错\*\*，如果执行上述命令时终端中报错如：
fatal: not a git repository (or any of the parent directories): .git
【**解决办法**】
—— 请检查项目根目录下，是否存在一个隐藏的 `.git` 文件夹，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 24]
如果不存在，则在此项目根目录下，打开终端运行如下命令（初始化本地仓库）：
    git init
已了解，点击 返回。

2.2 后台项目的环境安装配置

• 2.2.1 安装 MySQL 数据库

  用到的素材，点击 网盘下载 提取码：8up0

  ① 安装素材中提供的 phpStudy ，傻瓜式安装。

  ② 将素材中的压缩包解压，记住解压路径。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 25]
③ 运行phpStudy，单击“ MySQL管理器 ” 按钮，选择 MySQL导入导出 菜单项。  
④ 按上图所示，找到对应路径下已解压得到的 db 文件夹中的 `mydb.sql` 数据库脚本文件，点击 “ 导入” 按钮，自动弹出黑色的命令行窗口，开始还原数据库（此时间稍长，请耐心等待~）；  
--------------------
***温馨提示！** 还原结束时，黑色的命令行窗口会自动关闭，此时可按如下所示查看生成的数据库。*  
![在这里插入图片描述][20201219005059565.png]  
如在数据库目录下能够看到如下图所示的路径、文件，表示 *数据库还原成功！*![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 26]  
--------------------
**注：** 由于开发过程中不需要用到 Apache，可将其 “ 停止 ” 服务，如下图所示：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 27]
--------------------

• 2.2.2 配置后台项目

  在前面已经解压出来的 vue_api_server，就是后台 API 项目 。但需要先 安装依赖包 才能正常运行。

**A**. 安装 nodeJS 环境，配置后台项目
**B. 安装项目依赖包**
进入 vue\_api\_server 目录中，shift+右键 在弹出的菜单中选择 “在此处打开 Powershell 窗口 ” 打开终端，输入命令安装项目依赖包：
    npm install
**C.启动项目**
继续在终端中输入如下命令，启动项目：
    node .\app.js
**注意**：启动前，必须先将 phpStudy 的 MySQL 服务开启。  
**D**. 使用 postman 测试 API 接口是否正常。
安装 postman 软件（[点此下载][Link 2]），启动 PostMan 填写相关参数（首次使用该软件需进行简单注册），如下所示：
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 7]
--------------------
注意：输入登录请求地址、用户字段名、密码字段名时，请务必与 API 文档保持一致；
--------------------
点击 “ **Send**” 后，服务端返回如下信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 28]
电商管理后台 API 接口文档 下载：[https://pan.baidu.com/s/1OGxh05B0BocQm9cP3BWO7w][https_pan.baidu.com_s_1OGxh05B0BocQm9cP3BWO7w]  提取码:  

3. 登录 / 退出 功能

3.1 登录概述

1. 登录业务流程

   • 在登录页面输入用户名和密码
   • 调用后台接口进行验证
   • 通过验证之后，根据后台的响应状态跳转到项目主页

1. 登录业务的相关技术点

   • http 是无状态的；
   • 通过 cookie 在客户端记录状态；
   • 通过 session 在服务器端记录状态；
   • 通过 token 方式维持状态（推荐垮域 时采用）

3.2 登录 - token 原理分析

3.3 实现登录功能

• 一、登录逻辑：

  在登录页面输入账号和密码进行登录，将数据发送给服务器 ==> 服务器返回登录的结果，登录成功则返回数据中带有token ==> 客户端得到 token 并进行保存，后续的请求都需要将此 token 发送给服务器，服务器会验证 token 以保证用户身份。

• 二、登录状态保持：

  1）如果服务器和客户端 同源 1，建议可以使用cookie或者session来保持登录状态；

  2）如果客户端和服务器 跨域 2，建议使用token进行维持登录状态。

  举例如下：

  http://www.123.com/index.html 调用 http://www.123.com/abc.do （ 非跨域 ）
  http://www.123.com/index.html 调用 http://www.456.com/abc.do （ 主域名不同:123/456，跨域 ）
  http://abc.123.com/index.html 调用 http://def.123.com/server.do （ 子域名不同:abc/def，跨域 ）
  http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.do（ 端口不同:8080/8081，跨域 ）
  http://www.123.com/index.html 调用 https://www.123.com/server.do （ 协议不同:http/https，跨域 ）

  因合作方域名与我方域名不同，当从合作方加载页面调用我方接口时，会出现跨域的报错。

• 三、添加新分支 login，在 login分支 中开发当前项目 vue_shop：

1）项目根目录中打开 vue\_shop 终端（shift + 右键 通过 vs code打开），使用`git status`命令确定当前项目状态（是否干净）。
    git status
运行结果如下所示：  
![在这里插入图片描述][20201220213536234.png]  
表明当前工作区是干净的，可以进行登录页面的绘制。
—— 此时需要创建一个新分支。
2）确定当前工作目录是干净的之后，创建一个新分支并切换到该分支进行开发，开发完毕之后将其合并到 master
    git checkout -b login
> **注：** 在开发中，只要进行一个新功能开发的时候，尽量把它放到一个新分支上，当这个功能开发完毕后，再把它合并到主分支 master 上。
3）然后`git branch`命令查看新创建的分支，确定我们正在使用 login分支 进行开发。  
![在这里插入图片描述][2020121810225882.jpg_pic]  
**绿色** 表示当前所处的分支。  
4）接着，执行`vue ui`命令打开 **ui** 界面，然后运行 serve，运行 app 查看当前项目效果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 9]
--------------------
**四、登录页面的布局**  
点击 “  启动App ” ，打开项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 10]  
此时，我们可以看到现在它只是一个默认页面，需要把它重置为空白页面：
1）打开项目的 src 目录，点击查看`main.js`文件（这是整个项目的 **入口文件**）：
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import './plugins/element.js'
    Vue.config.productionTip = false
    new Vue({ 
        // 把 router 路由挂载到实例
        router,
        // 通过 render 函数，把 App 根组件渲染到页面上
        render: h => h(App)
    }).$mount('#app')
2）再打开 App.vue (根组件)，将根组件的内容进行清理（template 中只留下根节点，script 中留下默认导出，去掉组件，style 中去掉所有样式），清理完成后如下所示：
    <template>
        <div id="app">
            <router-view></router-view>
        </div>
    </template>
    <script> export default { name: 'app' } </script>
    <style> </style>
3）再打开路由文件夹下的 index.js(有些版本的 Vue ui 所创建的工程项目，其 router 文件夹下的路由文件名为`router.js`)，将`routes`数组中默认的路由规则全部清除，然后将`views`删除：
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export default new Router({ 
        routes: [
        ]
    })
**五、新建 Login.vue 组件**
1）将文件夹`components`中的`helloworld.vue`删除，并新建 Login.vue 单文件组件，添加 template、script、style 标签，style 标签中的 scoped 可以防止组件之间的样式冲突（没有`scoped`则样式是全局的）。
    <template>
        <div class="login_container">
        </div>
    </template>
    <script>
    export default { 
    }
    </script>
    <style lang="less" scoped>
    .login_container { 
        background-color: #2b4b6b;
        height: 100%;
    }
    </style>
`scoped`：是 vue 指令，用来控制组件生效的范围（表示只在当前组件内生效，只要是单文件组件，都应加上）
--------------------
**注**：当添加背景样式并保存代码修改后，浏览器会报错 “ 找不到 `less-loader`”，如下图所示：  
![在这里插入图片描述][20201228222209783.png]  
这是由于 Vue 的 cli 工具创建的项目默认并没有安装  less 相关的  loader，如果要使用 less 语法（如`<style lang="less" scoped>`），此时则需要配置 less加载器（开发依赖），安装 less (开发依赖)。。  
因此，接下来打开可视化面板安装依赖 less-loader 和 less ：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 29]  
如上图所示，搜索并安装好 `less-loader`以后，此时浏览器仍然报错，如下所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 30]
这时，回到安装依赖项界面，再次搜索 less 并安装好（因为 less-loader 依赖于 less）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 31]
--------------------
此时刷新网页并不能生效（仍然是报错状态），接下来，先关闭网页，**停止** server，再次点击 **运行**即可。
2）在路由文件 index.js 中导入`Login.vue` 组件并设置规则；
    const router = new Router({ 
        routes: [
            // 当用户访问 /login 这个地址时，通过 component 属性指定要展示的组件 Loging
            {  path: '/login', component: Login }
        ]
    })
3）在 App.vue 中添加路由占位符：
    <template>
      <div id="app">
        <!-- 路由点位符 -->
        <router-view></router-view>
      </div>
    </template>
4）由于当前默认访问的是 `localhost:8080/#/` （即根路径），需要在其后手动添加 `/login`才能访问登录组件。
因此为了实现“只要用户访问了`/`（斜线）根路径，就自动重定向到 `/login` 地 址”，这里就必须添加一个重定向路由规则。即在路由文件 index.js 文件中添加一句 `{ path: '/', redirect: '/login' }`，如下所示：
    const router = new Router({ 
        routes: [
            // 重定向路由
            {  path: '/', redirect: '/login' },
            // 当用户访问 /login 这个地址时，通过 component 属性指定要展示的组件 Loging
            {  path: '/login', component: Login }
        ]
    })
5）然后需要添加公共样式，在 assets 文件夹下面添加 css文件夹，创建`global.css`文件,添加全局样式。
    /* 全局样式表 */
    html,body,#app{ 
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0; 
    }
5）在入口文件 main.js 中导入 global.css，使得全局样式生效
    import "./assets/css/global.css"
6）然后，将 Login.vue 中的根元素也设置为撑满全屏（`height:100%`）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 32]  
7）在 `Login.vue` 中绘制登录框
    <div class="login_box"></div>
添加样式：
    .login_box { 
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%); /* 位移，x轴 y轴*/
    }
> transform 属性，定义 2D 或 3D 转换，进行 旋转、缩放、移动、倾斜。其中，取值为`translate(x,y)` 是 2D 转换（ CSS3 `transform` 属性的更多详情点击 [这里][Link 3] ）。
添加样式后效果如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 33]  
8）绘制顶部的默认头像盒子 `avatar_box`
    <div class="login_box">
        <div class="avatar_box">
            <img src="../assets/logo.png" alt="">
        </div>
    </div>
写`avatar_box` 的 css 样式（嵌套到 `login_box`的样式内）：
    .avatar_box { 
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd; /* 添加盒子阴影 */
            position: absolute;
            left:50%;
            transform: translate(-50%,-50%);
            background-color: #fff; img { 
                width: 100%;
                height: 100%;
                border-radius:50%;
                background-color: #eee;
            }
        }
> `box-shadow` 属性向盒子添加一个或多个阴影，该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0（ 更多详情点击 [这里][Link 4] ）。
**效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 34]  
9）**登录页面的布局**
通过 Element-UI 实现 页面布局：
 *  `el-form`
 *  `el-form-item`
 *  `el-input`
 *  `el-button`
 *  `字体图标`  
打开官网 [element-cn.eleme.io/\#/zh-CN][element-cn.eleme.io_zh-CN] 找到组件：
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 35]
--------------------
点击顶部导航的 “ 组件 ”，侧边栏中选择 Form 表单，再点击 “ 显示代码 ”：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 36]
--------------------
![在这里插入图片描述][20201230202054722.png]
复制一个 item 项的代码（如下所示），粘贴到 Login 组件中并将不需要用到属性绑定删除、添加结束标签后如下所示：
    <el-form label-width="80px">
        <el-form-item label="活动名称">
            <el-input ></el-input>
        </el-form-item>
    </el-form>
保存后查看页面，发现控制台报错访问不到这几个元素：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 37]  
这是因为 element-UI 是通过按需导入来使用的，必须先导入才能正常使用。  
此时，打开 plugins 文件下的 element.js 文件，导入需要的组件（如果分几次导入可能会报错）：
    import {  Button, Form, FormItem, Input } from 'element-ui'
把 Form 组件 input 输入框代码里不需要的文本 label="活动名称"去掉，再把占位的 `label-width="80px"`重置为 0，并复制 2 组 `el-form-item` 元素结构代码（增加一个密码输入框和一个按钮区） ：
    <!-- 登录表单区 -->
    <el-form label-width="0">
        <!-- 用户名 -->
        <el-form-item>
            <el-input ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
            <el-input ></el-input>
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item>
        </el-form-item>
    </el-form>
保存后页面的效果如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 38]  
在 Element [官网][Link 5] 找到 button 组件，复制 button 按钮的代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 39]
将复制的代码粘贴到按钮区，并给它添加一个`btns`的类名，以便设置样式，代码如下：
    <!-- 登录表单区 -->
    <el-form label-width="0">
        <!-- 用户名 -->
        <el-form-item>
             <el-input ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
            <el-input ></el-input>
        </el-form-item>
        <!-- 按钮区 -->
        <el-form-item class="btns">
            <el-button type="primary">登录</el-button>
            <el-button type="info">重置</el-button>
    </el-form-item>
由于 `<el-button>` 按钮默认是靠左对齐，实际需要它 靠右对齐，在 `Login.vue` 的 `<style>` 标签内部写上css 样式：
    .btns { 
        display: flex;  /* 弹性布局 */
        justify-content: flex-end; /* 横轴 项目位于容器的尾部*/
    }
> `Flex` 弹性布局，可以简便、完整、响应式地实现各种页面布局：通过给父盒子添加`flex`属性，来控制子盒子的位置和排列方式，点击 >> [查看详情][Link 6]
> `justify-content` 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，访问 W3Cschool >>[查看详情][Link 7]
> 注： 当将父盒子设为 flex 布局后，子元素的 float、clear 、 vertical-align 属性将失效。
此时，页面效果如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 40]  
接下来，将整个 Form 表单区域底部对齐，这需要给 `<el-form>`标签添加一个类名`login_form`，并添加样式：
    .login_form { 
        position: absolute;
        bottom: 0;
        width:100%;
        padding: 0 20px;
    }
效果如图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 41]  
`padding: 0 20px` 后，撑大了盒子，这是因为`form`表单的`boxsizing` 属性值默认为 `content-box`（即传统盒模型），需将其设置为 border-box（即css3盒模型） ：
    .login_form { 
        position: absolute;
        bottom: 0;
        width:100%;
        padding: 0 20px;
        box-sizing: border-box; /* C3盒模型 */ 
    }
> box-sizing 属性定义了如何计算一个元素的 总宽度 和 总高度。只要在CSS中加上“box-sizing: border-box;”这句，那么就将一个普通的盒子变成CSS3盒模型，padding 和 border就不会再撑大盒子。详情点击 >> [这里][Link 6] 。
添加后，效果如下所示：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 42]  
接下来，绘制用户名和密码输入框前面的小图标。  
在 [Element UI 官网][Link 5] 找到 input 组件 菜单项，再找到对应的样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 43]
--------------------
将复制的代码粘贴到项目文件 login.vue 中：
    <!-- 用户名 -->
    <el-form-item>
        <el-input prefix-icon="el-icon-search"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item>
        <el-input prefix-icon="el-icon-search"></el-input>
    </el-form-item>
生效后效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 44]
再从 [Element UI 官网][Link 5] 菜单中，点击侧边栏 icon 图标 菜单项，查找是否有对应的用户和密码图标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 45]
--------------------
由于在这里我们没有找到所需图标，因此要用到第三方图标库。
这里我们用 [*阿里图标库*][Link 8] ，将所需字体图标选定后，下载到本地，并在该字体压缩文件解压后，将所得文件夹命名为 fonts ，放到  src \\ assets \\  目录下。
接着，在入口文件 main.js 中，导入字体图标的 css 样式表：
    // 导入字体图标
    import './assets/fonts/iconfont.css'
在浏览器中打开 fonts 文件夹下的 demo\_index.html HTML文件，查看使用示例，并将图标分别放置到 `Loging.vue` 组件文件相应的用户名、密码`input`标签内，替换原来的放大镜图标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 46]  
![在这里插入图片描述][20201231201917960.png]  
代码如下：  
（注： `iconfont` 是基础类，不能缺少。`icon-xx`x 是图标名称）
    <!-- 用户名 -->
    <el-form-item>
        <el-input prefix-icon="iconfont icon-user"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item>
        <el-input prefix-icon="iconfont icon-3702mima"></el-input>
    </el-form-item>
替换原图标类名并保存，此时登录框 UI 效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 47]  
10）**登录表单的数据绑定**（把用户名和密码对应的值自动绑定到数据源上）：  
打开 [Element UI][Link 5] 官网，找到 Form 表单的定义，在 典型表单 中展开代码结构，能看到第一行 `<el-form>` 上，有个属性绑定 `:model`就代表数据绑定：
--------------------
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 48]
--------------------
即，示例中表示的是 `<el-form>` 表单中填写的所有数据，都会自动同步到 `:model`指向的 "`form`"对象上，form 是个数据对象，其定义如下所示：  
--------------------
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 49]
--------------------
**归纳：表单添加数据绑定的步骤如下：**
1）第一步：先给 `<el-form>` 添加 :model 属性进行数据绑定，指向一个数据对象；
2）第二步：为每个表单项里的文本输入框，通过`v-model`绑定到数据对象上对应的属性中。  
***实现如下**：*
1）打开 Login.vue 文件，通过`:model` 绑定一个新命名的数据对象 `loginForm` ，代码如下：
    <!-- 登录表单区 -->
    <el-form :model="loginForm" label-width="0" class="login_form">
        <!-- 省略不相关代码-->
    </el-form>
2）接下来，在 script  标签所在的行为区域中，定义 loginForm 这个数据对象：
    <script>
    export default { 
        data () { 
            return { 
                // 登录表单的数据绑定对象
                loginForm: { 
                    username: 'admin',
                    password: '123456'
                }
            }
        }
    }
    </script>
3）通过`v-model` 将 loginForm 里的对象 `username` 和 `password` ，分别双向绑定到用户名和密码输入框上，代码如下：
    <!-- 登录表单区 -->
    <el-form :model="loginForm" label-width="0" class="login_form">
        <!-- 用户名 -->
        <el-form-item>
            <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
            <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
        </el-form-item>
        <!-- 此处省略按钮区代码-->
    <el-form>
此时，实现效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 50]  
再为密码输入框添加一个`type`属性，属性值设为 `password`，以使密码以 `*` 号显示，保证用户账户的安全性。
    <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 51]  
11）**实现表单的数据验证**
**目标**：当填写完用户名和密码，只要鼠标一离开文本框，就会立即对填写的数据进行合法性的校验。要如何添加数据验证行为呢？
**方法**：打开 [Element UI ][Link 5] 官网， Form表单，找到该组件页面后面的表单验证：
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 52]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 53]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 54]
**分析：** 如上图所示展开的结构代码，解读如下，
首先，要为`<el-form>`组件，进行属性绑定，绑定`rules` 属性，其属性值是一个表单验证规则对象；
其次，该验证规则对象要在`<script>` 标签行为区域中的 data 数据里进行定义，其中，每一个属性都是一个验证规则。
最后，为不同的表单 item 项，通过 `prop` 属性来指定不同的验证规则，来进行表单的验证。
**具体实现：**
1）打开登录组件 login.vue ，在 `<el-form>`元素上通过`:rules` 绑定 `loginFormRules`这个新的验证规则对象：
    <!-- 登录表单区 -->
    <el-form :model="loginForm" :rules="loginFormRules" label-width="0" class="login_form">
2）复制 `loginFormRules` 对象名称，到 login.vue文件的 script 行为区域中的 data 中进行定义：
    // 表单的验证规则对象
    loginFormRules: { 
        // 验证用户名是否合法
        username: [],
        // 验证密码是否合法
        password: []
    }
验证规则可直接到 [Element UI][Link 5] 官网中进行复制： ![在这里插入图片描述][20201231223740361.png]
--------------------
将复制过来的代码里的提示文字做适当修改，整理后代码如下：
    // 表单的验证规则对象
    loginFormRules: { 
        // 验证用户名是否合法
        username: [
            {  required: true, message: '请输入用户名', trigger: 'blur' },
            {  min: 3, max: 10, message: '用户名要求长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
            {  required: true, message: '请输入登录密码', trigger: 'blur' },
            {  min: 6, max: 15, message: '密码要求长度在 6 到 15 个字符', trigger: 'blur' }
        ]
    }
3）将定义的规则应用到表单中
分别在用户名和密码输入框的 `<el-form-item>`元素标签中，添加 prop 属性，并指向`username` 和 `password`：
    <!-- 用户名 -->
    <el-form-item prop="username">
        <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item prop="password">
        <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
    </el-form-item>
此时完成效果如下图：![在这里插入图片描述][20201231224726729.gif_pic_center]
--------------------
**12）实现表单的重置功能**
**目标：** 当点击 “ 重置 ”按钮时，能够重置校验结果
如何实现 ？ 查看 [Element UI][Link 5] 官方文档，在`Form`组件对应的页面中，底部提供了一个方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 55]  
只要我们获取到了表单的实例对象，就可通过实例对象直接访问（调用） resetFields 函数。从而重置整个表单，将所有字段值重置为初始值并移除校验结果。  
如何拿到表单的实例对象 ？
**分析：**
① 要拿到 `<el-form>`组件的实例对象，需要给它添加一个`ref` 引用，引用名称我们定义为 loginFormRef；
② 接下来，只要能够获取到 loginFormRef，就能拿到 `el-form` 表单的实例对象，即 loginFormRef 就是表单的实例对象，可以直接通过它来调用 resetFields 函数，以重置表单。  
**实现过程**：
① 为组件添加 `ref` 引用：
    <!-- 登录表单区 -->
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0" class="login_form">
② 通过`@click`为 **重置** 按钮绑定 **单击事件** resetLoginForm ：
    <!-- 按钮区 -->
    <el-form-item class="btns">
        <el-button type="primary">登录</el-button>
        <el-button type="info" @click="resetLoginForm">重置</el-button>
    </el-form-item>
③ 在 script 的`export default` 中定义\* resetLoginForm 方法，先打印出 `this` ，查看其具体指向。
    methods: { 
        // 点击重置按钮，重置登录表单
        resetLoginForm () { 
            console.log(this)
        }
    }
从打印结果可以看到，`this` 指向的是一个组件的实例对象 `VueComponent{...}`，展开该对象下，可见一个数据对象 `$refs: {loginFormRef: VueComponent}`，其中的一个属性 `loginFormRef` 就是前面为 el-form 定义的 ref 引用名称，如下图所示：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 56]  
由此可知，通过 `this.$refs` 可以直接获取到  resetLoginForm 这个引用对象，该引用对象就是 el-form 的实例。代码及效果如下：
    methods: { 
        // 点击重置按钮，重置登录表单
        resetLoginForm () { 
            // console.log(this)
            this.$refs.loginFormRef.resetFields()
        }
    }
![在这里插入图片描述][20210101002126923.gif_pic_center]  
这样，就实现了当点击 “ 重置 ”按钮时，重置校验结果的功能。而文本框好像没有被清空是什么原因呢 ？其实这是一种错觉。那是因为文本框是双向绑定到 `data` 中的数据中，而该数据是设置了默认值的，重置后，就又把默认值写进了已清空的文本框。  
--------------------
13）**登录前的预校验**
当我们点击登录按钮时，不应该直接发起数据请求，而是在请求之前先对表单数据进行预验证，验证通过时，才允许发起网络请求。否则，应该直接提示用户表单数据 不合法 。
**实现思路：** 当点击登录时，通过调用表单的某个函数来验证。具体调用哪个函数呢 ？ 同样是在 [Element UI][Link 5] 官网中，找到 组件 => Form表单 => Form Methods 节点的 `validate`函数： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 57]
    Function(callback: Function(boolean, object))
该函数接收一个 `callback` 回调函数，回调函数的第 1 个行参是布尔值代表校验的结果。如果校验通过，则返回 `true`；反之，则返回`false`。  
如何调用 `validate` 函数 ？
**调用方法：**
 *  ① 通过`@click` 给 登录 按钮绑定单击事件（事件处理函数命名为 `login`）；
        <el-button type="primary" @click="login">登录</el-button>
 *  ② 通过 `ref` 获取到表单的引用对象，再用该引用对象调用 `validate` 函数：
        login () { 
            this.$refs.loginFormRef.validate(valid => { 
                console.log(valid)   // 测试能否获取验证结果
         })
    接着，判断验证结果，决定是否发起登录请求。
        login () { 
        this.$refs.loginFormRef.validate(valid => { 
                // console.log(valid)
                if (!valid) return false
            })
        }
    **注意！** 由于此时项目中还没有 **全局配置** axios 包，无法发起请求，因此，要先在入口文件 main.js 中对 axios 进行全局配置：
 *  ① 导入 axios 包：
        import axios from 'axios'
 *  ② 把包挂载到 **Vue** 原型对象上：
        Vue.prototype.$http = axios
    这样，每个 **Vue** 的组件都可以通过 `this` 直接访问到 `$http`，从而发起 ajax 请求 。
 *  ③ 当挂载为原型的属性之后，回头再为 ajax 设置请求的根路径：
        axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    （*这个根路径在项目的 API 文档中能找到*）  
    此 3 个步骤的完整代码如下：
        import axios from 'axios'
        // 配置请求的根路径
        axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
        Vue.prototype.$http = axios
    配置完 ajax ，现在回到 Login.vue 登录组件中，通过 `this` 就可以访问到原型上的 `$http` 成员，从而通过它发起 Ajax 请求 （请求地址 login，请求方式 post）：
        login () { 
        this.$refs.loginFormRef.validate(valid => { 
            // console.log(valid)
            if (!valid) return false
            const result = this.$http.post('login', this.loginForm)  // eslint-disable-line no-unused-vars
            console.log(result)
            })
        }
    **注解：** 在 data 中，有个 `loginFrom`，也就是登录表单的数据绑定对象，由于用户在`el-form`表单中填写的数据都会自动同步到该对象。因此可以直接将这个 loginFrom 当做请求参数。
接下来，启动 MySQL 数据库服务~
现在，可以测试一下：在登录表单中随便填入用户名和密码，点击 登录 ，看看请求结果 `result` 输出了什么，如下图所示：  
![在这里插入图片描述][20210102232233259.png]  
可以看到在控制台输出的是 Promise 对象，我们知道，如果某个方法的返回值是 Promise，那么就可以用 `async`、`await` 来简化这次 Promise 操作，因此前面的代码可以写成：
    login () { 
        this.$refs.loginFormRef.validate(async valid => { 
            // console.log(valid)
            if (!valid) return false
            const result = await this.$http.post('login', this.loginForm) // eslint-disable-line no-unused-vars
            console.log(result)
        })
    }
**注：** 如果仅添加 await 会报错：‘await’ is only allowed within async functions。这是因为 `await` 只能用在被 `async` 修饰的方法中（这里就是把箭头函数 valid 修饰成 异步 的函数）。  
修改完毕再次打印时，可发现 result 已不再是一个 Promise 对象，而是一个具体的响应对象，对象中包含了 6 个属性，都是 axios 帮我们封装好的，其中，data 才是服务器返回的真实数据（其它 5 个属性我们不需要），如下图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 58]  
此时，我们可以从 result 对象身上的  data  属性给解构赋值出来并重命名为  res  ，这样就表示能访问到真实的数据了：
    const { data: res} = await this.$http.post('login', this.loginForm) // eslint-disable-line no-unused-vars
    console.log(res)
随意输入用户名、密码，点击 登录 按钮后，控制台打印如下：  
![在这里插入图片描述][20210103000151725.png]  
现在，我们来对登录状态进行判断：
    login () { 
        this.$refs.loginFormRef.validate(async valid => { 
            // console.log(valid)
            if (!valid) return false  // 阻止登录请求
            const {  data: res } = await this.$http.post('login', this.loginForm) // eslint-disable-line no-unused-vars
            // console.log(res)
            if (res.meta.status !== 200) return alert('登录失败！')
            alert('登录成功！')
        })
    }
页面测试如下：
![在这里插入图片描述][20210103001448735.gif_pic_center]  
（注：演示中刷新网页时，由于加载了默认的正确用户名和密码，所以获取了登录成功的验证码）  
接着，借助 [Element UI][] 的 Message 弹出层，给登录添加登录成功与否的消息提示，这样显得更加友好，如下所示：  
--------------------
![在这里插入图片描述][2021010522165480.gif_pic_center]
--------------------
 *  **消息组件的使用**
     *  1）在 `element.js`中导入 Message 组件：
            import {  Button, Form, FormItem, Input, Message } from 'element-ui'
            // Vue.use(Message) // 错误的写法
        **注意**：Message的配置和其它组件不一样，它需要进行全局挂载，即把 Message 挂载为 **Vue** 原型上的一个属性；
     *  2）**配置 Message** ：
            // import { Button, Form, FormItem, Input, Message } from 'element-ui'
            Vue.prototype.$Message = Message
        **注：** 这里的 `$Message` 是我们的自定义属性名，可取任意合法名。“`=`” 后面的 Message 是组件名，必须按这个拼写来写（即，把弹框组件挂载到了原型对象上，这样的话，每一个组件都可以通过 this 来访问到 `$Message`进行弹窗提示！ ）。  
     *  3） **Message 的使用**
            // if (res.meta.status !== 200) return alert('登录失败！')
            // alert('登录成功！')
            // 修改为
            if (res.meta.status !== 200) return this.$message.error('登录失败！')
            this.$message.success('登录成功！')
        此时，效果如下图所示：![在这里插入图片描述][20210105225650760.gif_pic_center]  
最终，**完整的 Login.vue 组件代码**，如下所示：
--------------------
    <template>
        <div class="login_container">
            <!-- 登录盒子 -->
            <div class="login_box">
                <!-- 头像 -->
                <div class="avatar_box">
                    <img src="../assets/logo.png" alt="">
                </div>
                <!-- 登录表单 -->
                <el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
                    <!-- 用户名 -->
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" ></el-input>
                    </el-form-item> 
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
                    </el-form-item> 
                    <!-- 按钮 -->
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info" @click="resetLoginForm">重置</el-button>
                    </el-form-item> 
                </el-form>
            </div>
        </div>
    </template>
    <script> export default { data() { return { //数据绑定 loginForm: { username: 'admin', password: '123456' }, //表单验证规则 loginFormRules: { username: [ { required: true, message: '请输入登录名', trigger: 'blur' }, { min: 3, max: 10, message: '登录名长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: 'blur' } ] } } }, //添加行为， methods: { //添加表单重置方法 resetLoginForm() { // this=>当前组件对象，其中的属性$refs包含了设置的表单ref // console.log(this) this.$refs.LoginFormRef.resetFields() }, login() { //点击登录的时候先调用validate方法验证表单内容是否有误 this.$refs.LoginFormRef.validate(async valid => { console.log(this.loginFormRules) //如果valid参数为true则验证通过 if (!valid) { return } //发送请求进行登录 const { data: res } = await this.$http.post('login', this.loginForm) // console.log(res); if (res.meta.status !== 200) { //console.log("登录失败:"+res.meta.msg) return this.$message.error('登录失败:' + res.meta.msg) } this.$message.success('登录成功') console.log(res) //保存token window.sessionStorage.setItem('token', res.data.token) // 导航至/home this.$router.push('/home') }) } } } </script>
    <style lang="less" scoped> .login_container { background-color: #2b5b6b; height: 100%; } .login_box { width: 450px; height: 300px; background: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box { height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%, -50%); background-color: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } } .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; } .btns { display: flex; justify-content: flex-end; } </style>
--------------------
**其中，有用到以下内容，需要进行进一步处理：**
Ⅰ. **添加 element-ui 的表单组件**
在 plugins 文件夹中打开 element.js 文件，进行 elementui 的按需导入：
    import Vue from 'vue'
    import {  Button } from 'element-ui'
    import {  Form, FormItem } from 'element-ui'
    import {  Input } from 'element-ui'
    Vue.use(Button)
    Vue.use(Form)
    Vue.use(FormItem)
    Vue.use(Input)
**Ⅱ. 添加第三方字体**
复制素材中的 fonts 文件夹到 assets 中，在入口文件 main.js 中导入：
    import './assets/fonts/iconfont.css'
然后直接 `<el-input prefix-icon="iconfont icon-3702mima"></el-input>`
接着添加登录盒子  
**Ⅲ. 添加表单验证的步骤**
1）给`<el-form>`添加属性`:rules="rules"`，rules 是一堆验证规则，定义在 script 中。
2）在 script 中添加 rules：export default\{ data()\{return\{…, rules: \{
    name: [
            {  required: true, message: '请输入活动名称', trigger: 'blur' },
            {  min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            {  required: true, message: '请选择活动区域', trigger: 'change' }
          ]
3）通过`<el-form-item>`的 prop 属性设置验证规则`<el-form-item label="活动名称" prop="name">`
4）导入axios 以发送 ajax 请求
打开main.js，导入 axios：
    import axios from 'axios';
设置请求的根路径：
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
挂载axios：
    Vue.prototype.$http = axios;
5）配置弹窗提示
在 plugins 文件夹中打开 element.js 文件，进行 elementui 的按需导入：
    import { Message} from 'element-ui'
进行全局挂载：
    Vue.prototype.$message = Message;
在 login.vue 组件中编写弹窗代码：
    this.$message.error('登录失败')