laravel8.5与layuiadmin整合(5)

22.为了操作方法，对 模板
/resources/views/admin/layout.blade.php
进行删减内容，并在左侧添加 系统管理 和 产品管理
修改如下

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin std - 通用后台管理模板系统（iframe标准版）</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/admin/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/layuiadmin/style/admin.css" media="all">
</head>
<body class="layui-layout-body">

<div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect>
                    <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                        <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;" layadmin-event="refresh" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">

                <li class="layui-nav-item" lay-unselect>
                    <a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心">
                        <i class="layui-icon layui-icon-notice"></i>

                        <!-- 如果有新消息，则显示小圆点 -->
                        <span class="layui-badge-dot"></span>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="note">
                        <i class="layui-icon layui-icon-note"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;">
                        <cite>贤心</cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a lay-href="set/user/info.html">基本资料</a></dd>
                        <dd><a lay-href="set/user/password.html">修改密码</a></dd>
                        <hr>
                        <dd  style="text-align: center;"><a href="{{route('admin.logout')}}">退出</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-hide-xs" lay-unselect>
                    <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
                </li>
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
                    <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
                </li>
            </ul>
        </div>

        <!-- 侧边菜单 -->
        <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
                <div class="layui-logo" lay-href="home/console.html">
                    <span>layuiAdmin</span>
                </div>

                <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
                    <li data-name="home" class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;" lay-tips="主页" lay-direction="2">
                            <i class="layui-icon layui-icon-home"></i>
                            <cite>主页</cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd data-name="console" class="layui-this">
                                <a lay-href="{{route('admin.index')}}">控制台</a>
                            </dd>
                            <dd data-name="console">
                                <a lay-href="{{route('admin.index1')}}">主页一</a>
                            </dd>
                            <dd data-name="console">
                                <a lay-href="{{route('admin.index2')}}">主页二</a>
                            </dd>
                        </dl>
                    </li>



                    <li data-name="user" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="系统管理" lay-direction="2">
                            <i class="layui-icon layui-icon-util"></i>
                            <cite>系统管理</cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a lay-href="">系统用户管理</a>
                            </dd>
                            <dd>
                                <a lay-href="">角色管理</a>
                            </dd>
                            <dd>
                                <a lay-href="">权限管理</a>
                            </dd>
                        </dl>
                    </li>

                    <li data-name="user" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="产品管理" lay-direction="2">
                            <i class="layui-icon layui-icon-read"></i>
                            <cite>产品管理</cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a lay-href="">产品列表管理</a>
                            </dd>
                        </dl>
                    </li>






                    <li data-name="get" class="layui-nav-item">
                        <a href="javascript:;" lay-href="//www.layui.com/admin/#get" lay-tips="授权" lay-direction="2">
                            <i class="layui-icon layui-icon-auz"></i>
                            <cite>授权</cite>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 页面标签 -->
        <div class="layadmin-pagetabs" id="LAY_app_tabs">
            <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
            <div class="layui-icon layadmin-tabs-control layui-icon-down">
                <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;"></a>
                        <dl class="layui-nav-child layui-anim-fadein">
                            <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                            <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                            <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
                <ul class="layui-tab-title" id="LAY_app_tabsheader">
                    <li lay-id="" lay-attr="" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
                </ul>
            </div>
        </div>


        <!-- 主体内容 -->
        <div class="layui-body" id="LAY_app_body">
            <div class="layadmin-tabsbody-item layui-show">
                <iframe src="{{route('admin.index')}}" frameborder="0" class="layadmin-iframe"></iframe>
            </div>
        </div>

        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
</div>

<script src="/static/admin/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/admin/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('index');
</script>


</body>
</html>
复制代码

23.开发系统管理->系统用户管理功能，在路由文件
/routes/web.php
添加如下内容

// 系统管理
Route::group(['prefix' => 'admin','middleware' => 'auth'],function() {
    // 获取系统用户列表
    Route::get('/user',[App\Http\Controllers\Admin\UserController::class, 'index'])
        ->name('admin.user');

});

24.建立文件 /app/Http/Controllers/Admin/UserController.php
并添加如下内容

复制代码
namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;

class UserController extends Controller
{
    public function index() {
        return view('admin.user.index');
    }
}
复制代码

