使用Vue+el-form+form-validate实现管理端登录接口联调前准备工作实战，目录前言一、上节回顾

来源：开发者投稿于 2023-04-02 被查看 32942 次评论：105

使用Vue+el-form+form-validate实现管理端登录接口联调前准备工作实战，目录前言一、上节回顾

前言

这是《Vue + SpringBoot前后端分离项目实战》专栏的第7篇博客，感谢你能从成千上万篇博客中打开这一篇，和我一起学习前端开发实战知识，让我们一起开始吧。

前言

一、上节回顾和本节介绍

1. 上节回顾

2. Vue + SpringBoot前后端分离项目实战的目录更新介绍

3. 本节介绍

二、两种不同的登录界面

1. 第1种 - form居中

2. 第1种 - form居中实现过程

3. 第2种 - 左图右表单

4. 第2种 - 左图右表单实现过程

三、使用form-validate进行登录前验证

1. form表单添加必须属性

2. 在data数据依赖处添加formRules验证规则

3. 登录方法的验证实现

4. 登录验证过程流程图

四、el-input组件的自研实现

1. tg-input自研组件需要实现的最基础功能

2. 虚拟DOM部分的使用

3. tg-input组件的引入和定义

4. tg-input实现代码

5. 更加丰富的tg-input应该具备的功能

五、本项目进展图例介绍

1. 内容架构

2. 代码目录

六、读完本小节需要思考的几个问题

一、上节回顾和本节介绍

1. 上节回顾

上一节我们主要针对 用户随意输入url，而这个url系统中又没有提前预设情况下出现问题 的解决，我们采用了全局路由守卫的方式，进行异常非法路由进行了拦截；而后又实现了404错误页，并且自研实现了tg-button组件。

2. Vue + SpringBoot前后端分离项目实战的目录更新介绍

我和天哥也在不断的更新博客，为项目和专栏添砖加瓦，而天哥的新博客又登上了CSDN-Java领域榜第1名，为他开心，而且博客质量也的确很高，很值得一看。我把专栏目录的更新给大家做个汇报，同时也希望已订阅的小伙伴有问题及时告诉我们

Vue + SpringBoot前后端分离项目实战 - 前端部分

1. 手把手带你做一套毕业设计-征程开启

2. 我应该把毕业设计做到什么程度才能过关？

3. 做毕业设计，前端部分你需要掌握的6个核心技能

4. 基于Vue+Vue-cli+webpack搭建渐进式高可维护性前端实战项目

5. 基于Vue+Less+axios封装+ElementUI搭建项目底层支撑实战

6. 使用Vue+vue-router+路由守卫实现路由鉴权功能实战

SpringBoot+Vue前后端分离项目实战 - 服务端部分

1. 基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇

2. 天狗实战SpringBoot+Vue（一）环境安装

3. 天狗实战SpringBoot+Vue（二）项目结构搭建（上）

4. 天狗实战（二）SpringBoot API开发详解 --SpringMVC注解+封装结果+支持跨域+打包（下）

5. Maven依赖加载不进来? 依赖加载失败? 你值得掌握如何排查的方法

6. 实战Git常用操作(IDEA界面+命令)：初始化(init)、忽略文件(.gitignore)、提交(commit)、查看提交记录(log)、创建+切换分支(branch)

7. SpringBoot项目集成【用户身份认证】实战【技术选型篇】基于Session、Token、JWT怎么选？

3. 本节介绍

本小节将会是从开发登录页面，我们使用ElementUI的 el-form表单，同时使用form-validate进行登录前的表单验证。而且针对目前市面上的登录界面，我们实现了2种不同的登录界面，小伙伴们可以任选一种做为自己的实战项目登录界面。紧接着我们又自研实现了一个简单而又实用的tg-input组件。

二、两种不同的登录界面

为什么要实现两种登录界面呢，这其实也是结合当前市面上大家所使用的项目，以及学校毕业设计项目结合的考虑，担心有些初学的小伙伴还不太熟。

本专栏最开始的初衷也是希望结合更多的项目需求做一个整合，希望初学者或者还未实战过的毕业生，跟着本专栏学完以后，能有一个更全面的对项目开发的认知，对于后续的面试，加入工作，都有一个很好的基础沉淀。

1. 第1种 - form居中

有一种比较主流的界面呢，就是有个很绚烂的背景，然后登录form表单在全页面居中显示；而在form表单中，也有一种比较主流的是，用户名他不写用户名，用一个小脑袋的icon图片来表示，密码呢，也不是写密码，用一个小锁的icon图片来表示，就像这样：

2. 第1种 - form居中实现过程

原 /src/router/routesData.js 文件添加代码，代码如下：

