Vue小模块之用户登录功能（二）使用Element美化网站和实现验证

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

引入Element

首先用npm安装Element

$ npm i element-ui -S

在目录src/element/下创建文件index.js

import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.use(ElementUI)

然后在main.js中添加以下代码进行引入

import  "./element"

至此就完成了element的引入，后面就可以直接在代码中使用element组件，关于element的使用，可以参考我从官网上转载的API文挡

整体布局

对App.vue进行修改

<template>
  <el-container>
    <el-header class="header" height="100px">
      <h3>我的网站</h3>
      <p>Vue小模块之用户登录功能</p>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>
  .header{
    background-color: #409EFF;
    color: white;
  }
</style>

修改后效果如下

美化表单

对登录页面Login.vue进行修改

<template>
    <el-row type="flex" justify="center">
        <el-form :model="user" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.pass" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                    <el-button type="primary" icon="el-icon-upload" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script>
    export default {
        methods: {
            login () {
                this.$router.replace("/")
            }
        },
        data () {
            return {
                user: {}
            }
        }
    }
</script>

美化后效果如下

表单验证

首先配置验证规则

data () {
            return {
                user: {},
                rules: {
                    name: [
                        {required: true, message: "用户名不能为空", trigger: "blur"}
                    ],
                    pass: [
                        {required: true, message: "密码不能为空", trigger: "blur"}
                    ]
                }
            }
        }

接下来在el-form标签添加rules属性绑定为之前配置的验证规则，添加status-icon属性可显示状态图标

<el-form :model="user" :rules="rules" status-icon label-width="80px">
   ...
</el-form>

除此之外，必须在要实现验证功能的el-form-item标签中添加prop属性

<el-form-item label="用户名" prop="name">
    ...
</el-form-item>
 <el-form-item label="密码" prop="pass">
     ...
</el-form-item>

效果如图所示

提交表单

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

<el-form ref="loginForm" :model="user" :rules="rules" status-icon label-width="80px">
   ...
</el-form>

接下来修改login方法

login () {
    this.$refs.loginForm.validate((valid) => {
        if (valid) {
            this.$router.replace("/")
        }
        else {
             return false
        }
    })
}

这样就只会在符合表单验证规则的情况下切换页面，还可以再对表单数据进行验证，只有用户名和密码正确的情况下才进行切换（目前暂时指定用户名和密码，之后连接数据库后再进行远程验证），且验证成功或失败都有提示信息。

login () {
    this.$refs.loginForm.validate((valid) => {
        if (valid) {
            if (this.user.name === "admin" && this.user.pass === "123") {
                this.$notify({
                    type: "success",
                    message: "欢迎你," + this.user.name + "!",
                    duration: 3000 
                })
                this.$router.replace("/")
            } else {
                this.$message({
                    type: "error",
                    message: "用户名或密码错误",
                    showClose: true
                })
            }
        }
        else {
            return false
        }
    })
}

登录成功：

登录失败：

小结

目前已实现表单的验证功能，下个阶段将引入Vuex实现页面间的数据传递，Login.vue完整代码如下

<template>
    <el-row type="flex" justify="center">
        <el-form ref="loginForm" :model="user" :rules="rules" status-icon label-width="80px">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input v-model="user.pass" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-upload" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script>
    export default {
        methods: {
            login () {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        if (this.user.name === "admin" && this.user.pass === "123") {
                            this.$notify({
                                type: "success",
                                message: "欢迎你," + this.user.name + "!",
                                duration: 3000 
                            })
                            this.$router.replace("/")
                        } else {
                            this.$message({
                                type: "error",
                                message: "用户名或密码错误",
                                showClose: true
                            })
                        }
                    }
                    else {
                        return false
                    }
                })
            }
        },
        data () {
            return {
                user: {},
                rules: {
                    name: [
                        {required: true, message: "用户名不能为空", trigger: "blur"}
                    ],
                    pass: [
                        {required: true, message: "密码不能为空", trigger: "blur"}
                    ]
                }
            }
        }
    }
</script>