人资项目- DAY2-登录功能配置

菜菜不想做菜菜
193 阅读7分钟

1.登录页面布局

此时，无法自动调整格式，将下面该文件夹放到根目录下

image.png

此时页面会一直停留在主页面，切换不到登录页面。需要手动清除permission.js中的文件（里面含有权限访问） 创建新分支，用于管理登录的相关操作

git checkout -b feature/login // feature 代表的意思就是新特性新功能

1.1修改logo和主背景---样式里面使用@注意事项

  1. 找入口login/index.vue
  2. 拷贝素材
  3. 设置头部图片
<!-- 放置标题图片 @是设置的别名-->
<div class="title-container">
        <h3 class="title">
          <img src="@/assets/common/login-logo.png" alt="">
        </h3>
 </div>

注意： @是我们在vue.config.js中设置的一个路径别名，指定src根目录，这样可以很方便的寻找文件

  1. 设置背景图片

image.png

/* reset element-ui css */
.login-container {
  background-image: url('~@/assets/common/login.jpg'); // 设置背景图片
  background-position: center; // 将图片位置设置为充满整个屏幕
}

注意： 如需要在样式表中使用@别名的时候，需要在@前面加上一个~符号，否则不识别

1.2修改样式

经过以上的改动, 我们得到了一个比较完善的登录页面

2.登录表单总结

2.1 el-form表单验证的先决条件--props对应着规则

image.png

image.png

2.2 Element的表单补充---表单校验规则

常用的几个基本校验规则：

image.png 检验的格式：

image.png 如：

image.png

2.2.1 自定义校验validator

validator是一个函数，包含三个参数，rule当前规则对象，value当前值，callback回调函数

image.png 案例：

image.png

2.2.2手动校验---用户直接点击登录，此时光标没有离开焦点，此时需要进行手动校验

用户直接点击登录，此时光标没有离开焦点，此时需要进行手动校验

image.png 以上这些方法是el-form的API，需要获取el-form的实例，才可以进行调用。

image.png

image.png

2.3 修改手机号和密码的校验

正则小工具：查找自己需要的正则表达式即可

image.png 相关步骤：手机号码验证

image.png

image.png

image.png 相关步骤：密码验证 password: [{ required: true, trigger: 'blur', message:'密码不能为空' },{trigger:'blur',min:6,max:16,message:'密码的长度在6-16位之间'}]

2.4事件修饰符.native--监听组件的原生事件

image.png

3.Vue-Cli配置跨域代理

3.1什么是同源策略？

同源策略

同源策略是浏览器提供的一种安全机制，目的是为了保证用户信息的安全，防止恶意的网站窃取数据。

同源的定义

那如果判断是否同源？主要根据三个维度，域名(ip)，协议，端口三个都相同才算同源。

3.2跨域问题

现在最流行的就是前后端分离的项目，也就是前端跟后端不在一个域名之下，那么前端项目访问后端接口，必然会存在跨域的行为。

image.png

3.3解决跨域问题---现在解决的是开发环境的

后续可能多种跨越的情况出现，如测试跨越，预生产跨域等，都要处理跨越问题 请注意，我们现在所遇到的这种跨域是位于开发环境的，真正部署上线的跨越是生产环境的

3.3.1解决跨域--开发环境跨域vue.config.js中修改

开发环境的跨域，也就是在**vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务 ,可以通过这个服务帮我们代理请求**,解决跨域问题

配置webpack的反向代理： image.png

// 熟悉proxy 代理的用法
module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
      // localhost:8888/api/login
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
            // 重新路由  localhost:8888/api/login  => www.baidu.com/login
            '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
        }
      },
    }
  }
}

本项目中的代理

image.png 我们并没有进行**pathRewrite ,因为后端接口就是http://42.192.129.12:3001/api**这种格式,所以不需要重写

3.3.2生产跨越后期进行补充

生产环境表示我们已经开发完成项目，将项目部署到了服务器上,这时已经没有了vue-cli脚手架的**辅助了，我们只是把打包好的html+js+css交付运维人员，放到Nginx服务器而已,所以此时需要借助Nginx**的反向代理来进行

注意:这里的操作一般由运维人员完成,需要前端进行操作

4.登录功能

4.1封装单独的接口

image.png

4.2在Vuex中管理token----使用更加方便----实现token的数据持久化

常规登录操作：登录页面--->调用接口--->存储token，跳转主页

组件直接和接口打交道，这并没有什么问题，但是对于用户token这一高频使用的钥匙（token） ，我们需要让vuex来介入，将用户的token状态共享，更方便的读取

image.png

登录流程+vuex管理token逻辑图： image.png 设置token的共享状态：

image.png 钥匙不能每次都通过登录获取，因此我们可以将token放置到本地的缓存中去

token 要存放在缓存中---为什么？

当我们的界面刷新的时候，vuex里的token还会存在吗？？不存在的话 岂不是需要重新请求接口吗？？ 钥匙不能每次都通过登录获取，因此我们可以将token放置到本地的缓存中去。在utils/auth.js中,基础模板已经为我们提供了获取token,设置token,删除token的方法,可以直接使用 只需要将存储的key放置成特定值即可

import Cookies from 'js-cookie'

const TokenKey = 'hrsaas-ihrm-token' // 设定一个独一无二的key

初始化token状态- store/modules/user.js 代码部分：

image.png 以上操作实现了vuex管理token，实现了数据的持久化,token与本地缓存的存取

4.3封装登录的Action

登录action要做的事情，调用登录接口，成功后设置token到vuex,失败了则返回失败。

登录流程+vuex管理token逻辑图： image.png

4.4实现基准地址区分---区分Axios在不同环境中的请求地址

开发环境实际上就是在自己的本地开发或者要求不那么高的环境，但是一旦进入生产，就是真实的数据，所以需要不同的环境。 环境变量：在不同的环境 下定义一个同名数据，该数据在不同环境下值不同 image.png 下面对如何实现基准地址进行说明： 开发环境代理是**/api**，npm run dev 读取env.development

# 开发环境的基础地址和代理对应
VUE_APP_BASE_API = '/api'

生产环境, npm run build 读取env.production

# 这里配置了/api,意味着需要在Nginx服务器上为该服务配置 nginx的反向代理对应/prod-api的地址 
VUE_APP_BASE_API = '/prod-api'

在request中设置baseUrl

const service = axios.create({
  // 如果执行 npm run dev  值为 /api 正确  /api 这个代理只是给开发环境配置的代理
  // 如果执行 npm run build 值为 /prod-api  没关系  运维应该在上线的时候 给你配置上 /prod-api的代理
  baseURL: process.env.VUE_APP_BASE_API, // 设置axios请求的基础的基础地址
  timeout: 5000 // 定义5秒超时
}) // 创建一个axios的实例

image.png

5.响应优化

5.1 响应拦截器处理-----axios返回的数据中默认增加了一层data的包裹

拦截器

axios返回的数据中默认增加了一层**data的包裹**,我们需要在这里处理下

响应拦截器逻辑图： image.png 调用接口，后端会返回success，表明接口是否调用成功，并且返回提示信息。我们需要对其进行处理，响应拦截器含有两个参数，response&error。（200报错是可以捕获，超过try...catch捕获不到）

image.png

既然在request中已经默认去除了一层data的外衣，所以我们也将上节login的action进行一下改动此时，actions里面的代码也需要调整

调整后代码： image.png 调整前代码：

image.png

5.2登录流程数据---登录页面调用登录actin&处理异常

以下两种代码都可以 image.png

avatar
文章
阅读
粉丝