laravel--通用后台管理系统--从数据库中自动加载菜单
程序员文章站
2022-05-16 21:38:16
...
学习总结
1.为了避免频繁和数据库交互,在数据库中查询菜单时,先把有的菜单取出后通过扩展的DB->lists()
转为数组后存在数组变量中
2.如果pid===0
并且ishidden===0
代表需要显示在菜单项中的一级菜单,把这一类存储在一级菜单的变量中
3.如果pid!==0
并且ishidden===0
代表需要显示在菜单项中的子菜单,把这一类存储在二级菜单的变量中,通过pid分组存储
4.视图渲染时,添加一级菜单时,只需要找到二级菜单对应的pid,遍历数据即可
1.home控制器Home.php
<?php
namespace App\Http\Controllers\admins;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
//引入数据库查询构造器,链式调用
use Illuminate\Support\Facades\DB;
//后台主页
class Home extends Controller
{
public function index()
{
$menus = DB::table('admin_menu')->lists();
$res = [];
foreach($menus as $menu ):
//ishidden为0代表该显示该菜单
//pid等于0的并且的为*菜单存储在pmenus中
if($menu['pid']=='0' && $menu['ishidden']=='0'):
$res['pmenus'][] = $menu;
endif;
//pid不等于0的为子菜单,按照pid进行分组存储在cmenus中
if(($menu['pid']!='0')&&($menu['ishidden']=='0')):
$res['cmenus'][$menu['pid']][] = $menu;
endif;
endforeach;
// echo '<pre>';
// print_r($res);
// exit;
return view('admins/home/index',$res);
}
public function welcome()
{
return view('admins/home/welcome');
}
}
?>
2.后台首页,自动加载数据库的菜单index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
<script src="/static/plugins/layui/layui.js"></script>
<title>后台首页</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 头部 */
.header {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #01AAED;
color: #fff;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.header h3 {
margin-left: 20px;
}
.header>div {
margin-right: 20px;
}
.header>div>a {
color: #fff;
}
.header>div>a:hover {
color: orange;
}
/* 侧边栏和主页面显示区 */
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
/* 侧边栏 */
.aside {
width: 200px;
background-color: #01AAED;
}
.aside>.layui-collapse {
width: 200px;
}
.aside .layui-colla-title {
background-color: #01AAED;
color: #fff;
}
.aside .layui-nav {
margin-left: -15px;
margin-top: -10px;
margin-bottom: -10px;
width: 197px;
background-color: #fff;
}
.aside .layui-nav .layui-nav-item {
border-bottom: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
}
.aside .layui-nav .layui-nav-item a {
color: #333;
}
.aside .layui-nav .layui-nav-item a:hover {
background-color: lightseagreen;
}
/* 主页面显示区 */
.main {
width: 100%;
}
.main>iframe {
width: 100%;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<h3>瑄然软件后台管理系统</h3>
<div>
<span class="layui-icon layui-icon-username">admin</span>
<a href="">退出</a>
</div>
</div>
<div class="container">
<!-- 侧边栏 -->
<div class="aside">
<div class="layui-collapse" lay-accordion>
@foreach($pmenus as $key => $pmenu)
<div class="layui-colla-item">
<h2 class="layui-colla-title">{{$pmenu['title']}}</h2>
<!-- 默认显示第一个菜单的子菜单 -->
<div class="layui-colla-content {{$key?'':'layui-show'}}">
<!-- <div class="layui-colla-content layui-show"> -->
<ul class="layui-nav layui-nav-tree">
<!-- 找到一级菜单所对应的子菜单 -->
<?php $cmenu = $cmenus[$pmenu['mid']];?>
@foreach($cmenu as $item)
<li class="layui-nav-item">
<a href="/admins/{{$item['controller']}}/{{$item['action']}}"
target="showMain">{{$item['title']}}</a>
</li>
@endforeach
</ul>
</div>
</div>
@endforeach
</div>
</div>
<!-- 主页面显示区 -->
<div class="main">
<iframe src="/admins/home/welcome" frameborder="0" name="showMain"></iframe>
</div>
</div>
</body>
<script>
layui.use(['element', 'layer'], function() {
var element = layui.element;
$ = layui.jquery;
var aside_height = document.documentElement.clientHeight - 50;
$('.aside').height(aside_height);
//主页面的高度和侧边栏高度相同
$('.main>iframe').height(aside_height);
});
</script>
</html>