vue 登录页记住密码

HTML
<el-form-item>
    <div style="text-align: right">
    	<el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
    </div>
</el-form-item>
<el-form-item>
	<el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
JS
data(){
	retun{
		rememberPwd:false,
	}
},
//页面每次显示获取cookie
mounted() {
	this.getCookie();
},
//登录
onSubmit() {
     // 为表单绑定验证功能
     let that = this;
     //验证账号密码,编辑登录逻辑 成功则执行是否选择记住密码
     if(that.rememberPwd){
           that.setCookie(that.form.telphone, this.form.pwd, 7); // 保存期限为7天
     }            
},
//存储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) {
    	var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
	        var arr2 = arr[i].split('='); //再次切割
	        //判断查找相对应的值
            if (arr2[0] == 'userName') {
            	this.form.telphone = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == 'userPwd') {
            	this.form.pwd = arr2[1];
            }
        }
     }
},
//清除cookie
clearCookie(){
	this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
},
登录页完整代码
<template>
    <div class="bgColor" :style="'height:'+fullHeight+'px;'">
        <div class="login-left">
            <div class="l-l-t">
                <img class="login-logo-img" src="../assets/login-logo.png" alt="">
                <img src="../assets/login-title.png" alt="">
                <div class="border-1"></div>
                <div class="login-type">普查员登录</div>
            </div>
            <div class="l-l-b">
                <div class="login-name">南康统计</div>
                <div class="login-name-english">NANKANG STATISTICS</div>
            </div>
        </div>
        <div class="login-right">
            <div class="login-type-wrap">
                <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" class="login-box">
                    <h3 class="login-title"><span>登录中心</span></h3>
                    <el-form-item prop="telphone">
                        <el-input type="text" @keyup.enter.native="onSubmit" placeholder="请输入账号" v-model="form.telphone"/>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input type="password" @keyup.enter.native="onSubmit" placeholder="请输入密码" v-model="form.pwd"/>
                    </el-form-item>
                    <el-form-item>
                        <div style="text-align: right">
                            <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>
<script>
    import {login} from '@/api/index'

    export default {
        name: "Login",
        data() {
            return {
                fullHeight: document.documentElement.clientHeight,
                form: {
                    telphone: '',
                    pwd: ''
                },
                rememberPwd: false,
                // 表单验证,需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    telphone: [
                        {required: true, message: '账号不可为空', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, message: '密码不可为空', trigger: 'blur'}
                    ]
                },
            }
        },
        watch: {
            fullHeight(val) {//监控浏览器高度变化
                if (!this.timer) {
                    this.fullHeight = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        that.timer = false
                    }, 400)
                }

            },

        },
        mounted() {
            this.get_bodyHeight()
            this.getCookie();

        },
        methods: {
            get_bodyHeight() {//动态获取浏览器高度
                const that = this
                window.onresize = () => {
                    return (() => {
                        window.fullHeight = document.documentElement.clientHeight
                        that.fullHeight = window.fullHeight
                    })()
                }
            },
            onSubmit() {
                // 为表单绑定验证功能
                let that = this;
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        // 使用 vue-router 路由到指定页面,该方式称之为编程式导航
                        //直接赋值会有弱绑定 到时候表单里面的值会跟着一起加密
                        let formData = Object.assign({}, this.form);
                        formData.pwd = this.$md5(formData.pwd).toUpperCase();
                        login(formData).then(res => {
                            if(res.RetCode == 100){

                                if(that.rememberPwd){
                                    that.setCookie(that.form.telphone , this.form.pwd, 7); // 保存期限为7天
                                }
                                this.$message.success("登录成功");
                                localStorage.setItem("account",JSON.stringify(res.data));
                                this.$router.push('/m/collect')
                            }else{
                                this.$message.warning(res.Msg)
                            }
                        })
                        // this.$router.push("/about");
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            },
            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.form.telphone = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.form.pwd = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
            },
            handleClose() {

            },
        }
    }
