管道基础大数据平台系统开发-【后端】-Server
1
13693261870
2023-04-28 7a6a214cedde6d78058ecbf0eb964e6acb3e97c5
1
已添加1个文件
已修改3个文件
808 ■■■■ 文件已修改
src/main/resources/static/html/login.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/resources/static/js/login.js 34 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/resources/templates/login.html 404 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/resources/templates/login_old.html 368 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/resources/static/html/login.html
@@ -1,4 +1,4 @@
<!DOCTYPE>
<!DOCTYPE>
<html>
<head>
  <title>管道基础大数据平台服务-登录</title>
src/main/resources/static/js/login.js
@@ -2,9 +2,9 @@
window.code = "";
// åˆ›å»ºéªŒè¯ç 
// åˆ›å»ºéªŒè¯ç 
function createCode() {
    var codeLength = 4, code = ""; // éªŒè¯ç çš„长度
    var codeLength = 4, code = ""; // éªŒè¯ç çš„长度
    var checkCode = document.getElementById("checkCode");
    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
@@ -17,7 +17,7 @@
    }
}
// èŽ·å–å…¬é’¥
// èŽ·å–å…¬é’¥
function getPublicKey() {
    $.get("getPublicKey", function (rs) {
        if (rs && rs.code == 200) {
@@ -27,36 +27,36 @@
    });
}
// éªŒè¯
// éªŒè¯
function sysValidate() {
    // éªŒè¯ç”¨æˆ·åä¸Žå¯†ç 
    // éªŒè¯ç”¨æˆ·åä¸Žå¯†ç 
    var theUsername = document.getElementById("username").value;
    if (theUsername.length <= 0) {
        $("#eMsg").html("提示:请输入用户名!");
        $("#eMsg").html("提示:请输入用户名!");
        $("#username").focus();
        return false;
    }
    var thePassword = document.getElementById("password").value;
    if (thePassword.length <= 0) {
        $("#eMsg").html("提示:请输入密码!");
        $("#eMsg").html("提示:请输入密码!");
        $("#password").focus();
        return false;
    }
    /*if (!isValid(thePassword)) {
      $("#eMsg").html("提示:密码为8-20位包含字母、数字和特殊字符!");
      $("#eMsg").html("提示:密码为8-20位包含字母、数字和特殊字符!");
      $("#password").focus();
      return false;
    }*/
    // éªŒè¯éªŒè¯ç 
    // éªŒè¯éªŒè¯ç 
    var inputCode = document.getElementById("inputCode").value;
    if (inputCode.length <= 0) {
        $("#eMsg").html("提示:请输入验证码!");
        $("#eMsg").html("提示:请输入验证码!");
        $("#inputCode").focus();
        return false;
    }
    if (inputCode.toUpperCase() != code.toUpperCase()) {
        $("#eMsg").html("提示:验证码输入有误!");
        $("#eMsg").html("提示:验证码输入有误!");
        $("#inputCode").val("").focus();
        createCode();
        return false;
@@ -84,7 +84,7 @@
        isBusy = false;
        if (!rs || rs.code !== 200) {
            createCode();
            var msg = rs && rs.msg ? rs.msg : "登录失败!";
            var msg = rs && rs.msg ? rs.msg : "登录失败!";
            $("#eMsg").html(msg);
            return;
        }
@@ -100,7 +100,7 @@
        location.href = location.href.replace("/sign/toLogin", "/sign/toIndex");
    }, function () {
        isBusy = false;
        alert("登录出错,请联系管理员!");
        alert("登录出错,请联系管理员!");
    });
}
@@ -110,7 +110,7 @@
        url: url,
        type: type,
        data: data,
        dataType: dataType || "json", // html、json、jsonp、script、text
        dataType: dataType || "json", // html、json、jsonp、script、text
        contentType: contentType || "application/json", // "application/x-www-form-urlencoded"
        success: function (data) {
            fn(data);
@@ -122,7 +122,7 @@
    });
}
// èŽ·å–URL参数
// èŽ·å–URL参数
function getQueryStr(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
@@ -132,7 +132,7 @@
    return null;
}
// é”®ç›˜æŒ‰ä¸‹äº‹ä»¶
// é”®ç›˜æŒ‰ä¸‹äº‹ä»¶
document.onkeydown = function (e) {
    var ev = window.event || e;
    var code = ev.keyCode || ev.which || ev.charCode;
@@ -141,7 +141,7 @@
    }
}
// å¯†ç æ˜¯å¦åˆè§„
// å¯†ç æ˜¯å¦åˆè§„
function isValid(pwd) {
    if (!pwd) return false;
src/main/resources/templates/login.html
@@ -1,368 +1,74 @@
<!DOCTYPE>
<!DOCTYPE>
<html>
<head>
  <title>管道基础大数据平台服务-登录</title>
  <meta charset="utf-8" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Cache" content="no-cache" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-control" content="no-cache" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  <link href="../favicon.ico" rel="icon" type="image/x-icon" />
  <link href="../css/style.css" rel="stylesheet" />
  <link href="../css/earth/css.css" rel="stylesheet">
  <link href="../css/earth/style.css" rel="stylesheet">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/jquery.cookie.min.js"></script>
  <script src="../js/zxcvbn.js"></script>
  <script src="../js/rsa.min.js"></script>
</head>
<body style="background-color: #0059cf; overflow-y: hidden !important;">
  <form method="post" id="fm1" class="fm-v clearfix" action="/sign/login">
    <div class="loginheader" style='display: none;'>
      <span class="loginname">单点登录</span>
      <img class="devline" src="../images/login/loginline.png" /><span class="lognameE">Log in</span>
    </div>
    <div id="topBg" style="background-color: #1a65c9; height: 30%; display: none;"></div>
    <div id='div_middle' class="loginmain">
      <div id='div_loginTitle' class="logintitle" style="display: none;"></div>
      <div id="topBgColor" style="background-color: #1a65c9; height: 19%; display: none;"></div>
      <div id='div_loginBox' class="logintable">
        <div id="loginBox_Title" style="height: 60px; line-height: 60px;">
          <span style="color: #fff; font-size: 50px; font-family: initial; font-weight: 700;">用户登录</span>
        </div>
        <!-- ç”¨æˆ·å -->
        <div class="loginid" style='width: 400px; margin-right: 50px; margin-top: 45px; border-bottom: 1px solid #fff;'>
          <label for="username"></label>
          <input class="required" id="username" placeholder="请输入用户名" size="20" tabindex="1"
            type="text" accesskey="n" autocomplete="off" name="username" value="admin" />
        </div>
        <!-- å¯†ç  -->
        <section>
          <div class="loginpwd" style='width: 400px; margin-right: 20px; margin-top: 30px; border-bottom: 1px solid #fff;'>
            <label for="password"></label>
            <input class="required" placeholder="请输入密码" type="password" id="password" size="20" tabindex="2"
              accesskey="p" autocomplete="off" name="password" value="Admin@1234_lf" /><span id="capslock-on" style="display: none;">
                <i class="fa fa-exclamation-circle"></i>
                <span>CAPSLOCK key is turned on!</span>
              </span>
          </div>
        </section>
        <section class="row check">
        </section>
        <!-- éªŒè¯ç  -->
        <section>
          <div class="loginvalifield" style="width: 400px; margin-right: 20px; margin-top: 30px; border-bottom: 1px solid #fff;">
            <div class="loginvalicode">
              <label for="inputCode"></label>
              <input id="inputCode" placeholder="请输入验证码" name="inputCode" class="required" tabindex="3" accesskey="v" type="text" value="" size="35" autocomplete="off" maxlength="6">
            </div>
            <span class="code" id="checkCode" onclick="createCode()"></span>
          </div>
        </section>
        <section>
          <div id="eMsg" style="color: red; height: 40px; line-height: 40px; font-size: 15px; margin-bottom: -20px; margin-left: 45px;"></div>
        </section>
        <!-- ç™»å½•按钮 -->
        <section>
          <input class="loginbtn" style="margin-top: 25px;" name="submit" accesskey="l" value="" tabindex="5" type="button" onclick="sysLogin();">
        </section>
      </div>
    </div>
    <div id='div_foot' style="display: none;">
      <span>技术支持:国家海洋信息中心</span>
    </div>
  </form>
  <script src="../js/login.js"></script>
  <script>
    var code;
    function createCode() {
      code = "";
      var codeLength = 4; //验证码的长度
      var checkCode = document.getElementById("checkCode");
      /* var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
      'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); */
      var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
      for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * 10);
        code += codeChars[charNum];
      }
      if (checkCode) {
        checkCode.className = "code";
        checkCode.innerHTML = code;
      }
    }
    var leftoffset = 474;
    // ç¦æ­¢åœ¨iframe打开
    function noIframe() {
      if (top.location != self.location) {
        window.top.location = self.location.href.split("?")[0];
      }
    }
    function autoResize() {
      var div_obj = document.getElementById("div_middle");
      //宽度自适应
      var fullWidth = document.body.offsetWidth;
      var div_loginBox = document.getElementById("div_loginBox");
      var boxWidth = div_loginBox.offsetWidth;
      var myWidth = div_obj.offsetWidth;
      //if (fullWidth > 1920) { fullWidth = 1920; }
      var winWidht = window.innerWidth;
      var winHeight = window.innerHeight - 100;
      var bgHeight = 1080;
      winWidht += 150;
      if (winWidht >= 1920) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1920/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "800px");
        $("#div_middle").css("height", "980px");
        $(".logintable").css("margin-top", "170px");
        div_loginBox.style.left = ((fullWidth - 410) / 2 + 474) + "px";
        bgHeight = 980; //1080
      } else if (winWidht >= 1600) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1600/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "800px");
        $("#loginBox_Title span").css("font-size", "40px");
        $(".loginid").css("margin-top", "35px").css("height", "45px").css("width", "350px").css("background", "url(../images/NewGJXJlogin/1600/user.png) no-repeat").css("background-position", "3% 40%");
        $(".loginid input").css("width", "306px").css("margin-left", "45px").css("font-size", "18px");
        $(".loginpwd").css("margin-top", "20px").css("height", "45px").css("width", "350px").css("background", "url(../images/NewGJXJlogin/1600/password.png) no-repeat").css("background-position", "3% 40%");
        $(".loginpwd input").css("width", "306px").css("margin-left", "45px").css("font-size", "18px");
        $(".loginvalicode").css("height", "45px").css("width", "270px").css("background", "url(../images/NewGJXJlogin/1600/code.png) no-repeat").css("background-position", "4.5% 40%");
        $(".loginvalicode input").css("width", "215px").css("margin-left", "49px").css("font-size", "18px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "350px").css("height", "45px");
        $("#inputCode").css("margin-left", "46px");
        $(".logintable").css("margin-top", "113px").css("width", "350px").css("height", "470px");
        //$(".logintable").css("margin-top", "210px").css("width", "350px").css("height", "470px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1600/add.png) no-repeat").css("background-position", "3% 40%");
        $("#carLink a").css("margin-left", "50px").css("font-size", "16px");
        $(".loginbtn").css("margin-top", "25px");
        leftoffset = 404;
        bgHeight = 800; //900
        div_loginBox.style.left = ((fullWidth - 360) / 2 + leftoffset) + "px";
      } else if (winWidht >= 1440) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1440/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "810px");
        $("#loginBox_Title").css("height", "50px").css("line-height", "50px");
        $("#loginBox_Title span").css("font-size", "36px");
        $(".loginid").css("margin-top", "20px").css("height", "45px").css("width", "320px").css("background", "url(../images/NewGJXJlogin/1440/user.png) no-repeat").css("background-position", "3% 40%");
        $(".loginid input").css("width", "276px").css("margin-left", "45px").css("font-size", "16px");
        $(".loginpwd").css("margin-top", "20px").css("height", "45px").css("width", "320px").css("background", "url(../images/NewGJXJlogin/1440/password.png) no-repeat").css("background-position", "3% 40%");
        $(".loginpwd input").css("width", "276px").css("margin-left", "45px").css("font-size", "16px");
        $(".loginvalicode").css("height", "45px").css("width", "240px").css("background", "url(../images/NewGJXJlogin/1440/code.png) no-repeat").css("background-position", "4.5% 40%");
        $(".loginvalicode input").css("width", "185px").css("margin-left", "49px").css("font-size", "16px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "320px").css("height", "45px");
        $(".logintable").css("margin-top", "201px").css("width", "320px").css("height", "420px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1440/add.png) no-repeat").css("background-position", "3.5% 40%").css("margin-top", "25px").css("height", "30px").css("line-height", "30px");
        $("#carLink a").css("margin-left", "50px").css("font-size", "16px");
        $(".loginbtn").css("margin-top", "25px").css("height", "50px");
        leftoffset = 357;
        bgHeight = 810;
        div_loginBox.style.left = ((fullWidth - 320) / 2 + leftoffset) + "px";
      } else if (winWidht >= 1366) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1366/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "668px");
        $("#loginBox_Title").css("height", "50px").css("line-height", "50px");
        $("#loginBox_Title span").css("font-size", "32px");
        $(".loginid").css("margin-top", "35px").css("height", "40px").css("width", "300px").css("background", "url(../images/NewGJXJlogin/1366/user.png) no-repeat").css("background-position", "3% 50%");
        $(".loginid input").css("width", "256px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginpwd").css("margin-top", "20px").css("height", "40px").css("width", "300px").css("background", "url(../images/NewGJXJlogin/1366/password.png) no-repeat").css("background-position", "3% 50%");
        $(".loginpwd input").css("width", "256px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginvalicode").css("height", "40px").css("width", "220px").css("background", "url(../images/NewGJXJlogin/1366/code.png) no-repeat").css("background-position", "4.5% 50%");
        $(".loginvalicode input").css("width", "165px").css("margin-left", "46px").css("font-size", "14px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "300px").css("height", "40px");
        $(".logintable").css("margin-top", "83px").css("width", "300px").css("height", "390px");
        //$(".logintable").css("margin-top", "135px").css("width", "300px").css("height", "390px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1366/add.png) no-repeat").css("background-position", "3.5% 50%").css("margin-top", "25px").css("height", "30px").css("line-height", "30px");
        $("#carLink a").css("margin-left", "50px").css("font-size", "14px");
        $(".loginbtn").css("margin-top", "10px").css("height", "56px");
        leftoffset = 338;
        bgHeight = 668; //731
        div_loginBox.style.left = ((fullWidth - 300) / 2 + leftoffset) + "px";
      } else {
        //fullWidth = 1280;
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1280/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "620px");
        $("#loginBox_Title").css("height", "50px").css("line-height", "50px");
        $("#loginBox_Title span").css("font-size", "32px");
        $(".loginid").css("margin-top", "27px").css("height", "40px").css("width", "280px").css("background", "url(../images/NewGJXJlogin/1280/user.png) no-repeat").css("background-position", "3% 50%");
        $(".loginid input").css("width", "236px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginpwd").css("margin-top", "20px").css("height", "40px").css("width", "280px").css("background", "url(../images/NewGJXJlogin/1280/password.png) no-repeat").css("background-position", "3% 50%");
        $(".loginpwd input").css("width", "236px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginvalicode").css("height", "40px").css("width", "200px").css("background", "url(../images/NewGJXJlogin/1280/code.png) no-repeat").css("background-position", "4.5% 50%");
        $(".loginvalicode input").css("width", "145px").css("margin-left", "46px").css("font-size", "14px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "280px").css("height", "40px");
        $(".logintable").css("margin-top", "70px").css("width", "280px").css("height", "380px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1280/add.png) no-repeat").css("background-position", "3.5% 50%").css("margin-top", "25px").css("height", "30px").css("line-height", "30px");
        $("#carLink a").css("margin-left", "50px").css("font-size", "14px");
        $(".loginbtn").css("margin-top", "0px").css("height", "50px");
        leftoffset = 314;
        bgHeight = 620;
        div_loginBox.style.left = ((fullWidth - 280) / 2 + leftoffset) + "px";
        $("body").css("overflow", "hidden");
      }
      div_obj.style.width = fullWidth + "px";
      if (winHeight > bgHeight) {
        div_obj.style.height = winHeight + "px";
        var marginTop = parseFloat($(".logintable").css("margin-top").replace("px")) + (winHeight - bgHeight);
        $(".logintable").css("margin-top", marginTop + "px");
      }
      //高度自适应
      var fullHeight = document.body.offsetHeight;
      var myHeight = div_obj.offsetHeight;
      if (fullHeight > myHeight) {
        //div_obj.style.marginTop = ((fullHeight - myHeight) / 2) + "px";
      }
      var div_loginTitle = document.getElementById("div_loginTitle");
      var titleWidth = div_loginTitle.offsetWidth;
      div_loginTitle.style.left = (fullWidth - titleWidth) / 2 + "px";
    }
    window.onload = function () {
      noIframe();
    $(function () {
      createCode();
      autoResize();
      getPublicKey();
      $(window).on("resize", autoResize);
      //document.getElementById('username').focus();
      document.getElementById('inputCode').focus();
    }
      document.getElementById('password').focus();
    });
  </script>
  <script>
    function getPublicKey() {
      $.get("getPublicKey", function (rs) {
        if (rs && rs.code == 200) {
          window.encrypt = new JSEncrypt();
          encrypt.setPublicKey(rs.result);
        }
      });
    }
