master

分支 (1)

管理

管理

master

second-stage
/
denglu.html

<!DOCTYPE html>
<html>

<head>
    <title>小郑同学</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./css/denglu.css">
    <link rel="stylesheet" href="./css/denglu/iconfont.css">
    <style>
        hr {

            width: 974px;
            height: 50px;
            margin-left: 240px !important;
            border-width: 1px 0px 0px;
            border-style: solid;
            border-top: 1px solid rgb(0, 0, 0);
        }

        .yanshi {
            width: 1024px;
            margin: 0 auto;
            text-align: center;
            line-height: 1.5em;
        }

        .yanshi>p {
            text-align: center;
            color: rgb(105, 105, 105);
            font-size: 15px;
            font-family: "微软雅黑";
        }

        .dengkuang {
            width: 1024px;
            height: 278px;
            margin: 0 auto;
            margin-top: 53px;
            padding-top: 20px;
            padding-bottom: 30px;
        }

        .denglu {
            width: 480px;
            height: 276px;
            /* background-color: rosybrown; */
            margin: 0 auto;
            border-radius: 5px;
            /* background: #fff; */
            color: #666;
            border: 1px solid #eee;
        }

        .container {
            width: 448px;
            height: 246px;
            margin: 0 auto;
            background-color: #fff;
            position: relative;
            text-align: left;
        }

        .container .shuru {
            display: flex;
            height: 28px;
            position: relative;
            margin-top: 20px;

        }

        .container .shuru>p {
            font-size: 12px !important;
            float: left;
            line-height: 28px;
        }

        .container .shuru>input {
            border: 1px solid #ddd !important;
            color: #333 !important;
            width: 267px !important;
            height: 28px !important;
            border-radius: 3px !important;
            background: #f5f5f5 !important;
            position: absolute;
            right: 0px;
            top: 0px;
            outline: none;
        }

        .check {
            width: 285px;
            height: 28px;
            font-size: 12px !important;
            box-sizing: border-box;
            display: flex;
            margin-left: 181px;
            margin-top: 17px;

        }

        .check>input {
            width: 16px;
            height: 16px;
            line-height: 16px;
            top: 2px;
            margin-right: 10px;
            color: #8d9095;
            outline: none;
        }

        .check>p {
            color: #8d9095;
        }

        .tijiao {
            width: 448px;
            height: 103px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e5e5e5;
            position: absolute;
            left: 0px;
            bottom: 0px;
            /* background-color: sandybrown; */
        }

        #btnLogin {
            width: 63px;
            height: 28px;
            padding: 0 10px;
            margin-right: 15px !important;
            vertical-align: baseline !important;
            display: inline-block !important;
            background: #000 !important;
            border: 1px solid #000 !important;
            color: #fff !important;
            box-shadow: inset 0 1px #000 !important;
            border-radius: 3px !important;
        }

        .zhuce {
            width: 63px;
            height: 28px;
            padding: 0 10px;
            margin-right: 15px !important;
            vertical-align: baseline !important;
            display: inline-block !important;
            background: #fff !important;
            border: 1px solid #ddd !important;
            color: #666 !important;
            box-shadow: inset 0 1px #fff !important;
            border-radius: 3px !important;
        }

        .tijiao>p {
            margin-top: 12px;
            width: 446px;
            height: 33px;
            color: #888 !important;
            font-size: 12px !important;
            line-height: 18px !important;
        }

        .tijiao>p>a {
            display: inline-block;
            width: 30px;
            height: 28px;
            background-color: seagreen;
            color: #444;
            background: transparent;
            background-image: url(./images/bj.png);
            background-repeat: no-repeat;
            background-position: -48px -72px;
            height: 24px;
            width: 24px;
        }

        .wangji {
            width: 120px;
            height: 18px;
            font-size: 12px;
            color: #333;
            float: right;
        }

        aside>ol {
            width: 974px;
            height: 75px;
            margin: 0 auto;
            word-spacing: 1.5em;
            margin-top: 50px;
            margin-bottom: 80px;
        }

        aside>ol>p {
            margin-top: 10px;
            font-size: 14px;
            color: rgb(102, 102, 102);
        }

        aside>ol>li {
            margin-top: 8px;
            font-size: 14px;
            color: rgb(102, 102, 102);
        }

        aside>ol>li>a {
            font-size: 14px;
            color: rgb(102, 102, 102);
        }
    </style>
</head>

