欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

laravel--通用后台管理系统--用户的登录和退出--用户的增删改查

程序员文章站 2022-05-16 21:44:51
...

学习总结

1.用户的退出用到Auth::logout()方法

2.保存数据时用save方法，需要通过判断是否存在用户id值判断是增加还是修改用户数据

3.可以通过layer.open()中的btn和yes属性给弹窗添加按钮和按钮方法

1.admin控制器admin.php

    

    2. 

  2. <?php
    3. 

    4. 

  4. namespace App\Http\Controllers\admins;
    5. 

    6. 

  6. use App\Http\Controllers\Controller;
    7. 

    8. 

  8. use Illuminate\Support\Facades\Hash;//哈希密码加密
    9. 

    10. 

  10. use Illuminate\Http\Request;
    11. 

  11. //引入数据库查询构造器，链式调用
    12. 

  12. use Illuminate\Support\Facades\DB;
    13. 

  13. //后台账号管理控制器
    14. 

  14. class Admin extends Controller
    15. 

  15. {
    16. 

  16.     //账号列表
    17. 

  17.     public function index(){
    18. 

  18.         $res['admins'] = DB::table('admin')->lists();
    19. 

  19.         $res['admin_group']=DB::table('admin_group')->select('gid','title')->cate('gid');
    20. 

  20.         return view('/admins/admin/index',$res);
    21. 

  21.     }
    22. 

    23. 

  23.     //添加账号
    24. 

  24.     public function add()
    25. 

  25.     {
    26. 

  26.         $res['groups']=DB::table('admin_group')->lists();
    27. 

  27.         return view('/admins/admin/add',$res);
    28. 

  28.     }
    29. 

  29.     //修改账号
    30. 

  30.     public function edit(Request $req)
    31. 

  31.     {
    32. 

  32.         $aid = $req->id;
    33. 

  33.         $res['admin'] = DB::table('admin')->where('id',$aid)->item();
    34. 

  34.         $res['groups']=DB::table('admin_group')->lists();
    35. 

  35.         // echo '<pre>';
    36. 

  36.         // print_r($res);
    37. 

  37.         return view('/admins/admin/edit',$res);
    38. 

  38.     }
    39. 

  39.     //保存账号
    40. 

  40.     public function save(Request $req)
    41. 

  41.     {   
    42. 

  42.         $aid =(int)$req->aid;
    43. 

  43.         if($aid):
    44. 

  44.             //如果aid不为0，则代表是修改管理员
    45. 

  45.             if(trim($req->password)!=='')://如果修改管理员是密码框为空，代理不修改密码，就不用更新密码字段
    46. 

  46.                 $data['password'] =Hash::make(trim($req->password));
    47. 

  47.             endif;
    48. 

  48.         else:
    49. 

  49.             //如果aid为0，则代表是添加管理员
    50. 

  50.             //判断用户名是否为空
    51. 

  51.             if(trim($req->username)===''):
    52. 

  52.                 return json_encode(['status'=>'1','msg'=>'用户名不能为空']);
    53. 

  53.              endif;
    54. 

  54.              $data['username'] = trim($req->username);
    55. 

    56. 

  56.              //判断用户是否存在
    57. 

  57.              $res = DB::table('admin')->where('username',$data['username'])->item();
    58. 

  58.              if($res):
    59. 

  59.                 return json_encode(['status'=>'1','msg'=>'用户已存在']);
    60. 

  60.              endif;
    61. 

    62. 

  62.              //判断密码是否为空
    63. 

  63.             if(trim($req->password)===''):
    64. 

  64.                 return json_encode(['status'=>'1','msg'=>'密码不能为空']);
    65. 

  65.              endif;             
    66. 

  66.              $data['password'] =Hash::make(trim($req->password));
    67. 

  67.              //$data['password'] =password_hash(trim($req->password),PASSWORD_DEFAULT);与上一条语句功能一样
    68. 

  68.         endif;
    69. 

    70. 

    71. 

  71.         if(trim($req->gid)===''):
    72. 

  72.             return json_encode(['status'=>'1','msg'=>'必须选择角色']);
    73. 

  73.          endif;
    74. 

  74.         $data['gid'] = $req->gid;
    75. 

    76. 

  76.         $data['real_name'] = $req->real_name;    
    77. 

  77.         $data['status'] = $req->status?0:1;//0代表正常，1代表禁用
    78. 

  78.         $data['add_time']=time();
    79. 

    80. 

  80.         if($aid):
    81. 

  81.             $res = DB::table('admin')->where('id',$aid)->update($data);
    82. 

  82.         else:
    83. 

  83.             $res = DB::table('admin')->insert($data);
    84. 

  84.         endif;
    85. 

  85.         if($res):
    86. 

  86.             return json_encode(['status'=>'0','msg'=>'保存成功']);
    87. 

  87.         else:
    88. 

  88.             return json_encode(['status'=>'1','msg'=>'保存失败']);
    89. 

  89.         endif;
    90. 

  90.         // echo '<pre>';
    91. 

  91.         // print_r($data);
    92. 

  92.     }
    93. 

    94. 

  94.     //删除账号
    95. 

  95.     public function del(Request $req)
    96. 

  96.     {
    97. 

  97.         $aid = $req->id;
    98. 

  98.         $res =DB::table('admin')->where('id',$aid)->delete();
    99. 

  99.         if($res)
    100. 

  100.         {
    101. 

  101.             return json_encode(['status'=>'0','msg'=>'删除成功']);
    102. 

  102.         }
    103. 

  103.         else
    104. 

  104.         {
    105. 

  105.             return json_encode(['status'=>'1','msg'=>'删除失败']);
    106. 

  106.         }
    107. 

  107.     }
    108. 

  108. }
    109.

