3 years ago · 6892040380
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,39 @@
 
				+.main{
			
 
				+    width: 500px;
			
 
				+    margin: auto;
			
 
				+    margin-top:15%;
			
 
				+    border:1px solid #ccc;
			
 
				+}
			
 
				+.main form{
			
 
				+    margin: 45px 20px;
			
 
				+}
			
 
				+.top{
			
 
				+    height: 10%;
			
 
				+    background: #ccc;
			
 
				+}
			
 
				+.bottom{
			
 
				+    position:absolute;
			
 
				+    height: 5%;
			
 
				+    background: #ccc;
			
 
				+    bottom: 0px;
			
 
				+}
			
 
				+.layui-fluid{
			
 
				+    padding:0px;
			
 
				+}
			
 
				+.container{
			
 
				+    height: 100vh;
			
 
				+}
			
 
				+.content{
			
 
				+    height: 80%;
			
 
				+    padding: 30px;
			
 
				+}
			
 
				+.item{
			
 
				+    height: 30%;
			
 
				+    /* border:1px solid red; */
			
 
				+}
			
 
				+.item .task{
			
 
				+    border:1px solid #23e;
			
 
				+    border-radius: 5px;
			
 
				+    height: 100%;
			
 
				+    background: #ddd;
			
 
				+}
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,126 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="layui/css/layui.css" media="all">
			
 
				+  <link rel="stylesheet" href="css/index.css" media="all">
			
 
				+
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div class="layui-fluid container">
			
 
				+    <div class="layui-row top">
			
 
				+      <div class="layui-col-lg12">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-row layui-col-space10 content">
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+          <div class="task">
			
 
				+
			
 
				+          </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-col-lg3 item">
			
 
				+        <div class="task">
			
 
				+
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="layui-row">
			
 
				+      <div class="layui-col-lg12 bottom"></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
			
 
				+  <script src="layui/layui.js" charset="utf-8"></script>
			
 
				+  <script src="js/api.js" charset="utf-8"></script>
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
			
 
				+  <script>
			
 
				+    layui.use(['form'], function () {
			
 
				+      var form = layui.form
			
 
				+      layer = layui.layer
			
 
				+      //自定义验证规则
			
 
				+      form.verify({
			
 
				+        username: function (value) {
			
 
				+          console.log(value)
			
 
				+          if (value.length < 1) {
			
 
				+            return '请输入用户名!';
			
 
				+          }
			
 
				+        }
			
 
				+        , password: [
			
 
				+          /^[\S]{6,12}$/
			
 
				+          , '密码必须6到12位，且不能出现空格!'
			
 
				+        ]
			
 
				+      });
			
 
				+      //监听提交
			
 
				+      form.on('submit(login)', function (data) {
			
 
				+        var data = form.val("login")
			
 
				+        LayuiPostJson({
			
 
				+          url: LOGINAPI,
			
 
				+          data: data
			
 
				+        }).then(res => {
			
 
				+          localStorage.setItem("token",res.access_token)
			
 
				+        }).catch(err => {
			
 
				+          layer.msg("账号或密码错误!")
			
 
				+        })
			
 
				+        return false;
			
 
				+      });
			
 
				+    });
			
 
				+  </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/js/api.js
+++ b/js/api.js
@@ -0,0 +1,43 @@
 
				+var LayuiGetJson = param => {
			
 
				+    return new Promise((resovle, reject) => {
			
 
				+        $.ajax({
			
 
				+            type: param.type || "get",
			
 
				+            async: param.async || true,
			
 
				+            url: param.url,
			
 
				+            data: param.data || {},
			
 
				+            header:{
			
 
				+                "Content-Type": "application/json;charset=utf-8",
			
 
				+                "Authorization":"Bearer " + localStorage.getItem("token")
			
 
				+            },
			
 
				+            success: res => {
			
 
				+                resovle(res);
			
 
				+            },
			
 
				+            error: err => {
			
 
				+                reject(err);
			
 
				+            }
			
 
				+        })
			
 
				+    })
			
 
				+}
			
 
				+var LayuiPostJson = param => {
			
 
				+    return new Promise((resovle, reject) => {
			
 
				+        $.ajax({
			
 
				+            type: param.type || "post",
			
 
				+            async: param.async || true,
			
 
				+            url: param.url,
			
 
				+            data: param.data || {},
			
 
				+            header:{
			
 
				+                "Content-Type": "application/json;charset=utf-8",
			
 
				+                "Authorization":"Bearer " + localStorage.getItem("token")
			
 
				+            },
			
 
				+            success: res => {
			
 
				+                resovle(res);
			
 
				+            },
			
 
				+            error: err => {
			
 
				+                reject(err);
			
 
				+            }
			
 
				+        })
			
 
				+    })
			
 
				+}
			
 
				+// 接口配置
			
 
				+const HOST = "http://47.108.130.28:8000"
			
 
				+var LOGINAPI = HOST + "/v1/login"
			
