|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>半自动标注用户登录界面</title>
- <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
- <meta name="author" content="Vincent Garreau" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <link rel="stylesheet" media="screen" href="css/login_style.css">
- <link rel="stylesheet" type="text/css" href="css/login_reset.css"/>
- </head>
- <body>
-
- <div id="particles-js">
- <div class="login">
- <div class="login-top">
- 登录
- </div>
- <div class="login-center clearfix">
- <div class="login-center-img"><img src="img/name.png"/></div>
- <div class="login-center-input">
- <input type="text" name="userName" id="userNameId" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
- <div class="login-center-input-text">用户名</div>
- </div>
- </div>
- <div class="login-center clearfix">
- <div class="login-center-img"><img src="img/password.png"/></div>
- <div class="login-center-input">
- <input type="password" name="password" id="passwordId" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
- <div class="login-center-input-text">密码</div>
- </div>
- </div>
- <div class="login-button" onclick="login()">
- 登录
- </div>
- </div>
- <div class="sk-rotating-plane"></div>
- </div>
-
- <!--
- <script src="js/particles.min.js"></script>
- <script src="js/login_app.js"></script> scripts -->
- <script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
- <script type="text/javascript" src="./js/jquery.base64.js"></script>
-
- <script src="js/func.js?v=20230314"></script>
-
- <script type="text/javascript">
- var ip = getIp();
-
- function hasClass(elem, cls) {
- cls = cls || '';
- if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
- return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
- }
-
- function addClass(ele, cls) {
- if (!hasClass(ele, cls)) {
- ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
- }
- }
-
- function encodeBase64(mingwen,times){
- var code="";
- var num=1;
- if(typeof times=='undefined'||times==null||times==""){
- num=1;
- }else{
- var vt=times+"";
- num=parseInt(vt);
- }
- if(typeof mingwen=='undefined'||mingwen==null||mingwen==""){
-
- }else{
- $.base64.utf8encode = true;
- code=mingwen;
- for(var i=0;i<num;i++){
- code=$.base64.btoa(code);
- }
- }
- return code;
- }
-
-
- function loginout(){
- console.log("start del cookie");
- var token = getCookie("token");
- var userName = getCookie("userName");
-
- if(!isEmpty(token)){
- $.ajax({
- type:"POST",
- url:ip + "/api/api-jwt-loginout/",
- headers: {
- authorization:token,
- },
- dataType:"json",
- async:false,
- data:{'username':userName,
- 'token':token},
- success:function(json){
- console.log(json);
- },
- error:function(err){
- console.log(err);
- }
- });
- }
-
- setCookie("token","");
- setCookie("userName","");
- setCookie("nickName","");
- setCookie("userType","");
- }
-
- loginout();
-
- function login(){
- var userName = $("#userNameId").val();
- var password = $("#passwordId").val();
-
- $.ajax({
- type:"POST",
- url:ip + "/api/api-jwt-auth/",
- dataType:"json",
- async:false,
- data:{'username':userName,
- 'password':encodeBase64(password,10)},
- success:function(json){
- userinfo=json;
- if(!isEmpty(userinfo.code)){
- if(userinfo.code != 0){
- console.log(userinfo);
- alert("登录失败。" + userinfo.message);
- return;
- }
- }
- //console.log(json);
- token = "JWT "+json.token;
- setCookie("token",token);
- setCookie("userName",userName);
- setCookie("nickName",json.nickName);
- setCookie("userType",json.userType);
- sessionStorage.setItem("token",token);
- sessionStorage.setItem("userType",json.userType);
- sessionStorage.setItem("userName",userName);
- window.location.href = "/index.html";
- },
- error:function(err){
- console.log(err);
- alert("登录失败,用户名或密码错误。");
- }
- });
- };
-
-
- function removeClass(ele, cls) {
- if (hasClass(ele, cls)) {
- var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
- while (newClass.indexOf(' ' + cls + ' ') >= 0) {
- newClass = newClass.replace(' ' + cls + ' ', ' ');
- }
- ele.className = newClass.replace(/^\s+|\s+$/g, '');
- }
- }
-
-
- $('#passwordId').on('keypress',function(event){
- if(event.keyCode == 13) {
- login();
- }
-
- });
-
- </script>
- </body>
- </html>
|