2.用户列表显示页面index.blade.php

    

    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

    5. 

  5. <head>
    6. 

  6.     <meta charset="UTF-8">
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 

  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    9. 

  9.     <script src="/static/plugins/layui/layui.js"></script>
    10. 

  10.     <title>账号管理</title>
    11. 

  11. </head>
    12. 

  12. <style>
    13. 

  13. .addBtn {
    14. 

  14.     margin-top: 10px;
    15. 

  15.     width: 120px;
    16. 

  16.     margin-left: auto;
    17. 

  17.     margin-right: 50px;
    18. 

  18. }
    19. 

    20. 

  20. .layui-table {
    21. 

  21.     width: 95%;
    22. 

  22.     margin: 20px;
    23. 

  23. }
    24. 

  24. </style>
    25. 

    26. 

  26. <body>
    27. 

  27.     <div class="addBtn">
    28. 

  28.         <button class="layui-btn" onclick="add()">添加管理员</button>
    29. 

  29.     </div>
    30. 

  30.     <table class="layui-table">
    31. 

  31.         <thead>
    32. 

  32.             <tr>
    33. 

  33.                 <th>编号</th>
    34. 

  34.                 <th>用户名</th>
    35. 

  35.                 <th>角色</th>
    36. 

  36.                 <th>真实姓名</th>
    37. 

  37.                 <th>状态</th>
    38. 

  38.                 <th>注册时间</th>
    39. 

  39.                 <th>操作</th>
    40. 

  40.             </tr>
    41. 

  41.         </thead>
    42. 

  42.         <tbody>
    43. 

    44. 

  44.             @foreach($admins as $admin)
    45. 

  45.             <tr>
    46. 

  46.                 <td>{{$admin['id']}}</td>
    47. 

  47.                 <td>{{$admin['username']}}</td>
    48. 

  48.                 <td>{{$admin_group[$admin['gid']]['title']}}</td>
    49. 

  49.                 <td>{{$admin['real_name']}}</td>
    50. 

  50.                 <td>{{$admin['status']?'禁用':'正常'}}</td>
    51. 

  51.                 <td>{{$admin['add_time']?date('Y-m-d',$admin['add_time']):''}}</td>
    52. 

  52.                 <td>
    53. 

  53.                     <button class="layui-btn layui-btn-xs" onclick="edit({{$admin['id']}})">修改</button>
    54. 

  54.                     <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="del({{$admin['id']}})">删除</button>
    55. 

  55.                 </td>
    56. 

  56.             </tr>
    57. 

  57.             @endforeach
    58. 

  58.         </tbody>
    59. 

  59.     </table>
    60. 

  60. </body>
    61. 

  61. <script>
    62. 

  62. layui.use(['layer'], function() {
    63. 

  63.     layer = layui.layer;
    64. 

  64.     $ = layui.jquery;
    65. 

  65. });
    66. 

    67. 

  67. //添加管理员
    68. 

  68. function add() {
    69. 

  69.     //iframe层
    70. 

  70.     layer.open({
    71. 

  71.         type: 2,
    72. 

  72.         title: '添加管理员',
    73. 

  73.         shadeClose: true,
    74. 

  74.         shade: 0.8,
    75. 

  75.         area: ['380px', '80%'],
    76. 

  76.         content: '/admins/admin/add', //iframe的url
    77. 

  77.         btn: ['保存'],
    78. 

  78.         yes: function(index, layero) {
    79. 

  79.             //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.子页面的方法名称();
    80. 

  80.             var iframeWin = window[layero.find('iframe')[0]['name']];;
    81. 

  81.             iframeWin.save();
    82. 

  82.         }
    83. 

    84. 

  84.     });
    85. 

  85. }
    86. 

    87. 

  87. //修改管理员
    88. 

  88. function edit(id) {
    89. 

  89.     //iframe层
    90. 

  90.     layer.open({
    91. 

  91.         type: 2,
    92. 

  92.         title: '修改管理员',
    93. 

  93.         shadeClose: true,
    94. 

  94.         shade: 0.8,
    95. 

  95.         area: ['380px', '80%'],
    96. 

  96.         content: '/admins/admin/edit?id='+id, //iframe的url
    97. 

  97.         btn: ['保存'],
    98. 

  98.         yes: function(index, layero) {
    99. 

  99.             //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.子页面的方法名称();
    100. 

  100.             var iframeWin = window[layero.find('iframe')[0]['name']];;
    101. 

  101.             iframeWin.save();
    102. 

  102.         }
    103. 

    104. 

  104.     });
    105. 

  105. }
    106. 

    107. 

  107. //删除管理员
    108. 

  108. function del(id) {
    109. 

  109.     layer.confirm('确认要删除管理员吗？', function() {
    110. 

  110.         $.get('/admins/admin/del?id=' + id, function(res) {
    111. 

  111.             if (res.status > 0) {
    112. 

  112.                 layer.alert(res.msg, {
    113. 

  113.                     icon: 2
    114. 

  114.                 });
    115. 

  115.             } else {
    116. 

  116.                 layer.msg(res.msg, {
    117. 

  117.                     time: 3000
    118. 

  118.                 });
    119. 

  119.                 window.location.reload();
    120. 

  120.             }
    121. 

  121.         }, 'json');
    122. 

  122.     });
    123. 

    124. 

    125. 

  125. }
    126. 

  126. </script>
    127. 

    128. 

  128. </html>
    129.

