碼上快樂

相關內容    簡體    繁體

thinkphp 6.0 結合 layuiadmin (iframe版)

本文轉載自   查看原文   2020-09-24 17:45   825    layuiadmin/ PHP

thinkphp6.0 文檔

layuiadmin 文檔

 

1、安裝模板引擎驅動

composer require topthink/think-view

 

2、將layuiadmin靜態資源放入框架中

 

 

 

3、定義模板輸出替換

 

 

4、視圖整合

 

 

 4.1主頁采用模板分離

 index.html 后台主頁

<!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="__layuiadmin__/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__layuiadmin__/style/admin.css" media="all">

  <script>
      /^http(s*):\/\//.test(location.href) || alert('請先部署到 localhost 下再訪問');
  </script>
</head>
<body class="layui-layout-body">
<div id="LAY_app">
  <div class="layui-layout layui-layout-admin">
    <!-- 頭部區域 -->
    {include file="base/head" /}

    <!-- 側邊菜單 -->
    {include file="base/left" /}

    <!-- 頁面標簽 -->
    {include file="base/pagetabs" /}

    <!-- 主體內容 -->
    <div class="layui-body" id="LAY_app_body">
      <div class="layadmin-tabsbody-item layui-show">
        <iframe src="{:url('index/console')}" frameborder="0" class="layadmin-iframe"></iframe>
      </div>
    </div>

    <!-- 輔助元素，一般用於移動設備下遮罩 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
  </div>
</div>

<script src="__layuiadmin__/layui/layui.js"></script>
<script>
    layui.config({
        base: '__layuiadmin__/', //靜態資源所在路徑
        // version: new Date().getTime() //實時更新緩存,開發環境使用
    }).extend({
        index: 'lib/index' //主入口模塊
    }).use(['index', 'console']);
</script>
</body>
</html>

 

head.html

<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 layui-hide-xs" lay-unselect>
      <a href="http://www.layui.com/admin/" target="_blank" title="前台">
        <i class="layui-icon layui-icon-website"></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>
    <li class="layui-nav-item layui-hide-xs" lay-unselect>
      <input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords=">
    </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="theme">
        <i class="layui-icon layui-icon-theme"></i>
      </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 layadmin-event="logout" style="text-align: center;"><a>退出</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>

 

left.html

