微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 2.【商城后台管理系统】基于TP6开发后台管理界面渲染与无限级菜单查询
博主信息
博文 128
粉丝 9
评论 5
访问量 294825
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
2.【商城后台管理系统】基于TP6开发后台管理界面渲染与无限级菜单查询
　一纸荒凉* Armani
原创
2263人浏览过

【商城后台管理系统】基于TP6开发后台管理界面渲染与无限级菜单查询

预览地址：http://padmin.easys.ltd/admin/account/login

后台管理页面效果预览

界面部署流程

  • 页眉栏：采用layui 50px 经典蓝 自设置用户信息Session 进行输出用户名称和用户级别
  • 左侧导航栏{无限级菜单} ：采用layui 手风琴和左侧导航框架进行样式设计，通过连接后台数据库导出数据表中数据渲染导航列表，分为一级菜单和二级菜单
  • 主操作区：采用传统 iframe 内联框架进行部署
  • 主操作区高度设置：采用css position 定位以及页眉和左部导航还有页面高度进行计算部署

一、后台搭建

新建控制器Home.php

  1. <?php
  2. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Session;
  6. use think\facade\View;
  7. use think\facade\Db;
  8. use think\facade\Cache;
  9. use think\facade\Request;
  11. /**
  12.  * 后台首页
  13.  */
  14. class Home  
  15. {
  17.     public function index(){
  18.         // 用户信息
  19.         $data['admin'] = Session::get('admin');
  20.         // 获取继承父类Base的属性
  21.         // 用户角色(根据用户信息的角色gid查询对应的角色名称)
  22.         $data['group'] = Db::table('admin_group')->where('id',$data['admin']['gid'])->find();
  24.         View::assign([
  25.             'data'=>$data
  26.         ]);
  27.         return View::fetch('/home/index');
  28.     }
  30.     public function welcome(){
  31.         return View::fetch('/home/welcome');
  32.     }
  34. }

