Vue项目 数据绑定、表单验证、发送请求

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

登录功能

页面布局

• Form表单与flex布局

功能分析

• 数据绑定
• 表单验证
• 发送请求
• 请求结果处理
  • 成功
  • 失败

接口测试

• 使用postman进行接口测试
• 在书写功能时，可以将需要操作的某些接口，在postman中创建集合，保存接口信息便于测试
• 🤩第一步：如果测试的接口都具有相同的基地址，可以给集合设置变量，简化书写

• 🤩第二步：接口中通过{{变量名}}的方式使用；更新已有接口地址后，点击save保存更新

登录请求

数据绑定：v-model

<el-form-item label="手机号">
  <el-input v-model="form.phone"></el-input>
</el-form-item>

表单验证

• 🤩给<el-form>绑定的属性
  • model:绑定表单数据的对象
  • rules:表单验证对象，内部的属性名对应要验证的<el-form-item>的prop（属性设置为数组，内部可同时指定多条规则）
• 🤩给进行验证的<el-form-item>设置属性
  • prop:对应model中的哪个属性
• 🤩在onSumbit中对表单校验结果进行判断
  • 给<el-form>添加ref属性，以便在onSumbit中通过this.$ref访问
• 通过form组件的验证方法validate()进行处理
  • 文档实例：传入回调处理

  // validate传入回调函数的参数：第一个为验证结果，布尔类型
  this.$refs[formName].validate((valid) => {
    if (valid) {
      alert('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
  

  • 如果validate()不传入回调函数，则返回promise，通过await处理

  // 通过检测结果为true,未通过检测时会出现异常，通过try..catch处理即可
  async onSubmit () {
    try {
      // 表单验证
      await this.$refs[formName].validate()
    } catch (err) {
      // 捕获错误
      console.log('验证失败',err)
    }
  }
  

发送请求

• 🤩由于axios的请求参数默认：application/json格式，接口需要x-www-form-urlencoded格式，导致请求参数处理失败

• 解决：通过qs模块将请求参数格式转换成接口需要的

  • npm i qs安装qs模块
  • 引入qs模块
  • 使用qs模块处理请求参数格式

  const { data } = await request({
    method: 'POST',
    url: '',
    // 使用qs模块转换请求参数格式
    data: qs.stringify(this.form)
  })
  

• 🤩请求结果处理：根据接口文档中提供的自定义状态码判断，除了1或者200为成功，其余均为失败

  • 成功时跳转后台首页/home,使用$router.push()
  • 失败时进行提示，使用$message()组件进行错误提示美化this.$message.error(data.message)

避免重复请求

• 当请求速度较慢时（网速慢），如果多次点击登录按钮会导致重复触发请求，无意义
• 在请求期间禁用登录按钮点击事件，通过Button组件中的isLoading属性(Boolean)来控制
  • 默认：isLoading:false
  • 请求发送前isLoading:true
  • 请求接收成功isLoading:false

封装请求方法

• 封装用户请求的功能模块services/user.js