laravel--通用后台管理系统--用户的登录和退出--用户的增删改查

3.添加用户add.blade.php

    

    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

    5. 

  5. <head>
    6. 

  6.     <meta charset="UTF-8">
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 

  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    9. 

  9.     <script src="/static/plugins/layui/layui.js"></script>
    10. 

  10.     <title>添加管理员</title>
    11. 

  11.     <style>
    12. 

  12.     .layui-form {
    13. 

  13.         margin-top: 20px;
    14. 

  14.         margin-right: 20px;
    15. 

  15.     }
    16. 

  16.     </style>
    17. 

  17. </head>
    18. 

    19. 

  19. <body>
    20. 

  20.     <form action="" class="layui-form">
    21. 

  21.         @csrf
    22. 

  22.         <div class="layui-form-item">
    23. 

  23.             <label for="" class="layui-form-label">用户名</label>
    24. 

  24.             <div class="layui-input-inline">
    25. 

  25.                 <input type="text" class="layui-input" name="username">
    26. 

  26.             </div>
    27. 

  27.         </div>
    28. 

  28.         <div class="layui-form-item">
    29. 

  29.             <label for="" class="layui-form-label">密码</label>
    30. 

  30.             <div class="layui-input-inline">
    31. 

  31.                 <input type="password" class="layui-input" name="password">
    32. 

  32.             </div>
    33. 

  33.         </div>
    34. 

    35. 

  35.         <div class="layui-form-item">
    36. 

  36.             <label for="" class="layui-form-label">角色</label>
    37. 

  37.             <div class="layui-input-inline">
    38. 

  38.                 <select name="gid">
    39. 

  39.                     <option value=""></option>
    40. 

  40.                     @foreach($groups as $group )
    41. 

  41.                     <option value="{{$group['gid']}}">{{$group['title']}}</option>
    42. 

  42.                     @endforeach
    43. 

  43.                 </select>
    44. 

  44.             </div>
    45. 

    46. 

  46.         </div>
    47. 

    48. 

  48.         <div class="layui-form-item">
    49. 

  49.             <label for="" class="layui-form-label">真实姓名</label>
    50. 

  50.             <div class="layui-input-inline">
    51. 

  51.                 <input type="text" class="layui-input" name="real_name">
    52. 

  52.             </div>
    53. 

  53.         </div>
    54. 

    55. 

  55.         <div class="layui-form-item">
    56. 

  56.             <label for="" class="layui-form-label">状态</label>
    57. 

  57.             <div class="layui-input-inline">
    58. 

  58.                 <input type="checkbox" name="status" lay-skin='switch' lay-text='正常|禁用' checked>
    59. 

  59.             </div>
    60. 

  60.         </div>
    61. 

  61.     </form>
    62. 

  62. </body>
    63. 

    64. 

  64. <script>
    65. 

  65. layui.use(['form', 'layer'], function() {
    66. 

  66.     var form = layui.form;
    67. 

  67.     var layer = layui.layer;
    68. 

  68.     $ = layui.jquery;
    69. 

  69. });
    70. 

    71. 

  71. //在父窗口中调用了save方法
    72. 

  72. function save() {
    73. 

    74. 

  74.     if ($('input[name="username"]').val().trim() === '') {
    75. 

  75.         error('请输入用户名');
    76. 

  76.         return false;
    77. 

  77.     }
    78. 

  78.     if ($('input[name="password"]').val().trim() === '') {
    79. 

  79.         error('请输入密码');
    80. 

  80.         return false;
    81. 

  81.     }
    82. 

  82.     if ($('select[name="gid"]').val().trim() === '') {
    83. 

  83.         error('请选择角色');
    84. 

  84.         return false;
    85. 

  85.     }
    86. 

    87. 

  87.     //把form表单中的数据序列化后通过post提交
    88. 

  88.     var form = $('form').serialize();
    89. 

    90. 

  90.     $.post('/admins/admin/save',
    91. 

  91.         form,
    92. 

  92.         function(res) {
    93. 

  93.             if (res.status > 0) {
    94. 

  94.                 error(res.msg);
    95. 

  95.             } else {
    96. 

  96.                 layer.msg(res.msg, {
    97. 

  97.                     time: 3000
    98. 

  98.                 });
    99. 

  99.                 //假设这是iframe页
    100. 

  100.                 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    101. 

  101.                 //关闭当前窗口
    102. 

  102.                 parent.layer.close(index); //再执行关闭  
    103. 

  103.                 //刷新父窗口，重新显示账号管理员列表
    104. 

  104.                 parent.window.location.reload();
    105. 

  105.             }
    106. 

  106.         }, 'json');
    107. 

    108. 

  108.     function error(msg) {
    109. 

  109.         layer.alert(msg, {
    110. 

  110.             icon: 2
    111. 

  111.         });
    112. 

  112.     }
    113. 

  113. }
    114. 

  114. </script>
    115. 

    116. 

  116. </html>
    117.

