laravel--通用后台管理系统--从数据库中自动加载菜单 - 作业

首页 > 博客列表 > laravel--通用后台管理系统--从数据库中自动加载菜单

博主信息

博文 64

粉丝 6

访问量 102107

专题推荐

更多>

学习总结

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>