<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>登陆页面</title>
<!-- 放到项目中，需要考虑引入是 ../ -->
<link href="/static/css/style.css" rel="stylesheet" media="screen"/>
<link href="/static/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.container {
width: 420px;
height: 320px;
min-height: 320px;
max-height: 320px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
padding: 20px;
z-index: 130;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
font-size: 16px;
}
.close {
background-color: white;
border: none;
font-size: 18px;
margin-left: 410px;
margin-top: -10px;
}
.layui-input {
border-radius: 5px;
width: 300px;
height: 40px;
font-size: 15px;
}
.layui-form-item {
margin-left: -20px;
}
#logoid {
margin-top: -16px;
padding-left: 150px;
padding-bottom: 15px;
}
.layui-btn {
margin-left: -50px;
border-radius: 5px;
width: 350px;
height: 40px;
font-size: 15px;
}
.verity {
width: 120px;
}
.font-set {
font-size: 13px;
text-decoration: none;
margin-left: 120px;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="particles-js">
<form class="layui-form" id="form1" lay-filter="login">
<div class="container">
<!--<button class="close" title="关闭">X</button>-->
<div class="layui-form-mid layui-word-aux">
<img id="logoid" src="/static/img/logo.jpg" height="35"/>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="account" required lay-verify="required" placeholder="请输入用户名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密 码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<div style="float: left;">
<input type="text" name="verifyCode" width="200px;" id="verifyCode" placeholder="请输入验证码"
autocomplete="off" class="layui-input verity">
</div>
<div style="float: left;">
<img id="verify" onclick="chageCode()" alt="点击刷新验证码" style="width: 90%;height: 39px;"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" type="button" id="login" lay-filter="formDemo">登陆</button>
</div>
</div>
<!-- <a href="" class="font-set">忘记密码?</a><a href="" class="font-set">立即注册</a> -->
</div>
</form>
</div>
<div style="text-align:center;">
</div>
<script src="/static/layui/layui.js"></script>
<!--登录页调整星空粒子间隔,坐标...-->
<script src="/static/js/particles.min.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/jquery-3.5.1.js"></script>
<script>
layui.use(['form', 'layer', 'jquery'], function () {
var form = layui.form,
$ = layui.jquery,
layer = layui.layer;
$(document).on('click', '#login', function () {
var da = form.val("login");
$.ajax({
url: '/AdminServlet?method=login',// 跳转到 action
type: 'post',
data: da,
dataType:"json",
success: function (data) {
console.log(data);
if (data.code == 200) {
window.location.href = '/home.html';
} else {
layer.alert(data.msg);
return;
}
},
error: function (error) {
// view("异常！");
}
});
return false;
});
});
function chageCode() {
$('#verify').attr('src', '/VerifyCodeServlet?random=' + new Date());//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
}
chageCode();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航）
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul> -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree layui-nav-side" style="margin-top: 55px;" lay-filter="treenav">
<li class="layui-nav-item">
<a href="javascript:;" class="site-url" data-id="1"
data-title="管理员管理" data-url="/view/admin/list.html">
管理员管理
</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;" class="site-url" data-id="1"
data-title="医院管理" data-url="/view/admin/list2.html">
医院管理
</a>
</li>
</ul>
</div>
</div>
<div class="layui-tab layui-tab-brief" lay-filter="contentnav" lay-allowClose="true"
style="margin-left:200px;margin-top:55px;">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<ul class="layui-bg-green rightmenu" style="display: none;position: absolute;">
<li data-type="closethis">关闭当前</li>
<li data-type="closeall">关闭所有</li>
</ul>
<div class="layui-tab-content" style="padding:0;">
<div class="layui-tab-item layui-show">
<!-- <iframe data-frameid="2" scrolling="auto" frameborder="0" src="http://www.baidu.com" style="width: 100%; height: 710px;"></iframe> -->
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function() {
var element = layui.element;
var $ = jQuery;
var active = {
tabAdd: function(url, id, name) {
element.tabAdd('contentnav', {
title: name,
content: '<iframe data-frameid="' + id +
'" scrolling="auto" frameborder="0" src="' + url +
'" style="width:100%;"></iframe>',
id: id
});
rightMenu();
iframeWH();
},
tabChange: function(id) {
element.tabChange('contentnav', id);
},
tabDelete: function(id) {
element.tabDelete('contentnav', id);
},
tabDeleteAll: function(ids) {
$.each(ids, function(index, item) {
element.tabDelete('contentnav', item);
});
}
};
$(".site-url").on('click', function() {
var nav = $(this);
var length = $("ul.layui-tab-title li").length;
if (length <= 0) {
active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
} else {
var isData = false;
$.each($("ul.layui-tab-title li"), function() {
if ($(this).attr("lay-id") == nav.attr("data-id")) {
isData = true;
}
});
if (isData == false) {
active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
}
active.tabChange(nav.attr("data-id"));
}
});
function rightMenu() {
//右击弹出
$(".layui-tab-title li").on('contextmenu', function(e) {
var menu = $(".rightmenu");
menu.find("li").attr('data-id', $(this).attr("lay-id"));
l = e.clientX;
t = e.clientY;
menu.css({
left: l,
top: t
}).show();
return false;
});
//左键点击隐藏
$("body,.layui-tab-title li").click(function() {
$(".rightmenu").hide();
});
}
$(".rightmenu li").click(function() {
if ($(this).attr("data-type") == "closethis") {
active.tabDelete($(this).attr("data-id"));
} else if ($(this).attr("data-type") == "closeall") {
var tabtitle = $(".layui-tab-title li");
var ids = new Array();
tabtitle.each(function(i) {
ids.push($(this).attr("lay-id"));
});
//如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
active.tabDeleteAll(ids);
}
$('.rightmenu').hide(); //最后再隐藏右键菜单
});
function iframeWH() {
var H = $(window).height() - 80;
$("iframe").css("height", H + "px");
}
$(window).resize(function() {
iframeWH();
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/layui/css/layui.css" />
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['table','layer'], function(){
var table = layui.table;
var layer = layui.layer;
//第一个实例
table.render({
elem: '#demo'
,height: 600
,toolbar:'#toolbar'
,url: '/AdminServlet?method=select' //数据接口
,page: true //开启分页
,cols: [[ //表头
{type:'checkbox'}
,{field: 'id', title: 'ID', width:80, sort: true}
,{field: 'name', title: '姓名'}
,{field: 'tel', title: '手机号', sort: true}
,{field: 'email', title: '邮箱'}
,{field: 'createTime', title: '注册时间',width:200
,templet: "<div>{{layui.util.toDateString(d.createTime,'yyyy-MM-dd HH:mm:ss')}}</div>"}
,{field: 'email', title: '邮箱'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]],
response: {
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
},
parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
console.log(res);
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
}
});
//监听事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
addOrUpp("添加","/view/admin/add.html");
break;
case 'delete':
layer.msg('删除');
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除' + data.id + "的用户吗？", function(index){
$.ajax({
url:"/AdminServlet?method=delId",
data:{"id": data.id},
type:"post",
dataType:"json",
success:function(){
layer.msg("删除成功！");
obj.del();
layer.close(index);
}
})
});
} else if(obj.event === 'edit'){
addOrUpp("修改","/view/admin/edit.html?id="+data.id);
}
});
function addOrUpp(tit,url){
layer.open({
type: 2 //此处以iframe举例
,title: tit
,content: url
,offset: 'auto'
,area: ['500px', '300px']
,btn: ['保存', '取消'] ,//只是为了演示
end:function(){
table.reload('demo');
}
});
}
});
</script>
</head>
<body>
<!--
前面的id是给js或jquery 使用的
lay-filter：是给layui使用的
-->
<table id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>
<!-- 自定义的控件 -->
<div id="toolbar" style="display: none; ">
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm" lay-event="add" data-method="notice" data-type="auto" >添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">批量删除</button>
</div>
</div>
<div id="barDemo" style="display: none;">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<!-- 设置新增的form表单 -->
<div id="editDiv" style="display: none;">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
</form>
</div>
</body>
</html>
4213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