laravel--通用后台管理系统--用户的登录和退出--用户的增删改查

4.修改用户edit.blade.php

    

    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

    5. 

  5. <head>
    6. 

  6.     <meta charset="UTF-8">
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 

  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    9. 

  9.     <script src="/static/plugins/layui/layui.js"></script>
    10. 

  10.     <title>修改管理员</title>
    11. 

  11.     <style>
    12. 

  12.     .layui-form {
    13. 

  13.         margin-top: 20px;
    14. 

  14.         margin-right: 20px;
    15. 

  15.     }
    16. 

  16.     </style>
    17. 

  17. </head>
    18. 

    19. 

  19. <body>
    20. 

  20.     <form action="" class="layui-form">
    21. 

  21.         @csrf
    22. 

  22.         <div class="layui-form-item">
    23. 

  23.             <input type="hidden" name="aid" value="{{$admin['id']}}">
    24. 

  24.             <label for="" class="layui-form-label">用户名</label>
    25. 

  25.             <div class="layui-input-inline">
    26. 

  26.                 <input type="text" class="layui-input" name="username" disabled value="{{$admin['username']}}">
    27. 

  27.             </div>
    28. 

  28.         </div>
    29. 

  29.         <div class="layui-form-item">
    30. 

  30.             <label for="" class="layui-form-label">密码</label>
    31. 

  31.             <div class="layui-input-inline">
    32. 

  32.                 <input type="password" class="layui-input" name="password">
    33. 

  33.             </div>
    34. 

  34.         </div>
    35. 

    36. 

  36.         <div class="layui-form-item">
    37. 

  37.             <label for="" class="layui-form-label">角色</label>
    38. 

  38.             <div class="layui-input-inline">
    39. 

  39.                 <select name="gid">
    40. 

  40.                     <option value=""></option>
    41. 

  41.                     @foreach($groups as $group )
    42. 

  42.                     @if($group['gid']==$admin['gid'])
    43. 

  43.                     <option value="{{$group['gid']}}" selected>{{$group['title']}}</option>
    44. 

  44.                     @else
    45. 

  45.                     <option value="{{$group['gid']}}">{{$group['title']}}</option>
    46. 

  46.                     @endif
    47. 

    48. 

  48.                     @endforeach
    49. 

  49.                 </select>
    50. 

  50.             </div>
    51. 

    52. 

  52.         </div>
    53. 

    54. 

  54.         <div class="layui-form-item">
    55. 

  55.             <label for="" class="layui-form-label">真实姓名</label>
    56. 

  56.             <div class="layui-input-inline">
    57. 

  57.                 <input type="text" class="layui-input" name="real_name" value="{{$admin['real_name']}}">
    58. 

  58.             </div>
    59. 

  59.         </div>
    60. 

    61. 

  61.         <div class="layui-form-item">
    62. 

  62.             <label for="" class="layui-form-label">状态</label>
    63. 

  63.             <div class="layui-input-inline">
    64. 

  64.                 @if($admin['status'])
    65. 

  65.                 <input type="checkbox" name="status" lay-skin='switch' lay-text='正常|禁用'>
    66. 

  66.                 @else
    67. 

  67.                 <input type="checkbox" name="status" lay-skin='switch' lay-text='正常|禁用' checked>
    68. 

  68.                 @endif
    69. 

    70. 

  70.             </div>
    71. 

  71.         </div>
    72. 

  72.     </form>
    73. 

  73. </body>
    74. 

    75. 

  75. <script>
    76. 

  76. layui.use(['form', 'layer'], function() {
    77. 

  77.     var form = layui.form;
    78. 

  78.     var layer = layui.layer;
    79. 

  79.     $ = layui.jquery;
    80. 

  80. });
    81. 

    82. 

  82. //在父窗口中调用了save方法
    83. 

  83. function save() {
    84. 

    85. 

  85.     if ($('select[name="gid"]').val().trim() === '') {
    86. 

  86.         error('请选择角色');
    87. 

  87.         return false;
    88. 

  88.     }
    89. 

    90. 

  90.     //把form表单中的数据序列化后通过post提交
    91. 

  91.     var form = $('form').serialize();
    92. 

    93. 

  93.     $.post('/admins/admin/save',
    94. 

  94.         form,
    95. 

  95.         function(res) {
    96. 

  96.             if (res.status > 0) {
    97. 

  97.                 error(res.msg);
    98. 

  98.             } else {
    99. 

  99.                 layer.msg(res.msg, {
    100. 

  100.                     time: 3000
    101. 

  101.                 });
    102. 

  102.                 //假设这是iframe页
    103. 

  103.                 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    104. 

  104.                 //关闭当前窗口
    105. 

  105.                 parent.layer.close(index); //再执行关闭  
    106. 

  106.                 //刷新父窗口，重新显示账号管理员列表
    107. 

  107.                 parent.window.location.reload();
    108. 

  108.             }
    109. 

  109.         }, 'json');
    110. 

    111. 

  111.     function error(msg) {
    112. 

  112.         layer.alert(msg, {
    113. 

  113.             icon: 2
    114. 

  114.         });
    115. 

  115.     }
    116. 

  116. }
    117. 

  117. </script>
    118. 

    119. 

  119. </html>
    120.

