hrsass-notes
/
03-登录模块.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>登录模块 | 人资项目</title>
    <meta name="generator" content="VuePress 1.8.2">

    <meta name="description" content="人力资源管理系统项目">

    <link rel="preload" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css" as="style"><link rel="preload" href="/hrsass-notes/assets/js/app.6c8c6ef7.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/2.dbebf407.js" as="script"><link rel="preload" href="/hrsass-notes/assets/js/6.08bd0e1c.js" as="script"><link rel="prefetch" href="/hrsass-notes/assets/js/10.a57b780c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/11.dc45fce4.js"><link rel="prefetch" href="/hrsass-notes/assets/js/12.45e48562.js"><link rel="prefetch" href="/hrsass-notes/assets/js/13.95efdd8f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/14.7dd970c2.js"><link rel="prefetch" href="/hrsass-notes/assets/js/15.cb4a760f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/16.104f1088.js"><link rel="prefetch" href="/hrsass-notes/assets/js/17.4082264f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/18.ea0e5a1a.js"><link rel="prefetch" href="/hrsass-notes/assets/js/19.44df7a6c.js"><link rel="prefetch" href="/hrsass-notes/assets/js/20.2da2450e.js"><link rel="prefetch" href="/hrsass-notes/assets/js/21.2b218055.js"><link rel="prefetch" href="/hrsass-notes/assets/js/22.ebaa787f.js"><link rel="prefetch" href="/hrsass-notes/assets/js/3.dd9ee1b1.js"><link rel="prefetch" href="/hrsass-notes/assets/js/4.04f228d0.js"><link rel="prefetch" href="/hrsass-notes/assets/js/5.dc6fc8bc.js"><link rel="prefetch" href="/hrsass-notes/assets/js/7.aad1ab06.js"><link rel="prefetch" href="/hrsass-notes/assets/js/8.562a2120.js"><link rel="prefetch" href="/hrsass-notes/assets/js/9.c7557c6f.js">
    <link rel="stylesheet" href="/hrsass-notes/assets/css/0.styles.a2812fe6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/hrsass-notes/" class="home-link router-link-active"><img src="/hrsass-notes/logo.png" alt="人资项目" class="logo"> <span class="site-name can-hide">人资项目</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
  01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
  02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
  03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
  04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
  05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
  06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
  07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
  08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
  09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
  10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
  11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
  12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
  13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
  Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueRouter
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ElementUI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-i18n
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-print-nb
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
  screenfull
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
  nprogress
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
  xlsx
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
  cos-js-sdk-v5
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="课程内容" class="dropdown-title"><span class="title">课程内容</span> <span class="arrow down"></span></button> <button type="button" aria-label="课程内容" class="mobile-dropdown-title"><span class="title">课程内容</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/hrsass-notes/01-vuex基础.html" class="nav-link">
  01-vuex基础
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/02-基础环境搭建.html" class="nav-link">
  02-基础环境搭建
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/03-登录模块.html" class="nav-link">
  03-登录模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/04-主页模块.html" class="nav-link">
  04-主页模块
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/05-路由和页面.html" class="nav-link">
  05-路由和页面
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/06-组织架构.html" class="nav-link">
  06-组织架构
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/07-公司和角色.html" class="nav-link">
  07-公司和角色
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/08-员工管理.html" class="nav-link">
  08-员工管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/09-权限设计和管理.html" class="nav-link">
  09-权限设计和管理
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/10-其他模块集成.html" class="nav-link">
  10-其他模块集成
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/11-主页审批-图表.html" class="nav-link">
  11-主页审批-图表
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/12-多语言tab页全屏主题.html" class="nav-link">
  12-多语言tab页全屏主题
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/13-打包上线.html" class="nav-link">
  13-打包上线
