【100例】iframe版的管理后台

血红的双手。 提交于 2020-02-23 02:27:01

  我使用的是LayUI做前端框架,原因很简单,网上现成代码,上手简单,自由度高,效果齐全,就官网的文档还是不够好,很多好东西都没列出来,要靠自己挖掘。

  现在我准备用官网的iframe版做个管理系统后台,之前已经写过一个单页版的,需求分析已经写好,页面大概50页,8个功能模块,1个公共模块,1个登录。

  看代码前,先记录一下页面3个基本方法:layui.config、layui.extend、layui.define

  layui.config:初始化配置,可以把固定js,主题和use需要的扩展模块都包含进来。(目前就觉得有这个做法)

  layui.extend:指定自己的路径

  layui.define:定义自己的组件,也能使用里面的组件,跟layui.use有点像

  再提一点,官方建议线上调用layer.all.js,可以免去调用组件,直接使用。听起来不错。

  好了,下面是代码部分:

html代码

 

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

 

 

<!--js调用 -->
<script src="/scripts/layui/layui.all.js"></script>
    <script>
        layui.config
            ({
                base: '/scripts/'//静态路径
            }).extend({
                index: 'lib/index'//主入口
            }).use('index');
    </script>

 

<!--body-->
<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 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>

            <!-- 侧边菜单 -->
            <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="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>

                            </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/caller.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="//www.baidu.com/">百度一下</a></dd>
                                <dd><a lay-href="//www.layui.com/">layui官网</a></dd>
                                <dd><a lay-href="//www.layui.com/admin/">layuiAdmin官网</a></dd>
                            </dl>
                        </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="home/console.html" lay-attr="home/console.html" 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="home/console.html" frameborder="0" class="layadmin-iframe"></iframe>
                </div>
            </div>

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

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!