{
    path: "/loginBack",
    component: () => import("@/views/Login_back"),
    hidden: true,
},

添加 /src/views/Login_back.vue 文件，代码如下：

<template>
  <div class="login-box">
    <div class="login-form-box">
      <p class="title">天狗图书借阅管理系统</p>
      <el-form :model="form" label-width="80px">
        <el-form-item prop="name" class="is-required">
          <template slot="label">
            <i class="el-icon-user"></i>
          </template>
          <el-input placeholder="请输入用户名" v-model="form.name" />
        </el-form-item>
        <el-form-item prop="password" class="is-required">
          <template slot="label">
            <i class="el-icon-lock"></i>
          </template>
          <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <el-button type="primary">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data () {
    return {
      form: {
        name: '',
        password: '',
      }
    }
  },
  created() {},
  methods: {
    
  }
}
</script>

<style scoped lang="less">
  .login-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(../assets/image/login-bg1.jpeg) no-repeat;
    background-size: 100% 100%;
  }
  .login-form-box {
    width: 480px;
    height: 280px;
    background-color: hsla(0,0%,100%,.8);
    border-radius: 6px;
    .title {
      font-size: 20px;
      font-weight: 600;
      line-height: 78px;
      text-align: center;
    }
    .btn-box {
      text-align: center;
    }
  }
  .el-input {
    width: 340px;
  }
  [class^=el-icon-] {
    font-size: 20px;
  }
  
</style>

3. 第2种 - 左图右表单

市面上还有一种比较主流的呢，是页面背景可能是图，可能是背景色，而居中的主体区域呢，是左面一张图片，象征着这个系统的含义，例如我们这个项目准备做校园图书借阅系统，那么就放一摞书最合适不过了，而右侧呢，则是正常的登录form表单，就像这样：

4. 第2种 - 左图右表单实现过程

原 /src/router/routesData.js 文件添加代码，代码如下：

{
    path: "/login",
    component: () => import("@/views/Login"),
    hidden: true,
},

添加 /src/views/Login.vue 文件，代码如下：

<template>
  <div class="login-box">
    <div class="login-form-box">
      <div class="left-img">
        <img :src="loginImg" />
      </div>
      <div class="right-form">
        <p class="title">天狗图书借阅管理系统</p>
        <el-form :model="form" label-width="80px">
          <el-form-item prop="name" label="用户名">
            <el-input placeholder="请输入用户名" v-model="form.name" />
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button type="primary" @click="go2Login">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import loginImg from '@/assets/image/login-bg2.png';
import { userLogin } from '@/api/login.js';

export default {
  name: 'Login1',
  data () {
    return {
      loginImg,
      form: {
        name: '',
        password: '',
      },
      },
    }
  },
  created() {},
  methods: {
    go2Login() {
      
    }
  }
}
</script>

<style scoped lang="less">
  .login-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: #3e99fb;
  }
  .login-form-box {
    display: flex;
    align-items: center;
    width: 900px;
    height: 400px;
    background: #FFF;
    border-radius: 10px;
    .left-img {
      width: 410px;
      height: 328px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right-form {
      width: 400px;
      .title {
        font-size: 20px;
        font-weight: 600;
        line-height: 78px;
        text-align: center;
      }
      .btn-box {
        margin: 40px 0 0 80px;
      }
    }
  }
</style>

注意：一直到这一步，登录界面算是完成了，但是点击按钮的验证功能，验证通过后的axios请求还未添加。

三、使用form-validate进行登录前验证

form-validate功能 是el-form的功能，所以我们无需单独安装插件。而且前端把该验证的地方做到位了，有很多好处：

提升用户体验，使用户及时知道哪里做的不对
为服务端节省不必要的麻烦，当然服务端正常来说，也应该做一些验证
提升系统性能，可以使用户输入合法后再进行前后端交互

1. form表单添加必须属性

/src/views/Login.vue 文件做如下修改：

<el-form :model="form" ref="loginForm" label-width="80px" :rules="formRules">
   <el-form-item prop="name" class="is-required" label="用户名">
       <el-input placeholder="请输入用户名" v-model="form.name" />
   </el-form-item>
   <el-form-item prop="password" class="is-required"  label="密码">
       <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
   </el-form-item>
</el-form>

2. 在data数据依赖处添加formRules验证规则

/src/views/Login.vue 文件做如下修改：

data () {
    return {
      loginImg,
      form: {
        name: '',
        password: '',
      },
      formRules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ]
      },
    }
  },

3. 登录方法的验证实现

从上面的代码中我们看到，登录按钮调用了go2Login的方法，所以在methods代码块呢，我们需要添加go2Login的实现方法，代码如下：