</a></li><li class="dropdown-item"><!----> <a href="/hrsass-notes/Element表单校验补充.html" class="nav-link">
  Element表单校验补充
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="核心生态" class="dropdown-title"><span class="title">核心生态</span> <span class="arrow down"></span></button> <button type="button" aria-label="核心生态" class="mobile-dropdown-title"><span class="title">核心生态</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueRouter
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.axios-http.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  ElementUI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="相关插件" class="dropdown-title"><span class="title">相关插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="相关插件" class="mobile-dropdown-title"><span class="title">相关插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-i18n
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/vue-print-nb" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vue-print-nb
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/screenfull" target="_blank" rel="noopener noreferrer" class="nav-link external">
  screenfull
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/nprogress" target="_blank" rel="noopener noreferrer" class="nav-link external">
  nprogress
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/echarts" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/xlsx" target="_blank" rel="noopener noreferrer" class="nav-link external">
  xlsx
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.npmjs.com/package/cos-js-sdk-v5" target="_blank" rel="noopener noreferrer" class="nav-link external">
  cos-js-sdk-v5
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>登录模块</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#设置固定的本地访问端口和网站名称" class="sidebar-link">设置固定的本地访问端口和网站名称</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#登录页面的基础布局" class="sidebar-link">登录页面的基础布局</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#登录表单的校验" class="sidebar-link">登录表单的校验</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#el-form表单校验的先决条件" class="sidebar-link">el-form表单校验的先决条件</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#手机号和密码的校验" class="sidebar-link">手机号和密码的校验</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#关于修饰符" class="sidebar-link">关于修饰符</a></li></ul></li><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#vue-cli配置跨域代理" class="sidebar-link">Vue-Cli配置跨域代理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#为什么会出现跨域" class="sidebar-link">为什么会出现跨域？</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#解决开发环境的跨域问题" class="sidebar-link">解决开发环境的跨域问题</a></li></ul></li><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#封装单独的登录接口" class="sidebar-link">封装单独的登录接口</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#封装vuex的登录action并处理token" class="sidebar-link">封装Vuex的登录Action并处理token</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#在vuex中对token进行管理" class="sidebar-link">在Vuex中对token进行管理</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#封装登录的action" class="sidebar-link">封装登录的Action</a></li></ul></li><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#request中环境变量和异常的处理" class="sidebar-link">request中环境变量和异常的处理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#区分axios在不同环境中的请求基础地址" class="sidebar-link">区分axios在不同环境中的请求基础地址</a></li><li class="sidebar-sub-header"><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#处理axios的响应拦截器" class="sidebar-link">处理axios的响应拦截器</a></li></ul></li><li><a href="/hrsass-notes/03-%E7%99%BB%E5%BD%95%E6%A8%A1%E5%9D%97.html#登录页面调用登录action-处理异常" class="sidebar-link">登录页面调用登录action,处理异常</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="登录模块"><a href="#登录模块" class="header-anchor">#</a> 登录模块</h1> <p><a href="http://ihrm-java.itheima.net/#/login" target="_blank" rel="noopener noreferrer">线上地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>本章节，我们将在现有模板的基础上，完成如图的登录模块的功能</p> <p><img src="/hrsass-notes/assets/img/image-20200811014205189.f55bdab4.png" alt="image-20200811014205189"></p> <h2 id="设置固定的本地访问端口和网站名称"><a href="#设置固定的本地访问端口和网站名称" class="header-anchor">#</a> 设置固定的本地访问端口和网站名称</h2> <p><strong><code>目标</code></strong>: 设置统一的本地访问端口和网站title</p> <p>在正式开发业务之前，先将项目的<strong>本地端口</strong>和<strong>网站名称</strong>进行一下调整</p> <p><strong>本地服务端口</strong>:  在**<code>vue.config.js</code>**中进行设置</p> <p><strong><code>vue.config.js</code></strong> 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于<strong>webpack</strong>，但是又不同于webpack，相当于改良版的webpack， <a href="https://cli.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">文档地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>如图，是开发环境服务端口的位置</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200710162221402.7385b819.png" alt="image-20200710162221402"></p> <p>我们看到上面的 **<code>process.env.port</code>**实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？</p> <p>在项目下, 我们发现了**<code>.env.development</code><strong>和</strong><code>.env.production</code>**两个文件</p> <p>development =&gt; 开发环境</p> <p>production =&gt; 生产环境</p> <p>当我们运行<strong>npm run dev</strong>进行开发调试的时候,此时会加载执行**<code>.env.development</code>**文件内容</p> <p>当我们运行<strong>npm run build:prod</strong>进行生产环境打包的时候,会加载执行**<code>.env.production</code>**文件内容</p> <p>所以,如果想要设置开发环境的接口,直接在**<code>.env.development</code>**中写入对于port变量的赋值即可</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 设置端口号</span>
port <span class="token operator">=</span> <span class="token number">8888</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong><code>本节注意</code></strong>:修改服务的配置文件,想要生效的话,必须要重新启动服务，值‘8888’后面不能留有空格</p> <p><strong>网站名称</strong></p> <p>网站名称实际在<strong>configureWebpack</strong>选项中的<strong>name</strong>选项,通过阅读代码,我们会发现name实际上来源于src目录下</p> <p>**<code>settings.js</code>**文件</p> <p>所以,我们可以将网站名称改成&quot;<strong><code>人力资源管理平台</code></strong>&quot;</p> <p><img src="/hrsass-notes/assets/img/image-20200710164040042.fdc81ef7.png" alt="image-20200710164040042"></p> <p><strong>提交代码</strong></p> <p><strong><code>本节注意</code></strong>:修改服务的配置文件,想要生效的话,必须要重新启动服务，值‘8888’后面不能留有空格</p> <p><strong><code>本节任务</code></strong>：完成网站的开发服务端口设置和网站名称设置</p> <h2 id="登录页面的基础布局"><a href="#登录页面的基础布局" class="header-anchor">#</a> 登录页面的基础布局</h2> <p>**<code>目标</code>**完成登录页面的基础布局</p> <p><strong>页面效果</strong></p> <p><img src="/hrsass-notes/assets/img/image-20200710164517167.23761799.png" alt="image-20200710164517167"></p> <p>首先要实现以上的页面效果, 我们可以直接将当前的登录页面进行相应的改造</p> <p><strong>设置头部背景</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 放置标题图片 @是设置的别名--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>@/assets/common/login-logo.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong><code>本节注意</code></strong>： <code>@</code>是我们在vue.config.js中设置的一个路径别名，指定src根目录，这样可以很方便的寻找文件</p> <p><strong>设置背景图片</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* reset element-ui css */</span>
<span class="token selector">.login-container</span> <span class="token punctuation">{</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'~@/assets/common/login.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> // 设置背景图片
  <span class="token property">background-position</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> // 将图片位置设置为充满整个屏幕
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong><code>本节注意</code></strong>： 如需要在样式表中使用**<code>@</code><strong>别名的时候，需要在@前面加上一个</strong><code>~</code>**符号，否则不识别</p> <p><strong>设置手机号和密码的字体颜色</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>$<span class="token property">light_gray</span><span class="token punctuation">:</span> #68b0fe<span class="token punctuation">;</span>  // 将输入框颜色改成蓝色
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>设置输入表单整体背景色</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>  <span class="token selector">.el-form-item</span> <span class="token punctuation">{</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> // 输入登录表单的背景色
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #454545<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>设置错误信息的颜色</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">.el-form-item__error</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #fff
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>设置登录按钮的样式</strong></p> <blockquote><p>需要给el-button 增加一个loginBtn的class样式</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.loginBtn</span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #407ffe<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>修改显示的提示文本和登录文本</strong></p> <div class="language-htmL line-numbers-mode"><pre class="language-html"><code>   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tips<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>账号: 13800000002<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span> 密码: 123456<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>经过以上的改动, 我们得到了一个比较完善的登录页面</p> <p><img src="/hrsass-notes/assets/img/image-20200711002545085.1a3b6c84.png" alt="image-20200711002545085"></p> <blockquote><p>解释:我们该项目的侧重点在于更多的介绍Vue中台项目所应用的技术,所以对于一些过于细节的样式或者布局,我们采用直接粘贴或者拷贝成型代码的方式,同学们可以通过课下多多练习</p></blockquote> <p><strong>提交代码</strong></p> <p><strong><code>本节注意</code></strong>： <code>@</code>是我们在vue.config.js中设置的一个路径别名，指定src根目录，这样可以很方便的寻找文件</p> <p><strong><code>本节注意</code></strong>： 如需要在样式表中使用**<code>@</code><strong>别名的时候，需要在@前面加上一个</strong><code>~</code>**符号，否则不识别</p> <p><strong><code>本节任务</code></strong>： 完成登录首页的基本布局</p> <h2 id="登录表单的校验"><a href="#登录表单的校验" class="header-anchor">#</a> 登录表单的校验</h2> <p>**<code>目标</code>**对登录表单进行规则校验</p> <blockquote><p>基础模板已经有了基础校验的代码,所以我们这一章节更多的是修正和完善</p></blockquote> <h3 id="el-form表单校验的先决条件"><a href="#el-form表单校验的先决条件" class="header-anchor">#</a> <strong>el-form表单校验的先决条件</strong></h3> <p><img src="/hrsass-notes/assets/img/image-20200830212537835.7ff9011c.png" alt="image-20200830212537835"></p> <h3 id="手机号和密码的校验"><a href="#手机号和密码的校验" class="header-anchor">#</a> 手机号和密码的校验</h3> <p><strong>字段名对应</strong></p> <blockquote><p>为什么要对应? 因为基础模板采用的是**<code>username</code><strong>的字段,但是实际接口中采用的是</strong><code>mobile</code><strong>的字段,为了更方便的写代码,所以我们将</strong><code>username</code><strong>改成</strong><code>mobile</code>**</p></blockquote> <p>这里除了字段名，还有我们的规则校验名称，以及prop名称。</p> <p><strong>英文提示变成中文</strong></p> <p>基础模板中都是<strong>placeHolder</strong>占位符是英文,要变成中文</p> <p>登录按钮文字同样需要换成中文</p> <p><strong>校验手机号和校验密码</strong></p> <p>基础模板中,已经做了校验,我们针对代码进行一些优化</p> <p>新规则：手机号必填，并且进行格式校验，密码必填，长度6-16位之间</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 自定义校验函数</span>
    <span class="token keyword">const</span> <span class="token function-variable function">validateMobile</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 校验value</span>
      <span class="token comment">// if (validMobile(value)) {</span>
      <span class="token comment">//   // 如果通过 直接执行callback</span>
      <span class="token comment">//   callback()</span>
      <span class="token comment">// } else {</span>
      <span class="token comment">//   callback(new Error('手机号格式不正确'))</span>
      <span class="token comment">// }</span>
      <span class="token function">validMobile</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'手机号格式不正确'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      loginForm<span class="token operator">:</span> <span class="token punctuation">{</span>
        mobile<span class="token operator">:</span> <span class="token string">'13800000002'</span><span class="token punctuation">,</span>
        password<span class="token operator">:</span> <span class="token string">'123456'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      loginRules<span class="token operator">:</span> <span class="token punctuation">{</span>
        mobile<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'手机号不能为空'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          validator<span class="token operator">:</span> validateMobile<span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        password<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'密码不能为空'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
          min<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'密码的长度在6-16位之间 '</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'blur'</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      passwordType<span class="token operator">:</span> <span class="token string">'password'</span><span class="token punctuation">,</span>
      redirect<span class="token operator">:</span> <span class="token keyword">undefined</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><p>我们在**<code>utils/validate.js</code>**方法中增加了一个校验手机号的方法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
 * 校验手机号
 * **/</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">validMobile</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^1[3-9]\d{9}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span> <span class="token comment">// 校验手机号</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>**<code>utils/validate.js</code>**是一个专门存放校验工具方法的文件</p> <h3 id="关于修饰符"><a href="#关于修饰符" class="header-anchor">#</a> 关于修饰符</h3> <p><strong>关于修饰符</strong></p> <blockquote><p>在该页面中，我们发现了事件的几个修饰符 <strong><code>@keyup.enter.native</code></strong> <strong><code>@click.native.prevent</code></strong></p></blockquote> <p>@keyup.**<code>enter</code>**属于按键修饰符，如果我们想监听在按回车键的时候触发，可以如下编写</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name"><span class="token namespace">v-on:</span>keyup.enter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>@keyup.enter.<strong><code>native</code></strong> 表示监听组件的原生事件，比如 keyup就是于input的原生事件，这里写native表示keyup是一个原生事件</p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong>：实现登录用户的手机号和密码校验</p> <h2 id="vue-cli配置跨域代理"><a href="#vue-cli配置跨域代理" class="header-anchor">#</a> Vue-Cli配置跨域代理</h2> <p><strong><code>目标</code></strong>: 通过配置vue-cli的代理解决跨域访问的问题</p> <h3 id="为什么会出现跨域"><a href="#为什么会出现跨域" class="header-anchor">#</a> 为什么会出现跨域？</h3> <p>当下,最流行的就是**<code>前后分离</code><strong>项目,也就是</strong><code>前端项目</code><strong>和</strong><code>后端接口</code><strong>并不在一个域名之下，那么前端项目访问后端接口必然存在</strong><code>跨域</code>**的行为.</p> <p><img src="/hrsass-notes/assets/img/image-20200826110754199.d2b430de.png" alt="image-20200826110754199"></p> <blockquote><p>怎么解决这种跨域 ？</p></blockquote> <p><strong><code>请注意</code></strong>，我们所遇到的这种跨域是位于<strong>开发环境</strong>的，真正部署上线时的跨域是<strong>生产环境</strong>的</p> <h3 id="解决开发环境的跨域问题"><a href="#解决开发环境的跨域问题" class="header-anchor">#</a> 解决开发环境的跨域问题</h3> <p><strong>开发环境的跨域</strong></p> <p>开发环境的跨域，也就是在**<code>vue-cli脚手架环境</code><strong>下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地</strong><code>开启了一个服务</code><strong>,可以通过这个服务帮我们</strong><code>代理请求</code>**,解决跨域问题</p> <p>这就是vue-cli配置<strong>webpack的反向代理</strong></p> <p><img src="/hrsass-notes/assets/img/image-20200811022013103.aa6c1893.png" alt="image-20200811022013103"></p> <blockquote><p>采用vue-cli的代理配置</p></blockquote> <p>vue-cli的配置文件即**<code>vue.config.js</code>**,这里有我们需要的 <a href="https://cli.vuejs.org/zh/config/#devserver-proxy" target="_blank" rel="noopener noreferrer">代理选项<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  devServer<span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token comment">// 代理配置</span>
    proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制</span>
        <span class="token comment">// localhost:8888/api/abc  =&gt; 代理给另一个服务器</span>
        <span class="token comment">// 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）</span>
        <span class="token comment">// 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）</span>
        <span class="token string">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">'www.baidu.com'</span><span class="token punctuation">,</span> <span class="token comment">// 我们要代理的地址</span>
        changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求</span>
         <span class="token comment">// 路径重写</span>
        pathRewrite<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 重新路由  localhost:8888/api/login  =&gt; www.baidu.com/api/login</span>
            <span class="token string">'^/api'</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token comment">// 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 </span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>以上就是我们在vue-cli项目中配置的代理设置</p> <blockquote><p>接下来,我们在代码中将要代理的后端地址变成 <a href="http://ihrm-java.itheima.net" target="_blank" rel="noopener noreferrer">后端接口地址<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 代理跨域的配置</span>
    proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求</span>
      <span class="token string">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">'http://ihrm-java.itheima.net/'</span><span class="token punctuation">,</span> <span class="token comment">// 跨域请求的地址</span>
        changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 只有这个值为true的情况下 才表示开启跨域</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><strong><code>本节注意</code></strong>：我们并没有进行**<code>pathRewrite</code><strong>,因为后端接口就是</strong><code>ihrm-java.itheima.net/api</code>**这种格式,所以不需要重写</p> <p>**<code>vue.config.js</code>**的改动如果要生效,需要进行重启服务</p> <p>同时，还需要注意的是，我们同时需要注释掉 mock的加载，因为mock-server会导致代理服务的异常</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// before: require('./mock/mock-server.js'),  // 注释mock-server加载</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>生产环境的跨域</strong></p> <p>生产环境表示我们已经开发完成项目，将项目部署到了服务器上,这时已经没有了vue-cli脚手架的**<code>辅助</code><strong>了，我们只是把打包好的</strong><code>html+js+css</code><strong>交付运维人员，放到</strong><code>Nginx</code><strong>服务器而已,所以此时需要借助</strong><code>Nginx</code>**的反向代理来进行</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>server<span class="token punctuation">{</span>
    <span class="token comment"># 监听9099端口</span>
    listen <span class="token number">9099</span><span class="token punctuation">;</span>
    <span class="token comment"># 本地的域名是localhost</span>
    server_name localhost<span class="token punctuation">;</span>
    <span class="token comment">#凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://baidu.com</span>
    location ^~ /api <span class="token punctuation">{</span>
        proxy_pass http://baidu.com<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><strong><code>注意</code></strong>:这里的操作一般由运维人员完成,需要前端进行操作,这里我们进行一下简单了解</p> <p>更多正向代理和反向代理知识,请阅读这篇文章<a href="https://www.cnblogs.com/ysocean/p/9392908.html" target="_blank" rel="noopener noreferrer">Nginx反向代理<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>提交代码</strong></p> <p><strong><code>本节注意</code></strong>：我们并没有进行**<code>pathRewrite</code><strong>,因为后端接口就是</strong><code>ihrm-java.itheima.net/api</code>**这种格式,所以不需要重写</p> <p><strong><code>本节任务</code></strong>： 配置vue-cli的反向代理，实现后端接口的跨域访问</p> <h2 id="封装单独的登录接口"><a href="#封装单独的登录接口" class="header-anchor">#</a> 封装单独的登录接口</h2> <p><strong><code>目标</code></strong> 在单独请求模块中,单独封装登录接口</p> <blockquote><p>完成登录模块之后，我们需要对登录接口进行封装</p></blockquote> <p>首先，查阅接口文档中的登录接口</p> <blockquote><p>基础模板已经有了原来的登录代码,我们只需要进行简单的改造即可</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 返回一个axios对象 =&gt; promise  // 返回了一个promise对象</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">'/sys/login'</span><span class="token punctuation">,</span> <span class="token comment">// 因为所有的接口都要跨域 表示所有的接口要带 /api</span>
    method<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
    data
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>如图</p> <p><img src="/hrsass-notes/assets/img/image-20200812002834804.dc6775e8.png" alt="image-20200812002834804"></p> <p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong>：封装单独的登录接口</p> <h2 id="封装vuex的登录action并处理token"><a href="#封装vuex的登录action并处理token" class="header-anchor">#</a> 封装Vuex的登录Action并处理token</h2> <p>**<code>目标</code>**在vuex中封装登录的action,并处理token</p> <blockquote><p>在这个小节中，我们将在vuex中加入对于用户的登录的处理</p></blockquote> <h3 id="在vuex中对token进行管理"><a href="#在vuex中对token进行管理" class="header-anchor">#</a> 在Vuex中对token进行管理</h3> <p>在传统模式中，我们登录的逻辑很简单，如图</p> <p><img src="/hrsass-notes/assets/img/image-20200812003821680.a1850f7e.png" alt="image-20200812003821680"></p> <blockquote><p>上图中，组件直接和接口打交道，这并没有什么问题，但是对于用户token这一高频使用的**<code>钥匙</code>**，我们需要让vuex来介入，将用户的token状态共享，更方便的读取，如图</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200812011826021.f70689e4.png" alt="image-20200812011826021"></p> <p><strong>实现store/modules/user.js基本配置</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 状态</span>
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">// 修改状态</span>
<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">// 执行异步</span>
<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  namespaced<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  state<span class="token punctuation">,</span>
  mutations<span class="token punctuation">,</span>
  actions
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><strong>设置token的共享状态</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
  token<span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>我们需要知道,**<code>钥匙</code>**不能每次都通过登录获取,我们可以将token放置到本地的缓存中</p></blockquote> <p>在**<code>utils/auth.js</code><strong>中,基础模板已经为我们提供了</strong><code>获取token</code><strong>,</strong><code>设置token</code><strong>,</strong><code>删除token</code>**的方法,可以直接使用</p> <p>只需要将存储的key放置成特定值即可</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Cookies <span class="token keyword">from</span> <span class="token string">'js-cookie'</span>

<span class="token keyword">const</span> TokenKey <span class="token operator">=</span> <span class="token string">'hrsaas-ihrm-token'</span> <span class="token comment">// 设定一个独一无二的key</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Cookies<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>TokenKey<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setToken</span><span class="token punctuation">(</span><span class="token parameter">token</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Cookies<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>TokenKey<span class="token punctuation">,</span> token<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">removeToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Cookies<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>TokenKey<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>初始化token状态</strong> - <strong><code>store/modules/user.js</code></strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getToken<span class="token punctuation">,</span> setToken<span class="token punctuation">,</span> removeToken <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span>
<span class="token comment">// 状态</span>
<span class="token comment">// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上</span>
<span class="token comment">// Vuex的持久化 如何实现 ？ Vuex和前端缓存相结合</span>
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
  token<span class="token operator">:</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 设置token初始状态   token持久化 =&gt; 放到缓存中</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>提供修改token的mutations</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 修改状态</span>
<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 设置token</span>
  <span class="token function">setToken</span><span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> token</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    state<span class="token punctuation">.</span>token <span class="token operator">=</span> token <span class="token comment">// 设置token  只是修改state的数据  123 =》 1234</span>
    <span class="token comment">// vuex变化 =&gt; 缓存数据</span>
    <span class="token function">setToken</span><span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token comment">// vuex和 缓存数据的同步</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 删除缓存</span>
  <span class="token function">removeToken</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    state<span class="token punctuation">.</span>token <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token comment">// 删除vuex的token</span>
    <span class="token function">removeToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 先清除 vuex  再清除缓存 vuex和 缓存数据的同步</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="封装登录的action"><a href="#封装登录的action" class="header-anchor">#</a> 封装登录的Action</h3> <p><strong>封装登录的action</strong></p> <blockquote><p>登录action要做的事情,<strong><code>调用登录接口</code></strong>,<strong><code>成功后设置token到vuex</code></strong>,<strong><code>失败则返回失败</code></strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> login <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/user'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>封装action操作</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 执行异步</span>
<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 定义login action  也需要参数 调用action时 传递过来的参数</span>
  <span class="token keyword">async</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">login</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token comment">// 实际上就是一个promise  result就是执行的结果</span>
    <span class="token comment">// axios默认给数据加了一层data</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的</span>
      <span class="token comment">// 现在有用户token</span>
      <span class="token comment">// actions 修改state 必须通过mutations</span>
      context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setToken'</span><span class="token punctuation">,</span> result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><blockquote><p>上述代码中,我们使用了**<code>async/await</code><strong>语法,如果用</strong><code>then</code>**语法也是可以的</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 为什么async/await 不用返回new Promise,因为 async函数本身就是 Promise,promise的值返回的值  </span>
<span class="token function">login</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">login</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setToken'</span><span class="token punctuation">,</span>  result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token comment">// 提交mutations设置token</span>
          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// 表示执行成功了</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><blockquote><p>以上两种写法都是OK的,我们在项目研发过程中,尽可能的采用前一种</p></blockquote> <p>除此之外，为了更好的让其他模块和组件更好的获取token数据，我们可以在**<code>store/getters.js</code>**中将token值作为公共的访问属性放出</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">sidebar</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>app<span class="token punctuation">.</span>sidebar<span class="token punctuation">,</span>
  <span class="token function-variable function">device</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>app<span class="token punctuation">.</span>device<span class="token punctuation">,</span>
  <span class="token function-variable function">token</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>user<span class="token punctuation">.</span>token <span class="token comment">// 在根级的getters上 开发子模块的属性给别人看 给别人用</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> getters

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><strong>提交代码</strong></p> <blockquote><p>通过本节内容，我们要掌握在Vuex中如何来管理共享状态</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200826145500269.c6f8ac60.png" alt="image-20200826145500269"></p> <p><strong><code>本节任务</code></strong>：封装Vuex的登录Action并处理token</p> <h2 id="request中环境变量和异常的处理"><a href="#request中环境变量和异常的处理" class="header-anchor">#</a> request中环境变量和异常的处理</h2> <p>**<code>目标</code>**设置request环境变量和异常处理</p> <h3 id="区分axios在不同环境中的请求基础地址"><a href="#区分axios在不同环境中的请求基础地址" class="header-anchor">#</a> 区分axios在不同环境中的请求基础地址</h3> <blockquote><p>为什么会有环境变量之分? 如图</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200826150136697.0c348fcd.png" alt="image-20200826150136697"></p> <blockquote><p>从上图可以看出，开发环境实际上就是在自己的本地开发或者要求不那么高的环境，但是一旦进入生产，就是**<code>真实的数据</code>**。 拿银行作比喻，如果你在开发环境拿生产环境的接口做测试，银行系统就会发生很大的风险。</p></blockquote> <p>前端主要区分两个环境,<strong><code>开发环境</code></strong>,<strong><code>生产环境</code></strong></p> <blockquote><p>也就是两个环境发出的请求地址是不同的，用什么区分呢?</p></blockquote> <p><strong>环境变量</strong></p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>$ process.env.NODE_ENV <span class="token comment"># 当为production时为生产环境 为development时为开发环境</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>环境文件</strong></p> <p>我们可以在**<code>.env.development</code><strong>和</strong><code>.env.production</code>**定义变量，变量自动就为当前环境的值</p> <p>基础模板在以上文件定义了变量**<code>VUE_APP_BASE_API</code><strong>，该变量可以作为axios请求的</strong><code>baseURL</code>**</p> <p>我们会发现,在模板中,两个值分别为**<code>/dev-api</code><strong>和</strong><code>/prod-api</code>**</p> <p>但是我们的开发环境代理是**<code>/api</code>**，所以可以统一下</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 开发环境的基础地址和代理对应  不需要引号</span>
VUE_APP_BASE_API <span class="token operator">=</span> /api
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 这里配置了/api,意味着需要在Nginx服务器上为该服务配置 nginx的反向代理对应/prod-api的地址    不需要引号</span>
VUE_APP_BASE_API <span class="token operator">=</span> /prod-api
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong><code>本节注意</code></strong>：我们这里生产环境和开发环境设置了不同的值，后续我们还会在生产环境部署的时候，去配置该值所对应的反向代理，反向代理指向哪个地址，完全由我们自己决定，不会和开发环境冲突</p> <p><strong>在request中设置baseUrl</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> service <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 如果执行 npm run dev  值为 /api 正确  /api 这个代理只是给开发环境配置的代理</span>
  <span class="token comment">// 如果执行 npm run build 值为 /prod-api  没关系  运维应该在上线的时候 给你配置上 /prod-api的代理</span>
  baseURL<span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VUE_APP_BASE_API</span><span class="token punctuation">,</span> <span class="token comment">// 设置axios请求的基础的基础地址</span>
  timeout<span class="token operator">:</span> <span class="token number">5000</span> <span class="token comment">// 定义5秒超时</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 创建一个axios的实例</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="处理axios的响应拦截器"><a href="#处理axios的响应拦截器" class="header-anchor">#</a> 处理axios的响应拦截器</h3> <blockquote><p>OK，除此之外,axios返回的数据中默认增加了一层**<code>data的包裹</code>**,我们需要在这里处理下</p></blockquote> <blockquote><p>并且,人资项目的接口,如果执行失败,只是设置了**<code>success</code><strong>为</strong><code>false</code>**，并没有reject，我们需要一并处理下</p></blockquote> <p>处理逻辑如图</p> <p><img src="/hrsass-notes/assets/img/image-20200812020656210.cf077e85.png" alt="image-20200812020656210"></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 响应拦截器</span>
service<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// axios默认加了一层data</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> success<span class="token punctuation">,</span> message<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> response<span class="token punctuation">.</span>data
  <span class="token comment">//   要根据success的成功与否决定下面的操作</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>success<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> data
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 业务已经错误了 还能进then ? 不能 ！ 应该进catch</span>
    Message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span> <span class="token comment">// 提示错误消息</span>
    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">error</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  Message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>message<span class="token punctuation">)</span> <span class="token comment">// 提示错误信息</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token comment">// 返回执行错误 让当前的执行链跳出成功 直接进入 catch</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>既然在request中已经默认去除了一层data的外衣，所以我们也将上节login的action进行一下改动</p></blockquote> <p><strong>处理登录的返回结构问题</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token keyword">async</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 经过响应拦截器的处理之后 这里的result实际上就是 token</span>
    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">login</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token comment">// 实际上就是一个promise  result就是执行的结果</span>
    <span class="token comment">// axios默认给数据加了一层data</span>
    <span class="token comment">// 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的</span>
    <span class="token comment">// 现在有用户token</span>
    <span class="token comment">// actions 修改state 必须通过mutations</span>
    context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setToken'</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节任务</code></strong>： 完成request环境变量和异常的处理</p> <h2 id="登录页面调用登录action-处理异常"><a href="#登录页面调用登录action-处理异常" class="header-anchor">#</a> 登录页面调用登录action,处理异常</h2> <p><strong><code>目标</code></strong> 调用vuex中的登录action,并跳转到主页</p> <blockquote><p>按照如图的业务逻辑，把剩下的内容在登录页面引入</p></blockquote> <p><img src="/hrsass-notes/assets/img/image-20200812011826021.f70689e4.png" alt="image-20200812011826021"></p> <p><strong>引入actions辅助函数</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mapActions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>  <span class="token comment">// 引入vuex的辅助函数</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>引入action方法</strong></p> <blockquote><p>此处，我们采用直接引入模块action的方式，后面我们采用分模块的引用方式</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user/login'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>调用登录</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>     <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>loginForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">isOK</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>isOK<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">try</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span>
            <span class="token comment">// 只有校验通过了 我们才去调用action</span>
            <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">[</span><span class="token string">'user/login'</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>loginForm<span class="token punctuation">)</span>
            <span class="token comment">// 应该登录成功之后</span>
            <span class="token comment">// async标记的函数实际上一个promise对象</span>
            <span class="token comment">// await下面的代码 都是成功执行的代码</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
          <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span>
            <span class="token comment">//  不论执行try 还是catch  都去关闭转圈</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><strong>提交代码</strong></p> <p><strong><code>本节注意</code></strong>：我们调用的是Vuex中子模块的action，该模块我们进行了namespaced: true，所以引用aciton时需要带上**<code>user/</code>**, 并且在使用该方法时，直接使用 <strong><code>this['user/login']</code></strong>, 使用this.user/login 语法是错误的</p> <p><strong><code>本节任务</code></strong>：登录页面调用登录action，处理异常</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/hrsass-notes/assets/js/app.6c8c6ef7.js" defer></script><script src="/hrsass-notes/assets/js/2.dbebf407.js" defer></script><script src="/hrsass-notes/assets/js/6.08bd0e1c.js" defer></script>
  </body>
</html>