登录记住密码功能vue

AF01
已于 2022-12-19 15:08:20 修改
阅读量184
点赞数
分类专栏：函数文章标签： vue.js 前端 javascript
于 2022-12-19 15:07:17 首次发布
本文链接：https://blog.csdn.net/songJunFeng1/article/details/128372919
版权
函数专栏收录该内容
34 篇文章 1 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue登录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .count {
            width: 80%;
            margin: 0 auto;
            margin-top: 30px;
            padding: 0 26px;
            box-sizing: border-box;

        }

        .user,
        .pass {
            border-bottom: 1px solid #ccc;
            height: 80px;
            line-height: 100px;
            display: flex;



        }

        .el-input {
            border: none;

        }

        .el-input__inner {
            border: none !important;
        }

        .iconfont {
            color: #b0b6b2;
            font-size: 24px;
        }

        .remember {
            text-align: right;
            margin-top: 20px;
            color: #b0b6b2;
        }

        .login_btn {
            text-align: center;
            margin-top: 70px;
            width: 100%;

        }

        .btn {
            width: 100%;
            height: 50px;
            font-size: 18px;
            color: white;
            text-align: center;
            border-radius: 30px;
            background: linear-gradient(90deg,
                    rgba(136, 196, 101, 0.9),
                    rgba(29, 170, 99, 0.9));

        }

        .el-button .el-button--primary {
            border-color: transparent !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="count">
            <div class="user">
                <span class="iconfont iconzhanghao"></span>
                <el-input placeholder="请输入账号" v-model="ruleForm.username">
                </el-input>
            </div>
            <div class="pass">
                <span class="iconfont iconmima"></span>
                <el-input placeholder="请输入密码" v-model="ruleForm.password" type="password">
                </el-input>

            </div>
            <div class="remember">
                <el-checkbox v-model="remember">记住密码</el-checkbox>
            </div>

            <!-- 登录按钮 -->
            <div class="login_btn">
                <el-button class="btn" type="primary" @click="login" round>登录</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        new Vue({
            el: '#app',
            data() {
                return {
                    remember: false,
                    // 利用cookie 实现记住密码的功能
                    ruleForm: {
                        username: "",
                        password: "",
                    },
                };
            },
            methods: {
                // 登录
                login() {
                    var reg = /^[^\u4e00-\u9fa5]{0,}$/;
                    console.log(this.ruleForm);
                    if (
                        this.ruleForm.username.trim() == "" ||
                        this.ruleForm.password.trim() == ""
                    ) {
                        this.$message.warning("请填写用户名密码！");
                        return false;
                    }
                    // 用户名和密码不能相等
                    if (this.ruleForm.username.trim() == this.ruleForm.password.trim()) {
                        this.$message.warning("用户名和密码不能一致！");
                        return false;
                    }
                    if (!reg.test(this.ruleForm.password.trim())) {
                        this.$message.warning("密码中不能含有中文！");
                        return false;
                    }
                    //判断复选框是否被勾选 勾选则调用配置cookie方法
                    if (this.remember == true) {
                        console.log("remember == true");
                        // debugger;
                        //传入账号名，密码，和保存天数3个参数
                        this.setCookie(this.ruleForm.username, this.ruleForm.password, 3);
                    } else {
                        console.log("清空Cookie");
                        //清空Cookie
                        this.clearCookie();
                    }
                    this.$message.success("登录");
                },

                //设置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() {
                    if (document.cookie.length > 0) {
                        console.log("获取cookie document.cookie", document.cookie);
                        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
                        for (var i = 0; i < arr.length; i++) {
                            var arr2 = arr[i].split("="); //再次切割
                            console.log("arr2", arr2);
                            //判断查找相对应的值
                            if (arr2[0] == "userName") {
                                this.ruleForm.username = arr2[1]; //保存到保存数据的地方
                            } else if (arr2[0] == "userPwd") {
                                this.ruleForm.password = arr2[1];
                            }
                        }
                    }
                    if (this.ruleForm.username != "" && this.ruleForm.password != "") {
                        this.remember = true;
                    } else {
                        this.remember = false;
                    }
                },
                //清除cookie
                clearCookie: function () {
                    this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
                },
            },
            computed: {},
            created() { },
            mounted() {
                this.getCookie();
            },
        })
    </script>
</body>

</html>