摘要：首页布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后台管理系统</title> <link rel="stylesheet" type="tex
首页布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
.header{width: 100%;
height: 50px;
line-height: 50px;
background: #2E6DA4;
color: #fff;}
.title{margin-left: 20px;}
.userinfo{float: right;
margin-right: 10px;}
.userinfo a{color: #fff;}
.menu{width: 200px;
height: 957px;
background: #333744;
position: absolute;}
.main{position: absolute;
left: 200px;
right: 0px;}
.layui-collapse{border: none;}
.layui-colla-item{border-top: none;}
.layui-colla-title{background: #42485b;
color: #fff;}
.layui-colla-content{border-top: none;
padding: 0px;}
</style>
</head>
<body>
<!-- header -->
<div class="header">
<span class="title" style="font-size: 20px;">后台管理系统</span>
<span class="userinfo">admin[系统管理员] <span> <a href="javascript:;" onclick="logout()"> 退出 </a> </span></span>
</div>
<!-- 菜单 -->
<div class="menu" id="menu">
<div class="layui-collapse" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">管理员管理</h2>
<div class="layui-colla-content layui-show">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="javascript:;"onclick="menuFire(this)" src="admin.html" >管理员列表</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">权限管理</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="javascript:;"onclick="menuFire(this)" src="menu.html">菜单管理</a></li>
<li class="layui-nav-item"><a href="javascript:;" onclick="menuFire(this)"src="Roles.html">角色管理</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">系统设置</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="javascript:;"onclick="menuFire(this)"src="site.html">网站设置</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">商品分类</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="javascript:;"onclick="menuFire(this)"src="cates.html">分类列表</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">产品管理</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="javascript:;"onclick="menuFire(this)"src="product.html">产品列表</a></li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">幻灯片管理</h2>
<div class="layui-colla-content">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="javascript:;"onclick="menuFire(this)"src="slide.html">首页首屏</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 主操作页面 -->
<div class="main">
<iframe src="welcome.html" onload="resetMainHeight(this)" style="width: 100%;height: 100%;" frameborder="0" scrolling="0"></iframe>
</div>
<script>
layui.use(['element', 'layer'], function(){
var element = layui.element;
var layer = layui.layer;
$=layui.jquery
resetMenuHeight();
});
function logout(){
layer.confirm('确定要退出吗？', {
icon:3,
btn: ['确定', '取消'] //可以无限个按钮
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
//重新设置菜单容器高度
function resetMenuHeight(){
var height=document.documentElement.clientHeight-50;
$('#menu').height(height)
}
//菜单点击
function menuFire(obj){
//获取url
var src=$(obj).attr('src')
//改变框架内的页面地址
$('iframe').attr('src',src)
}
//设置主操作页面高度
function resetMainHeight(obj){
var height=parent.document.documentElement.clientHeight-50;
$(obj).parent('div').height(height)
}
</script>
</body>
</html>菜单管理页面：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
.header span{background: #009688;
color: #fff;
padding: 10px;
margin-left: 30px;
line-height: 32px;}
.header{border-bottom: 2px solid #009688;}
</style>
</head>
<body style="padding: 10px;">
<div class="header">
<span>菜单管理页面</span>
</div>
<form class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>排序</th>
<th>菜单名称</th>
<th>controller</th>
<th>method</th>
<th>是否隐藏</th>
<th>是否禁用</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td> <input type="checkbox" name="" title="隐藏" lay-skin="primary"></td>
<td> <input type="checkbox" name="" title="禁用" lay-skin="primary"></td>
<td><button class="layui-btn layui-btn-xs" onclick="child(1);return false;">子菜单</button></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td> <input type="checkbox" name="" title="隐藏" lay-skin="primary"></td>
<td> <input type="checkbox" name="" title="禁用" lay-skin="primary"></td>
<td><button class="layui-btn layui-btn-xs" onclick="child(2);return false;">子菜单</button></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td> <input type="checkbox" name="" title="隐藏" lay-skin="primary"></td>
<td> <input type="checkbox" name="" title="禁用" lay-skin="primary"></td>
<td><button class="layui-btn layui-btn-xs" onclick="child(3);return false;">子菜单</button></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td> <input type="checkbox" name="" title="隐藏" lay-skin="primary"></td>
<td> <input type="checkbox" name="" title="禁用" lay-skin="primary"></td>
<td><button class="layui-btn layui-btn-xs" onclick="child(4);return false;">子菜单</button></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td><input type="text" name="" class="layui-input"></td>
<td> <input type="checkbox" name="" title="隐藏" lay-skin="primary"></td>
<td> <input type="checkbox" name="" title="禁用" lay-skin="primary"></td>
<td><button class="layui-btn layui-btn-xs" onclick="child(5);return false;">子菜单</button></td>
</tr>
</tbody>
</table>
</form>
<button class="layui-btn" style="float: right;margin-right: 20px;">保存</button>
<script>
layui.use(['layer','form'], function(){
layer = layui.layer;
form = layui.form;
$ = layui.jquery;
});
//子菜单跳转
function child(pid){
window.location.href="menu/index.html?pid="+pid
}
</script>
</body>
</html>产品列表页面:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
.header span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
.header button{float: right;margin-top: -5px;}
.thumb{height: 28px;float: right;border: 1px solid #f0f0f0;padding: 1px;}
</style>
</head>
<body style="padding: 10px;">
<div class="header">
<span>商品列表</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="title" required lay-verify="required" placeholder="请输入商品名称"class="layui-input">
</div>
<button class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜索</button>
</div>
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>分类</th>
<th>名称</th>
<th>最低价格</th>
<th>成本</th>
<th>PV</th>
<th>状态</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img class="thumb" src="uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img src="uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg " class="thumb"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>14</td>
<td>iphone</td>
<td>Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机<img src="uploads/20180524\13b7cee33f10bcdaeeb273f31e2600f5.jpg " class="thumb"
onmouseover="show_img(this)" onmouseleave="hide_img()"> </td><!-- -->
<td>5000.00</td>
<td>3000.00</td>
<td>3</td>
<td>正常</td>
<td>2018-05-24 14:31:04</td>
<td>
<button class="layui-btn layui-btn-xs" onclick="add()">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="test1"></div>
<script type="text/javascript">
layui.use(['layer','laypage'],function(){
layer = layui.layer;
laypage= layui.laypage;
$ = layui.jquery;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
});
function del(){
layer.confirm('确定要删除么？', {
icon:2,
btn: ['确定', '取消'] //可以无限个按钮
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
首先获取到浏览器窗口的位置（相对于文档）
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
return { 'x': x, 'y': y };
}
//显示隐藏预览图片
function show_img(obj){
var imgurl = $(obj).attr('src')
var res=getMousePos()
var html ='<div style="background:#fff;width: 200px;border:1px solid #ccc;border-radius: 6px;padding: 2px;position: absolute;left:'+res.x+'px;top:'+res.y+'px;z-index:7" id="preview">\
<img style="width: 100%;border-radius: 6px;" src="'+imgurl+'">\
</div> '
$('body').append(html)
}
function hide_img(){
$('#preview').remove()
}
</script>
</body>
</html>layui框架这节课程，总体难度不难，对于我来说，难点在管理菜单页面的子菜单跳转跟产品列表页面显示隐藏图片这两个功能，感觉自己就是JS的知识掌握的还不够，只能多查资料，多动手练习了。
批改老师：天蓬老师批改时间：2018-11-29 08:53:18
老师总结：LaiUI文件上传有多种方式, 官网提供了一个简便的解决方案,js是无权对服务器资源直接操作的,最终仍是要通过服务器脚本实现,例如php
