pg-front-end
/
login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PG登录</title>
    <link rel="icon" href="static/images/Login.png" type="image/png">
    <link href="semantic/dist/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/custom.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="util/request.js"></script>
    <script src="./util/common.js"></script>
</head>
<body>
<script>
    // 如果用户已经登录，则直接跳转到首页
    isLogin(function (response) {
        // 拿到状态码，判断请求状态。
        const code = response.code
        // 这里如果code为200，证明用户已经登录, 所以需要跳转到首页
        if (code === 200) {
            location.href = './index.html'
        }
    }, function (error) {
        console.log(error)
    })
</script>
<!--导航条-->
<script src="static/js/header.js"></script>
<!--中间内容-->
<div class="m-padded-tb-middle ">
    <div class="ui container   " style="width: 800px">
        <h2 class="ui divided header horizontal center aligned">登&emsp;&ensp;录</h2>
        <div class="ui two column grid stackable">
            <div class="column">
                <!--图片区-->
                <img src="https://picsum.photos/id/203/800/350" style="width: 800px;height: 200px" alt=""
                     class="ui fluid image rounded">
            </div>
            <div class="column">
                <form class="ui form  ">
                    <div class="required field">
                        <input type="text" name="phoneNum" id="phone" placeholder="你的手机号">
                    </div>
                    <div class="required field">
                        <input type="password" name="password" id="pass" placeholder="密码">
                    </div>
                    <div class="required inline left aligned field ">
                        <input type="checkbox" id="rememberMe" tabindex="0" checked>
                        <label for="rememberMe">记住我</label>&emsp;<span class="m-opacity-mini">不是自己的电脑，不要勾选此选项</span>
                    </div>
                    <button class="ui button m-padded-lr-small m-margin-lr-small" type="submit">登录</button>
                    <button class="ui button m-padded-lr-small m-margin-lr-small " type="button" onclick="location.href='./register.html'">注册</button>
                    <div class="required field m-padded-tb-little">
                        <a href="javascript:void(0)" onclick="qqLogin()"><i class="qq icon"></i>QQ账号登录</a>
                    </div>
                    <div class="ui error message"></div>
                </form>
            </div>
        </div>


    </div>

</div>

<!--底部-->
<script src="static/js/footer.js"></script>
<script src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>

<script>
    $('.dropdown').dropdown({
        on: 'hover'
    });
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.form').form({
        fields: {
            phone: {
                identifier: 'phoneNum',
                rules: [{
                    type: 'empty',
                    prompt: '账号:请输入您的手机号码'
                },
                    {
                        type: 'exactLength[11]',
                        prompt: "手机号码长度不正确"
                    }]
            },
            password: {
                identifier: 'password',
                rules: [{
                    type: 'empty',
                    prompt: '密码：请输入您的密码'
                }, {
                    type: 'minLength[8]',
                    prompt: "密码长度最少8位"
                }]
            }
        },
        onSuccess(event, fields) {
            event.preventDefault()
            $http({
                url: 'auth/login',
                method: 'POST',
                data: {
                    action: 'PASSWORD',
                    account: $("#phone").val().trim(),
                    password: $("#pass").val().trim(),
                    rememberMe: $("#rememberMe").is(":checked")
                }
            }).then(response => {
                if (response.code !== 200) {
                    alert(response.message)
                    return false;
                }

                location.href = "index.html"
            }).catch(error => {
                console.log(error)
            })
        }
    });
    // qq登录
    function qqLogin() {
        $http({
            url: 'auth/qqLogin',
            method: 'GET'
        }).then(response => {
            if (response.code === 200) {
                // 打开一个新窗口
                const w = window.open(response.data, '_blank')
                // 监听此窗口，如果关闭了，代表用户登录，则刷新本页
                const loop = setInterval(() => {
                    if (w.closed) {
                        location.reload()
                        clearInterval(loop)
                    }
                }, 500)
            }
        })
    }
</script>
</body>
</html>