前端废物的自救之路（2）Ant Design Vue实现登录页面及表单校验功能

由于后台没有要求响应式，本来我是打算使用Element UI（以下简称element）作为后台的UI框架的——因为Element的参考资料实在是太多了，简直是我等前端废物的福音，并且我以前的项目中也多次使用了element。但是在认真研究了Ant Design Vue（以下简称antdv）的文档后，我决定前后台都使用antdv，因为antdv支持响应式所以可以前后台用一套框架，并且antdv在设计上更加符合我的审美，也更简洁、高效。虽然antdv的文档写的并不如element，但是有一定基础的话还是很容易看懂的，一旦接受了antdv的设定、读懂了antdv的文档，那么antdv就是一个十分适合懒人使用的框架。

当然，由于我是个前端废物，在UI方面更是废物中的废物——审美诡异、搞不定用户体验、“能用就行”，所以对于UI框架的选型方面就不做过多的评论了，而且UI框架选型是一个仁者见仁智者见智的事情，一千个人眼中有一千种选型方案。

这一系列文章也算是我这个前端废物为antdv社区做出的一些力所能及的贡献吧。

由于我十分不擅长UI设计，并且审美十分诡异，在前端方面又总是“又不是不能用”（反而后端就要精益求精优化到不能再优化为止），所以这个登录页面在设计上也是以简洁低情商：又不是不能用为主。

先看实际效果：

注意：由于客户明确说明后台不需要响应式，所以这个页面没有做响应式处理。至于手机端访问这个页面的效果嘛……太诡异了还是不放出来了（顶锅逃

以及整个页面的源代码：

@/pages/login.vue

<template>
  <a-layout class="layout" style="height: 100vh">
    <a-form-model
      ref="loginForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="login-form"
    >
      <h1 style="margin-left: 33%; margin-bottom: 20px">
        登录 | Login
      </h1>
      <a-form-model-item ref="username" label="用户名" prop="username">
        <a-input v-model="form.username" type="text" autocomplete="off" @keyup.enter="login" />
      </a-form-model-item>
      <a-form-model-item ref="password" label="密码" prop="password">
        <a-input v-model="form.password" type="password" autocomplete="off" @keyup.enter="login" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" style="width: 45%" @click="login">
          登录
        </a-button>
        <a-button style="margin-left: 30px; width: 45%" @click="reset">
          重置
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-layout>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 表单校验通过，执行登录操作
        } else {
          // 表单校验失败
          return false
        }
      })
    },
    reset () {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>

<style scoped>
.layout {
  background: url("assets/login-background-1.jpg");
  background-size: 100% 100%;
}

.login-form {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  width: 600px;
  position: relative;
  margin: 0 auto;
  padding: 80px 0 80px 80px;
  top: 50%;
  transform: translateY(-50%);
}
</style>

如果搞不懂为什么要这么写，那么可以接着往下看。

CSS部分我就不解释了，我实在是太搞不定CSS了，CSS对我来说就是显示不错位就万事大吉了。美观？我这审美还是别考虑美观的问题了吧……

其实这里的CSS也就是登录框居中的处理和背景图片的设置等，没有太值得一提的东西。这张背景图是一张可商用的图片，大家可以替换为自己选择的背景。

antdv提供了FormModel这个支持v-model校验的组件，可以很方便地实现表单校验和校验结果反馈等功能，简直是懒人福利——比使用jQUery一个一个做或者直接把后端的反馈拉过来用都要方便多了。我们就用FormModel来做这个登录表单。

这里的代码很大程度上参考了antdv的官方示例，如果有看了我的解释还不明白的地方可以去看官方示例以及官方文档中的API说明。

@/pages/login.vue

    <a-form-model
      ref="loginForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="login-form"
    >
      <h1 style="margin-left: 33%; margin-bottom: 20px">
        登录 | Login
      </h1>
      <a-form-model-item ref="username" label="用户名" prop="username">
        <a-input v-model="form.username" type="text" autocomplete="off" @keyup.enter="login" />
      </a-form-model-item>
      <a-form-model-item ref="password" label="密码" prop="password">
        <a-input v-model="form.password" type="password" autocomplete="off" @keyup.enter="login" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" style="width: 45%" @click="login">
          登录
        </a-button>
        <a-button style="margin-left: 30px; width: 45%" @click="reset">
          重置
        </a-button>
      </a-form-model-item>
    </a-form-model>

同时，该组件的数据定义为：

  data () {
    return {
      // ...
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },

最外层定义表单的a-form-model将数据模型model属性绑定到form对象上、将校验规则绑定到rules对象上，每个属性的校验规则定义在rules对象中。同时，两个a-input使用v-model指令与form对象中的对应属性进行双向绑定，以便提交时进行获取。

对于rules对象，其中required属性为该字段是否必填，message属性为校验失败时的提示信息，trigger属性为校验触发器（即何时做校验），这里trigger设置为blur，表示在当前对象失去焦点时进行校验——这样比较符合一般的操作逻辑，也能给用户及时提供反馈信息。

当然在后面肯定还会碰到其他的数据校验内容（例如字符串长度的判断等），遇到其他的数据校验内容时参考antdv的文档各取所需就可以了。

虽然我在后端也为每个接口都做了数据校验（校验不通过的话就返回422状态码和提示信息（某条数据为必填、某条数据不符合xxx逻辑等）），但是如果把前端的数据校验做好的话实际上能大大减轻后端的请求压力，对用户也更加友好。如果说后端的数据校验是为了安全和业务逻辑而必须做的话，前端的数据校验就是选做的，如果做了的话用户体验会更好，因为这样可以及时地给用户友好的反馈。

按下回车（enter）提交表单几乎是一个必选的逻辑了。虽然antdv默认没有实现，但是我们可以自己实现。实现起来非常简单：只需要用Vue指令监听enter键的事件并调用对应的函数即可。

首先在methods属性中定义login和reset两个方法，分别对应“登录”和“重置”两个按钮的逻辑：

  methods: {
    login () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 表单校验通过：执行登录操作
        } else {
          // 表单校验失败
          return false
        }
      })
    },
    reset () {
      this.$refs.loginForm.resetFields()
    }
  }

注：这里又做了一次表单校验，校验不通过的话需要return false，校验通过才执行具体的登录逻辑。

然后给两个按钮分别绑定点击事件，实现按钮对应的功能：

      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" style="width: 45%" @click="login">
          登录
        </a-button>
        <a-button style="margin-left: 30px; width: 45%" @click="reset">
          重置
        </a-button>
      </a-form-model-item>

然后使用@keyup.enter（即enter键弹起时要进行的操作）对两个a-input都绑定login方法，实现按下enter提交表单的功能：

      <a-form-model-item ref="username" label="用户名" prop="username">
        <a-input v-model="form.username" type="text" autocomplete="off" @keyup.enter="login" />
      </a-form-model-item>
      <a-form-model-item ref="password" label="密码" prop="password">
        <a-input v-model="form.password" type="password" autocomplete="off" @keyup.enter="login" />
      </a-form-model-item>

由于在上一篇文章中已经用message组件实现了错误信息（登录失败的错误信息）的显示，所以这里不需要关心错误信息的提示，只需要关注成功的逻辑就可以了。

这样整个登录页面就完成了，如果还需要添加“记住我”之类的逻辑，那么直接添加对应的组件和校验逻辑就可以了。