<body>
    <header></header>
    <hr>
    <aside>
        <div class="yanshi">
            <p>
                演示用户名：demouser
            </p>
            <p>
                密码： demouser1234
            </p>
        </div>
        <div class="dengkuang">
            <div class="denglu">
                <div class="container">
                    <form action="" id="loginForm" method="post">
                        <div class="shuru">
                            <p>
                                手机/用户/邮箱
                            </p>
                            <input type="text" name="username" id="username">
                        </div>
                        <div class="shuru">
                            <p>
                                密码
                            </p>
                            <input type="password" name="userpass" id="userpass">
                        </div>
                        <div class="check">
                            <div id="msg" style="font-size: 12px; color: red;"></div>
                            <label for=""><input type="checkbox" name="" id="remember"></label>
                            <p>
                                记住我(请在私人设备上使用此功能)
                            </p>
                        </div>
                        <div id="msg"></div>
                        <div class="tijiao">
                            <input id="btnLogin" type="button" value="登录" />

                            <button class="zhuce">提交</button>

                            <p>
                                第三方账号登录：<a href="https://graph.qq.com/oauth2.0/show">
                                </a>

                            </p>

                            <a href="#" class="wangji">
                                忘记密码？点这里找回</a>

                        </div>
                    </form>
                </div>
            </div>
        </div>
        <ol>
            <p>说明：</p>
            <li>1.实际使用之前，需配置用户管理组件中的相关邮件。详情请参考教程：<a
                    href="https://www.qifeiye.com/%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86%E4%B8%AD%E7%9B%B8%E5%85%B3%E9%82%AE%E4%BB%B6%E7%9A%84%E9%85%8D%E7%BD%AE/">《用户管理中相关邮件的配置》</a>
            </li>
            <li>2.新用户注册后的审核方式有三种：自动核准、邮件激活、需要管理员批准（即人工审核），详情可参考教程<a
                    href="https://www.qifeiye.com/%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E5%90%8E%E7%9A%84%E5%AE%A1%E6%A0%B8%E6%96%B9%E5%BC%8F%EF%BC%88%E8%87%AA%E5%8A%A8%E5%AE%A1%E6%A0%B8%E3%80%81%E9%82%AE%E4%BB%B6/">《如何设置用户注册后的审核方式》
                </a></li>
        </ol>
    </aside>
    <footer></footer>
</body>

</html>
<script src="./js/jQuery.js"></script>

<script>
    $("header").load("header.html");
    $("footer").load("foot.html");

    $(".zhuce").focus(function () {
        location.href = "./zhuce.html";
    });


let oBtnLogin = document.getElementById("btnLogin");
let oUserPass = document.getElementById("userpass");
let oUserName = document.getElementById("username");

oBtnLogin.onclick = function(){
    let xhr = new XMLHttpRequest();
    //链接登录
    xhr.open("post","./goodsAndShoppingCart/login.php",true);

    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
           if(xhr.responseText==0){
               document.getElementById("msg").innerHTML = "登录成功";
               location.href = "./index.html";
           }else{
               document.getElementById("msg").innerHTML = "登录失败,用户名或者密码错误";
           }
        }
    }

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    let str = "username="+oUserName.value+"&userpass="+oUserPass.value;
    xhr.send(str);
    if($("#remember").prop("checked")==true){
        setCookie();
        getCookie();
    }


}


function setCookie() {
    let userName = 'oUserName' // 用户名
    let passWord = 'oUserPass' //密码
    let cookieName = 'userInfo' // cookie名称
    let data = {
        username: userName,
        password: passWord
    }
    let d = new Date()
    let saveTime = 7// cookie保存时间（单位：天）
    d.setDate(d.getDate() + saveTime)
    document.cookie = cookieName + '=' + JSON.stringify(data) + ';path=/;expires=' + d.toGMTString()
}
function getCookie() {
    let cookie = document.cookie
    let cookieName = 'userInfo' // cookie名称
    let arr = cookie.split('; ') // 将cookie信息和时间戳拆分为数组
    let userInfo = null
    for (let i = 0; i < arr.length; i++) {
        let tempArr = arr[i].split('=') // 将cookie名称和data拆分开，分别是数组的第一个元素和第二个元素
        if (tempArr[0] === cookieName) {
            userInfo = JSON.parse(tempArr[1])
        }
    }
    if (userInfo) {
        // cookie存在，这里可以写跳转语句
        console.log("./index.html");
    } else {
        // 因为cookie不存在，所以不做任何处理
    }
}
</script>