methods: {
    go2Login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
            console.log('验证已通过');
        }
      });
    },

因为是管理系统，一般处于内网环境，所以只需要判断用户名和密码输入且正确即可，而是否正确前端无法知道，所以我们只需要判断是否输入即可。如果未输入，出现异常，验证不通过，截图效果如下：

4. 登录验证过程流程图

其实这块并不复杂，我们每天几乎都在登录各种各样的系统和应用，而我们做了这么多事情，做了这么多验证，过程就像这样：

四、el-input组件的自研实现

我们还是按照惯例，项目中遇见第三方组件，我们就尽量去 自己实现一下。

1. tg-input自研组件需要实现的最基础功能

我们所使用的组件应该足够强大，功能足够丰富，但是，他却不应该具有主观能动性，而是，我们让他做什么，他就去做什么就可以了，我们自研实现的tg-input所具备的功能如下：

默认样式
支持传入placeholder
支持value值的绑定和回传
支持input的类型多样性
支持非法的提示功能
支持验证规则rules的传入

2. 虚拟DOM部分的使用

修改el-input代码处，代码如下：

<el-form :model="form" ref="loginForm" label-width="80px" :rules="formRules">
          <el-form-item prop="name" class="is-required" label="用户名">
            <el-input placeholder="请输入用户名" v-model="form.name" />
          </el-form-item>
          <el-form-item prop="password" class="is-required"  label="密码">
            <!-- <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input> -->
            <tg-input 
              placeholder="请输入密码"
              @blur="passwordHandleBlur"
              :value="form.password"
              type="password"
              errorTip="请输入密码"
              :rule="formRules.password"/>
          </el-form-item>
</el-form>

3. tg-input组件的引入和定义

继续修改本页面代码，代码如下：

import loginImg from '@/assets/image/login-bg2.png';
import { userLogin } from '@/api/login.js';
import TgInput from '@/components/tg-input.vue';

export default {
  name: 'Login1',
  components: { TgInput },
  data () {

4. tg-input实现代码

添加 /src/components/tg-input.vue 文件，代码如下：

<template>
  <div class="tg-input-box">
    <div>
      <input 
         :placeholder="placeholder"
         :type="type"
         @blur="handleBlur"
         v-model="inputVal" />
    </div>
    <div v-if="errShow">{{ rule && rule.message }}</div>
  </div>
</template>

<script>

export default {
  name: 'TgInput',
  props: {
    placeholder: { type: String, default: '请输入',}, 
    value: { type: String, default: '',}, 
    type: { type: String, default: 'text',}, 
    rule: { type: Object, default: {},},
  },
  data () {
    return {
      inputVal: '',
      errShow: false,
    }
  },
  created() {},
  methods: {
    handleBlur() {
      if (rule.required && !this.inputVal) {
        this.errShow = true;
      } else {
        this.errShow = false;
      }
      this.$$emit('blur', this.inputVal);
    }
  }
}
</script>

<style scoped lang="less">
  .tg-input-box {
    width: 100%;
    &>div {
      display: flex;
      input {
        width: 100%;
        padding: 0 15px;
        background: #FFF;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        height: 38px;
      }
      input::input-placeholder {
        color: #C0C4CC;
      }
      input::-webkit-input-placeholder {	
        color: #C0C4CC;
      }
    }
  }
</style>

5. 更加丰富的tg-input应该具备的功能

注意：目前组件的功能只是单纯的够用，但如果你想开发出一个更加丰富的tg-input组件，需要至少具备一下功能点：

五、本项目进展图例介绍

项目在一点一滴的进行着，所以按照惯例，把图例摆出来，同时也让订阅过小伙伴可以看到我们的进步，终有一天，可能这两张图越来越密集，那个时候，应该就是我们学的更多的时候啦。

1. 内容架构

2. 代码目录

六、读完本小节需要思考的几个问题

按照本专栏的管理，我们希望小伙伴们可以贯穿知识点，学到项目场景，掌握某个场景下可能会遇到的问题点，当然，最重要的是，学完本小节，我们需要思考的几个问题，这些问题如果想通了，可能就是今后面试，工作的制胜法宝啦。

你认为前端做表单验证的意义是什么？
如果让你实现一个input组件，你会考虑哪些基本功能？
你做过的项目的登录界面，一般都长什么样子？
你知道的水平垂直居中的方案都有哪些？

好啦，这就是本小节的内容，下一节，我们开始组装数据，密码加密，前端信息vuex存储等知识实战的讲解，为了和大家更多的沟通，我准备了投票环节，请你投个票吧。

使用Vue+el-form+form-validate实现管理端登录接口联调前准备工作实战，目录前言一、上节回顾