摘要：一.后台首页,主要包括最上方的header部分左侧的导航部分,加上右侧主页面,主页面通过iframe加载.左侧导航用layui组件来实现<!doctype html> <html lang="en"> <head> <meta charset="UT
一.后台首页,主要包括最上方的header部分左侧的导航部分,加上右侧主页面,主页面通过iframe加载.左侧导航用layui组件来实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
<script src="/static/plugins/layui/layui.js"></script>
<title>Document</title>
<style>
body{margin: 0;padding: 0;}
.header{background: #1E9FFF;width: 100%; height: 50px; line-height: 50px;color: #fff;}
.title{margin-left: 20px;font-size: 20px;}
.userinfo{float:right;margin-right: 10px;}
a{color:#fff;text-decoration: none;}
.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;}
a:hover{color:#fff}
</style>
</head>
<body>
<!--header-->
<div class="header">
<span class="title">通用后台管理系统</span>
<span class="userinfo">admin [系统管理员] <a href="javascript:;" onclick="logout()">退出登陆</a></span>
</div>
<!--menu-->
<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">
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item"><a href="javascript:;">管理员列表</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">
<li class="layui-nav-item"><a href="javascript:;">菜单列表</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">
<li class="layui-nav-item"><a href="javascript:;">网站设置</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--主操作区-->
<div class="main">
<iframe src="/index.php/admins/home/welcome" onload="resetMainHeight(this)" frameborder="0" style="width:100%;height:100%;" frameborder="0" scrolling="0"></iframe>
</div>
<script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use(['element','layer'], function(){
let element = layui.element;
$ = layui.jquery;
layer = layui.layer;
resetMenuHeight();
});
//重新设置页面高度
function resetMenuHeight()
{
let height = document.documentElement.clientHeight - 50;
$('#menu').height(height);
}
//重新设置主操作区高度
function resetMainHeight(obj)
{
let height = parent.document.documentElement.clientHeight - 53;
$(obj).parent('div').height(height);
}
//退出登陆
function logout()
{
//先确认是否是误操作
layer.confirm('是否退出登陆?',{
icon : 3,
btn : ['确定','取消']
},function () {
$.get('/index.php/admins/account/logout',function(data){
if(data.res ==0){
layer.msg(data.msg,{'icon':1});
setTimeout(function(){window.location.href="/index.php/admins/account/login"},1500)
}else{
layer.msg(data.msg,{'icon':2});
}
})
})
}
</script>
</body>
</html> * 其中左侧导航,和右侧主页面的高度需要重新动态获取一下.
二.退出登陆就是在点击退出登陆时,先弹出对话框,进行确认退出,确认后就将session中的值清空,然后跳转到登陆页面即可.
//退出登陆操作
public function logout()
{
session('admin',null);
return ['res'=>0,'msg'=>'退出成功'];
}
