退出功能到登录界面_（三）登录页面界面及功能模拟实现

一般项目先做注册功能，因为本项目的注册用户功能，我是放在管理员功能之中，不属于对外开放注册。

所以我就先做用户和管理员登陆功能

项目目录结构

user属性：id、姓名、密码（大于6位）、级别（普通员工、管理员）、状态（0在职，1失效）

登录页面：修改deptLogin.vue

<template>
  <div>   
    <el-row>        
        <el-form :model="user" label-width="80px" :rules="rules" status-icon class="loginform">
            <h3 class="loginhead" >欢 迎 登 录</h3>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密  码" prop="password">
                <el-input v-model="user.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-s-custom" @click="login('loginForm')" class="butlogin">登录</el-button>
            </el-form-item>
        </el-form>
    </el-row>
  </div>
</template>

黄色框标出了重点需要注意的地方，样式自己配置

:model="user"，用于绑定data中的user属性，并在下面用户名及密码的输入框中绑定具体model的相关属性

//template表单form-item
<el-input v-model="user.password"  type="password"></el-input>

//data中
user:{
   username:'',
   password:''
}

：rules=“rules”，也是指向data中的rules，rules中配置了表单需要验证的规则，

使用rules必须在el-form-item指定prop，表单域中 model的具体字段，需要验证的文本框label前有个红色*，

配套使用status-icon会在文本框尾部出现图标提示

//template表单
<el-form :model="user" label-width="80px" :rules="rules" status-icon class="loginform">

//template表单中
<el-form-item label="用户名" prop="username">

//data中
rules: {
     username: [
         {required: true, message: '账号不可为空', trigger: 'blur'}
     ],
     password: [
         {required: true, message: '密码不可为空', trigger: 'blur'}
     ]
}

看一下效果：基本界面完成

接着看@click="login('loginForm')"

首先为el-form元素增加ref引用，以便login方法进行调用

methods中增加login方法，首先通过validate校验的表单项 prop 值是否验证通过，模拟数据验证成功，测试下方法调用是否成功

下篇我再修改如何和后台模拟交互数据来进行测试

//增加ref引用
<el-form ref="loginForm" :model="user" label-width="80px" :rules="rules" status-icon class="loginform">

//methods中
login(formName){
    this.$refs.loginForm.validate((valid) => {
        if (valid) {
             alert('登录成功！')
        } else {
             alert('登录失败！')
             return false;
        }
    })            
 }

查看结果：说明validate触发了表单验证

为表单加个重置按钮，添加reset方法，使用resetFields重置为初始值并移除校验结果

//添加重置按钮
<el-button type="primary" icon="el-icon-delete-solid" @click="reset" >重置</el-button>

//methods方法中
reset(){
    this.$refs.loginForm.resetFields()
}

效果：

下篇我再继续完成如何模拟后台交互数据，来进行登陆