PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

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

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


二.部署流程

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

HTML 代码块

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

PHP 代码块

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