</head>
<body>
  <div class="world">
    <div class="world-bg"></div>
    <div class="world-globe">
      <div class="world-globe-pole"></div>
      <div class="world-globe-doms-container"></div>
      <div class="world-globe-halo"></div>
    </div>
  </div>
    function sysValidate() {
      // éªŒè¯ç”¨æˆ·åä¸Žå¯†ç 
      var theUsername = document.getElementById("username").value;
      if (theUsername.length <= 0) {
        $("#eMsg").html("提示:请输入用户名!");
        $("#username").focus();
        return false;
      }
      var thePassword = document.getElementById("password").value;
      if (thePassword.length <= 0) {
        $("#eMsg").html("提示:请输入密码!");
        $("#password").focus();
        return false;
      }
      /*if (!isValid(thePassword)) {
        $("#eMsg").html("提示:密码为8-20位包含字母、数字和特殊字符!");
        $("#password").focus();
        return false;
      }*/
  <div id="main">
    <div class="main_title">
      <span>用户登录</span>
    </div>
    <form class="main_form">
      <div class="main_txt">
        <img src="../images/login/user.png" alt="" />
        <input id="username" type="text" value="admin" maxlength="30" placeholder="请输入用户名" />
      </div>
      // éªŒè¯éªŒè¯ç 
      var inputCode = document.getElementById("inputCode").value;
      if (inputCode.length <= 0) {
        $("#eMsg").html("提示:请输入验证码!");
        $("#inputCode").focus();
        return false;
      }
      if (inputCode.toUpperCase() != code.toUpperCase()) {
        $("#eMsg").html("提示:验证码输入有误!");
        $("#inputCode").val("").focus();
        createCode();
        return false;
      }
      <div class="main_txt" style="margin-top: 48px;">
        <img src="../images/login/pwd.png" alt="" />
        <input id="password" type="password" maxlength="30" value="" placeholder="请输入密码" />
      </div>
      return true;
    }
      <div class="main_txt" style="margin-top: 48px;">
        <img src="../images/login/code.png" alt="" />
        <input id="inputCode" type="text" value="" maxlength="4" style="width: 218px;" placeholder="请输入验证码" />
        <div id="checkCode" onclick="createCode()"></div>
      </div>
    window.isBusy = false;
      <div class="main_txt" style="margin-top: 48px; padding: 0;">
        <input id="btnLogin" type="button" value="登 å½•" onclick="sysLogin();" />
      </div>
    </form>
  </div>
    function sysLogin() {
      if (isBusy || !sysValidate()) {
        return;
      }
  <div class="title">
    <img src="../images/login/lg_03.png" alt=""/>
  </div>
      isBusy = true;
      var username = $.trim($("#username").val());
      var password = $("#password").val();
      var service = getQueryStr("service");
      var data = {
        "uid": encrypt.encrypt(username),
        "pwd": encrypt.encrypt(password)
      };
      $.ajax({
        url: "login",
        type: "POST",
        data: JSON.stringify(data),
        dataType: "json", // html、json、jsonp、script、text
        contentType: "application/json", // "application/json", "application/x-www-form-urlencoded",
        success: function (rs) {
          isBusy = false;
          if (!rs || rs.code !== 200) {
            createCode();
            var msg = rs && rs.msg ? rs.msg : "登录失败!";
            $("#eMsg").html(msg);
            return;
          }
          if (rs.msg) alert(rs.msg);
          var service = getQueryStr("service");
          if (service) {
            service += (service.indexOf("?") > -1 ? "&" : "?") + "token=" + rs.result.token;
            location.href = service;
            return;
          }
          location.href = location.href.replace("/sign/toLogin", "/sign/toIndex");
        },
        error: function (e) {
          isBusy = false;
          console.error(e);
          alert("登录出错,请联系管理员!");
        }
      });
    }
    function ajax(url, type, data, dataType, contentType, fn, efn) {
      $.ajax({
        url: url,
        type: type,
        data: data,
        dataType: dataType || "json", // html、json、jsonp、script、text
        contentType: contentType || "application/json", // "application/x-www-form-urlencoded"
        success: function (data) {
          fn(data);
        },
        error: function (e) {
          console.error(e);
          fn();
        }
      });
    }
    // èŽ·å–URL参数
    function getQueryStr(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      }
      return null;
    }
    document.onkeydown = function (e) {
      var ev = window.event || e;
      var code = ev.keyCode || ev.which || ev.charCode;
      if (code == 13) {
        sysLogin();
      }
    }
    // å¯†ç æ˜¯å¦åˆè§„
    function isValid(pwd) {
      if (pwd) {
        var regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$');
        return regex.test(pwd)
      }
      return false;
    }
  </script>
  <script src='../js/earth/dat.gui.min.js'></script>
  <script src='../js/earth/Stats.js'></script>
  <script src='../js/earth/css_globe_PerspectiveTransform.js'></script>
  <script src='../js/earth/TweenMax.min.js'></script>
  <script src="../js/earth/script.js"></script>
