zoukankan      html  css  js  c++  java
  • laravel8.5与layuiadmin整合(3)

    12. 设置上面的对应路由及方法
    /routes/web.php 添加
    // 后台布局

    Route::group(['prefix' => 'admin'], function() {
    
        ....
    
        // layuiadmin原模板模块 - 控制台
        Route::get('/index',[App\Http\Controllers\Admin\IndexController::class, 'index'])->name('admin.index');
    
        // layuiadmin原模板模块 - 主页一
        Route::get('/index1',[App\Http\Controllers\Admin\IndexController::class, 'index1'])->name('admin.index1');
    
        // layuiadmin原模板模块 - 主页二
        Route::get('/index2',[App\Http\Controllers\Admin\IndexController::class, 'index2'])->name('admin.index2');
    
    });

    /app/Http/Controllers/Admin/IndexController.php 添加

       .....
        public function index() {
            return view('admin.index.index');
        }
    
        public function index1() {
            return view('admin.index.index1');
        }
    
        public function index2() {
            return view('admin.index.index2');
        }

    13. 建立上面对应的三个模板在目录resources/views/admin分别建立
    index.blade.php , index1.blade.php ,index2.blade.php
    对应layuiadmin中的文件分别是目录 /layuiAdmin/admin/std/dist/views/home
    里的三个文件 console.html,homepage1.html,homepage2.html
    这里使用 index.blade.php

    @extends('admin.base')
    
    @section('content')
    <div class="layui-row layui-col-space15">
    
        <div class="layui-col-md8">
    
            <div class="layui-row layui-col-space15">
    
                <div class="layui-col-md6">
    
                    <div class="layui-card">
    
                        <div class="layui-card-header">快捷方式</div>
    
                        <div class="layui-card-body">
    
    
    
                            <div class="layui-carousel layadmin-carousel layadmin-shortcut">
    
                                <div carousel-item>
    
                                    <ul class="layui-row layui-col-space10">
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="home/homepage1.html">
    
                                                <i class="layui-icon layui-icon-console"></i>
    
                                                <cite>主页一</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="home/homepage2.html">
    
                                                <i class="layui-icon layui-icon-chart"></i>
    
                                                <cite>主页二</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="component/layer/list.html">
    
                                                <i class="layui-icon layui-icon-template-1"></i>
    
                                                <cite>弹层</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a layadmin-event="im">
    
                                                <i class="layui-icon layui-icon-chat"></i>
    
                                                <cite>聊天</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="component/progress/index.html">
    
                                                <i class="layui-icon layui-icon-find-fill"></i>
    
                                                <cite>进度条</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="app/workorder/list.html">
    
                                                <i class="layui-icon layui-icon-survey"></i>
    
                                                <cite>工单</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="user/user/list.html">
    
                                                <i class="layui-icon layui-icon-user"></i>
    
                                                <cite>用户</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/system/website.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>设置</cite>
    
                                            </a>
    
                                        </li>
    
                                    </ul>
    
                                    <ul class="layui-row layui-col-space10">
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs3">
    
                                            <a lay-href="set/user/info.html">
    
                                                <i class="layui-icon layui-icon-set"></i>
    
                                                <cite>我的资料</cite>
    
                                            </a>
    
                                        </li>
    
                                    </ul>
    
    
    
                                </div>
    
                            </div>
    
    
    
                        </div>
    
                    </div>
    
                </div>
    
                <div class="layui-col-md6">
    
                    <div class="layui-card">
    
                        <div class="layui-card-header">待办事项</div>
    
                        <div class="layui-card-body">
    
    
    
                            <div class="layui-carousel layadmin-carousel layadmin-backlog">
    
                                <div carousel-item>
    
                                    <ul class="layui-row layui-col-space10">
    
                                        <li class="layui-col-xs6">
    
                                            <a lay-href="app/content/comment.html" class="layadmin-backlog-body">
    
                                                <h3>待审评论</h3>
    
                                                <p><cite>66</cite></p>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs6">
    
                                            <a lay-href="app/forum/list.html" class="layadmin-backlog-body">
    
                                                <h3>待审帖子</h3>
    
                                                <p><cite>12</cite></p>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs6">
    
                                            <a lay-href="template/goodslist.html" class="layadmin-backlog-body">
    
                                                <h3>待审商品</h3>
    
                                                <p><cite>99</cite></p>
    
                                            </a>
    
                                        </li>
    
                                        <li class="layui-col-xs6">
    
                                            <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});" class="layadmin-backlog-body">
    
                                                <h3>待发货</h3>
    
                                                <p><cite>20</cite></p>
    
                                            </a>
    
                                        </li>
    
                                    </ul>
    
                                    <ul class="layui-row layui-col-space10">
    
                                        <li class="layui-col-xs6">
    
                                            <a href="javascript:;" class="layadmin-backlog-body">
    
                                                <h3>待审友情链接</h3>
    
                                                <p><cite style="color: #FF5722;">5</cite></p>
    
                                            </a>
    
                                        </li>
    
                                    </ul>
    
                                </div>
    
                            </div>
    
                        </div>
    
                    </div>
    
                </div>
    
                <div class="layui-col-md12">
    
                    <div class="layui-card">
    
                        <div class="layui-card-header">数据概览</div>
    
                        <div class="layui-card-body">
    
    
    
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
    
                                <div carousel-item id="LAY-index-dataview">
    
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
    
                                    <div></div>
    
                                    <div></div>
    
                                </div>
    
                            </div>
    
    
    
                        </div>
    
                    </div>
    
                    <div class="layui-card">
    
                        <div class="layui-tab layui-tab-brief layadmin-latestData">
    
                            <ul class="layui-tab-title">
    
                                <li class="layui-this">今日热搜</li>
    
                                <li>今日热帖</li>
    
                            </ul>
    
                            <div class="layui-tab-content">
    
                                <div class="layui-tab-item layui-show">
    
                                    <table id="LAY-index-topSearch"></table>
    
                                </div>
    
                                <div class="layui-tab-item">
    
                                    <table id="LAY-index-topCard"></table>
    
                                </div>
    
                            </div>
    
                        </div>
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    
    
        <div class="layui-col-md4">
    
            <div class="layui-card">
    
                <div class="layui-card-header">版本信息</div>
    
                <div class="layui-card-body layui-text">
    
                    <table class="layui-table">
    
                        <colgroup>
    
                            <col width="100">
    
                            <col>
    
                        </colgroup>
    
                        <tbody>
    
                        <tr>
    
                            <td>当前版本</td>
    
                            <td>
    
                                <script type="text/html" template>
    
                                    v1.0.0
    
                                    <a href="http://fly.layui.com/docs/3/" target="_blank" style="padding-left: 15px;">更新日志</a>
    
                                </script>
    
                            </td>
    
                        </tr>
    
                        <tr>
    
                            <td>基于框架</td>
    
                            <td>
    
                                <script type="text/html" template>
    
                                    layui-v2.3.0
    
                                </script>
    
                            </td>
    
                        </tr>
    
                        <tr>
    
                            <td>主要特色</td>
    
                            <td>零门槛 / 响应式 / 清爽 / 极简</td>
    
                        </tr>
    
                        <tr>
    
                            <td>获取渠道</td>
    
                            <td style="padding-bottom: 0;">
    
                                <div class="layui-btn-container">
    
                                    <a href="http://www.layui.com/admin/" target="_blank" class="layui-btn layui-btn-danger">获取授权</a>
    
                                    <a href="http://fly.layui.com/download/layuiAdmin/" target="_blank" class="layui-btn">立即下载</a>
    
                                </div>
    
                            </td>
    
                        </tr>
    
                        </tbody>
    
                    </table>
    
                </div>
    
            </div>
    
    
    
            <div class="layui-card">
    
                <div class="layui-card-header">效果报告</div>
    
                <div class="layui-card-body layadmin-takerates">
    
                    <div class="layui-progress" lay-showPercent="yes">
    
                        <h3>转化率(日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>)</h3>
    
                        <div class="layui-progress-bar" lay-percent="65%"></div>
    
                    </div>
    
                    <div class="layui-progress" lay-showPercent="yes">
    
                        <h3>签到率(日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>)</h3>
    
                        <div class="layui-progress-bar" lay-percent="32%"></div>
    
                    </div>
    
                </div>
    
            </div>
    
    
    
            <div class="layui-card">
    
                <div class="layui-card-header">实时监控</div>
    
                <div class="layui-card-body layadmin-takerates">
    
                    <div class="layui-progress" lay-showPercent="yes">
    
                        <h3>CPU使用率</h3>
    
                        <div class="layui-progress-bar" lay-percent="58%"></div>
    
                    </div>
    
                    <div class="layui-progress" lay-showPercent="yes">
    
                        <h3>内存占用率</h3>
    
                        <div class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
    
                    </div>
    
                </div>
    
            </div>
    
    
    
            <div class="layui-card">
    
                <div class="layui-card-header">产品动态</div>
    
                <div class="layui-card-body">
    
                    <div class="layui-carousel layadmin-carousel layadmin-news" data-autoplay="true" data-anim="fade" lay-filter="news">
    
                        <div carousel-item>
    
                            <div><a href="http://fly.layui.com/docs/2/" target="_blank" class="layui-bg-red">layuiAdmin 快速上手文档</a></div>
    
                            <div><a href="http://fly.layui.com/vipclub/list/layuiadmin/" target="_blank" class="layui-bg-green">layuiAdmin 会员讨论专区</a></div>
    
                            <div><a href="http://www.layui.com/admin/#get" target="_blank" class="layui-bg-blue">获得 layui 官方后台模板系统</a></div>
    
                        </div>
    
                    </div>
    
                </div>
    
            </div>
    
    
    
            <div class="layui-card">
    
                <div class="layui-card-header">
    
                    作者心语
    
                    <i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>
    
                </div>
    
                <div class="layui-card-body layui-text layadmin-text">
    
                    <p>一直以来,layui 秉承无偿开源的初心,虔诚致力于服务各层次前后端 Web 开发者,在商业横飞的当今时代,这一信念从未动摇。即便身单力薄,仍然重拾决心,埋头造轮,以尽可能地填补产品本身的缺口。</p>
    
                    <p>在过去的一段的时间,我一直在寻求持久之道,已维持你眼前所见的一切。而 layuiAdmin 是我们尝试解决的手段之一。我相信真正有爱于 layui 生态的你,定然不会错过这一拥抱吧。</p>
    
                    <p>子曰:君子不用防,小人防不住。请务必通过官网正规渠道,获得 <a href="http://www.layui.com/admin/" target="_blank">layuiAdmin</a>!</p>
    
                    <p>—— 贤心(<a href="http://www.layui.com/" target="_blank">layui.com</a>)</p>
    
                </div>
    
            </div>
    
        </div>
    
    </div>
    @endsection
    
    @section('script')
    <script>
        layui.use(['index', 'console']);
    </script>
    @endsection

    14. 建立以上需要的模板文件 resources/views/admin/base.blade.php

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></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">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <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>
    <div class="layui-fluid">
        @yield('content')
    </div>
    
    <script src="/js/jquery.min.js"></script>
    <script src="/static/admin/layuiadmin/layui/layui.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        layui.config({
            base: '/static/admin/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['element','form','layer','table','upload','laydate'],function () {
            var element = layui.element;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var upload = layui.upload;
            var laydate = layui.laydate;
    
            //错误提示
        @if(count($errors)>0)
        @foreach($errors->all() as $error)
            layer.msg("{{$error}}",{icon:5});
        @break
        @endforeach
        @endif
    
        //信息提示
        @if(session('status'))
            layer.msg("{{session('status')}}",{icon:6});
        @endif
    
        });
    
    
    </script>
    @yield('script')
    </body>
    </html>

    此时浏览 /admin 即可以操作左侧主页下的 控制台, 主页一, 主页二查看实时效果了

  • 相关阅读:
    Working with macro signatures
    Reset and Clear Recent Items and Frequent Places in Windows 10
    git分支演示
    The current .NET SDK does not support targeting .NET Core 2.1. Either target .NET Core 2.0 or lower, or use a version of the .NET SDK that supports .NET Core 2.1.
    Build website project by roslyn through devenv.com
    Configure environment variables for different tools in jenkins
    NUnit Console Command Line
    Code Coverage and Unit Test in SonarQube
    头脑王者 物理化学生物
    头脑王者 常识,饮食
  • 原文地址:https://www.cnblogs.com/lin3615/p/15802912.html
Copyright © 2011-2022 走看看