【备战春招】第15天 Vue3.0+ElementPlus实现系统登录

课程名称：SpringBoot2.X + Vue + UniAPP，全栈开发医疗小程序

课程章节：第三章 使用Vue3.0+SpringBoot实现医护人员管理

课程讲师： 神思者

课程内容：

测试了后端Web方法，可以正常登陆系统，也拿到了Token令牌。我们把前端的JS代码写完，然后用浏览器测试一下系统登录和登出。

一、熟悉登陆页面

登陆页面的内容很简单，就是文本框和密码框，再加上Button按钮。login.vue页面的视图层标签：

<div v-if="!qrCodeVisible">

    <div class="row">

        <el-input

            v-model="username"

            placeholder="用户名"

            prefix-icon="user"

            size="large"

            clearable

        ></el-input>

    </div>

    <div class="row">

        <el-input

            type="password"

            v-model="password"

            placeholder="密码"

            prefix-icon="Lock"

            size="large"

            clearable

        ></el-input>

    </div>

    <div class="row">

        <el-button type="primary" class="btn" size="large" @click="login">

            登陆系统

        </el-button>

    </div>

    <div class="row"><a class="link" @click="changeMode">二维码登陆</a></div>

</div>

抛开二维码登陆，模型层里面我们能实际用到的变量只有username和password。

data: function() {

    return {

        username: null,

        password: null,

        qrCodeVisible: false,

        qrCode: '',

        uuid: null,

        qrCodeTimer: null,

        loginTimer: null

    };

},

二、实现登陆功能

登陆按钮点击事件回调函数是login()，创建该函数。

login: function() {

    let that = this;

    if (!isUsername(that.username)) {

        ElMessage({

        message: '用户名格式不正确',

        type: 'error',

            duration: 1200

        });

    } else if (!isPassword(that.password)) {

        ElMessage({

        message: '密码格式不正确',

        type: 'error',

            duration: 1200

        });

    } else {

        let data = { username: that.username, password: that.password };

        //发送登陆请求

        that.$http('/mis_user/login', 'POST', data, true, function(resp) {

            if (resp.result) {

                //在浏览器的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 {

                ElMessage({

                message: '登陆失败',

                type: 'error',

                    duration: 1200

                });

            }

        });

    }

},

三、实现登出系统

在main.vue页面中，有退出系统的菜单选项。

退出系统的菜单标签如下：

<template #dropdown>

    <el-dropdown-menu>

        <el-dropdown-item @click="updatePasswordHandle()">修改密码</el-dropdown-item>

        <el-dropdown-item @click="logout">退出</el-dropdown-item>

    </el-dropdown-menu>

</template>

退出系统按钮点击事件回调函数是logout()，实现该函数。

logout: function() {

    let that = this;

    that.$http('/mis_user/logout', 'GET', null, true, function(resp) {

        localStorage.removeItem('permissions');

        localStorage.removeItem('token');

        that.$router.push({ name: 'Login' });

    });

},

课程收获：通过视频加文档结合的方式，学习了Vue3.0+ElementPlus实现系统登录登出，期待后续学习！