root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

format:代码

master
bobi 2019-11-01 14:39:03 +08:00
parent e9069f2a58
commit 9bbbba7b31
4 changed files with 592 additions and 581 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -8,10 +8,10 @@
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="../../nodejs/gulp_util/css/okadmin.theme.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin okadmin blue_theme"><!-- 主题在此加 例子orange_theme -->
<!-- 更换主体 Eg:orange_theme|blue_theme -->
<div class="layui-layout layui-layout-admin okadmin blue_theme">
<!--头部导航-->
<div class="layui-header okadmin-header">
<ul class="layui-nav layui-layout-left">
@ -103,8 +103,10 @@
<!-- 内容主体区域 -->
<div class="content-body">
<div class="layui-tab ok-tab" lay-filter="ok-tab" lay-allowClose="true" lay-unauto>
<div data-id="left" id="okLeftMove" class="ok-icon ok-icon-back okadmin-tabs-control move-left okNavMove"></div>
<div data-id="right" id="okRightMove" class="ok-icon ok-icon-right okadmin-tabs-control move-right okNavMove"></div>
<div data-id="left" id="okLeftMove"
class="ok-icon ok-icon-back okadmin-tabs-control move-left okNavMove"></div>
<div data-id="right" id="okRightMove"
class="ok-icon ok-icon-right okadmin-tabs-control move-right okNavMove"></div>
<div class="layui-icon okadmin-tabs-control ok-right-nav-menu" style="right: 0;">
<ul class="okadmin-tab">
<li class="no-line okadmin-tab-item">
@ -127,7 +129,8 @@
<div id="tabContent" class="layui-tab-content ok-tab-content">
<div class="layui-tab-item layui-show">
<iframe src='pages/console.html' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
<iframe src='pages/console.html' frameborder="0" scrolling="yes" width="100%"
height="100%"></iframe>
</div>
</div>
</div>
@ -135,7 +138,7 @@
<!--底部信息-->
<div class="layui-footer okadmin-text-center">
Copyright ©2019-©2020 ok-admin v2.0 All Rights Reserved
Copyright ©2018-©2019 ok-admin v2.0 All Rights Reserved
<button class="layui-btn layui-btn-danger layui-btn-xs donate">捐赠作者</button>
<button class="layui-btn layui-btn-danger layui-btn-xs communication">QQ群交流</button>
</div>

178
pages/forget.html
View File

