【学习打卡】第5天 用户模块-前端页面

课程名称： SpringBoot+Vue3 项目实战，打造企业级在线办公系统
课程章节： 第三章 基于RBAC，实现用户模块（大鹏一日同风起，扶摇直上九万里）
主讲老师： 神思者

课程内容

在之前那节课程当中，已经用Swagger测试了后端项目的用户登陆Web方法，输入正确的用户名和密码确实能成功登陆系统，并且向前端返回了布尔值和权限列表。

这节课计划编写前端代码，实现用户登录的功能。

前端登录的表单代码：

<div v-if="!qrCodeVisible">
    <!--帐户登陆的内容-->
    <div class="row">
        <el-input v-model="username" placeholder="用户名" prefix-icon="el-icon-user" clearable="clearable" />
    </div>
    <div class="row">
        <el-input type="password" v-model="password" placeholder="密码" prefix-icon="el-icon-lock"
            clearable="clearable" />
    </div>
    <div class="row">
        <el-button type="primary" class="btn">登陆系统</el-button>
    </div>
    <div class="row"><a class="link" @click="changeMode">二维码登陆</a></div>
</div>
<div v-if="qrCodeVisible">
    <!--二维码登陆的内容-->
</div>

模型层里面定义了相关的变量，包括文本框输入的内容都会被自动保存在模型层的变量里面。

export default {
    data: function() {
        return {
            username: null,
            password: null,
            qrCodeVisible: false,
            qrCode: '',
            uuid: null,
            qrCodeTimer: null,
            loginTimer: null
        };
    },
    ……
}

1. 引入内容验证库
   在src\utils\validate.js文件中定义了一些验证内容的公共函数，比如验证用户名、密码、邮箱、电话号码。例如下面是我们要调用的验证用户名和密码的函数。

/**
 * 验证用户名
 * @param {Object} s
 */
export function isUsername(s) {
    return /^[a-zA-Z0-9]{5,50}$/.test(s)
}


/**
 * 验证密码
 * @param {Object} s
 */
export function isPassword(s) {
    return /^[a-zA-Z0-9]{6,20}$/.test(s)
}

我们在提交Ajax请求之前，必须先要做前端验证。

<script>
    import { isUsername, isPassword } from '../utils/validate.js';
    ……
</script>

2. 实现登陆功能
   需要先找到登陆按钮，然后给按钮设置点击事件。

<el-button type="primary" class="btn" @click="login">登陆系统</el-button>

接下来声明点击事件对应的login()回调函数。

login: function() {
    let that = this;
    if (!isUsername(that.username)) {
        that.$message({
            message: '用户名格式不正确',
            type: 'error',
            duration: 1200
        });
    } else if (!isPassword(that.password)) {
        that.$message({
            message: '密码格式不正确',
            type: 'error',
            duration: 1200
        });
    } else {
        let data = { username: that.username, password: that.password };
        //发送登陆请求
        that.$http('user/login', 'POST', data, true, function(resp) {
            if (resp.result) {
                //在浏览器的storage中存储用户权限列表，这样其他页面也可使用storage中的数据，实现共享
                let permissions = resp.permissions;
                //取出Token令牌，保存到storage中
                let token = resp.token;
                localStorage.setItem('permissions', permissions);
                localStorage.setItem('token', token);
                //让路由跳转页面，这里的Home是home.vue页面的名字
                router.push({ name: 'Home' });
            } else {
                that.$message({
                    message: '登陆失败',
                    type: 'error',
                    duration: 1200
                });
            }
        });
    }
},
……

课程收货

• 了解了Vue的生命周期。
• 了解Vue的基本的使用方式。
• 完成了管理后台的整体登录操作。

课程截图