新建后台主体页面视图 Home/index.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/layui/layui.js"></script>
  7.     <style type="text/css">
  8.         body{padding:0;margin: 0;}
  9.         .myheader{background: #009688;height: 50px;padding: 0 10px;line-height: 50px;color: #fff;display: flex;justify-content: space-between;}
  10.         .myheader .title .logo{width: 30px;vertical-align: sub;border-radius: 8px;margin-right: 12px;}
  11.         .myheader .title{font-size: 18px;cursor: pointer;}
  12.         .admin-info a{color: #fff;margin-left:6px;}
  13.         .main-menus{width: 200px;position:absolute;height: calc(100% - 50px)}
  14.         .main-menus .layui-inline{height: 100%;overflow: auto;}
  15.         .main-contain{position: absolute;left: 200px;right: 0;height: calc(100% - 50px);}
  16.         .main-contain iframe{width: 100%;height: 100%;background: #ececec;}
  18.         /* 设置滚动条的样式 */
  19.         ::-webkit-scrollbar {
  20.             width:12px;
  21.         }
  22.         /* 滚动槽 */
  23.         ::-webkit-scrollbar-track {
  24.             -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
  25.             border-radius:10px;
  26.         }
  27.         /* 滚动条滑块 */
  28.         ::-webkit-scrollbar-thumb {
  29.             border-radius:10px;
  30.             background:rgba(0,0,0,0.1);
  31.             -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  32.         }
  33.         ::-webkit-scrollbar-thumb:window-inactive {
  34.             background:rgba(255,0,0,0.4);
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <!-- 顶部提示条 -->
  40.     <div class="myheader">
  41.         <span class="title" onclick="goIndex()"><img src="/favicon.ico" class="logo">商城后台管理系统</span>
  42.         <span class="admin-info">
  43.             <i class="layui-icon layui-icon-user"></i> {$data['admin']['username']}【{$data['group']['title']}】
  44.             <a href="javascript:;" onclick="logout()"><i class="layui-icon layui-icon-logout"></i> 退出</a>
  45.         </span>
  46.     </div>
  47.     <!-- 侧边导航菜单 -->
  48.     <div class="main-menus">
  50.     </div>
  51.     <!-- 主操作内容区域 -->
  52.     <div class="main-contain">
  53.         <iframe src="/admin/home/welcome" frameborder="0"></iframe>
  54.     </div>
  55. </body>
  56. </html>
  58. <script>
  59.     $ = layui.jquery;
  61.     /*function reset_height(obj){
  62.         // 当前页面高度-顶部信息条高度 = 主体区域高度
  63.         var height = (document.documentElement.clientHeight)-$('.myheader').height();
  64.         // 设置主体区域的高度
  65.         $(obj).parent('div').height(height);
  66.     }*/
  68.     // 返回首页
  69.     function goIndex(){
  70.         window.location.href = '/';
  71.     }
  73.     // 退出登陆
  74.     function logout(){
  75.         layer.confirm('确定要退出登陆吗？',{
  76.             icon:3,
  77.             btn: ['确定','取消']
  78.         },function(){
  79.             $.get('admin/account/logout',function(res){
  80.                 layer.msg(res.msg,{icon:1});
  81.                 setTimeout(function(){
  82.                     window.location.href = "/admin/home/login";
  83.                 },1000)
  84.             },'json');
  85.         });
  86.     }
  87. </script>

欢迎页面视图文件 Home/welcom.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body style="background: url(http://api.easys.ltd/api/api/api.php);">
  7.     <div style="width:100%;height:360px;background: rgba(0,0,0,.6);margin:auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
  8.         <p style="text-align:center;line-height: 360px;margin:0;color: #fff;font-size: 32px;">
  9.             <span style="font-size: 120px;vertical-align: bottom;">☺</span>
  10.             欢迎使用phpAdmin后台管理系统 <br>
  11.         </p>
  12.         <p style="text-align: center;color: #03a9f4;font-size: 24px;position: absolute;bottom: 0;left: 0;right: 0;">当前时间：<span id="curTime"></span> </p>
  13.     </div>
  14. </body>
  15. </html>
  16. <script type="text/javascript">
  17. /**
  18. * 如：需求日期格式为：2018-08-28 星期二 21:53:40
  19. * $timeWrapper：dom容器
  20. */
  21.     var timeWrapper = document.querySelector('#curTime');
  22.     timeWrapper.innerHTML = getCurTime();
  23.     setInterval(()=>{
  24.         timeWrapper.innerHTML = getCurTime();
  25.     }, 1000);    
  26.     function getCurTime() {
  27.         var oDate = new Date();
  28.         var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  29.         var y = oDate.getFullYear(),
  30.             m = String(oDate.getMonth()+ 1).padStart(2,0),
  31.             d = String(oDate.getDate()).padStart(2,0),
  32.             hour = String(oDate.getHours()).padStart(2,0),
  33.             min = String(oDate.getMinutes()).padStart(2,0),
  34.             sec = String(oDate.getSeconds()).padStart(2,0),
  35.             weekIndex = oDate.getDay(),
  36.             week = weekArr[weekIndex];        
  37.         return y + '-' + m + '-' + d + ' ' + week + ' ' + hour + ':' + min + ':' + sec;
  38.     }
  39. </script>

二、菜单处理

  1. <?php
  2. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Session;
  6. use think\facade\View;
  7. use think\facade\Db;
  8. use think\facade\Cache;
  9. use think\facade\Request;
  11. /**
  12.  * 后台首页
  13.  */
  14. class Home
  15. {
  17.     public function index(){
  18.         // 用户信息
  19.         // $data['admin'] = Session::get('admin');
  20.         // 获取继承父类Base的属性
  21.         $data['admin'] = $this->admin;
  22.         // 用户角色(根据用户信息的角色gid查询对应的角色名称)
  23.         // $data['group'] = Db::table('admin_group')->where('id',$data['admin']['gid'])->find();
  24.         $data['group'] = $this->mygroup;
  27.         //方案一：直接读数据库   根据一级菜单循环读取二级菜单
  28.         // 查询一级菜单（pid==0）
  29.         $data['menuList'] = Db::table('admin_menu')->where([['pid','=','0'],['status','=','0']])->select()->toArray();
  30.         // 根据一级菜单mid 查询对应的pid二级菜单
  31.         foreach ($data['menuList'] as $key => $menu) {
  32.             $data['menuList'][$key]['children'] = Db::table('admin_menu')->where('pid','=',$menu['mid'])->select();
  33.         }
  36.         View::assign([
  37.             'data'=>$data
  38.         ]);
  39.         return View::fetch('/home/index');
  40.     }
  42.     public function welcome(){
  43.         return View::fetch('/home/welcome');
  44.     }
  46.     public function logout(){
  47.         // 删除session中admin
  48.         Session::delete('admin');
  49.         echo (json_encode(['code'=>0,'msg'=>'退出成功~']));
  50.     }
  52. }

三、菜单渲染与数据优化

视图中循环渲染无限极菜单

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  6.     <script type="text/javascript" src="/static/layui/layui.js"></script>
  7.     <style type="text/css">
  8.         body{padding:0;margin: 0;}
  9.         .myheader{background: #009688;height: 50px;padding: 0 10px;line-height: 50px;color: #fff;display: flex;justify-content: space-between;}
  10.         .myheader .title .logo{width: 30px;vertical-align: sub;border-radius: 8px;margin-right: 12px;}
  11.         .myheader .title{font-size: 18px;cursor: pointer;}
  12.         .admin-info a{color: #fff;margin-left:6px;}
  13.         .main-menus{width: 200px;position:absolute;height: calc(100% - 50px)}
  14.         .main-menus .layui-inline{height: 100%;overflow: auto;}
  15.         .main-contain{position: absolute;left: 200px;right: 0;height: calc(100% - 50px);}
  16.         .main-contain iframe{width: 100%;height: 100%;background: #ececec;}
  18.         /* 设置滚动条的样式 */
  19.         ::-webkit-scrollbar {
  20.             width:12px;
  21.         }
  22.         /* 滚动槽 */
  23.         ::-webkit-scrollbar-track {
  24.             -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
  25.             border-radius:10px;
  26.         }
  27.         /* 滚动条滑块 */
  28.         ::-webkit-scrollbar-thumb {
  29.             border-radius:10px;
  30.             background:rgba(0,0,0,0.1);
  31.             -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
  32.         }
  33.         ::-webkit-scrollbar-thumb:window-inactive {
  34.             background:rgba(255,0,0,0.4);
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <!-- 顶部提示条 -->
  40.     <div class="myheader">
  41.         <span class="title" onclick="goIndex()"><img src="/favicon.ico" class="logo">商城后台管理系统</span>
  42.         <span class="admin-info">
  43.             <i class="layui-icon layui-icon-user"></i> {$data['admin']['username']}【{$data['group']['title']}】
  44.             <a href="javascript:;" onclick="logout()"><i class="layui-icon layui-icon-logout"></i> 退出</a>
  45.         </span>
  46.     </div>
  47.     <!-- 侧边导航菜单 -->
  48.     <div class="main-menus">
  49.         <ul class="layui-nav layui-nav-tree layui-inline layui-bg-cyan">
  50.         {foreach $data['menuList'] as $k=>$menu}
  51.           <li class="layui-nav-item {if($k==0)}layui-nav-itemed{/if}">
  52.             <a href="javascript:;"><i class="layui-icon {$menu['icon']}"></i>&nbsp;&nbsp;{$menu['title']}</a>
  53.             {if $menu['children']}
  54.             <dl class="layui-nav-child">
  55.             {foreach $menu['children'] as $k=>$chd}  
  56.                   <dd><a href="javascript:;" onclick="firemenu(this)" controller="{$chd['controller']}" action="{$chd['action']}">{$chd['title']}</a><dd>
  57.             {/foreach}
  58.             </dl>
  59.             {/if}
  60.           </li>
  61.         {/foreach}
  62.         </ul>
  63.     </div>
  64.     <!-- 主操作内容区域 -->
  65.     <div class="main-contain">
  66.         <iframe src="/admin/home/welcome" frameborder="0"></iframe>
  67.     </div>
  68. </body>
  69. </html>
  71. <script>
  72.     $ = layui.jquery;
  74.     /*function reset_height(obj){
  75.         // 当前页面高度-顶部信息条高度 = 主体区域高度
  76.         var height = (document.documentElement.clientHeight)-$('.myheader').height();
  77.         // 设置主体区域的高度
  78.         $(obj).parent('div').height(height);
  79.     }*/
  81.     // 返回首页
  82.     function goIndex(){
  83.         window.location.href = '/';
  84.     }
  86.     // 退出登陆
  87.     function logout(){
  88.         layer.confirm('确定要退出登陆吗？',{
  89.             icon:3,
  90.             btn: ['确定','取消']
  91.         },function(){
  92.             $.get('admin/account/logout',function(res){
  93.                 layer.msg(res.msg,{icon:1});
  94.                 setTimeout(function(){
  95.                     window.location.href = "/admin/account/login";
  96.                 },1000)
  97.             },'json');
  98.         });
  99.     }
  100. </script>

优化无限极菜单查询操作，避免频繁的从数据库中查询操作，我们将第一次查询出来的菜单数据进行文件保存处理、Cacheh缓存处理、分别查询出所有一级和二级菜单，在分别遍历循环处理等优化方案。

  1. <?php
  2. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Session;
  6. use think\facade\View;
  7. use think\facade\Db;
  8. use think\facade\Cache;
  9. use think\facade\Request;
  10. use app\admin\controller\Base;
  12. /**
  13.  * 后台首页
  14.  */
  15. class Home extends Base
  16. {
  18.     public function index(){
  19.         // 用户信息
  20.         // $data['admin'] = Session::get('admin');
  21.         // 获取继承父类Base的属性
  22.         $data['admin'] = $this->admin;
  23.         // 用户角色(根据用户信息的角色gid查询对应的角色名称)
  24.         // $data['group'] = Db::table('admin_group')->where('id',$data['admin']['gid'])->find();
  25.         $data['group'] = $this->mygroup;
  28.         /*** 方案一：直接读数据库   根据一级菜单循环读取二级菜单
  29.         // 查询一级菜单（pid==0）
  30.         $data['menuList'] = Db::table('admin_menu')->where([['pid','=','0'],['status','=','0']])->select()->toArray();
  31.         // 根据一级菜单mid 查询对应的pid二级菜单
  32.         foreach ($data['menuList'] as $key => $menu) {
  33.             $data['menuList'][$key]['children'] = Db::table('admin_menu')->where('pid','=',$menu['mid'])->select();
  34.         }
  35.         **/
  38.         /*** 方案二：优化数据读取  将一级和二级分别都读取出来，根据一级的循环遍历查找对应二级
  39.         // 查询出所有一级菜单 （pid==0）
  40.         $data['menuList'] = Db::table('admin_menu')->where([['pid','=','0'],['status','=','0']])->select()->toArray();
  41.         // 查询出所有二级菜单 （pid > 0）
  42.         $secondLists = Db::table('admin_menu')->where([['pid','>','0'],['status','=','0']])->select()->toArray();
  43.         // 遍历一级菜单
  44.         foreach ($data['menuList'] as $key => $menu) {
  45.             // 遍历二级菜单
  46.             $data['menuList'][$key]['children'] = [];
  47.             foreach ($secondLists as $chd) {
  48.                 // 根据一级菜单mid找出所有自己的二级菜单pid放到自己children的数组下面 二级pid == 一级mid 
  49.                 if($menu['mid']==$chd['pid']){
  50.                     $data['menuList'][$key]['children'][] = $chd;
  51.                 }
  52.             }
  53.         }
  54.         **/
  57.         /*** 方案一：优化 原生PHP操作文件 将第一次读取的数据存储到文件中 
  58.         $cache_file = 'menuData.txt';
  59.         // 检查文件是否存在,不存在则创建
  60.         if(!file_exists($cache_file)){
  61.             touch($cache_file);
  62.         }
  63.         // 读取文件数据
  64.         $menus = file_get_contents($cache_file);
  65.         // 判断是否读取到数据
  66.         if(empty($menus)){
  67.             $menus  = Db::table('admin_menu')->where([['pid','=','0'],['status','=','0']])->select()->toArray();
  68.             // 根据一级菜单mid 查询对应的pid二级菜单
  69.             foreach ($menus as $key => $menu) {
  70.                 $menus[$key]['children'] = Db::table('admin_menu')->where('pid','=',$menu['mid'])->select();
  71.             }
  72.             // 将读取的数据存储起来
  73.             file_put_contents($cache_file,json_encode($menus));
  74.         }else{
  75.             // 如果读取到了数据，我们将其转化为数组
  76.             $menus = json_decode($menus,true);
  77.         }
  78.         $data['menuList'] = $menus;
  79.         **/
  81.         /*** 方案二： 使用tp的cache缓存机制存储 */
  82.         $menus = Cache::get('menus');
  83.         $where= [
  84.             ['status','=','0'], // 筛选没有被禁用的菜单
  85.             ['ishidden','=','0'], // 筛选可用显示的菜单
  86.             ['mid','in',$this->mygroup['rights']] // 过滤有权限的菜单才显示
  87.         ];
  88.         if(empty($menus)){
  89.             $menus  = Db::table('admin_menu')->where('pid','=','0')->where($where)->select()->toArray();
  90.             foreach ($menus as $key => $menu) {
  91.                 $menus[$key]['children'] = Db::table('admin_menu')->where('pid','=',$menu['mid'])->where($where)->select()->toArray();
  92.             }
  93.             Cache::set('menus',$menus);
  94.         }
  95.         $data['menuList'] = $menus;
  96.         // 注意：以上两种方式虽然我们将数据存到了缓存文件中，避免了数据重复读取，但是当缓存文件存在时，他永远不会再从数据库中读取数据，这时在修改导航的数据时，需要先清除缓存文件，不然他不会被更新到页面中，此时的缓存数据还是第一次读取的旧数据。
  99.         View::assign([
  100.             'data'=>$data
  101.         ]);
  102.         return View::fetch('/home/index');
  103.     }
  105.     public function welcome(){
  106.         return View::fetch('/home/welcome');
  107.     }
  109. }
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录