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 即可以操作左侧主页下的 控制台, 主页一, 主页二查看实时效果了

  • 相关阅读:
    Metasploit笔记
    Spark在Eclipse运行的demo
    CSS实现网页背景图片自适应全屏
    CSS-鼠标移入一个标签改变另外一个标签的样式
    CSS-简单动画效果
    CSS-div重合设置
    MouduleList 和 Sequential 区别
    35. 搜索插入位置(二分查找易错总结)
    100. 相同的树
    27. 移除元素
  • 原文地址:https://www.cnblogs.com/lin3615/p/15802912.html
Copyright © 2011-2022 走看看