一 .样式修改

罗列需要修改的样式如下

当我们提供错误的用户名和密码时，本次请求的状态码是正常的（但是：success字段是false），也没有网络错误，所以axios并不会报错。如下图示

• 设置登陆表单上的logo图

• 

• 设置整体面页的背景图片

• 

• 设置输入框中的字体颜色

• 

• 设置登陆按钮的样式 (注意:一定要给el-button添加class="loginBtn")

• 

• 修改显示的提示文本内容

• 

• 设置输入表单整体背景色(只改bacground这个属性就可以了)

• 

• 设置错误信息的颜色(表单验证不通过时的提示信息)

• 

  小结:

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

• 2. 如需要在样式表中使用@别名时，需要在@前面加上一个~符号，否则不识别

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

• 3. 一个单文件组件中，样式如果只是在当前组件使用，则可以写到标注了scoped的区域，如果写在不标注scoped的区域，它就会变成全局样式

• 二. 表单验证

  步骤

  查看接口文档，在当前页面中做替换。

• el-form表单校验复习

• |- el-form     绑定model 和 rules规则
  |-------- el-form-item    绑定prop属性
  |------------------------ el-input  绑定v-model

• 1. 查看接口 根据接口设置表单数据项名称

• 

• 

   

• 小结

  在做表单提交时，其中的数据项名称建议与后端接口要求保持一致。

  用ctrl+F/ H替换；

• 2. 修改自定义校验规则 (crtl + p 搜索validate.js)
•  2.1 手机号验证
  在validate.js中添加一个自定义校验手机号的规则 并导出

  export function validMobile(str) {
    return /^1[3-9]\d{9}$/.test(str) // 校验手机号
  }

   

   2.2 密码验证

• 

   2.3 表单校验总结

• 完整的表单校验需要三个组件完成配合 分别是el-form，el-form-item，表单项，如：el-input

  el-form负责绑定model 和 rules

  el-form-item负责绑定prop

  el-input 负责双向绑定具体的表单数据

• 简单的校验例如非空，长度等可以直接使用内置的校验配置，如果校验规则复杂建议使用校验函数进行校验。

  比如：我们的手机号比较复杂就使用更加灵活的校验函数

  比如：密码比较简单我们直接使用内置的校验配置即可

• 手动兜底校验

• 

   三. 封装登录接口

• src/api/user.js 中添加一个方法

  export function login(data) {
    return request({
      url: 'api/sys/login',
      method: 'post',
      data
    })
  }

  在request中设置baseUrl

  const service = axios.create({
    baseURL: 'http://ihrm-java.itheima.net', // 设置axios请求的基础的基础地址
    timeout: 5000 // 定义5秒超时
  })

  基地址是线上的地址，在后边的学习中，我们会切到线下的地址，这里只是测试一下

• 在组件中调用登录接口

• 在src/views/login/index.vue中:

• 导入登录方法；

• 在通过了表单验证后，执行登录动作

• import { login } from '@/api/user.js'

   async doLogin() {
        try {
          const res = await login(this.loginForm)
          console.log('登录成功', res)
        } catch (err) {
          console.log('登录失败,原因是', err)
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          // 先做校验 校验通过才能发送请求
          if (valid) {
            this.doLogin()
          }
        })
      }

  修改axios的响应拦截器

• 问题

• 获取ajax的返回结果比较麻烦：res.data.data.XXXX

• 登录时，填写错误的用户名密码，没有错误提示(没有进入catch分支)(没有设置响应拦截器)

• 解决登录失败不报错的问题

  分析原因：

  axios内部的报错机制：(报错只有这两种可能)

• 如果本次请求得到的响应的状态码 不是2开头的（如：400，500），就会主动抛出错误。

• 如果本次请求出现网络错误，就会主动抛出错误

解决思路：

在响应拦截器中，根据本次请求返回的数据中的success字段值，来决定是否主动抛出错误。

解决方法:

在src/utils/request.js中，补充请求拦截器如下：

// 响应拦截
service.interceptors.response.use(response => {
  if (response.data.success) {
    // 当success 为true时 才真正意义上请求成功
  } else {
    // 当success 为false时 就设置被catch分支捕获
    return Promise.reject(new Error('登录失败'))
  }
}, error => { // 捕获axios 其他的错误
  return Promise.reject(error) // 返回执行错误 让当前的执行链跳出成功 直接进入catch
}

)