25.那建上面的模板文件 /resources/views/admin/user/index.blade.php

26.在 /resources/views/admin/layout.blade.php文件中，修改
<a lay-href="">系统用户管理</a>
修改为
<a lay-href="{{route('admin.user')}}">系统用户管理</a>

此时可以浏览点击左侧 系统管理 -> 系统用户管理 了

27. 在文件 /resources/views/admin/user/index.blade.php 添加内容，
可参考文件
/layuiAdmin/admin/std/dist/views/user/user/list.html

复制代码
@extends('admin.base')

@section('content')
<div class="layui-card">

    <div class="layui-card-header layuiadmin-card-header-auto">
        <div class="layui-btn-group">

            <button class="layui-btn layui-btn-sm layui-btn-danger" id="listDelete">删 除</button>

            <a class="layui-btn layui-btn-sm" href="{{ route('admin.user.create') }}">添 加</a>
            <button class="layui-btn layui-btn-sm" id="memberSearch">搜索</button>
        </div>
        <div class="layui-form">
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" placeholder="用户名" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="email" id="email" placeholder="邮箱" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
        <script type="text/html" id="options">
            <div class="layui-btn-group">

                <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>


                <a class="layui-btn layui-btn-sm" lay-event="role">角色</a>


                <a class="layui-btn layui-btn-sm" lay-event="permission">权限</a>

                <a class="layui-btn layui-btn-danger layui-btn-sm " lay-event="del">删除</a>
            </div>
        </script>
    </div>

</div>
@endsection

@section('script')

<script>
    layui.use(['layer','table','form'],function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        //用户表格初始化
        var dataTable = table.render({
            elem: '#dataTable'
            ,height: 500
            ,url: "{{ route('admin.data') }}" //数据接口
            ,where:{model:"user"}
            ,page: true //开启分页
            ,cols: [[ //表头
                {checkbox: true,fixed: true}
                ,{field: 'id', title: 'ID', sort: true,width:80}
                ,{field: 'name', title: '用户名'}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'created_at', title: '创建时间'}
                ,{field: 'updated_at', title: '更新时间'}
                ,{fixed: 'right', width: 320, align:'center', toolbar: '#options'}
            ]]
        });

        //监听工具条
        table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                layer.confirm('确认删除吗？', function(index){
                    $.post("{{ route('admin.user.destroy') }}",{_method:'delete',ids:[data.id]},function (result) {
                        if (result.code==0){
                            obj.del(); //删除对应行（tr）的DOM结构
                        }
                        layer.close(index);
                        layer.msg(result.msg,{icon:6})
                    });
                });
            } else if(layEvent === 'edit'){
                location.href = '/admin/user/'+data.id+'/edit';
            } else if (layEvent === 'role'){
                location.href = '/admin/user/'+data.id+'/role';
            } else if (layEvent === 'permission'){
                location.href = '/admin/user/'+data.id+'/permission';
            }
        });

        //按钮批量删除
        $("#listDelete").click(function () {
            var ids = []
            var hasCheck = table.checkStatus('dataTable')
            var hasCheckData = hasCheck.data
            if (hasCheckData.length>0){
                $.each(hasCheckData,function (index,element) {
                    ids.push(element.id)
                })
            }
            if (ids.length>0){
                layer.confirm('确认删除吗？', function(index){
                    $.post("{{ route('admin.user.destroy') }}",{_method:'delete',ids:ids},function (result) {
                        if (result.code==0){
                            dataTable.reload()
                        }
                        layer.close(index);
                        layer.msg(result.msg,{icon:6})
                    });
                })
            }else {
                layer.msg('请选择删除项',{icon:5})
            }
        })

        // 搜索
        $("#memberSearch").click(function () {
            var name = $("#name").val();
            var email = $("#email").val();
            dataTable.reload({
                where:{name:name,email:email},
                page:{curr:1}
            })
        })
    })
</script>

@endsection
复制代码

 

posted @   好记性还真不如烂笔头  阅读(339)  评论(0)  编辑  收藏  举报
相关博文：
·  laravel8.5与layuiadmin整合(2)
·  laravel8.5与layuiadmin整合(6)
·  layuiAdmin使用
·  layuiAdmin std v1.x 【iframe版】开发者文档
·  laravel-admin基本使用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手