【商城后台管理系统】基于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. }

更多相关文章

  1. PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限
  2. PHP 封装常用函数
  3. 数据库表达式查询 - 原生mysql查询 - 事务操作 - 翻页
  4. 【ThinkPHP框架】tp的视图标签、request请求、数据库链式查询等
  5. 接入超过100家快递物流查询API接口调用指南
  6. 快递公司如何接入快递100？快递100的快递查询订阅推送接口示例
  7. 快递公司如何接入快递100？快递100的快递实时查询接口示例
  8. 史上最全面MySQL数据库中DML查询语句SELECT详解（收藏）
  9. 数据库查询构造器

随机推荐

  1. 之所以被裁也许是少了这些东西 [每日前端
  2. 年终总结 | 小鹿给读者拜年啦！
  3. JavaScript中的执行上下文和堆栈[每日前
  4. 现代浏览器探秘(part 1)：架构 [每日前端夜
  5. 讲真，Markdown有啥魅力，竟让如此多人入迷！
  6. 深入探讨 Undefined [每日前端夜话(0x0E)
  7. 《大前端吊打面试官系列》之备战面试篇！
  8. 现代浏览器探秘(part2):导航[每日前端夜
  9. 用Python和Tableau对母婴商品销量进行数
  10. 浅议 Promise/Futures 模型 [每日前端夜