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

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属性可显示状态图标

"user" :rules="rules" status-icon label-width="80px">
   ...

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

"用户名" prop="name">
    ...

 "密码" prop="pass">
     ...

效果如图所示

提交表单

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

"loginForm" :model="user" :rules="rules" status-icon label-width="80px">
   ...

接下来修改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'}
                    ]
                }
            }
        }
    }