[JavaScript知识库]人力资源后台项目——表单验证与登录

如何进行表单验证：项目使用的是elementUI组件库，Form表单内置了校验功能

参考:组件 | Element

? ? el-form: 配置model和rules
? ? el-form-item: 配置prop
? ? el-input: 配置v-model 和 name

当采用的是非常简单的校验逻辑，我们只需要通过简单的配置即可完成。但是如果校验逻辑比较复杂，推荐采取自定义校验函数的写法，因为函数里面可以更加灵活的定义各种逻辑。

<template>
   <el-form
      :model="loginForm"
      :rules="loginRules"
    >
      <el-form-item prop="mobile">
        <el-input
          ref="mobile"
          v-model="loginForm.mobile"
          placeholder="Username"
          name="mobile"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          name="password"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    // 校验手机号
    const validateMobile = (rule, value, callback) => {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('请输入合法的手机号'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        mobile: '',
        password: ''
      },
      loginRules: {
        mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

登录实现：

1. 点击login按钮做表单兜底统一校验，校验通过实现提交（参考：组件 | Element）
2. 成功之后弹框提示用户登录成功(elementUI弹框组件做提示)
3. 成功之后跳转到首页（跳转用路由跳转）（调用登录接口，对照接口文档封装api函数）

1）封装登录接口 - api/user.js?2）配置baseURL - .env.development?3）在request中设置baseUrl - utils/index.js?4）登录接口调用 - Login/index.vue

4）handleLogin () {
? this.$refs.loginForm.validate(async valid => {
? ? if (valid) {
? ? ? this.loading = true
? ? ? await login(this.loginForm)
? ? ? this.$message.success('登录成功')
? ? ? this.$router.push({ path: this.redirect || "/" })
? ? ? this.loading = false
? ? }
? })
}

?this.$refs.loginForm获取到表单引用对象。validate 函数中接收一个回调函数，第一个形参 callback 是验证结果（boolean值），代表验证通过或失败。

axios响应：

问题一：Axios默认会给我们包裹一个data字段，导致每次在业务模块获取数据都需要写res.data.data

解决办法：在拦截器中统一return response.data

问题二：后端自定义标识做当前接口成功失败的字段，叫做xxx，而不是通过http状态码是否为2xx-3xx来标识接口是否成功。

解决办法：可以在拦截器中做后端自定义状态码判断，如果成功，也就是success字段为true，则return response.data
如果失败，也就是xxx字段为false，则可以提示用户并且手动 return一个 Promise.reject()，让错误被抛出。

import { Message } from 'element-ui'
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 解构后端字段
    // success: 接口是否成功
    // data: 接口数据
    // message: 接口提示文案
    const { success, data, message } = response.data
    if (success) {
      return data
    } else {
      // 错误提示用户
      Message.warning(message)
      // 手动抛出错误
      return Promise.reject(message)
    }
  },
  error => {
    return Promise.reject(error)
  }
)