search

博客列表 >PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}

PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}

JiaJieChen
JiaJieChen原创
2021年06月09日 17:19:522386浏览

PHP:【商城后台管理系统】admin超级管理员后台操作界面部署{无限级菜单}

一.超级管理员后台操作界面

二.部署流程

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

HTML 代码块

  1. <?php
  3. use think\facade\Session;
  4. ?>
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>后台管理系统</title>
  12.     <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css" />
  13.     <script src="/static/layui-v2.6.8/layui/layui.js"></script>
  14.     <style>
  15.         :root,.layui-colla-content{
  16.             padding: 0;
  17.             margin: 0;
  18.             box-sizing: border-box;
  19.         }
  20.         a{
  21.             text-decoration: none;
  23.         }
  24.         .main-menus{
  25.             width: 200px;
  26.             height: calc(100% - 50px);
  27.             position:absolute;
  28.             background: #2F4056;
  30.         }
  31.         .layui-colla-title,
  32.         .layui-colla-content,
  33.         .layui-collapse,
  34.         .layui-colla-content, 
  35.         .layui-colla-item{
  36.             border: none;
  37.         }
  38.         .main-form{
  39.             position: absolute;
  40.             left: 200px;
  41.             right: 0;
  43.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <!-- 头部导航 -->
  49.     <div  class="layui-box" style="background: #1E9FFF;height:50px;line-height:50px;color:azure">
  50.         <div class="layui-box">
  51.            <span style="margin-left:20px;font-size:1.2rem;color:azure">admin后台管理系统</span> 
  52.            <span style="float: right;">
  53.            <i class="layui-icon layui-icon-username"></i>
  54.            {$data['admin']['username']}
  55.            <span>{$data['group']['title']=='' ?'【管理员】': $data['group']['title']}</span>
  56.            <a style="margin: 0 8px;color:azure" href="javascript:;" onclick="otuLogin()">退出登录</a>
  57.            </span>
  58.         </div>
  59.     </div>
  60.      <!-- 侧边导航 -->
  61.      <div class="main-menus">
  62.         <div class="layui-collapse layui-bg-cyan " lay-accordion>
  63.             {foreach($data['menuList'] as $menuKey => $menu)}
  64.             <div class="layui-colla-item layui-bg-cyan">
  65.                 <h2 class="layui-colla-title layui-bg-cyan">{$menu['title']}</h2>
  66.                 <div class="layui-colla-content {$menuKey == 0 ? 'layui-show' :''}" >
  68.                 <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
  69.                     {foreach($menu['children'] as $chd)}
  70.                     <li class="layui-nav-item"><a href="javascript:;">{$chd['title']}</a></li>
  71.                     {/foreach}
  72.                 </ul>
  74.                 </div>
  75.             </div>
  76.             {/foreach}
  77.         </div>
  78.      </div>
  79.       <!-- 主操作区 -->
  80.       <div class="main-form">
  81.         <iframe src="/admin/Home/main_form" frameborder="0" onload="setHeight(this)" style="height: 100%; width: 100%;">
  83.         </iframe>
  84.       </div>
  88. </body>
  89. </html>
  90. <script>
  91.     $ = layui.jquery;
  93.     //设置iframe 高度
  94.     function setHeight(obj) {
  95.         let height = document.documentElement.clientHeight - 50;
  96.         $(obj).parent('div').height(height);
  97.     }
  99.     //退出登录
  100.     function otuLogin() {
  101.         let date = {};
  102.         $.post('/admin/Home/otuLogin',date,function(res) {
  103.                 if (res.id == 1) {
  104.                     layer.alert(res.msg,{icon:1});
  105.                     setTimeout(() => {
  106.                         window.location.href = '/admin/Account/login';
  108.                     }, 1500);
  109.                 }else{
  110.                     layer.alert(res.msg,{icon:2});
  111.                 }
  112.         },"json")
  114.     }
  115. </script>

PHP 代码块

  2. <?php
  3. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Request;
  6. use think\facade\Db;
  7. use think\facade\View;
  8. use think\facade\Session;
  9. /**
  10.  * admin后台界面管理
  11.  */
  12. class Home extends BaseController
  13. {
  14.     //后台界面管理
  15.     public function index()
  16.     {   
  17.         //用户信息
  18.         $data['admin'] = Session::get('admin');
  19.         //用户角色
  20.         $data['group'] = Db::table('admin_group')->where('id',$data['admin']['gid'])->find();
  22.         //一级菜单
  23.         $data['menuList'] = Db::table('admin_menu')->where('pid',0)->select()->toArray();
  25.         //二级菜单
  26.         $menuList2 = Db::table('admin_menu')->where('pid','>',0)->select()->toArray();
  27.         foreach ($data['menuList'] as $key => $menu) {
  28.             $data['menuList'][$key]['children']  = [];
  29.             foreach ($menuList2 as  $chd) {
  30.                 if ($chd['pid'] == $menu['mid']) {
  31.                     $data['menuList'][$key]['children'][] = $chd;
  32.                 }
  33.             }
  34.         }
  36.         // print_r($data['menuList']);
  37.         // exit;
  39.         View::assign([
  40.             'data'=>$data 
  41.         ]);
  42.         return View::fetch('/home/index');
  43.     }
  45.     //后台主操作区域
  46.     public function main_form()
  47.     {   
  48.         $admin = Session::get('admin');
  49.         View::assign([
  50.             'username' => $admin,
  51.         ]);
  52.         return View::fetch("/home/main_form");
  53.     }
  55.     //退出登录
  56.     public function otuLogin()
  57.     {   
  58.         if (!Session::delete('admin')) {
  59.            echo json_encode(['id' => 1,'msg' => '退出登录成功']);
  60.         }else {
  61.             echo json_encode(['id' => 0,'msg' => '再次点击退出登录']);
  62.         }
  64.     }
  65. }
上一条：PHP:【商城后台管理系统】部署管理员未登录拦截，进行重定向下一条：thinkphp多数据库访问 - 创建博客页面路由 - 多应用配置系统和博客两个应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多