@ -2,124 +2,169 @@
<html lang="en" class="page-fill">
<head>
<meta charset="UTF-8">
<title>ok-admin v2.0 | 很赞的后台模版 - 注册</title>
<title>ok-admin v2.0 | 很赞的后台模版 - 忘记密码</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="../css/oksub.css"/>
<style>
.register .tit {
.forget .tit {
padding-top: 15px;
text-align: center;
font-size: 18px;
}
.register .code-box {
.forget .code-box {
display: flex;
}
.register .code-box .btn-auth-code {
.forget .code-box .btn-auth-code {
margin-left: 10px;
}
.form-reset{
.reset-password-form {
display: none;
}
</style>
</head>
<body class="page-fill">
<div class="page-fill register" id="login">
<form class="layui-form form-verify">
<div class="page-fill forget" id="login">
<form class="layui-form verify-user-form">
<div class="layui-form-item tit">忘记密码</div>
<div class="layui-form-item input-item">
<label for="username">用户名</label>
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username"
class="layui-input">
<input type="text" class="layui-input" id="username" name="username" placeholder="请输入账号" autocomplete="off" lay-verify="required">
</div>
<div class="layui-form-item input-item">
<label for="phone">输入手机号</label>
<input type="text" lay-verify="required|phone" name="text" placeholder="请输入手机号"
autocomplete="off" id="phone" maxlength="11" class="layui-input">
<label for="phone">输入手机号码</label>
<input type="text" class="layui-input" id="phone" name="text" placeholder="请输入手机号码" autocomplete="off" lay-verify="required|phone" maxlength="11">
</div>
<div class="layui-form-item input-item code-box">
<label for="authCode">验证码</label>
<input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码"
id="authCode" autocomplete="off" maxlength="8" class="layui-input">
<label for="captcha">验证码</label>
<input type="text" class="layui-input" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" lay-verify="required" maxlength="4">
<button type="button" class="layui-btn btn-auth-code">获取验证码</button>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-block" lay-filter="submitVerify" lay-submit="">提交</button>
<button class="layui-btn layui-block" lay-filter="verifyUser" lay-submit="">提 交</button>
</div>
<div class="login-link">
<a href="./login.html">再去登录试试</a>
<a href="login.html">再去登录试试</a>
</div>
</form>
<form class="layui-form form-reset">
<form class="layui-form reset-password-form">
<div class="layui-form-item tit">设置密码</div>
<div class="layui-form-item input-item">
<label for="password">新密码</label>
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off"
id="password" class="layui-input">
<input type="password" class="layui-input" id="password" name="password" placeholder="请输入密码" autocomplete="off" lay-verify="required|password">
</div>
<div class="layui-form-item input-item">
<label for="comPassword">确认密码</label>
<input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off"
id="comPassword" class="layui-input">
<input type="password" class="layui-input" id="comPassword" name="password" placeholder="请确认密码" autocomplete="off" lay-verify="required|comPassword">
</div>
<div class="layui-form-item">
<button class="layui-btn layui-block" lay-filter="submitSetting" lay-submit="">确定设置</button>
<button class="layui-btn layui-block" lay-filter="resetPassword" lay-submit="">确定设置</button>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../lib/layui/layui.js"></script>
<script>
layui.use(["form", "okGVerify", "okLayer"], function () {
let form = layui.form;
layui.use(["form", "okLayer", "okUtils"], function () {
let $ = layui.jquery;
let okGVerify = layui.okGVerify;
let form = layui.form;
let okLayer = layui.okLayer;
let regPhone = /^[1][0-9]{10}$/;/**手机号验证**/
let setInter = '';/**定时器对象*/
let second = 60;//设置时间
let isSetPassword = false;//是否显示重设密码
let okUtils = layui.okUtils;
let phoneRegex = /^[1][0-9]{10}$/;
let timer = "";
let intervalTime = 60;
/**
* 数据校验
*/
form.verify({
phone: [phoneRegex, "手机号格式不正确"],
password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
phone: [
regPhone,
'输入的手机号格式不正确，请重新输入'
],
comPassword: function (val) {
let password = $("#password").val();
return password == val ? '' : "两次密码不一致";
return password == val ? "" : "两次密码不一致";
}
});
/**
* 验证手机号表单提交
* 提交表单
*/
form.on("submit(submitVerify)", function (data) {
console.log("验证手机号",data);
okLayer.msg.greenTick("验证成功,重设密码", function () {
clearInterval(setInter);
clearInterval(setInter);
form.on("submit(verifyUser)", function (data) {
okUtils.ajax("/verifyUser", "post", data.field, true).done(function (response) {
console.log(response);
okLayer.msg.greenTick(response.msg, function () {
// 样式修改
$('.btn-auth-code').removeClass("layui-btn-disabled");
$('.btn-auth-code').text("重新获取");
setInter = "";
second = 60;
$(".form-verify,.form-reset").toggle();
// 重置定时器
clearInterval(timer);
timer = "";
intervalTime = 60;
// 显示重置密码表单
$(".verify-user-form, .reset-password-form").toggle();
});
}).fail(function (error) {
console.log(error)
});
return false;
});
/**重新设置密码**/
form.on("submit(submitSetting)", function (data) {
console.log("重新设置密码",data);
okLayer.msg.greenTick("密码重置成功,马上去登录", function () {
window.location = "./login.html";
/**
* 获取验证码
*/
$('.btn-auth-code').click(function () {
let _this = $(this);
if (_this.hasClass("layui-btn-disabled")) {
return;
}
let phone = $("#phone").val();
if (phoneRegex.test(phone)) {
_this.addClass("layui-btn-disabled");
_this.text(intervalTime + "秒后获取");
// 按钮操作定时器
timer = setInterval(function () {
intervalTime--;
if (intervalTime < 1) {
clearInterval(timer);
_this.removeClass("layui-btn-disabled");
_this.text("重新获取");
intervalTime = 60;
} else {
_this.text(intervalTime + "秒后获取");
}
}, 1000);
// 发送手机验证码
okUtils.ajax("/sendCaptcha", "post", null, true).done(function (response) {
console.log(response);
okLayer.msg.greenTick(response.msg);
}).fail(function (error) {
console.log(error)
});
} else {
layer.msg("手机号码格式不正确", {icon: "5", anim: "6"});
$("#phone").focus();
}
});
/**
* 重置密码
*/
form.on("submit(resetPassword)", function (data) {
okUtils.ajax("/resetPassword", "post", data.field, true).done(function (response) {
console.log(response);
okLayer.msg.greenTick(response.msg, function () {
window.location = "login.html";
});
}).fail(function (error) {
console.log(error)
});
return false;
});
@ -150,41 +195,6 @@
$(this).parent().removeClass("layui-input-active");
}
});
/**获取验证码**/
$('.btn-auth-code').click(function () {
let that = $(this),
phone = $("#phone").val();
if($(this).hasClass("layui-btn-disabled")){
return;
}
if(regPhone.test(phone)){
if(!setInter){
clearInterval(setInter);
that.addClass("layui-btn-disabled");
that.text(second+"秒后获取");
setInter = setInterval(function () {
second--;
if(second < 1){
clearInterval(setInter);
that.removeClass("layui-btn-disabled");
that.text("重新获取");
setInter = "";
second = 60;
}else{
that.text(second+"秒后获取");
}
},1000);
}
}else{
layer.msg("输入的手机号格式不正确，请重新输入",{
icon:"5",
anim:"6",
});
$("#phone").focus();
}
});
});
</script>
</body>

9
pages/login.html
View File

@ -30,20 +30,19 @@
<button class="layui-btn layui-block" lay-filter="login" lay-submit="">登录</button>
</div>
<div class="login-link">
<a href="./register.html">注册</a>
<a href="./forget.html">忘记密码?</a>
<a href="register.html">注册</a>
<a href="forget.html">忘记密码?</a>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../lib/layui/layui.js"></script>
<script>
layui.use(["form", "okGVerify", "okUtils", "okMock", "okLayer"], function () {
layui.use(["form", "okGVerify", "okUtils", "okLayer"], function () {
let form = layui.form;
let $ = layui.jquery;
let okGVerify = layui.okGVerify;
let okUtils = layui.okUtils;
let okMock = layui.okMock;
let okLayer = layui.okLayer;
/**
@ -67,7 +66,7 @@
* 表单提交
*/
form.on("submit(login)", function (data) {
okUtils.ajax(okMock.api.login, "post", data.field, true).done(function (response) {
okUtils.ajax("/login", "post", data.field, true).done(function (response) {
console.log(response);
okLayer.msg.greenTick(response.msg, function () {
window.location = "../index.html";

27
pages/register.html
View File

@ -13,14 +13,17 @@
margin: 0;
transform: translate(-50%, -50%);
}
.register .tit {
padding-top: 15px;
text-align: center;
font-size: 18px;
}
.register .code-box {
display: flex;
}
.register .code-box .btn-auth-code {
margin-left: 10px;
}
@ -32,35 +35,30 @@
<div class="layui-form-item tit">注册</div>
<div class="layui-form-item input-item">
<label for="username">用户名</label>
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username"
class="layui-input">
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input">
</div>
<div class="layui-form-item input-item">
<label for="password">密码</label>
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off"
id="password" class="layui-input">
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
</div>
<div class="layui-form-item input-item">
<label for="comPassword">确认密码</label>
<input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off"
id="comPassword" class="layui-input">
<input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off" id="comPassword" class="layui-input">
</div>
<div class="layui-form-item input-item">
<label for="phone">输入手机号</label>
<input type="password" lay-verify="required|phone" name="text" placeholder="请输入手机号"
autocomplete="off" id="phone" maxlength="11" class="layui-input">
<input type="password" lay-verify="required|phone" name="text" placeholder="请输入手机号" autocomplete="off" id="phone" maxlength="11" class="layui-input">
</div>
<div class="layui-form-item input-item code-box">
<label for="authCode">验证码</label>
<input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码"
id="authCode" autocomplete="off" maxlength="8" class="layui-input">
<input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码" id="authCode" autocomplete="off" maxlength="8" class="layui-input">
<button type="button" class="layui-btn btn-auth-code">获取验证码</button>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-block" lay-filter="login" lay-submit="">注册</button>
</div>
<div class="login-link">
<a href="./login.html">有账号去登录</a>
<a href="login.html">有账号去登录</a>
</div>
</form>
</div>
@ -72,8 +70,10 @@
let $ = layui.jquery;
let okGVerify = layui.okGVerify;
let okLayer = layui.okLayer;
let regPhone = /^[1][0-9]{10}$/;/**手机号验证**/
let setInter = '';/**定时器对象*/
let regPhone = /^[1][0-9]{10}$/;
/**手机号验证**/
let setInter = '';
/**定时器对象*/
let second = 60;//设置时间
/**
* 初始化验证码
@ -165,7 +165,6 @@
$("#phone").focus();
}
});
});
</script>
</body>