<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="home/console.html">控制台</a>
          </dd>
          <dd data-name="console">
            <a lay-href="home/homepage1.html">主頁一</a>
          </dd>
          <dd data-name="console">
            <a lay-href="home/homepage2.html">主頁二</a>
          </dd>
        </dl>
      </li>
      <li data-name="component" class="layui-nav-item">
        <a href="javascript:;" lay-tips="組件" lay-direction="2">
          <i class="layui-icon layui-icon-component"></i>
          <cite>組件</cite>
        </a>
        <dl class="layui-nav-child">
          <dd data-name="grid">
            <a href="javascript:;">柵格</a>
            <dl class="layui-nav-child">
              <dd data-name="list"><a lay-href="component/grid/list.html">等比例列表排列</a></dd>
              <dd data-name="mobile"><a lay-href="component/grid/mobile.html">按移動端排列</a></dd>
              <dd data-name="mobile-pc"><a lay-href="component/grid/mobile-pc.html">移動桌面端組合</a></dd>
              <dd data-name="all"><a lay-href="component/grid/all.html">全端復雜組合</a></dd>
              <dd data-name="stack"><a lay-href="component/grid/stack.html">低於桌面堆疊排列</a></dd>
              <dd data-name="speed-dial"><a lay-href="component/grid/speed-dial.html">九宮格</a></dd>
            </dl>
          </dd>
          <dd data-name="button">
            <a lay-href="component/button/index.html">按鈕</a>
          </dd>
          <dd data-name="form">
            <a href="javascript:;">表單</a>
            <dl class="layui-nav-child">
              <dd><a lay-href="component/form/element.html">表單元素</a></dd>
              <dd><a lay-href="component/form/group.html">表單組合</a></dd>
            </dl>
          </dd>
          <dd data-name="nav">
            <a lay-href="component/nav/index.html">導航</a>
          </dd>
          <dd data-name="tabs">
            <a lay-href="component/tabs/index.html">選項卡</a>
          </dd>
          <dd data-name="progress">
            <a lay-href="component/progress/index.html">進度條</a>
          </dd>
          <dd data-name="panel">
            <a lay-href="component/panel/index.html">面板</a>
          </dd>
          <dd data-name="badge">
            <a lay-href="component/badge/index.html">徽章</a>
          </dd>
          <dd data-name="timeline">
            <a lay-href="component/timeline/index.html">時間線</a>
          </dd>
          <dd data-name="anim">
            <a lay-href="component/anim/index.html">動畫</a>
          </dd>
          <dd data-name="auxiliar">
            <a lay-href="component/auxiliar/index.html">輔助</a>
          </dd>
          <dd data-name="layer">
            <a href="javascript:;">通用彈層<span class="layui-nav-more"></span></a>
            <dl class="layui-nav-child">
              <dd data-name="list">
                <a lay-href="component/layer/list.html" lay-text="layer 功能演示">功能演示</a>
              </dd>
              <dd data-name="special-demo">
                <a lay-href="component/layer/special-demo.html" lay-text="layer 特殊示例">特殊示例</a>
              </dd>
              <dd data-name="theme">
                <a lay-href="component/layer/theme.html" lay-text="layer 風格定制">風格定制</a>
              </dd>
            </dl>
          </dd>
          <dd data-name="laydate">
            <a href="javascript:;">日期時間</a>
            <dl class="layui-nav-child">
              <dd data-name="demo1">
                <a lay-href="component/laydate/demo1.html" lay-text="layDate 功能演示一">功能演示一</a>
              </dd>
              <dd data-name="demo2">
                <a lay-href="component/laydate/demo2.html" lay-text="layDate 功能演示二">功能演示二</a>
              </dd>
              <dd data-name="theme">
                <a lay-href="component/laydate/theme.html" lay-text="layDate 設定主題">設定主題</a>
              </dd>
              <dd data-name="special-demo">
                <a lay-href="component/laydate/special-demo.html" lay-text="layDate 特殊示例">特殊示例</a>
              </dd>
            </dl>
          </dd>
          <dd data-name="table-static">
            <a lay-href="component/table/static.html">靜態表格</a>
          </dd>
          <dd data-name="table">
            <a href="javascript:;">數據表格</a>
            <dl class="layui-nav-child">
              <dd data-name="simple">
                <a lay-href="component/table/simple.html" lay-text="">簡單數據表格</a>
              </dd>
              <dd data-name="auto">
                <a lay-href="component/table/auto.html" lay-text="">列寬自動分配</a>
              </dd>
              <dd data-name="data">
                <a lay-href="component/table/data.html" lay-text="">賦值已知數據</a>
              </dd>
              <dd data-name="tostatic">
                <a lay-href="component/table/tostatic.html" lay-text="">轉化靜態表格</a>
              </dd>
              <dd data-name="page">
                <a lay-href="component/table/page.html" lay-text="">開啟分頁</a>
              </dd>
              <dd data-name="resetPage">
                <a lay-href="component/table/resetPage.html" lay-text="">自定義分頁</a>
              </dd>
              <dd data-name="page">
                <a lay-href="component/table/headerTool.html" lay-text="">開啟頭部工具欄</a>
              </dd>
              <dd data-name="page">
                <a lay-href="component/table/totalRows.html" lay-text="">開啟行合計</a>
              </dd>
              <dd data-name="height">
                <a lay-href="component/table/height.html" lay-text="">高度最大適應</a>
              </dd>
              <dd data-name="checkbox">
                <a lay-href="component/table/checkbox.html" lay-text="">開啟復選框</a>
              </dd>
              <dd data-name="checkbox">
                <a lay-href="component/table/radio.html" lay-text="">開啟單選框</a>
              </dd>
              <dd data-name="checkbox">
                <a lay-href="component/table/treeTable.html" lay-text="">樹形表格</a>
              </dd>

              <dd data-name="cellEdit">
                <a lay-href="component/table/cellEdit.html" lay-text="">開啟單元格編輯</a>
              </dd>
              <dd data-name="form">
                <a lay-href="component/table/form.html" lay-text="">加入表單元素</a>
              </dd>
              <dd data-name="style">
                <a lay-href="component/table/style.html" lay-text="">設置單元格樣式</a>
              </dd>
              <dd data-name="fixed">
                <a lay-href="component/table/fixed.html" lay-text="">固定列</a>
              </dd>
              <dd data-name="operate">
                <a lay-href="component/table/operate.html" lay-text="">數據操作</a>
              </dd>
              <dd data-name="operate">
                <a lay-href="component/table/cellRow.html" lay-text="">監聽行事件</a>
              </dd>
              <dd data-name="reload">
                <a lay-href="component/table/reload.html" lay-text="">數據表格的重載</a>
              </dd>
              <dd data-name="initSort">
                <a lay-href="component/table/initSort.html" lay-text="">設置初始排序</a>
              </dd>
              <dd data-name="cellEvent">
                <a lay-href="component/table/cellEvent.html" lay-text="">監聽單元格事件</a>
              </dd>
              <dd data-name="thead">
                <a lay-href="component/table/thead.html" lay-text="">復雜表頭</a>
              </dd>
            </dl>
          </dd>
          <dd data-name="laypage">
            <a href="javascript:;">分頁</a>
            <dl class="layui-nav-child">
              <dd data-name="demo1">
                <a lay-href="component/laypage/demo1.html" lay-text="layPage 功能演示一">功能演示一</a>
              </dd>
              <dd data-name="demo2">
                <a lay-href="component/laypage/demo2.html" lay-text="layPage 功能演示二">功能演示二</a>
              </dd>
            </dl>
          </dd>
          <dd data-name="upload">
            <a href="javascript:;">上傳</a>
            <dl class="layui-nav-child">
              <dd data-name="demo1">
                <a lay-href="component/upload/demo1.html" lay-text="上傳功能演示一">功能演示一</a>
              </dd>
              <dd data-name="demo2">
                <a lay-href="component/upload/demo2.html" lay-text="上傳功能演示二">功能演示二</a>
              </dd>
            </dl>
          </dd>
          <dd data-name="rate">
            <a lay-href="component/rate/index.html">評分</a>
          </dd>
          <dd data-name="carousel">
            <a lay-href="component/carousel/index.html">輪播</a>
          </dd>
          <dd data-name="flow">
            <a lay-href="component/flow/index.html">流加載</a>
          </dd>
          <dd data-name="util">
            <a lay-href="component/util/index.html">工具</a>
          </dd>
          <dd data-name="code">
            <a lay-href="component/code/index.html">代碼修飾</a>
          </dd>
        </dl>
      </li>
      <li data-name="template" class="layui-nav-item">
        <a href="javascript:;" lay-tips="頁面" lay-direction="2">
          <i class="layui-icon layui-icon-template"></i>
          <cite>頁面</cite>
        </a>
        <dl class="layui-nav-child">
          <dd><a lay-href="template/personalpage.html">個人主頁</a></dd>
          <dd><a lay-href="template/addresslist.html">通訊錄</a></dd>
          <dd><a lay-href="template/goodslist.html">商品列表</a></dd>
          <dd><a lay-href="template/msgboard.html">留言板</a></dd>
          <dd><a lay-href="template/search.html">搜索結果</a></dd>
          <dd><a href="user/reg.html" target="_blank">注冊</a></dd>
          <dd><a href="user/login.html" target="_blank">登入</a></dd>
          <dd><a href="user/forget.html" target="_blank">忘記密碼</a></dd>
          <dd><a lay-href="template/tips/404.html">404頁面不存在</a></dd>
          <dd><a lay-href="template/tips/error.html">錯誤提示</a></dd>
          <dd><a lay-href="http://www.baidu.com/">百度一下</a></dd>
          <dd><a lay-href="http://www.layui.com/">layui官網</a></dd>
          <dd><a lay-href="http://www.layui.com/admin/">layuiAdmin官網</a></dd>
        </dl>
      </li>
      <li data-name="app" class="layui-nav-item">
        <a href="javascript:;" lay-tips="應用" lay-direction="2">
          <i class="layui-icon layui-icon-app"></i>
          <cite>應用</cite>
        </a>
        <dl class="layui-nav-child">

          <dd data-name="content">
            <a href="javascript:;">內容系統</a>
            <dl class="layui-nav-child">
              <dd data-name="list"><a lay-href="app/content/list.html">文章列表</a></dd>
              <dd data-name="tags"><a lay-href="app/content/tags.html">分類管理</a></dd>
              <dd data-name="comment"><a lay-href="app/content/comment.html">評論管理</a></dd>
            </dl>
          </dd>
          <dd data-name="forum">
            <a href="javascript:;">社區系統</a>
            <dl class="layui-nav-child">
              <dd data-name="list"><a lay-href="app/forum/list.html">帖子列表</a></dd>
              <dd data-name="replys"><a lay-href="app/forum/replys.html">回帖列表</a></dd>
            </dl>
          </dd>
          <dd>
            <a lay-href="app/message/index.html">消息中心</a>
          </dd>
          <dd data-name="workorder">
            <a lay-href="app/workorder/list.html">工單系統</a>
          </dd>
        </dl>
      </li>
      <li data-name="senior" class="layui-nav-item">
        <a href="javascript:;" lay-tips="高級" lay-direction="2">
          <i class="layui-icon layui-icon-senior"></i>
          <cite>高級</cite>
        </a>
        <dl class="layui-nav-child">
          <dd>
            <a layadmin-event="im">LayIM 通訊系統</a>
          </dd>
          <dd data-name="echarts">
            <a href="javascript:;">Echarts集成</a>
            <dl class="layui-nav-child">
              <dd><a lay-href="senior/echarts/line.html">折線圖</a></dd>
              <dd><a lay-href="senior/echarts/bar.html">柱狀圖</a></dd>
              <dd><a lay-href="senior/echarts/map.html">地圖</a></dd>
            </dl>
          </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-user"></i>
          <cite>用戶</cite>
        </a>
        <dl class="layui-nav-child">
          <dd>
            <a lay-href="user/user/list.html">網站用戶</a>
          </dd>
          <dd>
            <a lay-href="user/administrators/list.html">后台管理員</a>
          </dd>
          <dd>
            <a lay-href="user/administrators/role.html">角色管理</a>
          </dd>
        </dl>
      </li>
      <li data-name="set" class="layui-nav-item">
        <a href="javascript:;" lay-tips="設置" lay-direction="2">
          <i class="layui-icon layui-icon-set"></i>
          <cite>設置</cite>
        </a>
        <dl class="layui-nav-child">
          <dd class="layui-nav-itemed">
            <a href="javascript:;">系統設置</a>
            <dl class="layui-nav-child">
              <dd><a lay-href="set/system/website.html">網站設置</a></dd>
              <dd><a lay-href="set/system/email.html">郵件服務</a></dd>
            </dl>
          </dd>
          <dd class="layui-nav-itemed">
            <a href="javascript:;">我的設置</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>
            </dl>
          </dd>
        </dl>
      </li>
      <li data-name="get" class="layui-nav-item">
        <a href="javascript:;" lay-href="http://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>

 

