精华内容
下载资源
问答
  • 今天小编就为大家分享一篇使用Layui搭建后台管理界面的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui搭建后台管理页

    2019-12-15 14:16:19
    前面Sham做v1版小程序的时候,用简单使用layui搭建后台管理页,这个周末,把框架结构重新调整了下,主要是在顶部增加了选项卡,用于放置大类,然后下面左侧树形选项卡放置大类对应的小类,界面框架上基本实现和layui...

    前面Sham做v1版小程序的时候,用简单使用layui搭建后台管理页,这个周末,把框架结构重新调整了下,主要是在顶部增加了选项卡,用于放置大类,然后下面左侧树形选项卡放置大类对应的小类,界面框架上基本实现和layui官网演示的差不多了,特记录分享下。

    效果图如下:

    这里只放首页的代码,子页面的不放了,简单的就是首页点击选项卡之后,在首页内的iframe里直接打开对应的网址,如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>行政服务小程序-后台管理</title>
            <link rel="stylesheet" href="../public/layui/css/layui.css">
        </head>
        <body class="layui-layout-body">
    	<!--判断是否已经登录,如果没有,跳转到登录页-->
          <?php
            session_start();
             if($_SESSION['admin']!=="admin"){echo "<script>location.href='adminlogin.php';</script>";
      }
      ?>
      <!--正式页面开始-->
            <div class="layui-layout layui-layout-admin">
              <!--1.头部区域-->
              <div class="layui-header">
                <div class="layui-logo">行政服务小程序</div>
                <!-- 头部区域(可配合layui已有的水平导航) -->
                <ul class="layui-nav layui-layout-left">
                	<li class="layui-nav-item showtab layui-this" data-id="setting"  mytitle="小程序设置"><a>小程序设置</a></li>
                	<li class="layui-nav-item showtab" data-id="staffs"  mytitle="员工管理"><a>员工管理</a></li>
                	<li class="layui-nav-item showtab" data-id="canteen"  mytitle="餐饮管理"><a>餐饮管理</a></li>
                </ul>
                <ul class="layui-nav layui-layout-right">
               
                  <li class="layui-nav-item"><a href="d48643a96a96925336b3ab966f72d583.php?logout">退出登录</a></li>
                </ul>
              </div>
                <!--2.左侧导航-->
              <div class="layui-side layui-bg-black"  style="width:210px;">
                <div class="layui-side-scroll">
                  <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
                  <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                  	<li class="layui-nav-item layui-nav-itemed" id="setting" name="tabs">
                      <a href="javascript:;">小程序设置</a>
                      <dl class="layui-nav-child">
                    	<dd class="leftdaohang "  data-url="usercenter.php"  mytitle="个人中心"><a>个人中心</a></dd>
                    	<dd class="leftdaohang"  data-url="canteen.php"  mytitle="餐饮服务"><a>餐饮服务</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item layui-nav-itemed" id="staffs" name="tabs" style="display:none;">
                      <a href="javascript:;">员工管理</a>
                      <dl class="layui-nav-child">
                    	<dd class="leftdaohang" data-url="userlist.php" mytitle="已登记员工清单"><a>已登记员工清单</a></dd>
                        <dd class="leftdaohang" data-url="upstaffinfo.php" mytitle="上传更新员工信息"><a>上传更新员工信息</a></dd>
                      </dl>
                    </li>
                    <li class="layui-nav-item  layui-nav-itemed" id="canteen" name="tabs" style="display:none;">
                      <a href="javascript:;">餐饮管理</a>
                      <dl class="layui-nav-child">
                        <dd class="leftdaohang" data-url="foodmenus.php" mytitle="菜单明细"><a>菜单明细</a></dd>
                        <dd class="leftdaohang" data-url="upfoodmenu.php" mytitle="上传食堂菜单"><a>上传食堂菜单</a></dd>
                      </dl>
                    </li>
                   </ul>
                </div>
              </div>
              <!--3.右侧主体内容区-->
              <div class="layui-body" style="margin-bottom:-50px;" >
                  <!--tabs标签-->
                  <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
                  <ul class="layui-tab-title">
               <!-- <li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i> <cite>后台首页</cite></li>-->
                  </ul>
                  <div class="layui-tab-content">
                  <!-- <div class="layui-tab-item layui-show">
    						<iframe style='width: 100%;margin-top:0px;border:none;' height='550' src='setting/usercenter.php' ></iframe>
    					</div>-->
                  </div>
                </div> 
              </div>
              
    
            </div>
            <script src="../public/layui/layui.all.js"></script>
            <script>
                //添加事件执行
                layui.use('element', function(){
                  var $ = layui.jquery
                  ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
                  //触发事件
                  var active = {
                    tabAdd: function(){
                      //新增一个Tab项
                      var htmlurl=$(this).attr('data-url');
                      var mytitle=$(this).attr('mytitle'); 
    //                  alert("触发tab增加事件:"+mytitle);
                      //先判断是否已经有了tab
                      var arrayObj = new Array(); //创建一个数组  
                          $(".layui-tab-title").find('li').each(function() {
                              var y = $(this).attr("lay-id"); 
                              arrayObj.push(y);
                       });
    //                    alert("遍历取到的数组:"+arrayObj);
                        var have=$.inArray(mytitle, arrayObj);  //返回 3,
                        if (have>=0) {
                            //tab已有标签
    //                        alert("遍历的已有标签:"+mytitle);
                          element.tabChange('demo', mytitle); //切换到当前点击的页面
                        } else{
                        	var h = $(window).height()-150;
                          //没有相同tab
    //                      alert("遍历的没有相同tab:"+mytitle);
                          element.tabAdd('demo', {
                            title:mytitle //用于演
                            ,content: '<iframe style="width: 100%;height:'+h+'px;margin-top:0px;border:none;" scrolling="auto" src='+htmlurl+' ></iframe>'
                            ,id: mytitle //实际使用一般是规定好的id,这里以时间戳模拟下
                          })
                          element.tabChange('demo', mytitle); //切换到当前点击的页面
                        }
                    }
                   
                  };
                 //这里是实现点击竖式选项卡,执行添加
                  $(".leftdaohang").click(function(){
                    var type="tabAdd";
                    var othis = $(this);
    //                var htmlurl=$(this).attr('data-url');
    //                var mytitle=$(this).attr('mytitle');
                    active[type] ? active[type].call(this, othis) : '';
                  });
                 //这里是实现点击顶部选项卡之后,显示或隐藏对应的竖式选项卡
                 $('.showtab').click(function(){
                 	var dataid=$(this).attr('data-id');
                    var dataids=document.getElementById(dataid);
                	var tabs=document.getElementsByName('tabs');
    		        $(tabs).hide();
    		        $(dataids).show();
        		})
                });
            </script>
        </body>
    </html>

    然后,自行下载layui之后,修改顶部调用css及中下部调用js的地址就可以,试试吧

    展开全文
  • 使用Layui搭建后台管理界面

    万次阅读 多人点赞 2019-08-05 21:56:20
    Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个logo,左边区域是一个导航,中间是内容tab页,底部是版权信息,好了,看代码吧!&...

    Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个logo,左边区域是一个导航,中间是内容tab页,底部是版权信息,好了,看代码吧!

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>黄宝康个人搭建的后台管理页面</title>
        <link rel="stylesheet" href="css/layui.css">
        <script src="layui.js"></script>
    </head>
    <body>
        <div class="layui-layout-admin">
            <!--头部-->
            <div class="layui-header">
                <div class="layui-logo">Huang BaoKang</div>
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item"><a href="javascript:void(0)">控制台</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">其他系统</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">邮件管理</a></dd>
                            <dd><a href="javascript:;">消息管理</a></dd>
                            <dd><a href="javascript:;">授权管理</a></dd>
                        </dl>
                    </li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href=""><img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img">Huang BaoKang</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">安全设置</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            
            <!--左侧-->
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">
                        <li class="layui-nav-item">
                            <a href="javascript:;">基本元素</a>
                            <dl class="layui-nav-child">
                                <dd lay-id="111"><a href="javascript:;" data-options="{url:'test.html',title:'表格'}">表格</a></dd>
                                <dd><a href="">表单</a></dd>
                                <dd><a href="">导航栏</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="">组件</a>
                            <dl class="layui-nav-child">
                                <dd><a href="">Navbar</a></dd>
                                <dd><a href="">Tab</a></dd>
                                <dd><a href="">OneLevel</a></dd>
                                <dd><a href="">app.js主入口</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="">表格</a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="">表单</a>
                        </li>
                    </ul>
                </div>
            </div>
    
            <!--中间主体-->
            <div class="layui-body" id="container">
                <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this">首页</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">首页内容</div>
                    </div>
                </div>
            </div>
    
            <!--底部-->
            <div class="layui-footer">
                <center>黄宝康版权所有&copy;Tel:18679758769</center>
            </div>
        </div>
    <script>
        //JavaScript代码区域
        layui.use('element', function(){
            var element = layui.element;
            element.on('nav(hbkNavbar)',function(elem){
                /*使用DOM操作获取超链接的自定义data属性值*/
                var options = eval('('+elem.context.children[0].dataset.options+')');
                var url = options.url;
                var title = options.title;
                element.tabAdd('tabs',{
                    title : title,
                    content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>',
                    id : '111'
                });
            });
            /*使用下面的方式需要引用jquery*/
           /* $('.layui-nav-child a').click(function () {
                var options = eval('('+$(this).data('options')+')');
                var url = options.url;
                var title = options.title;
                element.tabAdd('tabs',{
                    title : title,
                    content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>'
                });
            });*/
        });
    </script>
    </body>
    </html>
    

    代码布局都加入了相关注释,很好理解,需要说明的是,中间增加Tab使用DOM元素获取a标签的data属性,tab页内容主体采用的iframe,真正项目应用中,只需要关注url,比如常用的后台框架Jfinal,只需要render下即可。

    页面效果如下:(截图时缩放了浏览器),项目只引入了layui的css和js,没有第三方的,小伙伴们,可以参考哦,觉得不错,记得点赞哦-

    这里写图片描述

    ###专业墙纸贴纸厨房用具装饰出售,本人网店经营
    博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦_https://item.taobao.com/item.htm?id=569617707364

    展开全文
  • 简介:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞...

    简介:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

    官网下载js文档格式如下:

    下面是我搭建的后台管理:粘贴即用,用起来非常方便;特别说明:本文采用的是模块化,用到哪个模块需要加载哪个模块。

     

    <!DOCTYPE html>
    <html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--每打开一个页面重新渲染,不缓存-->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=8">
        <meta http-equiv="Expires" content="0">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Cache-control" content="no-cache">
        <meta http-equiv="Cache" content="no-cache">
    
        <link rel="stylesheet" type="text/css" href="/layui2.45/css/layui.css"/>
        <script type="text/javascript" src="/layui2.45/layui.js"></script>
        <style>
            .my_left_tree .magin_left20px {
                margin-left: 20px;
            }
    
            .my_left_tree .magin_left35px {
                margin-left: 35px;
            }
    
            .layui-layout-left .layui-nav-item:hover {
                background: #009F95;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body class="layui-layout-body" style="height: 100%; width: 100%;">
    <div class="layui-layout layui-layout-admin my_layout">
        <!--
            作者:offline
            时间:2019-11-08
            描述:修改头部的背景色:  修改layui-header的div
        -->
        <div class="layui-header">
            <div class="layui-logo">
                xxxxx 管理平台
            </div>
            <div class="layui-nav layui-layout-left">
    
                <div id="changBig" class="layui-nav-item" style="width: 50px; text-align: center;">
                    <i class="layui-icon layui-icon-menu-fill" style="font-size: 20px;color: orange;"></i>
    
                </div>
    
                <div onclick="fullScreen()" class="layui-nav-item" style="width: 50px; text-align: center;">
                    <i class="layui-icon layui-icon-website" style="font-size: 20px;color: orangered;"></i>
    
                </div>
    
                <!--<button onclick="exitScreen()">现代浏览器退出</button>-->
                <div class="layui-nav-item" onclick="homeRefresh()" id="myRefresh" style="width: 50px; text-align: center;">
                    <i class="layui-icon layui-icon-refresh-3" style="font-size: 20px;color: orangered;"></i>
    
                </div>
            </div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <!--<img th:attr="src=${session.user.image}" style="height: 50px; width:50px;" />-->
                    <img src="/images/1.jpg" style="height: 50px; width:50px;">
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        欢迎管理员: <span th:text="${session.user.username}"></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd id="001" class="layui-this">
                            <a href="javascript:;" data-id="001" data-title="基本资料"
                               data-url="/backstage/adminUser/adminUserMessage.html" class="site-demo-active"
                               data-type="tabAdd">
                                <span class="">基本资料</span>
                            </a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="/admin/adminUser/loginOut">安全退出</a>
                </li>
            </ul>
    
        </div>
    
        <div class="myBoot">
            <div class="my_left_tree layui-side layui-bg-black myTreeLeft">
                <div class="layui-side-scroll">
                    <!-- 左侧垂直导航区域-->
                    <!--
                        作者:offline
                        时间:2019-11-08
                        描述:修改ul的css背景色样式即可
                    -->
                    <ul id="leftNavTree" class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-home"></i>
                                <span class="magin_left20px">主页</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="0" class="layui-this">
                                    <a href="javascript:;" data-id="0" data-title="city数据" id="homePage"
                                       data-url="/backstage/city/city.html" class="site-demo-active" data-type="tabAdd">
                                        <span class="magin_left35px">主页</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-auz"></i>
                                <span class="magin_left20px">权限</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="1">
                                    <a href="javascript:;" data-id="1" data-title="管理权限"
                                       data-url="/backstage/adminUser/adminUserList.html" class="site-demo-active"
                                       data-type="tabAdd">
                                        <span class="magin_left35px">管理权限</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
    
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-user"></i>
                                <span class="magin_left20px">用户</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="111">
                                    <a href="javascript:;" data-id="111" data-title="用户列表"
                                       data-url="/admin/clientUser/userList.html" class="site-demo-active"
                                       data-type="tabAdd">
                                        <span class="magin_left35px">用户列表</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-component"></i>
                                <span class="magin_left20px">试卷</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="3">
                                    <a href="javascript:;" data-id="3" data-title="试卷列表"
                                       data-url="/backstage/paper/paperList.html" class="site-demo-active"
                                       data-type="tabAdd">
                                        <span class="magin_left35px">试卷列表</span>
                                    </a>
                                </dd>
                                <dd id="4">
                                    <a href="javascript:;" data-id="4" data-title="添加试卷"
                                       data-url="/backstage/paper/addOrUpdatePaper.html" class="site-demo-active"
                                       data-type="tabAdd">
                                        <span class="magin_left35px">添加试卷</span>
                                    </a>
                                </dd>
    
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-survey"></i>
                                <span class="magin_left20px">测试</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="5">
                                    <a href="javascript:;" data-id="5" data-url="/backstage/fu.html"
                                       class="site-demo-active" data-title="富文本" data-type="tabAdd">
                                        <span class="magin_left35px">富文本</span>
                                    </a>
                                </dd>
                                <dd id="6">
                                    <a href="javascript:;" data-id="6" class="site-demo-active"
                                       data-url="/admin/active/active_preavis.html" data-title="活动预告" data-type="tabAdd">
                                        <span class="magin_left35px">活动预告</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-carousel"></i>
                                <span class="magin_left20px">轮播</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="8">
                                    <a href="javascript:;" data-id="8" class="site-demo-active"
                                       data-url="/admin/rolling/getAll" data-title="轮播图" data-type="tabAdd">
                                        <span class="magin_left35px">轮播管理</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-rmb"></i>
                                <span class="magin_left20px">商城</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="9">
                                    <a href="javascript:;" data-id="9" class="site-demo-active"
                                       data-url="/admin/integralMall/productList.html" data-title="积分商品" data-type="tabAdd">
                                        <span class="magin_left35px">积分商品</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="layui-nav-child">
                                <dd id="91">
                                    <a href="javascript:;" data-id="91" class="site-demo-active"
                                       data-url="/admin/luckDrawProduct/luckDrawProduct.html" data-title="抽奖商品"
                                       data-type="tabAdd">
                                        <span class="magin_left35px">抽奖商品</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-notice"></i>
                                <span class="magin_left20px">留言</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="11">
                                    <a href="javascript:;" data-id="11" class="site-demo-active"
                                       data-url="/admin/message/messageList.html" data-title="留言列表" data-type="tabAdd">
                                        <span class="magin_left35px">用户留言</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-set"></i>
                                <span class="magin_left20px">设置</span>
                            </a>
                            <dl class="layui-nav-child">
                                <dd id="12">
                                    <a href="javascript:;" data-id="12" data-url="/admin/aboutUs/aboutUs.html"
                                       class="site-demo-active" data-title="关于我们" data-type="tabAdd">
                                        <span class="magin_left35px">关于我们</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="layui-nav-child">
                                <dd id="13">
                                    <a href="javascript:;" data-url="/admin/patientExample/patientExampleList.html"
                                       data-id="13" class="site-demo-active" data-title="病例展示" data-type="tabAdd">
                                        <span class="magin_left35px">病例展示</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="layui-nav-child">
                                <dd id="14">
                                    <a href="javascript:;"
                                       data-url="/admin/systemIntegrationRules/systemIntegrationRules.html" data-id="14"
                                       class="site-demo-active" data-title="既定规则" data-type="tabAdd">
                                        <span class="magin_left35px">既定规则</span>
                                    </a>
                                </dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-set"></i>
                                <span class="magin_left20px">一级菜单</span>
                            </a>
                            <dl class="layui-nav-child">
                                <a href="javascript:;">
                                    <i class="layui-icon layui-icon-set"></i>
                                    <span class="magin_left20px">二级菜单</span>
                                </a>
                                <dl class="layui-nav-child">
                                    <dd id="15">
                                        <a href="javascript:;"
                                           data-url="/admin/systemIntegrationRules/systemIntegrationRules.html" data-id="15"
                                           class="site-demo-active" data-title="菜单子项" data-type="tabAdd">
                                            <span class="magin_left35px">菜单子项3223242343242334234</span>
                                        </a>
                                    </dd>
                                </dl>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
    
            <!--tab标签-->
            <div class="layui-tab myTableRight" id="layui_tab_content" lay-filter="demo" lay-allowclose="true"
                 style="margin-left: 200px;">
                <ul class="layui-tab-title" style="width: 100%;">
                    <li class="layui-this" lay-id="0">
                        <i class="layui-icon layui-icon-home"></i>
                    </li>
                </ul>
                <div class="layui-tab-content" style="width: 100%;">
                    <div class="layui-tab-item layui-show">
                        <iframe name="ifrmname" class="layadmin-iframe" scrolling="auto" frameborder="0"
                                src="/backstage/city/city.html"
                                style="width: 98%; height: 100%; min-height: 764px;overflow: auto;"></iframe>
                    </div>
                </div>
            </div>
    
        </div>
    
    </div>
    <script>
        /**
         * 刷新
         * */
        function homeRefresh(url) {
            window.location.href = "http://localhost:8081/backstage/home.html";
        };
    
        //全屏
        function fullScreen() {
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            }
            ;
            return;
        }
    
        //退出全屏
        function exitScreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            if (typeof cfs != "undefined" && cfs) {
                cfs.call(el);
            }
        }
    
        /**
         * layui的使用
         */
        layui.use(['element', 'layer', 'jquery'], function () {
            var element = layui.element;
            var $ = layui.$;
    
            $("#changBig").click(function () {
                var ifShowTree = $('.my_left_tree').css('display');
                if (ifShowTree == 'none') {
                    $(".my_left_tree").css("display", "block");
                    $(".myTableRight").css("margin-left", "200px");
                } else {
                    $(".my_left_tree").css("display", "none");
                    $(".myTableRight").css("margin-left", "0px");
                }
    
            });
            /**刷新子页面
             * */
            $("#myRefresh").click(function () {
                var hash = location.hash;
                var url = hash.substring(1, hash.length);
    
                $("body .layui-show iframe").attr("src", url);
            })
    
            /**
             * 点击左边的菜单列表,对应的添加选项卡
             */
            // 配置tab实践在下面无法获取到菜单元素
            $('.site-demo-active').on('click', function () {
                var dataid = $(this);
                var url = dataid.attr("data-url");
                var id = dataid.attr("data-id");
                var title = dataid.attr("data-title");
                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
                addTableAndChangTable(url, id, title);
            });
            /**
             * 添加并且跳转到该选项卡
             **/
            window.addTableAndChangTable = function (url, id, title) {
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小,则直接打开新的tab项
                    active.tabAdd(url, id, title);
                } else {
                    //否则判断该tab项是否以及存在
                    var isData = false; //初始化一个标志,为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"), function () {
                        //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
                        if ($(this).attr("lay-id") == id) {
                            isData = true;
                        }
                    })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(url, id, title);
                    }
                }
                //最后不管是否新增tab,最后都转到要打开的选项页面上
                active.tabChange(id);
            };
            /**
             * 写的是一个javascript对象,对应选项卡的增改删
             */
            var active = {
                //在这里给active绑定几项事件,后面可通过active调用这些事件
                tabAdd: function (url, id, name) {
                    //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
                    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                    element.tabAdd('demo', {
                        title: name,
                        content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:98%;height:99%;"></iframe>',
                        id: id //规定好的id
                    })
                    FrameWH(); //计算ifram层的大小
                },
                tabChange: function (id) {
                    //切换到指定Tab项
                    element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                },
                tabDelete: function (id) {
                    element.tabDelete("demo", id); //删除
                },
            };
    
            /**
             * 计算iframe高度
             */
            function FrameWH() {
                var h = $(window).height();
                $("iframe").css("height", h + "px");
            };
            /**
             * 监听事件当你点击选项卡,对应左边的树添加类
             */
            element.on('tab(demo)', function (data) {
                var lay_id = $(this).attr("lay-id");
                $(".layui-nav-child").find("dd").removeClass("layui-this");
                $("#" + lay_id).addClass("layui-this");
            });
        });
    </script>
    </body>
    
    </html>

    有啥不懂得小伙伴们加群交流啦:852665736;本群致力于一同进步的小伙伴们,大家一起交流探讨,在陌生的城市感受温暖;

     

     

     

     

     

     

    展开全文
  • 总结日常使用,记录搭建过程,方便以后复用。 核心技术: spring-cloud spring-boot eureka mybatis-plus mysql数据库 maven依赖管理 搭建父工程和eureka服务注册中心 新建 parent父工程 baymin-cloud-parent file–...

    总结日常使用,记录搭建过程,方便以后复用。
    核心技术:
    spring-cloud
    spring-boot
    eureka
    mybatis-plus
    mysql数据库
    maven依赖管理

    搭建父工程

    新建 parent父工程 baymin-cloud-parent

    file–new–maven Project 勾选 Create a simple project,打 pom包
    在这里插入图片描述
    删除生成的src文件夹
    在这里插入图片描述
    修改pom.xml文件

    <project xmlns="http://maven.apache.org/POM/4.0.0"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    	<modelVersion>4.0.0</modelVersion>
    	<groupId>org.joey</groupId>
    	<artifactId>baymin-cloud-parent</artifactId>
    	<version>0.0.1-SNAPSHOT</version>
    	<packaging>pom</packaging>
    	<name>baymin-cloud-parent</name>
    	<!--添加springboot父级依赖,这样,这个系统就是springboot项目了,用来提供maven默认依赖,使用后,常用的包依赖可以省去version标签-->
    	<parent>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-parent</artifactId>
    		<version>2.0.7.RELEASE</version>
    	</parent>
    	<!--设定系统的编码和java版本  -->
    	<properties>
    		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    		<java.version>1.8</java.version>
    		<admin.client.version>2.0.6</admin.client.version>
    	</properties>
    	<dependencies>
    	<!--测试依赖-->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-test</artifactId>
    			<scope>test</scope>
    		</dependency>
    	</dependencies>
    	<dependencyManagement>
    		<dependencies>
    		<!--springcloud相关依赖  -->
    			<dependency>
    				<groupId>org.springframework.cloud</groupId>
    				<artifactId>spring-cloud-dependencies</artifactId>
    				<version>Finchley.RELEASE</version>
    				<type>pom</type>
    				<scope>import</scope>
    			</dependency>
    			<!--pring Boot Admin-应用健康监控后台管理  -->
    			<dependency>
    				<groupId>de.codecentric</groupId>
    				<artifactId>spring-boot-admin-starter-client</artifactId>
    				<version>${admin.client.version}</version>
    			</dependency>
    		</dependencies>
    	</dependencyManagement>
    	<build>
    	<!--maven-compiler-plugin插件可以指定项目源码的jdk版本,编译后的jdk版本,以及编码  -->
    		<plugins>
    			<plugin>
    				<groupId>org.apache.maven.plugins</groupId>
    				<artifactId>maven-compiler-plugin</artifactId>
    				<configuration>
    					<source>1.8</source>
    					<target>1.8</target>
    					<encoding>UTF-8</encoding>
    				</configuration>
    			</plugin>
    		</plugins>
    	</build>
    </project>
    

    如此,springcloud父级工程搭建完毕。

    展开全文
  • 父工程搭建完毕后,接下来要搭建注册中心,所有的服务都要通过注册中心注册发现,才能进行调用。 new ->maven Project ->create a simple project 父工程选择之前建立的parent工程 修改pom.xml文件 <...
  • 后台管理界面 后台管理模板
  • HTML部分(一些具体的看官方文档): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...link rel="stylesheet" href="css/layui.css"&g...
  • 环境: spring boot 1.59 + mysql 5.7 + mybatis 1.3.1 + shiro 1.3.1 功能:权限与认证 Github地址:https://github.com/hhchcl/manage
  • 【nodejs+layui后台管理系统搭建笔记-表格table数据接口 前端内容: <script> layui.use(['form', 'table'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table....
  • 一、引入layui的样式文件和JS文件。 二、引入页面中需要的元素。 layui.use(["jquery", "laypage", "layer", "form", "laydate", 'table'], function () { ...
  • 适用于小体量,CRUD业务为主的后台系统快速搭建和学习. 在学习过程中发现很多地方网上没有给出一个整套的案例, 因此进行开源. 由于时间仓促, 没有加入权限验证和Redis等功能.但对于SpringBoot+LayUI开发来说是一个很...
  • 基于SpringBoot与LayUI后台管理系统

    千次阅读 2020-01-06 16:54:18
    地址 ...适用于小体量,CRUD业务为主的后台系统快速搭建和学习. 在学习过程中发现很多地方网上没有给出一个整套的案例, 整合了网上的一些解决办法, 做出了一个比较完整的管理系统~ 由于时间仓促, ...
  • 使用layui框架迅速搭建后台管理页面

    万次阅读 2018-09-01 08:52:26
    写在前面 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信...
  • 用的模板是layuiMini(偷懒不想自己整) ...于是在登录后将用户的权限传递过去 在渲染的时候获取其权限,然后js中判断,使用不同的模板 大概的工程文件如下 东西很多,渲染的模板文件是init.js(一共三个文件,即init....
  • 本项目使用 Spring Boot 搭建, 用于加深对 Spring Boot 与 Shiro 的学习, 项目特色是支持 restful 风格权限控制, 支持对同一 URL, 不同 HTTP Mehtod 的权限控制, 适用于更多的场景. 预览地址: http://ewt.186g.cn ...
  • 基于layui+cmlphp开发基础后台管理系统,提供用户权限管理、日志管理等基础模块。登录插件化。提供FormBuildServer和GridBuildServer。通过后端生成form表单及列表页面注意事项:下载后请修改projllnnzxleeggwsb/...
  • layui后台框架的搭建

    万次阅读 2018-03-11 19:35:35
    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。...
  • 项目是前后端分离,前端通过layui进行搭建,获取后台是通过layui的js去请求后台url拿到数据之后 渲染到页面上 接下来不讲后端代码,只讲前端如何拿到值,并渲染到页面上。 这个模块的功能是一个后台系统的网站设置...
  • layui后台框架搭建及整合ssm项目

    千次阅读 2019-03-25 09:53:50
    引言:大家都知道,后台开发如果仅仅只有功能,没有漂亮的样式,会让人觉得有点low,加入有一个漂亮的后台模板, 自己修改修改,整合到自己的项目上,我觉得也是很不错的,缩短项目的开发时间。我学习layui有几个月...
  • JavaWeb专业版,企业级开发框架SpringBoot+Layui+Thymeleaf+MybatisPlus开发权限(RBAC)及内容管理框架,框架中集成了权限管理、模块管理,数据库管理、富文本编辑器(已集成ueditor,kindeditor),后台支持多主题切换、...
  • 后台界面使用 Layui,文件存储使用 OSS;欢迎大家一起加入学习讨论; 本场会讲到的内容: Spring Boot 2.2 版本的集成 Gradle 构建集成 持久层 JPA 文件存储 OSS 会话管理 Redis 适合人群:对 Spring Boot 初中级...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 242
精华内容 96
关键字:

layui搭建后台