这是我参与 8 月更文挑战的第 3 天，活动详情查看： 8月更文挑战

封装请求模块

项目中需要通过接口进行数据请求，为了方便操作，需要封装用于请求操作的函数。
在Vue.js中通常搭配Axios进行AJAX请求操作。

不太懂Axios，可以查看这篇文章：Ajax常用库之Axios

不太懂Ajax，可以查看这篇文章：Ajax基础和手写封装Ajax函数

小操作：每次查找目录很麻烦，使用@/ 相当于从src目录下开始查找。
使用Axios发送请求，请求成功后收到一个对象Object。

axios请求成功返回对象.png

接口处理

封装请求模块

axios请求拦截器（通过判断基地址，进行不同的操作）

当发送任一请求时，通过axios拦截器来判断本次请求的地址是：“front? boss?”
可以给request设置拦截器来判断url前缀，再将对应基地址设置给config.baseURL
- axios具有请求拦截器与相应拦截器，用于在请求与响应前进行提前处理。
- 请拦截器参数config为本次请求的相关配置信息，这里通过baseURL来修改请求的基地址。
- 操作完毕，最后一定要返回config让配置修改生效，否则请求无法发送成功。

axios拦截器操作.png

登录功能

页面布局

登录页主体为表单，使用element的Form表单。
- 由于使用了ESLint,拷贝数组配置对象时注意分号与函数名后的空格
- 给密码的<el-input>设置type='password'
具体实现代码
使用flex布局处理

功能分析

数据绑定
表单验证
请求登陆
请求结果处理（响应处理）
- 成功
- 失败

接口测试

接口测试两种方式
- 通过接口文档提供的测试功能
- 使用当前流行的测试工具Postman进行接口测试（下载地址：>www.postman.com/downloads）
实际使用Postman测试截图如下

Postman测试接口成功.png

Postman测试接口失败.png

插播使用Postman：

注意：在书写功能时，如果经常需要操作某些接口，可以在Postman中创建集合，保存接口信息便于测试。

Postman将常用的接口存放在集合中.png

如果测试的接口具有相同的基地址，可以给集合设置变量，简化书写

Postman集合基地址变量存储.png

在接口中通过{{变量名}}的方式使用。更新已有接口地址后，点击save按钮保存更改。

Postman使用基地址变量.png

登录请求

准备工作，声明存储表单内容的数据

表单验证

通过Element中Form组件的表单验证功能进行验证。
功能中需要使用的属性说明如下：
- 需要给<el-form>绑定的属性
  - model: 绑定表单数据的对象
  - rules: 表单验证对象，内部的属性名对应要验证<el-form-item>的prop(属性设置为数组，内部可同时指定多条规则)
    - required: 是否必选
    - message: 验证失败的提示信息
    - trigger: 触发方式，传入事件名
    - max: 最大长度
    - min: 最小长度
    - pattern: 验证的正则规则
- 给要进行验证的<el-form-item>设置的属性
  - prop: 对应model中的哪个属性
实际代码演示

表单验证prop属性.png

表单验证规则设定.png

Element中Form方法：validate

简介方法
- validate方法对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
- Function(callback: Function(boolean, object))

功能分析：

验证设置完毕，但无论验证结果如何，请求都可以正常发送，应根据验证结果进行相应处理。

在onSubmit中对表单校验结果进行判断。

通过给<el-form>添加ref属性，以便在onSubmit中通过this.$refs访问。

通过Form组件的验证方法validate()进行处理。

传入回调处理

 // Element ⽂档示例：validate 传⼊回调函数的参数1为验证结果，布尔类型
this.$refs[formName].validate((valid) => {
  if (valid) {
    alert('submit!');
  } else {
    console.log('error submit!!');
    return false;
  }
})

不传入回调处理:测试后发现，通过检验结果为 true，未通过检验时会出现异常，通过 try..catch 处理即可。

async onSubmit () {
  try {
  // 1. 表单验证
    await this.$refs.form.validate()
    // 2. 请求
    // 3. 响应处理
  } catch (err) {
      console.log('验证失败', err)
  }
}

Vue项目实战(2)