iaun
/
cc_test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<html lang="zh">

<head>
    <title>登录</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="jquery.min.js"></script>
    <script src="vue.js"></script>
    <script src="elementui.js"></script>
    <script src="js.cookie.min.js"></script>
    <link rel="stylesheet" type="text/css" href="elementui.css">
    <!--<script src="vconsole.min.js"></script>
    <script>
           window.vConsole = new window.VConsole({
               defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
               maxLogNumber: 1000,
               // disableLogScrolling: true,
               onReady: function() {
                   console.log('vConsole is ready.');
               },
               onClearLog: function() {
                   console.log('on clearLog');
               }
           });
    </script>-->
</head>

<body>

    <div id="app">
        <div>
            <el-card class="box-card login-card">
                <div slot="header" class="clearfix">
                    <span>登录</span>
                    <el-button style="float: right; padding: 3px 0;" type="text" @click="toRegister">
                        注册
                    </el-button>
                </div>
                <el-input :disabled="isLoading" minlength="1" maxlength="18" @keydown.native.enter="login" style="margin-top:20px;" v-model="userInfo.name" placeholder="用户名"></el-input>
                <el-input :disabled="isLoading" minlength="6" maxlength="18" @keydown.native.enter="login" style="margin-top:20px;" v-model="userInfo.password" placeholder="密码" type="password"></el-input>
                <el-button @click="login" style="margin-top:20px;display: block;margin-left: auto;margin-right: auto;" type="primary" plain :loading="isLoading">登录</el-button>
            </el-card>
        </div>
    </div>

    <script>
        var app;
        var vue = new Vue({
            el: '#app',
            data: {
                apiUrl: '/api',
                visible: false,
                isLoading: false,
                userInfo: {
                    name: "",
                    password: ""
                }
            },
            methods: {
                req(url, method, data) {
                    data = data ? JSON.stringify(data) : "";
                    return new Promise(function(resolve, reject) {
                        $.ajax({
                            type: method,
                            url: url,
                            data: data ? data : "",
                            contentType: data ? "application/json" : "",
                            success: function(data) {
                                resolve(data);
                            },
                            error: function(err) {
                                reject(err);
                            }
                        });
                    });
                },
                toRegister() {
                    location.href = "/register.html";
                },
                login() {
                    var name = this.userInfo.name;
                    var password = this.userInfo.password;
                    if (name.length < 1 || name.length > 18) {
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "用户名长度需在1-18位"
                        });
                        return;
                    }
                    if (password.length < 6 || password.length > 18) {
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "密码长度需在6-18位"
                        });
                        return;
                    }
                    this.isLoading = true;
                    this.req("/api/auth/login", "POST", { "name": name, "password": password }).then((data) => {
                        if (data["success"] === 0) {
                            this.$message.closeAll();
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: data["msg"]
                            });
                            this.isLoading = false;
                        }
                        else if (data["success"] === 1) {
                            this.$message.closeAll();
                            this.$message({
                                type: 'success',
                                showClose: true,
                                message: "登录成功"
                            });
                            this.isLoading = false;
                            location.href = "/home.html";
                        }
                        else {
                            this.$message.closeAll();
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: "未知错误1"
                            });
                            this.isLoading = false;
                        }
                    }).catch((err) => {
                        this.$message.closeAll();
                        this.$message({
                            type: 'error',
                            showClose: true,
                            message: "服务器错误1"
                        });
                        this.isLoading = false;
                    });
                }
            },
            mounted: function() {
                app = this;
                var token = Cookies.get("token");
                if (token) {
                    this.isLoading = true;
                    this.req(this.apiUrl + "/auth/login/cookie", "GET", null).then((data) => {
                        console.log(data);
                        this.isLoading = false;
                        if (data && data["success"]) {
                            location.href = "/home.html";
                        }
                        else {
                            Cookies.set("token", "");
                        }
                    }).catch(() => {
                        this.isLoading = false;
                        Cookies.set("token", "");
                    });
                }
            }
        });
    </script>
    <style>
        .login-card {
            width: 350px;
            margin: 20px auto 0 auto;
        }
    </style>
</body>

</html>