摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后台管理系统</title> <link rel="stylesheet" type="text/css&quo
<!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">
.menu{ width: 200px; background: #333744;position: absolute;}
.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;}
.main{position: absolute;left: 200px;right: 0px;}
</style>
</head>
<body>
<div>
<ul style="background: #2e6da4">
<li>
<a href="" style="font-size: 20px;color: #fff;">京东商城-后台管理系统</a>
</li>
<li class="layui-nav-item " style="float: right;">
<span>admin</span>
<span>【系统管理员】 <span onclick="logout();">退出</span></span>
</li>
</ul>
</div>
<div id="menu">
<div>
<div>
<h2>管理员管理</h2>
<div class="layui-colla-content layui-show">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" onclick="menuFire(this)" src="admin.html">管理员列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>权限管理</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="menu.html" onclick="menuFire(this)">菜单管理</a>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="juese.html" onclick="menuFire(this)">角色管理</a>
</li>
</ul>
</div>
</div>
<div>
<h2>系统设置</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="system.html" onclick="menuFire(this)">网站设置</a>
</li>
</ul>
</div>
</div>
<div>
<h2>商品分类</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" src="fenlei.html" onclick="menuFire(this)">分类列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>产品管理</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;"src="product.html" onclick="menuFire(this)">产品列表</a>
</li>
</ul>
</div>
</div>
<div>
<h2>幻灯片管理</h2>
<div class="layui-colla-content ">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<iframe src="static/welcome.html" onload="resetMainHeight(this)" style="width: 100%;height: 100%;" frameborder="0" scrolling="0"></iframe>
<script type="text/javascript">
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>
</div>
</body>
</html><!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>
<script type="text/javascript" src="jq/jquery-3.3.1.min.js"></script>
<style type="text/css">
.header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;height: 30px;line-height: 32px;}
.header button{float: right;}
.header{ border-bottom: 2px #009688 solid; }
.pic{height:28px;float: right; border: 1px solid #f0f0f0;padding: 1px;}
</style>
</head>
<body>
<div>
<span>商品列表</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<div>
<div>
<input type="text" name="title" placeholder="请输入商品名称" class="layui-input">
</div>
<button> <i> </i>搜索</button>
</div>
<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>1</td>
<td>手机</td>
<td>奥特曼 <img src="img/phone1.png" onmousemove="show_img(this)"
onmouseleave="hide_img()"></td>
<td>5000.00</td>
<td>300.00</td>
<td>3</td>
<td>正常</td>
<td>2018-09-30</td>
<td>
<button class="layui-btn layui-btn-xs" onclick=" add()">编辑</button>
<button class="layui-btn layui-btn-normal layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>奥特曼 <img src="img/phone2.png"></td>
<td>5000.00</td>
<td>300.00</td>
<td>3</td>
<td>正常</td>
<td>2018-09-30</td>
<td>
<button class="layui-btn layui-btn-xs" onclick=" add()">编辑</button>
<button class="layui-btn layui-btn-normal layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>奥特曼 <img src="img/phone3.png"></td>
<td>5000.00</td>
<td>300.00</td>
<td>3</td>
<td>正常</td>
<td>2018-09-30</td>
<td>
<button class="layui-btn layui-btn-xs" onclick=" add()">编辑</button>
<button class="layui-btn layui-btn-normal layui-btn-xs" onclick="del()">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="test1"></div>
<script type="text/javascript">
layui.use([ 'layer','laypage'], function(){
var element = layui.element;
var layer = layui.layer;
laypage =layui.laypage;
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,count: 2 //数据总数，从服务端得到
,limit:1
});
});
function del(){
layer.confirm('确定要删除吗？', {
icon:2,
btn: ['确定', '取消'] //可以无限个按钮
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
function add(){
layer.open({
type: 2,
area: ['500px', '420px'],
title:'添加管理员',
content:'upload.html' //这里content是一个普通的String
});
}
// 获取浏览器窗口位置
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.pageX || 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:4;" id="preview";>\
<img style="width:100%;"src="'+imgurl+'">\</div>'
$('body').append(html)
}
function hide_img(){
$('#preview').hide()
$('#preview').remove()
}
</script>
</body>
</html><!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 span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;height: 30px;line-height: 32px;}
.header button{float: right;}
.header{ border-bottom: 2px #009688 solid; }
</style>
</head>
<body>
<div>
<span>商品添加</span>
<button class="layui-btn layui-btn-sm" onclick="add()">添加</button>
</div>
<div>
<form action="">
<div>
<label>商品类目</label>
<div>
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">系统管理员</option>
<option value="1">系统开发员</option>
</select>
</div>
</div>
<div>
<label>商品名称</label>
<div>
<input type="text" class="layui-input">
</div>
</div>
<div>
<label>价格</label>
<div>
<input type="text" class="layui-input">
</div>
</div>
</form>
<button type="button" id="test1" style="margin-left: 110px;">
<i></i>上传图片
</button>
<div class="layui-form-item layui-form-text" style="margin-top: 20px;">
<label>描述</label>
<div>
<textarea name="desc" class="layui-textarea"></textarea>
</div>
</div>
<form action="">
<div>
<label>状态</label>
<div>
<input type="checkbox" name="like[write]" title="上架">
</div>
</div>
</form>
<button style="margin-left: 110px;">保存</button>
</div>
<script type="text/javascript">
layui.use([ 'layer','form'], function(){
var element = layui.element;
var form = layui.form;
var layer = layui.layer;
});
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
</script>
</body>
</html>![UCHEGCM]`IN~T4GM_JDE_Q7.png](http://img.php.cn//upload/image/288/809/996/1543313918486102.png "1543313918486102.png")
批改老师：灭绝师太批改时间：2018-11-28 09:05:15
老师总结：完成的不错！layui搭建后台页面比较简单，要细细掌握组件啊！
