小案例学 Vue — 用户登录页面

需求分析
用户名和密码字段必填，如果未填写指定字段点击登录按钮后，立马弹出提醒信息，当按下字段不为空时，提示信息立马消失，当两个字段都填写完成即可提交用户名和密码到后端进行验证身份信息，验证成功成功进入，否则无法进入，此外还有登录页面附带注册用户入口。

代码实现
简单的内联 CSS 样式 + HTML 结构

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #login {
        display: flex;
        height: 60vh;
        justify-content: center;
        align-items: center;
    }

    input {
        height: 22px;
        border: none;
        border-bottom: 2px black solid;
        outline: none;
    }

    button {
        font-size: 1.1em;
        text-align: center;
        border: none;
    }
</style>
复制代码

整体页面样式以及一些输入框和按钮的样式

<div id="login">
    <table>
        <tr>
            <th>用户名：</th>
            <td><input type="text" placeholder="请输入用户名" v-model="user.username"></td>
        </tr>
        <tr>
            <th>密码：</th>
            <td><input type="password" placeholder="请输入密码" v-model="user.password"></td>
        </tr>
        <tr>
            <th style="width: max-content;"></th>
            <td><span style="color: red; font-size: smaller;">{{msg}}</span></td>
        </tr>
        <tr>
            <th style="width: max-content;"></th>
            <td><button @click="checkForm">登录</button>&nbsp;&nbsp;&nbsp;&nbsp;<button id="registerBut" onclick="toRegisterPage">注册</button></td>
        </tr>
    </table>
</div>
复制代码

Vue 部分

var vm = new Vue({
    el: '#login',
    data: {
        user:{
            username: null,
            password: null
        },
        msg: null
    },
    methods: {
        checkForm: function () {
            // 用户输入的用户名
            var inUserName = this.user.username;
            // 用户输入的密码
            var inPassword = this.user.password;

            if (inUserName === '' || inPassword === '' || inUserName == null || inPassword == null) {
                this.msg = '用户名或密码为空！';
                return;
            }

            // 
            $.ajax({
                type: 'POST',
                url: 'user/checkLogin',
                data: {
                    username: inUserName,
                    password: inPassword
                },
                success: function (data) {
                    handleFlag(data);
                },
                error: function (error) {
                    alert(error);
                }
            });
        },
        toRegisterPage: function() {
            window.location.href = 'user/register';
        }
    },
    watch: {
        user: {
            handler: function () {
                if(null !== this.msg) {
                    this.msg = null;
                }
            },
            deep: true
        }
    }
});
复制代码

Vue 代码中定义了一个用户登录对象以及给用户的提醒信息，定义了两个方法，一个方法是做表单的非空判断的，一旦验证不通过立马展示提示消息，将函数返回，否则做完表单验证后，使用 Ajax 将数据异步提交前台数据到后端去验证该用户的用户名和密码是否匹配；另一个方法是点击按钮进行跳转到注册页面用的。

注意： 由于 Ajax 块放在 Vue 对象的 methods 属性中，又因为异步提交数据，无法修改 Vue 内部属性，这里有两个办法，第一方法就是通过一个外部方法来处理请求后处理结果；还有一个方法就是将 Ajax 的异步加载改为同步加载即 sync:false。

function handleFlag(successFlag) {
    if (successFlag) {
        vm.msg = '登录成功！';
        setTimeout(function () {
            // 登录成功后跳转到首页
            window.location.href = 'index.html';
        },750);
    } else {
        // 登录失败
        vm.msg = '用户名或密码错误，登录失败！';
    }
}
复制代码

那该如何实现深度监听绑定的用户登录对象呢？
开启 Vue.js 中 watch( deep 深度监听 )

watch: {
    user: {
        handler: function () {
            if(null !== this.msg) {
                this.msg = null;
            }
        },
        deep: true
    }
}
复制代码

这里 deep 的意思是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改 obj 里面任何一个属性都会触发这个监听器里的 handler 函数。

handler 函数处理逻辑很简单，就是当有提醒信息时，一旦用户登录对象中的属性别修改触发了，就将 msg 置为 null ，即完成了用户看到提示信息后一修改就屏蔽红字了，是不是很简单呢？！

最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 ！