--- a/layui/css/layui.css
+++ b/layui/css/layui.css
--- a/layui/css/modules/code.css
+++ b/layui/css/modules/code.css
--- a/layui/css/modules/laydate/default/laydate.css
+++ b/layui/css/modules/laydate/default/laydate.css
--- a/layui/css/modules/layer/default/icon-ext.png
+++ b/layui/css/modules/layer/default/icon-ext.png
--- a/layui/css/modules/layer/default/icon.png
+++ b/layui/css/modules/layer/default/icon.png
--- a/layui/css/modules/layer/default/layer.css
+++ b/layui/css/modules/layer/default/layer.css
--- a/layui/css/modules/layer/default/loading-0.gif
+++ b/layui/css/modules/layer/default/loading-0.gif
--- a/layui/css/modules/layer/default/loading-1.gif
+++ b/layui/css/modules/layer/default/loading-1.gif
--- a/layui/css/modules/layer/default/loading-2.gif
+++ b/layui/css/modules/layer/default/loading-2.gif
--- a/layui/font/iconfont.eot
+++ b/layui/font/iconfont.eot
--- a/layui/font/iconfont.svg
+++ b/layui/font/iconfont.svg
--- a/layui/font/iconfont.ttf
+++ b/layui/font/iconfont.ttf
--- a/layui/font/iconfont.woff
+++ b/layui/font/iconfont.woff
--- a/layui/font/iconfont.woff2
+++ b/layui/font/iconfont.woff2
--- a/layui/layui.js
+++ b/layui/layui.js
--- a/login.html
+++ b/login.html
@@ -0,0 +1,78 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <title>Layui</title>
			
 
				+  <meta name="renderer" content="webkit">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
			
 
				+  <link rel="stylesheet" href="layui/css/layui.css" media="all">
			
 
				+  <link rel="stylesheet" href="css/index.css" media="all">
			
 
				+
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div class="main">
			
 
				+    <form class="layui-form" action="" lay-filter="login">
			
 
				+      <div class="layui-form-item">
			
 
				+        <label class="layui-form-label">用户名</label>
			
 
				+        <div class="layui-input-block">
			
 
				+          <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名"
			
 
				+            class="layui-input">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-form-item">
			
 
				+        <label class="layui-form-label">密码</label>
			
 
				+        <div class="layui-input-block">
			
 
				+          <input type="password" name="password" lay-verify="password" lay-reqtext="请输入密码" placeholder="请输入密码"
			
 
				+            autocomplete="off" class="layui-input">
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <div class="layui-form-item">
			
 
				+        <div class="layui-input-block">
			
 
				+          <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">登录</button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </form>
			
 
				+  </div>
			
 
				+  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
			
 
				+  <script src="layui/layui.js" charset="utf-8"></script>
			
 
				+  <script src="js/api.js" charset="utf-8"></script>
			
 
				+  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
			
 
				+  <script>
			
 
				+    layui.use(['form'], function () {
			
 
				+      var form = layui.form
			
 
				+      layer = layui.layer
			
 
				+      //自定义验证规则
			
 
				+      form.verify({
			
 
				+        username: function (value) {
			
 
				+          console.log(value)
			
 
				+          if (value.length < 1) {
			
 
				+            return '请输入用户名!';
			
 
				+          }
			
 
				+        }
			
 
				+        , password: [
			
 
				+          /^[\S]{6,12}$/
			
 
				+          , '密码必须6到12位，且不能出现空格!'
			
 
				+        ]
			
 
				+      });
			
 
				+      //监听提交
			
 
				+      form.on('submit(login)', function (data) {
			
 
				+        var data = form.val("login")
			
 
				+        LayuiPostJson({
			
 
				+          url: LOGINAPI,
			
 
				+          data: data
			
 
				+        }).then(res => {
			
 
				+          localStorage.setItem("token",res.access_token)
			
 
				+        }).catch(err => {
			
 
				+          layer.msg("账号或密码错误!")
			
 
				+        })
			
 
				+        return false;
			
 
				+      });
			
 
				+    });
			
 
				+  </script>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>