</body>
</html>
src/main/resources/templates/login_old.html
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,368 @@
<!DOCTYPE>
<html>
<head>
  <title>管道基础大数据平台服务-登录</title>
  <meta charset="utf-8" />
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <link href="../favicon.ico" rel="icon" type="image/x-icon" />
  <link href="../css/style.css" rel="stylesheet" />
  <script src="../js/jquery.min.js"></script>
  <script src="../js/jquery.cookie.min.js"></script>
  <script src="../js/zxcvbn.js"></script>
  <script src="../js/rsa.min.js"></script>
</head>
<body style="background-color: #0059cf; overflow-y: hidden !important;">
  <form method="post" id="fm1" class="fm-v clearfix" action="/sign/login">
    <div class="loginheader" style='display: none;'>
      <span class="loginname">单点登录</span>
      <img class="devline" src="../images/login/loginline.png" /><span class="lognameE">Log in</span>
    </div>
    <div id="topBg" style="background-color: #1a65c9; height: 30%; display: none;"></div>
    <div id='div_middle' class="loginmain">
      <div id='div_loginTitle' class="logintitle" style="display: none;"></div>
      <div id="topBgColor" style="background-color: #1a65c9; height: 19%; display: none;"></div>
      <div id='div_loginBox' class="logintable">
        <div id="loginBox_Title" style="height: 60px; line-height: 60px;">
          <span style="color: #fff; font-size: 50px; font-family: initial; font-weight: 700;">用户登录</span>
        </div>
        <!-- ç”¨æˆ·å -->
        <div class="loginid" style='width: 400px; margin-right: 50px; margin-top: 45px; border-bottom: 1px solid #fff;'>
          <label for="username"></label>
          <input class="required" id="username" placeholder="请输入用户名" size="20" tabindex="1"
            type="text" accesskey="n" autocomplete="off" name="username" value="admin" />
        </div>
        <!-- å¯†ç  -->
        <section>
          <div class="loginpwd" style='width: 400px; margin-right: 20px; margin-top: 30px; border-bottom: 1px solid #fff;'>
            <label for="password"></label>
            <input class="required" placeholder="请输入密码" type="password" id="password" size="20" tabindex="2"
              accesskey="p" autocomplete="off" name="password" value="Admin@1234_lf" /><span id="capslock-on" style="display: none;">
                <i class="fa fa-exclamation-circle"></i>
                <span>CAPSLOCK key is turned on!</span>
              </span>
          </div>
        </section>
        <section class="row check">
        </section>
        <!-- éªŒè¯ç  -->
        <section>
          <div class="loginvalifield" style="width: 400px; margin-right: 20px; margin-top: 30px; border-bottom: 1px solid #fff;">
            <div class="loginvalicode">
              <label for="inputCode"></label>
              <input id="inputCode" placeholder="请输入验证码" name="inputCode" class="required" tabindex="3" accesskey="v" type="text" value="" size="35" autocomplete="off" maxlength="6">
            </div>
            <span class="code" id="checkCode" onclick="createCode()"></span>
          </div>
        </section>
        <section>
          <div id="eMsg" style="color: red; height: 40px; line-height: 40px; font-size: 15px; margin-bottom: -20px; margin-left: 45px;"></div>
        </section>
        <!-- ç™»å½•按钮 -->
        <section>
          <input class="loginbtn" style="margin-top: 25px;" name="submit" accesskey="l" value="" tabindex="5" type="button" onclick="sysLogin();">
        </section>
      </div>
    </div>
    <div id='div_foot' style="display: none;">
      <span>技术支持:国家海洋信息中心</span>
    </div>
  </form>
  <script>
    var code;
    function createCode() {
      code = "";
      var codeLength = 4; //验证码的长度
      var checkCode = document.getElementById("checkCode");
      /* var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
      'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); */
      var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
      for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * 10);
        code += codeChars[charNum];
      }
      if (checkCode) {
        checkCode.className = "code";
        checkCode.innerHTML = code;
      }
    }
    var leftoffset = 474;
    // ç¦æ­¢åœ¨iframe打开
    function noIframe() {
      if (top.location != self.location) {
        window.top.location = self.location.href.split("?")[0];
      }
    }
    function autoResize() {
      var div_obj = document.getElementById("div_middle");
      //宽度自适应
      var fullWidth = document.body.offsetWidth;
      var div_loginBox = document.getElementById("div_loginBox");
      var boxWidth = div_loginBox.offsetWidth;
      var myWidth = div_obj.offsetWidth;
      //if (fullWidth > 1920) { fullWidth = 1920; }
      var winWidht = window.innerWidth;
      var winHeight = window.innerHeight - 100;
      var bgHeight = 1080;
      winWidht += 150;
      if (winWidht >= 1920) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1920/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "800px");
        $("#div_middle").css("height", "980px");
        $(".logintable").css("margin-top", "170px");
        div_loginBox.style.left = ((fullWidth - 410) / 2 + 474) + "px";
        bgHeight = 980; //1080
      } else if (winWidht >= 1600) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1600/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "800px");
        $("#loginBox_Title span").css("font-size", "40px");
        $(".loginid").css("margin-top", "35px").css("height", "45px").css("width", "350px").css("background", "url(../images/NewGJXJlogin/1600/user.png) no-repeat").css("background-position", "3% 40%");
        $(".loginid input").css("width", "306px").css("margin-left", "45px").css("font-size", "18px");
        $(".loginpwd").css("margin-top", "20px").css("height", "45px").css("width", "350px").css("background", "url(../images/NewGJXJlogin/1600/password.png) no-repeat").css("background-position", "3% 40%");
        $(".loginpwd input").css("width", "306px").css("margin-left", "45px").css("font-size", "18px");
        $(".loginvalicode").css("height", "45px").css("width", "270px").css("background", "url(../images/NewGJXJlogin/1600/code.png) no-repeat").css("background-position", "4.5% 40%");
        $(".loginvalicode input").css("width", "215px").css("margin-left", "49px").css("font-size", "18px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "350px").css("height", "45px");
        $("#inputCode").css("margin-left", "46px");
        $(".logintable").css("margin-top", "113px").css("width", "350px").css("height", "470px");
        //$(".logintable").css("margin-top", "210px").css("width", "350px").css("height", "470px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1600/add.png) no-repeat").css("background-position", "3% 40%");
        $("#carLink a").css("margin-left", "50px").css("font-size", "16px");
        $(".loginbtn").css("margin-top", "25px");
        leftoffset = 404;
        bgHeight = 800; //900
        div_loginBox.style.left = ((fullWidth - 360) / 2 + leftoffset) + "px";
      } else if (winWidht >= 1440) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1440/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "810px");
        $("#loginBox_Title").css("height", "50px").css("line-height", "50px");
        $("#loginBox_Title span").css("font-size", "36px");
        $(".loginid").css("margin-top", "20px").css("height", "45px").css("width", "320px").css("background", "url(../images/NewGJXJlogin/1440/user.png) no-repeat").css("background-position", "3% 40%");
        $(".loginid input").css("width", "276px").css("margin-left", "45px").css("font-size", "16px");
        $(".loginpwd").css("margin-top", "20px").css("height", "45px").css("width", "320px").css("background", "url(../images/NewGJXJlogin/1440/password.png) no-repeat").css("background-position", "3% 40%");
        $(".loginpwd input").css("width", "276px").css("margin-left", "45px").css("font-size", "16px");
        $(".loginvalicode").css("height", "45px").css("width", "240px").css("background", "url(../images/NewGJXJlogin/1440/code.png) no-repeat").css("background-position", "4.5% 40%");
        $(".loginvalicode input").css("width", "185px").css("margin-left", "49px").css("font-size", "16px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "320px").css("height", "45px");
        $(".logintable").css("margin-top", "201px").css("width", "320px").css("height", "420px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1440/add.png) no-repeat").css("background-position", "3.5% 40%").css("margin-top", "25px").css("height", "30px").css("line-height", "30px");
        $("#carLink a").css("margin-left", "50px").css("font-size", "16px");
        $(".loginbtn").css("margin-top", "25px").css("height", "50px");
        leftoffset = 357;
        bgHeight = 810;
        div_loginBox.style.left = ((fullWidth - 320) / 2 + leftoffset) + "px";
      } else if (winWidht >= 1366) {
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1366/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "668px");
        $("#loginBox_Title").css("height", "50px").css("line-height", "50px");
        $("#loginBox_Title span").css("font-size", "32px");
        $(".loginid").css("margin-top", "35px").css("height", "40px").css("width", "300px").css("background", "url(../images/NewGJXJlogin/1366/user.png) no-repeat").css("background-position", "3% 50%");
        $(".loginid input").css("width", "256px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginpwd").css("margin-top", "20px").css("height", "40px").css("width", "300px").css("background", "url(../images/NewGJXJlogin/1366/password.png) no-repeat").css("background-position", "3% 50%");
        $(".loginpwd input").css("width", "256px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginvalicode").css("height", "40px").css("width", "220px").css("background", "url(../images/NewGJXJlogin/1366/code.png) no-repeat").css("background-position", "4.5% 50%");
        $(".loginvalicode input").css("width", "165px").css("margin-left", "46px").css("font-size", "14px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "300px").css("height", "40px");
        $(".logintable").css("margin-top", "83px").css("width", "300px").css("height", "390px");
        //$(".logintable").css("margin-top", "135px").css("width", "300px").css("height", "390px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1366/add.png) no-repeat").css("background-position", "3.5% 50%").css("margin-top", "25px").css("height", "30px").css("line-height", "30px");
        $("#carLink a").css("margin-left", "50px").css("font-size", "14px");
        $(".loginbtn").css("margin-top", "10px").css("height", "56px");
        leftoffset = 338;
        bgHeight = 668; //731
        div_loginBox.style.left = ((fullWidth - 300) / 2 + leftoffset) + "px";
      } else {
        //fullWidth = 1280;
        $("#div_middle").css("background", "url(../images/NewGJXJlogin/1280/2bg.jpg) no-repeat").css("background-position", "center bottom").css("height", "620px");
        $("#loginBox_Title").css("height", "50px").css("line-height", "50px");
        $("#loginBox_Title span").css("font-size", "32px");
        $(".loginid").css("margin-top", "27px").css("height", "40px").css("width", "280px").css("background", "url(../images/NewGJXJlogin/1280/user.png) no-repeat").css("background-position", "3% 50%");
        $(".loginid input").css("width", "236px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginpwd").css("margin-top", "20px").css("height", "40px").css("width", "280px").css("background", "url(../images/NewGJXJlogin/1280/password.png) no-repeat").css("background-position", "3% 50%");
        $(".loginpwd input").css("width", "236px").css("margin-left", "45px").css("font-size", "14px");
        $(".loginvalicode").css("height", "40px").css("width", "200px").css("background", "url(../images/NewGJXJlogin/1280/code.png) no-repeat").css("background-position", "4.5% 50%");
        $(".loginvalicode input").css("width", "145px").css("margin-left", "46px").css("font-size", "14px");
        $(".loginvalifield").css("margin-top", "20px").css("width", "280px").css("height", "40px");
        $(".logintable").css("margin-top", "70px").css("width", "280px").css("height", "380px");
        $("#carLink div").css("background", "url(../images/NewGJXJlogin/1280/add.png) no-repeat").css("background-position", "3.5% 50%").css("margin-top", "25px").css("height", "30px").css("line-height", "30px");
        $("#carLink a").css("margin-left", "50px").css("font-size", "14px");
        $(".loginbtn").css("margin-top", "0px").css("height", "50px");
        leftoffset = 314;
        bgHeight = 620;
        div_loginBox.style.left = ((fullWidth - 280) / 2 + leftoffset) + "px";
        $("body").css("overflow", "hidden");
      }
      div_obj.style.width = fullWidth + "px";
      if (winHeight > bgHeight) {
        div_obj.style.height = winHeight + "px";
        var marginTop = parseFloat($(".logintable").css("margin-top").replace("px")) + (winHeight - bgHeight);
        $(".logintable").css("margin-top", marginTop + "px");
      }
      //高度自适应
      var fullHeight = document.body.offsetHeight;
      var myHeight = div_obj.offsetHeight;
      if (fullHeight > myHeight) {
        //div_obj.style.marginTop = ((fullHeight - myHeight) / 2) + "px";
      }
      var div_loginTitle = document.getElementById("div_loginTitle");
      var titleWidth = div_loginTitle.offsetWidth;
      div_loginTitle.style.left = (fullWidth - titleWidth) / 2 + "px";
    }
    window.onload = function () {
      noIframe();
      createCode();
      autoResize();
      getPublicKey();
      $(window).on("resize", autoResize);
      //document.getElementById('username').focus();
      document.getElementById('inputCode').focus();
    }
  </script>
  <script>
    function getPublicKey() {
      $.get("getPublicKey", function (rs) {
        if (rs && rs.code == 200) {
          window.encrypt = new JSEncrypt();
          encrypt.setPublicKey(rs.result);
        }
      });
    }
    function sysValidate() {
      // éªŒè¯ç”¨æˆ·åä¸Žå¯†ç 
      var theUsername = document.getElementById("username").value;
      if (theUsername.length <= 0) {
        $("#eMsg").html("提示:请输入用户名!");
        $("#username").focus();
        return false;
      }
      var thePassword = document.getElementById("password").value;
      if (thePassword.length <= 0) {
        $("#eMsg").html("提示:请输入密码!");
        $("#password").focus();
        return false;
      }
      /*if (!isValid(thePassword)) {
        $("#eMsg").html("提示:密码为8-20位包含字母、数字和特殊字符!");
        $("#password").focus();
        return false;
      }*/
      // éªŒè¯éªŒè¯ç 
      var inputCode = document.getElementById("inputCode").value;
      if (inputCode.length <= 0) {
        $("#eMsg").html("提示:请输入验证码!");
        $("#inputCode").focus();
        return false;
      }
      if (inputCode.toUpperCase() != code.toUpperCase()) {
        $("#eMsg").html("提示:验证码输入有误!");
        $("#inputCode").val("").focus();
        createCode();
        return false;
      }
      return true;
    }
    window.isBusy = false;
    function sysLogin() {
      if (isBusy || !sysValidate()) {
        return;
      }
      isBusy = true;
      var username = $.trim($("#username").val());
      var password = $("#password").val();
      var service = getQueryStr("service");
      var data = {
        "uid": encrypt.encrypt(username),
        "pwd": encrypt.encrypt(password)
      };
      $.ajax({
        url: "login",
        type: "POST",
        data: JSON.stringify(data),
        dataType: "json", // html、json、jsonp、script、text
        contentType: "application/json", // "application/json", "application/x-www-form-urlencoded",
        success: function (rs) {
          isBusy = false;
          if (!rs || rs.code !== 200) {
            createCode();
            var msg = rs && rs.msg ? rs.msg : "登录失败!";
            $("#eMsg").html(msg);
            return;
          }
          if (rs.msg) alert(rs.msg);
          var service = getQueryStr("service");
          if (service) {
            service += (service.indexOf("?") > -1 ? "&" : "?") + "token=" + rs.result.token;
            location.href = service;
            return;
          }
          location.href = location.href.replace("/sign/toLogin", "/sign/toIndex");
        },
        error: function (e) {
          isBusy = false;
          console.error(e);
          alert("登录出错,请联系管理员!");
        }
      });
    }
    function ajax(url, type, data, dataType, contentType, fn, efn) {
      $.ajax({
        url: url,
        type: type,
        data: data,
        dataType: dataType || "json", // html、json、jsonp、script、text
        contentType: contentType || "application/json", // "application/x-www-form-urlencoded"
        success: function (data) {
          fn(data);
        },
        error: function (e) {
          console.error(e);
          fn();
        }
      });
    }
    // èŽ·å–URL参数
    function getQueryStr(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      }
      return null;
    }
    document.onkeydown = function (e) {
      var ev = window.event || e;
      var code = ev.keyCode || ev.which || ev.charCode;
      if (code == 13) {
        sysLogin();
      }
    }
    // å¯†ç æ˜¯å¦åˆè§„
    function isValid(pwd) {
      if (pwd) {
        var regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$');
        return regex.test(pwd)
      }
      return false;
    }
  </script>
</body>
</html>