前端废物的自救之路(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="