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

前端废物的自救之路（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 },