</script>

<style scoped lang="scss">

    .bgColor {
        width: 100vw;
        display: flex;
    }

    .login-left {
        /*background: url("../assets/login-bg.png") center center no-repeat;*/
        /*background-size: 100% 100%;*/
        background-image: url("../assets/login-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 70%;
    }

    .l-l-t {
        margin: 76px 60px;
        display: flex;
        align-items: center;
    }

    .l-l-b {
        margin: 20vh 0 0 156px;
        color: #FFFFFF;
    }

    .login-right {
        flex: 1;
    }

    .login-logo-img {
        margin-right: 24px;
    }

    .login-name {
        height: 80px;
        font-size: 80px;
        font-family: SourceHanSansCN-Bold;
        line-height: 80px;
        letter-spacing: 26px;
    }

    .border-1 {
        background-color: #FFF;
        width: 2px;
        height: 30px;
        margin: 0 20px;
    }

    .login-type {
        font-size: 24px;

        font-family: SourceHanSansCN-Light;
        color: #FFFFFF;
    }

    .login-name-english {
        margin-top: 34px;
        height: 30px;
        font-size: 30px;
        font-family: SourceHanSansCN-Bold;
        line-height: 30px;
        letter-spacing: 5px;
    }

    .login-box {
        /*border: 1px solid #DCDFE6;*/
        width: 350px;
        margin: 180px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        /*box-shadow: 0 0 25px #909399;*/
    }

    .login-btn {
        width: 100%;
    }

    .login-title {
        margin: 20px auto;
        padding: 15px 0;
        color: #1D2860;
        position: relative;
        span {
            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                height: 4px;
                left: 0;
                background-color: #1D2860;
                width: 4em;
                border-radius: 5px;
            }
        }
    }

</style>


下面是一个简单的 Vue 登录面的代码实现,包括记住密码、多组账号、自动输入密码、删除账号等功能: ``` <template> <div> <form> <div> <label for="username">用户名:</label> <input type="text" id="username" v-model="username" /> </div> <div> <label for="password">密码:</label> <input type="password" id="password" v-model="password" /> </div> <div> <input type="checkbox" id="remember" v-model="remember" /> <label for="remember">记住密码</label> </div> <button type="button" @click="login">登录</button> </form> <ul> <li v-for="(item, index) in accounts" :key="index"> <span>{{ item.username }}</span> <button type="button" @click="removeAccount(index)">删除</button> </li> </ul> </div> </template> <script> export default { data() { return { username: '', password: '', remember: false, accounts: [], }; }, mounted() { // 从本地存储中读取已经记住的账号列表 const accounts = JSON.parse(localStorage.getItem('accounts') || '[]'); this.accounts = accounts; }, methods: { login() { // 将当前输入的账号和密码加入到本地存储中 const account = { username: this.username, password: this.password }; const accounts = [...this.accounts, account]; localStorage.setItem('accounts', JSON.stringify(accounts)); // 如果记住密码选项框被选中,则将账号和密码存储到本地存储中 if (this.remember) { localStorage.setItem(this.username, this.password); } else { localStorage.removeItem(this.username); } }, removeAccount(index) { // 从本地存储中删除该账号的密码 const account = this.accounts[index]; localStorage.removeItem(account.username); // 删除已经被记住密码的相同账号 const accounts = this.accounts.filter((item) => item.username !== account.username); localStorage.setItem('accounts', JSON.stringify(accounts)); this.accounts = accounts; }, }, watch: { username(value) { // 如果本地存储中已经存在相同的键,则自动填充密码并取消“记住密码”选项框的选中状态 const password = localStorage.getItem(value); if (password) { this.password = password; this.remember = false; } }, }, }; </script> ``` 需要注意的是,上面的代码只是一个简单的实现,实际项目中可能需要考虑更多的安全性和用户体验问题。例如,密码应该加密存储,账号列表应该进行分等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值