新增登录功能

f10bc16d · hjdhnx · e262ce6b · f10bc16d · f10bc16d · f10bc16d
9 changed file
--- a/static/img/check.png
+++ b/static/img/check.png
--- a/static/img/checked.png
+++ b/static/img/checked.png
--- a/static/img/login_background.png
+++ b/static/img/login_background.png
--- a/static/img/logo.png
+++ b/static/img/logo.png
--- a/static/js/app.js
+++ b/static/js/app.js
+/* -----------------------------------------------
+/* How to use? : Check the GitHub README
+/* ----------------------------------------------- */
+
+/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
+/*
+particlesJS.load('particles-js', 'particles.json', function() {
+  console.log('particles.js loaded - callback');
+});
+*/
+
+/* Otherwise just put the config content (json): */
+
+particlesJS('particles-js',
+  
+  {
+    "particles": {
+      "number": {
+        "value": 80,
+        "density": {
+          "enable": true,
+          "value_area": 800
+        }
+      },
+      "color": {
+        "value": "#ffffff"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#000000"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.5,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 5,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 150,
+        "color": "#ffffff",
+        "opacity": 0.4,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "repulse"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 400,
+          "size": 40,
+          "duration": 2,
+          "opacity": 8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 200
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true,
+    "config_demo": {
+      "hide_card": false,
+      "background_color": "#b61924",
+      "background_image": "",
+      "background_position": "50% 50%",
+      "background_repeat": "no-repeat",
+      "background_size": "cover"
+    }
+  }
+
+);
\ No newline at end of file
--- a/static/sweetalert/sweetalert-dev.js
+++ b/static/sweetalert/sweetalert-dev.js
--- a/static/sweetalert/sweetalert.css
+++ b/static/sweetalert/sweetalert.css
--- a/templates/admin.html
+++ b/templates/admin.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>管理员界面</title>
+    <meta charset="utf-8">
+  <title>管理员操作中心</title>
+  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
+  <meta name="author" content="道长"/>
+  <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="/static/css/login.css">
+  <link rel="icon" href="/static/img/logo.png" type="image/x-icon">
 </head>
 <body>
 <h1>欢迎使用py_dr管理员界面</h1>

--- a/templates/login.html
+++ b/templates/login.html
+<!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="道长"/>
+  <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="/static/css/login.css">
+  <link rel="icon" href="/static/img/logo.png" type="image/x-icon">
+</head>
+<body>
+<!-- particles.js container -->
+<div id="particles-js" style="display: flex;align-items: center;justify-content: center">
+</div>
+<div class="login-page">
+   <div class="login-content">
+     <div class="login-tit">用户登录</div>
+     <div class="login-input">
+       <input type="text" id="username" placeholder="账号">
+     </div>
+     <div class="login-input">
+      <input type="password" id="password" placeholder="密码">
+    </div>
+    <div class="login-btn">
+      <div class="login-btn-left" onClick="login()">
+        <span>登录</span>
+      </div>
+    
+      <div class="login-btn-right" onClick="changeImg('autologin')">
+        <img src="/static/img/check.png" alt="" id="picture_autologin"> 7天内自动登录
+      </div>
+      <div class="login-btn-right" onClick="changeImg('remember')">
+        <img src="/static/img/check.png" alt="" id="picture_remember"> 记住密码
+      </div>
+    </div>
+   </div>
+</div>
+
+
+<!-- scripts -->
+<script src="/static/js/particles.js"></script>
+<script src="/static/js/app.js"></script>
+<script src="/static/js/jquery.min.js"></script>
+<link rel="stylesheet" type="text/css" href="/static/sweetalert/sweetalert.css">
+<script type="text/javascript" src="/static/sweetalert/sweetalert-dev.js"></script>
+
+<script>
+$('#picture_autologin').attr('src',"/static/img/checked.png");
+  function changeImg(id){
+      let pic = $('#picture_'+id);
+    if(pic.attr('src') ==="/static/img/check.png"){
+      pic.attr('src',"/static/img/checked.png")
+    }else{
+    pic.attr('src',"/static/img/check.png")
+    }
+  }
+
+  function login(){
+  var username = $('#username').val();
+  var password = $('#password').val();
+  var autologin = "no";
+  let pic = $('#picture_autologin');
+  if(pic.attr("src") ==="/static/img/checked.png"){
+      autologin = "yes";
+  }
+  console.log(username+"--"+password+'--'+autologin);
+  if (username!=="" && password!==""){
+  var json = {"username":username,"password":password,"autologin":autologin,"login":"1"};
+  // ajax_post("login.php",json,backmsg);
+  console.log(json);
+  $.post("/api/login",json,function(result){
+    console.log(result);
+    if(result.code === 200){
+        console.log('登录成功');
+        swal({
+					title : "登录提示",
+					text : "登录成功！\n是否重载页面?",
+					type : "success",
+					showCancelButton : true,
+					confirmButtonColor : '#DD6B55',
+					confirmButtonText : '确定',
+					cancelButtonText : "取消",
+					closeOnConfirm : false
+				},
+				function(isConfirm) {
+					if (isConfirm) {
+					    location.reload();
+                    }
+                }
+        );
+        // swal("登录提示","登录成功！\n正在进入个人中心","success");
+        // location.href = '/admin'
+    }else{
+        swal("登录失败！\n用户名或密码错误，请重试！","","error");
+    }
+  });
+  }else{
+      alert('用户密码必填!');
+  }
+  }
+
+</script>
+</body>
+</html>
\ No newline at end of file