Community Learn Tools Library Leisure
search
English
Home > List of blog posts > laravel--通用后台管理系统--从数据库中自动加载菜单
Blogger Information
Blog 64
fans 6
comment 2
visits 83034
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
laravel--通用后台管理系统--从数据库中自动加载菜单
王娇
Original
702 people have browsed it

学习总结

1.为了避免频繁和数据库交互，在数据库中查询菜单时，先把有的菜单取出后通过扩展的DB->lists()转为数组后存在数组变量中

2.如果pid===0并且ishidden===0代表需要显示在菜单项中的一级菜单，把这一类存储在一级菜单的变量中

3.如果pid!==0并且ishidden===0代表需要显示在菜单项中的子菜单，把这一类存储在二级菜单的变量中，通过pid分组存储

4.视图渲染时，添加一级菜单时，只需要找到二级菜单对应的pid,遍历数据即可

1.home控制器Home.php

  2. <?php
  4. namespace App\Http\Controllers\admins;
  6. use App\Http\Controllers\Controller;
  8. use Illuminate\Http\Request;
  9. //引入数据库查询构造器，链式调用
  10. use Illuminate\Support\Facades\DB;
  11. //后台主页
  12. class Home extends Controller
  13. {
  14.     public function index()
  15.     {
  17.         $menus = DB::table('admin_menu')->lists();
  18.         $res = [];
  19.         foreach($menus as $menu ):
  20.             //ishidden为0代表该显示该菜单
  21.             //pid等于0的并且的为顶级菜单存储在pmenus中
  22.             if($menu['pid']=='0' && $menu['ishidden']=='0'):
  23.                 $res['pmenus'][] = $menu;
  24.             endif;
  25.             //pid不等于0的为子菜单，按照pid进行分组存储在cmenus中
  26.             if(($menu['pid']!='0')&&($menu['ishidden']=='0')):
  27.                 $res['cmenus'][$menu['pid']][] = $menu;
  28.             endif;
  29.         endforeach;
  31.         // echo '<pre>';
  32.         // print_r($res);
  33.         // exit;
  34.         return view('admins/home/index',$res);
  35.     }
  37.     public function welcome()
  38.     {
  39.         return view('admins/home/welcome');
  40.     }
  41. }
  43. ?>

2.后台首页，自动加载数据库的菜单index.blade.php

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
  9.     <script src="/static/plugins/layui/layui.js"></script>
  10.     <title>后台首页</title>
  11.     <style>
  12.     body {
  13.         margin: 0px;
  14.         padding: 0px;
  15.         box-sizing: border-box;
  16.     }
  18.     /* 头部 */
  19.     .header {
  20.         width: 100%;
  21.         height: 50px;
  22.         line-height: 50px;
  23.         background-color: #01AAED;
  24.         color: #fff;
  25.         display: flex;
  26.         flex-flow: row nowrap;
  27.         justify-content: space-between;
  28.     }
  30.     .header h3 {
  31.         margin-left: 20px;
  32.     }
  34.     .header>div {
  35.         margin-right: 20px;
  36.     }
  38.     .header>div>a {
  39.         color: #fff;
  40.     }
  42.     .header>div>a:hover {
  43.         color: orange;
  44.     }
  46.     /* 侧边栏和主页面显示区 */
  47.     .container {
  48.         display: flex;
  49.         flex-flow: row nowrap;
  50.         justify-content: space-between;
  51.         align-items: center;
  52.     }
  54.     /* 侧边栏 */
  55.     .aside {
  56.         width: 200px;
  57.         background-color: #01AAED;
  58.     }
  60.     .aside>.layui-collapse {
  61.         width: 200px;
  62.     }
  64.     .aside .layui-colla-title {
  65.         background-color: #01AAED;
  66.         color: #fff;
  67.     }
  69.     .aside .layui-nav {
  70.         margin-left: -15px;
  71.         margin-top: -10px;
  72.         margin-bottom: -10px;
  73.         width: 197px;
  74.         background-color: #fff;
  75.     }
  77.     .aside .layui-nav .layui-nav-item {
  78.         border-bottom: 1px solid #e2e2e2;
  79.         border-right: 1px solid #e2e2e2;
  80.     }
  82.     .aside .layui-nav .layui-nav-item a {
  83.         color: #333;
  84.     }
  86.     .aside .layui-nav .layui-nav-item a:hover {
  87.         background-color: lightseagreen;
  88.     }
  90.     /* 主页面显示区 */
  91.     .main {
  92.         width: 100%;
  93.     }
  95.     .main>iframe {
  96.         width: 100%;
  97.     }
  98.     </style>
  99. </head>
  101. <body>
  102.     <!-- 头部 -->
  103.     <div class="header">
  104.         <h3>瑄然软件后台管理系统</h3>
  105.         <div>
  106.             <span class="layui-icon layui-icon-username">admin</span>
  107.             <a href="">退出</a>
  108.         </div>
  109.     </div>
  111.     <div class="container">
  112.         <!-- 侧边栏 -->
  113.         <div class="aside">
  114.             <div class="layui-collapse" lay-accordion>
  115.                 @foreach($pmenus as $key => $pmenu)
  116.                 <div class="layui-colla-item">
  117.                     <h2 class="layui-colla-title">{{$pmenu['title']}}</h2>
  118.                     <!-- 默认显示第一个菜单的子菜单 -->
  119.                     <div class="layui-colla-content {{$key?'':'layui-show'}}">
  120.                         <!-- <div class="layui-colla-content layui-show"> -->
  121.                         <ul class="layui-nav layui-nav-tree">
  122.                             <!-- 找到一级菜单所对应的子菜单 -->
  123.                             <?php $cmenu = $cmenus[$pmenu['mid']];?>
  124.                             @foreach($cmenu as $item)
  125.                             <li class="layui-nav-item">
  126.                                 <a href="/admins/{{$item['controller']}}/{{$item['action']}}"
  127.                                     target="showMain">{{$item['title']}}</a>
  128.                             </li>
  129.                             @endforeach
  130.                         </ul>
  131.                     </div>
  132.                 </div>
  133.                 @endforeach
  134.             </div>
  135.         </div>
  136.         <!-- 主页面显示区 -->
  137.         <div class="main">
  138.             <iframe src="/admins/home/welcome" frameborder="0" name="showMain"></iframe>
  139.         </div>
  140.     </div>
  142. </body>
  144. <script>
  145. layui.use(['element', 'layer'], function() {
  146.     var element = layui.element;
  147.     $ = layui.jquery;
  148.     var aside_height = document.documentElement.clientHeight - 50;
  150.     $('.aside').height(aside_height);
  151.     //主页面的高度和侧边栏高度相同
  152.     $('.main>iframe').height(aside_height);
  153. });
  154. </script>
  156. </html>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：态度非常的认真， 继续
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post