laravel--通用后台管理系统--用户的登录和退出--用户的增删改查

5.home控制器home.php

    

    2. 

  2. <?php
    3. 

    4. 

  4. namespace App\Http\Controllers\admins;
    5. 

    6. 

  6. use App\Http\Controllers\Controller;
    7. 

    8. 

  8. use Illuminate\Support\Facades\Auth;
    9. 

    10. 

  10. use Illuminate\Http\Request;
    11. 

  11. //引入数据库查询构造器，链式调用
    12. 

  12. use Illuminate\Support\Facades\DB;
    13. 

  13. //后台主页
    14. 

  14. class Home extends Controller
    15. 

  15. {
    16. 

  16.     public function index()
    17. 

  17.     {
    18. 

    19. 

  19.         $menus = DB::table('admin_menu')->lists();
    20. 

  20.         $res = [];
    21. 

  21.         foreach($menus as $menu ):
    22. 

  22.             //ishidden为0代表该显示该菜单
    23. 

  23.             //pid等于0的并且的为*菜单存储在pmenus中
    24. 

  24.             if($menu['pid']=='0' && $menu['ishidden']=='0'):
    25. 

  25.                 $res['pmenus'][] = $menu;
    26. 

  26.             endif;
    27. 

  27.             //pid不等于0的为子菜单，按照pid进行分组存储在cmenus中
    28. 

  28.             if(($menu['pid']!='0')&&($menu['ishidden']=='0')):
    29. 

  29.                 $res['cmenus'][$menu['pid']][] = $menu;
    30. 

  30.             endif;
    31. 

  31.         endforeach;
    32. 

    33. 

  33.         $res['username'] = Auth::user()->username;
    34. 

  34.         // echo '<pre>';
    35. 

  35.         // print_r($res);
    36. 

  36.         // exit;
    37. 

  37.         return view('/admins/home/index',$res);
    38. 

  38.     }
    39. 

    40. 

  40.     public function welcome()
    41. 

  41.     {
    42. 

  42.         return view('/admins/home/welcome');
    43. 

  43.     }
    44. 

    45. 

  45.     public function logout()
    46. 

  46.     {
    47. 

  47.         Auth::logout();
    48. 

  48.         return view('/admins/account/login');
    49. 

  49.     }
    50. 

  50. }
    51. 

    52. 

  52. ?>
    53.