pagetabs.html

i<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="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
    </ul>
  </div>
</div>

 

4.2 iframe頁采用模板繼承

iframe 頁

基礎模板 basic.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{block name="title"}{/block}</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="__layuiadmin__/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__layuiadmin__/style/admin.css" media="all">
  {block name="css"}{/block}
</head>
<body>
  {block name="content"}{/block}

  <script src="__layuiadmin__/layui/layui.js"></script>

  {block name="js"}{/block}
</body>
</html>

console.html 子模板

{extend name="common/basic" /}

{block name="title"}layuiAdmin 控制台主頁一{/block}

{block name="content"}
  <div class="layui-fluid">
  <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>
                  v{{ layui.admin.v }}
                  <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-v{{ layui.v }}
                </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>
</div>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '__layuiadmin__/' //靜態資源所在路徑
    }).extend({
        index: 'lib/index' //主入口模塊
    }).use(['index', 'console']);
</script>
{/block}

其他的iframe頁面，按需引入

 

5、訪問

 

6、簡化：

 

 common.html

<!DOCTYPE html>
<html>
<head>
  {// 為頁面中的所有相對鏈接指定默認地址}
  <base href="__layuiadmin__/../views/">
  <meta charset="utf-8">
  <title>{block name="title"}layuiAdmin std - 通用后台管理模板系統（iframe標准版）{/block}</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="__layuiadmin__/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__layuiadmin__/style/admin.css" media="all">
  {block name="css"}{/block}
  <script>
      /^http(s*):\/\//.test(location.href) || alert('請先部署到 localhost 下再訪問');
  </script>
</head>
<body>
  {block name="content"}Hello layuiAdmin{/block}
  <script src="__layuiadmin__/layui/layui.js"></script>
  {block name="js"}{/block}
</body>
</html>

index.html

{extend name="common" /}

{block name="content"}
<body class="layui-layout-body">
<div id="LAY_app">
  <div class="layui-layout layui-layout-admin">
    <!-- 頭部區域 -->
    {include file="base/header" /}

    <!-- 側邊菜單 -->
    {include file="base/side" /}

    <!-- 頁面標簽 -->
    {include file="base/pagetabs" /}

    <!-- 主體內容 -->
    <div class="layui-body" id="LAY_app_body">
      <div class="layadmin-tabsbody-item layui-show">
        <iframe src="home/console.html" frameborder="0" class="layadmin-iframe"></iframe>
      </div>
    </div>

    <!-- 輔助元素，一般用於移動設備下遮罩 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
  </div>
</div>
</body>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '__layuiadmin__/', //靜態資源所在路徑
        // version: new Date().getTime() //實時更新緩存,開發環境使用
    }).extend({
        index: 'lib/index' //主入口模塊
    }).use(['index']);
</script>
{/block}

base 目錄下的文件不變

 

參考：

https://www.kancloud.cn/monday/thinkphp6/1561635


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 layuiAdmin 框架iframe文檔 單應用模式 - Layuiadmin單頁版放入TP6.0的部署方案 layuiadmin(iframe)常用問題集錦 swoole結合支持thinkphp 5.0版本 layuiAdmin pro v1.x 【單頁版】開發者文檔 thinkphp結合layui上傳圖片 thinkphp結合layui上傳視頻 ThinkPHP6.0 容器和依賴注入 ThinkPHP6.0+ 使用Redis 原始用法 ThinkPHP6.0 判斷是否有文件上傳
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM