微人事项目学习之登陆页面制作（二）

学习SpringBoot+Vue前后端分离项目，原项目GitHub地址，项目作者江雨一点雨博客。

制作登录页面

接上篇文章，正式开始制作登陆页面，本文中包括以后的文章中所有的关于element-ui的内容均可以在其官网中找到。
登录页面就搞简单点，需要输入账号，密码， 一个登录按钮，有这三样就行了。
我们用element-ui的表单来完成登录功能，在官网找到表单的组件
点击显示代码
可以看到具体的代码

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>

可以直接复制粘贴你需要的代码，也可以手写
下方还有表单属性的说明
这里我们需要属性中的rules来定义我们自己的表单验证规则

代码分析

先放下完整的template代码

<template>
    <div>
        <el-form :rules="rules" ref="loginForm" :model="loginForm">
                <h3>系统登陆</h3>
            <el-form-item prop="username">
                    <el-input type="text" v-model="loginForm.username" auto-complete="off"
                              placeholder="请输入用户名..."></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="text" v-model="loginForm.password" auto-complete="off"
                          placeholder="请输入密码..." @keydown.enter.native="submitLogin"></el-input>
            </el-form-item>
            <el-button type="primary" style="width: 50%" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

先来分析下这段代码吧，对比下上面的例子变动不大，先来看下这行代码

<el-form :rules="rules" ref="loginForm" :model="loginForm">

rules就是我们自己定义的验证规则，注意，前面有个“：”，这种其实是v-model的缩写，当你需要引用变量时，在属性名前加一个冒号，否则的话这个变量名就会被当作字符串处理。后面的:model也是如此，loginForm是一个变量。
至于ref，则是给这个el-from取了个名字，方便进行查找，比如马上要说的登录点击事件。
placeholder是在一个输入框中如果是空白的，需要展示的内容，如下图所示

autocomplete是自动补全功能，不需要就关掉。

@keydown.enter.native="submitLogin"

这个代码的意思是按回车触发submitLogin这个点击事件，说白了就是按回车键登录，注意这个代码写在了第二个input中，即输入密码框，所以你的光标在密码框时，按回车才能触发点击事件。

@click="submitLogin" //@click 点击事件  submitLogin的是自己定义的点击事件名称

接下来看一看data中的代码

data(){
            return{
                loginForm:{
                    username:"admin",
                    password:"123"
                },
                rules:{
                    username:{ required: true, message: '请输入用户名', trigger: 'blur' },
                    password:{ required: true, message: '请输入密码', trigger: 'blur' }
                }
            }
        },

loginForm中是我们登录时用到的用户名和密码 对应上面讲到的:model中的loginForm。
rules里面就是我们自己定义的验证规则了，官网上也有，直接复制粘贴过来。
trigger: “blur” 表示“当失去焦点时（光标不显示的时候），触发message”
message是当上面的trigger触发时显示的信息
required 表示必填

这里可以看到，我在密码框中没有输入并且光标没有在上面，message显示出来了。

点击事件

methods:{
            submitLogin(){
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
			     	alert('submit!');                                      
                    } else {
                        this.$message.error('error submit');
                        return false;
                    }
                });
            }
        }

上面这段代码官网也有模板直接复制粘贴过来，稍微修改一下就好

this.$refs.loginForm.validate //从refs中获取名为loginForm的ref  上文中定义过了

输入预设的用户名和密码 点击登录 提示submit 登录成功
否则提示error submit ，当然有很多种情况，没输入或者输错了，具体情况后面再进行分析。