Spring Boot + Vue 前后端分離項目 -- 登錄頁記住密碼和隱藏密碼

前言

這是前后端分離項目的第四篇文章。

1. Spring Boot + Vue 前后端分離項目 -- 登錄頁制作

2. Spring Boot + Vue 前后端分離項目 -- 后端登錄接口實現

3. Spring Boot + Vue 前后端分離項目 -- 前后端登錄接口對接

這篇文章主要實現的功能是，登錄頁記住賬號密碼，並實現隱藏和顯示密碼。

實現隱藏和顯示密碼

效果如下：

隱藏

顯示

主要思路，通過設置 密碼項 的 <el-input 輸入框的 type 屬性值，實現密碼的顯示和隱藏。

當 type = text 時，密碼會顯示出來，當 type = password 時，密碼會隱藏，並以 * 顯示。

密碼項 的 <el-input 輸入框 完整代碼如下：

<el-input :type="passwordType" v-model="loginData.password" placeholder="請輸入密碼..."
                          @keydown.enter.native="submitLogin">
                    <i slot="suffix" class="el-icon-view" @click="showPassword"></i>
</el-input>

:type表示這是一個變量，可以通過點擊事件改變它的值。

passwordType 默認值是 password ：

在 <el-input 輸入框，添加一個 <i> 標簽，申明圖標樣式和點擊事件。

<i slot="suffix" class="el-icon-view" @click="showPassword"></i>

實現點擊事件：

            showPassword: function () {
                if (this.passwordType == "text"){
                    this.passwordType = "password"
                } else {
                    this.passwordType = "text"
                }
            }

記住賬號密碼

主要功能：

1.記住我勾選，點登陸時，將賬號和密碼保存到 cookie，下次登陸自動顯示到表單內。

2.不勾選，點登陸時候則清空之前保存到 cookie 的值，下次登陸需要手動輸入。

大體思路就是通過存/取/刪cookie實現的；

每次進入登錄頁，先去讀取 cookie，如果瀏覽器的 cookie 中有賬號信息，就自動填充到登錄框中，存 cookie 是在登錄成功之后，判斷當前用戶是否勾選了記住密碼，如果勾選了，則把賬號信息存到 cookie 當中，效果圖如下：

保存在本地的 cookie 信息如下：

實現

先在密碼框下，添加一行代碼：

    <el-checkbox label="記住我" v-model="checked"></el-checkbox>

再在登錄點擊事件上，加個判斷，看是否勾選了“記住我”：

                //判斷復選框是否被勾選 勾選則調用配置cookie方法
                if (this.checked == true){
                    //傳入賬號名，密碼，和保存天數3個參數
                    this.setCookie(this.loginData.username, this.loginData.password, 7);
                }else {
                    //清空Cookie
                    this.clearCookie();
                }

添加幾個方法，分別實現設置cookie 、獲取cookie 和清除cookie 功能：

         //設置cookie
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //獲取時間
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天數
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //讀取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //這里顯示的格式需要切割一下自己可輸出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判斷查找相對應的值
                        if (arr2[0] == 'userName') {
                            this.loginData.username = arr2[1]; //保存到保存數據的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.loginData.password = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都為空，天數為負1天就好了
            }

通過鈎子函數mounted,調用 getCookie方法：

        mounted: function(){
          this.getCookie();
        },

最終，登錄頁的完整代碼如下：

<template>
    <div>
        <el-form ref="loginForm" :rules="rules" :model="loginData" class="loginContainer">
            <h3 style="display: flex; justify-content: center">系統登錄</h3>
            <el-form-item label="用戶名" prop="username">
                <el-input v-model="loginData.username" placeholder="請輸入用戶名..."></el-input>
            </el-form-item>
            <el-form-item label="密碼" prop="password">
                <el-input :type="passwordType" v-model="loginData.password" placeholder="請輸入密碼..."
                          @keydown.enter.native="submitLogin">
                    <i slot="suffix" class="el-icon-view" @click="showPassword"></i>
                </el-input>
            </el-form-item>
            <el-checkbox label="記住我" v-model="checked"></el-checkbox>
            <el-button type="primary" style="width: 100%; margin-top: 5px" @click="submitLogin">登錄</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                rules: {
                    username: [{required: true, message: "請輸入用戶名", trigger: blur}],
                    password: [{required: true, message: "請輸入密碼", trigger: blur}],
                },
                loginData: {
                    username: "",
                    password: "",
                },
                checked: true,
                passwordType: "password"
            }
        },
        mounted: function(){
          this.getCookie();
        },
        methods: {
            submitLogin: function () {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.postKeyValueRequest("doLogin", this.loginData).then(resp => {
                            if (resp) {
                                window.sessionStorage.setItem("user", JSON.stringify(resp.obj));
                                this.$router.replace("/home");
                            }
                        })
                    }
                    else {
                        this.$message.error('請輸入所有字段');
                        return false;
                    }
                });
                //判斷復選框是否被勾選 勾選則調用配置cookie方法
                if (this.checked == true){
                    //傳入賬號名，密碼，和保存天數3個參數
                    this.setCookie(this.loginData.username, this.loginData.password, 7);
                }else {
                    //清空Cookie
                    this.clearCookie();
                }
            },
            //設置cookie
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //獲取時間
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天數
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //讀取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //這里顯示的格式需要切割一下自己可輸出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判斷查找相對應的值
                        if (arr2[0] == 'userName') {
                            this.loginData.username = arr2[1]; //保存到保存數據的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.loginData.password = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都為空，天數為負1天就好了
            },
            showPassword: function () {
                if (this.passwordType == "text"){
                    this.passwordType = "password"
                } else {
                    this.passwordType = "text"
                }
            }
        }
    }
</script>

<style>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 100px auto;
        width: 350px;
        padding: 20px 20px 35px 20px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
</style>

參考文章

https://www.cnblogs.com/nxmin/p/8386031.html

每天學習一點點，每天進步一點點。