6.后台首页index.blade.php,菜单自动加载，显示用户名称，实现用户退出功能

    

    2. 

  2. <!DOCTYPE html>
    3. 

  3. <html lang="en">
    4. 

    5. 

  5. <head>
    6. 

  6.     <meta charset="UTF-8">
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8. 

  8.     <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    9. 

  9.     <script src="/static/plugins/layui/layui.js"></script>
    10. 

  10.     <title>后台首页</title>
    11. 

  11.     <style>
    12. 

  12.     body {
    13. 

  13.         margin: 0px;
    14. 

  14.         padding: 0px;
    15. 

  15.         box-sizing: border-box;
    16. 

  16.     }
    17. 

    18. 

  18.     /* 头部 */
    19. 

  19.     .header {
    20. 

  20.         width: 100%;
    21. 

  21.         height: 50px;
    22. 

  22.         line-height: 50px;
    23. 

  23.         background-color: #01AAED;
    24. 

  24.         color: #fff;
    25. 

  25.         display: flex;
    26. 

  26.         flex-flow: row nowrap;
    27. 

  27.         justify-content: space-between;
    28. 

  28.     }
    29. 

    30. 

  30.     .header h3 {
    31. 

  31.         margin-left: 20px;
    32. 

  32.     }
    33. 

    34. 

  34.     .header>div {
    35. 

  35.         margin-right: 20px;
    36. 

  36.     }
    37. 

    38. 

  38.     .header>div>a {
    39. 

  39.         color: #fff;
    40. 

  40.     }
    41. 

    42. 

  42.     .header>div>a:hover {
    43. 

  43.         color: orange;
    44. 

  44.     }
    45. 

    46. 

  46.     /* 侧边栏和主页面显示区 */
    47. 

  47.     .container {
    48. 

  48.         display: flex;
    49. 

  49.         flex-flow: row nowrap;
    50. 

  50.         justify-content: space-between;
    51. 

  51.         align-items: center;
    52. 

  52.     }
    53. 

    54. 

  54.     /* 侧边栏 */
    55. 

  55.     .aside {
    56. 

  56.         width: 200px;
    57. 

  57.         background-color: #01AAED;
    58. 

  58.     }
    59. 

    60. 

  60.     .aside>.layui-collapse {
    61. 

  61.         width: 200px;
    62. 

  62.     }
    63. 

    64. 

  64.     .aside .layui-colla-title {
    65. 

  65.         background-color: #01AAED;
    66. 

  66.         color: #fff;
    67. 

  67.     }
    68. 

    69. 

  69.     .aside .layui-nav {
    70. 

  70.         margin-left: -15px;
    71. 

  71.         margin-top: -10px;
    72. 

  72.         margin-bottom: -10px;
    73. 

  73.         width: 197px;
    74. 

  74.         background-color: #fff;
    75. 

  75.     }
    76. 

    77. 

  77.     .aside .layui-nav .layui-nav-item {
    78. 

  78.         border-bottom: 1px solid #e2e2e2;
    79. 

  79.         border-right: 1px solid #e2e2e2;
    80. 

  80.     }
    81. 

    82. 

  82.     .aside .layui-nav .layui-nav-item a {
    83. 

  83.         color: #333;
    84. 

  84.     }
    85. 

    86. 

  86.     .aside .layui-nav .layui-nav-item a:hover {
    87. 

  87.         background-color: lightseagreen;
    88. 

  88.     }
    89. 

    90. 

  90.     /* 主页面显示区 */
    91. 

  91.     .main {
    92. 

  92.         width: 100%;
    93. 

  93.     }
    94. 

    95. 

  95.     .main>iframe {
    96. 

  96.         width: 100%;
    97. 

  97.     }
    98. 

  98.     </style>
    99. 

  99. </head>
    100. 

    101. 

  101. <body>
    102. 

  102.     <!-- 头部 -->
    103. 

  103.     <div class="header">
    104. 

  104.         <h3>瑄然软件后台管理系统</h3>
    105. 

  105.         <div>
    106. 

  106.             <span class="layui-icon layui-icon-username">{{$username}}</span>
    107. 

  107.             <a href="/admins/home/logout">退出</a>
    108. 

  108.         </div>
    109. 

  109.     </div>
    110. 

    111. 

  111.     <div class="container">
    112. 

  112.         <!-- 侧边栏 -->
    113. 

  113.         <div class="aside">
    114. 

  114.             <div class="layui-collapse" lay-accordion>
    115. 

  115.                 @foreach($pmenus as $key => $pmenu)
    116. 

  116.                 <div class="layui-colla-item">
    117. 

  117.                     <h2 class="layui-colla-title">{{$pmenu['title']}}</h2>
    118. 

  118.                     <!-- 默认显示第一个菜单的子菜单 -->
    119. 

  119.                     <div class="layui-colla-content {{$key?'':'layui-show'}}">
    120. 

  120.                         <!-- <div class="layui-colla-content layui-show"> -->
    121. 

  121.                         <ul class="layui-nav layui-nav-tree">
    122. 

  122.                             <!-- 找到一级菜单所对应的子菜单 -->
    123. 

  123.                             <?php $cmenu = $cmenus[$pmenu['mid']];?>
    124. 

  124.                             @foreach($cmenu as $item)
    125. 

  125.                             <li class="layui-nav-item">
    126. 

  126.                                 <a href="/admins/{{$item['controller']}}/{{$item['action']}}"
    127. 

  127.                                     target="showMain">{{$item['title']}}</a>
    128. 

  128.                             </li>
    129. 

  129.                             @endforeach
    130. 

  130.                         </ul>
    131. 

  131.                     </div>
    132. 

  132.                 </div>
    133. 

  133.                 @endforeach
    134. 

  134.             </div>
    135. 

  135.         </div>
    136. 

  136.         <!-- 主页面显示区 -->
    137. 

  137.         <div class="main">
    138. 

  138.             <iframe src="/admins/home/welcome" frameborder="0" name="showMain"></iframe>
    139. 

  139.         </div>
    140. 

  140.     </div>
    141. 

    142. 

  142. </body>
    143. 

    144. 

  144. <script>
    145. 

  145. layui.use(['element', 'layer'], function() {
    146. 

  146.     var element = layui.element;
    147. 

  147.     $ = layui.jquery;
    148. 

  148.     var aside_height = document.documentElement.clientHeight - 50;
    149. 

    150. 

  150.     $('.aside').height(aside_height);
    151. 

  151.     //主页面的高度和侧边栏高度相同
    152. 

  152.     $('.main>iframe').height(aside_height);
    153. 

  153. });
    154. 

  154. </script>
    155. 

    156. 

  156. </html>
    157.

7.点击退出按钮，用户退出到登录页面

laravel--通用后台管理系统--用户的登录和退出--用户的增删改查

上一篇： php 数据库操作mysqli

下一篇： laravel--通用后台管理系统--分页--图片上传

推荐阅读