精华内容
下载资源
问答
  • layui搭建后台
    2021-03-23 15:08:12

    摘要:layui的登录管理界面实现了模块化搭建,就想积木拼搭而成{layout name="public/layout"}

       

    layui的登录管理界面实现了模块化搭建,就想积木拼搭而成

    {layout name="public/layout"}

    菜单列表

    {if condition="$pid>0"}

    οnclick="back({$backid});return false;">返回上级

    {/if}

    菜单id排序标题控制器名方法名隐藏禁用子菜单

    {volist name="$datas" id="vo"}

    {$vo.mid}

    value=1>

    value=1>

    {if condition="$pid==0"}

    子菜单

    {/if}

    {/volist}

    新增菜单

    保存

    function save() {

    $.post('/index.php/admin/Menu/menu', $('form').serialize(), function (res) {

    res = $.parseJSON(res);

    if (res.code > 0) {

    layer.alert(res.msg, {'icon': 2});

    } else {

    layer.msg(res.msg, {'icon': 1});

    setTimeout(function () {

    window.location.reload();

    }, 1000);

    }

    }, 'json');

    }

    function child(pid) {

    window.location.href = "/index.php/admin/Menu/menuIndex?pid=" + pid;

    }

    function back(backid) {

    console.log({$backid});

    window.location.href = "/index.php/admin/Menu/menuIndex?pid=" + backid;

    }

    批改老师:天蓬老师批改时间:2019-04-27 17:33:23

    老师总结:layui是近几年在国内比较流行的一个前端框架, 主要用来后台开发, 当然也可以用来写前台, 不过, 现在有商业化的趋势, 有些功能开始收费了, 要留意

    更多相关内容
  • 今天小编就为大家分享一篇使用Layui搭建后台管理界面的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用Layui搭建后台管理界面

    千次阅读 2020-10-18 21:16:18
    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,没有第三方的,小伙伴们,可以参考哦,觉得不错,记得点赞哦-

    本文转自:本文转自此文章

    展开全文
  • 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搭建管理后台系统

    千次阅读 2021-07-23 17:12:23
    ①下载layui https://www.layui.com/ ②项目结构介绍 html:存放静态界面 img:存放图片 json:模拟请求数据,展示用 layui:步骤一下载的文件 ③源码 index.html <!doctype html> <...

    先上最终效果图:

     点击左侧的菜单树可以显示在导航栏中

    下面是具体步骤:

    ①下载layui

    https://www.layui.com/

    ②项目结构介绍

     

     html:存放静态界面

    img:存放图片

    json:模拟请求数据,展示用

    layui:步骤一下载的文件

    ③源码

    index.html 

    <!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="../layui/css/layui.css" rel="external nofollow">
    		<link rel="stylesheet" href="//at.alicdn.com/t/font_2696345_ubdu47c0yba.css">
    		<script src="../layui/layui.js"></script>
    	</head>
    	<body>
    		<div class="layui-layout-admin">
    			<!--头部-->
    			<div class="layui-header">
    				<div class="layui-logo">后台管理系统</div>
    				<ul class="layui-nav layui-layout-right">
    					<li class="layui-nav-item">
    						<a href=""><img src="../img/1.jpg" class="layui-nav-img">admin</a>
    						<dl class="layui-nav-child">
    							<dd><a href="">基本资料</a></dd>
    							<dd><a href="">安全设置</a></dd>
    						</dl>
    					</li>
    				</ul>
    			</div>
    
                //统一处理图标和文字之间的距离
    			<style>
    				.iconset {
    					margin-right: 5px;
    				}
    			</style>
    			<!--左侧-->
    			<div class="layui-side layui-bg-black">
    				<div class="layui-side-scroll">
    					<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
    						<li class="layui-nav-item layui-nav-itemed">
    							<a href="javascript:;"><i class="layui-icon layui-icon-set iconset"></i>系统管理</a>
    							<dl class="layui-nav-child">
    								<dd><a href="javascript:; data-type=" toAdd" class="subMenu" data-id="1" data-title="用户管理" data-url="userList.html"><i
    										 class="iconfont  icon-yonghu iconset"></i>用户管理</a></dd>
    								<dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="2" data-title="系统配置管理" data-url=""><i
    										 class="iconfont  icon-ziyuan iconset"></i>系统配置管理</a></dd>
    							</dl>
    						</li>
    						<li class="layui-nav-item layui-nav-itemed">
    							<a href="javascript:;"><i class="iconfont  icon-choujiang iconset"></i>抽奖管理</a>
    							<dl class="layui-nav-child">
    								<dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="3" data-title="奖品管理" data-url=""><i class="iconfont  icon-jiangpin iconset"></i>奖品管理</a></dd>
    								<dd><a href="javascript:;" data-type="toAdd" class="subMenu" data-id="4" data-title="中奖查询" data-url=""><i class="iconfont  icon-jilu iconset"></i>中奖查询</a></dd>
    							</dl>
    						</li>
    					</ul>
    				</div>
    			</div>
    
    			<image></image>
    			<!--中间主体-->
    			<div class="layui-body" id="container">
    				<div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
    					<ul class="layui-tab-title">
    					</ul>
    					<div class="layui-tab-content">
    					</div>
    				</div>
    			</div>
    
    			<!--底部-->
    			<div class="layui-footer">
    				<center>XXX版权所有</center>
    			</div>
    		</div>
    		<script>
    			layui.use(['element'], function() {
    				var element = layui.element;
    				// var layer = layui.layer;
    				var $ = layui.$;
    				// 配置tab实践在下面无法获取到菜单元素
    				$('.subMenu').on('click', function() {
    					var dataid = $(this);
    					//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
    					if ($(".layui-tab-title li[lay-id]").length <= 0) {
    						//如果比零小,则直接打开新的tab项
    						active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-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") == dataid.attr("data-id")) {
    								isData = true;
    							}
    						})
    						if (isData == false) {
    							//标志为false 新增一个tab项
    							active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
    						}
    					}
    					//最后不管是否新增tab,最后都转到要打开的选项页面上
    					active.tabChange(dataid.attr("data-id"));
    				});
    
    				var active = {
    					//在这里给active绑定几项事件,后面可通过active调用这些事件
    					tabAdd: function(url, id, name) {
    						//新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
    						//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                            //tabs:中间主体的fiter名
    						element.tabAdd('tabs', {
    							title: name,
    							content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
    								'" style="width:100%;height:99%;"></iframe>',
    							id: id //规定好的id
    						})
    						FrameWH(); //计算ifram层的大小
    					},
    					tabChange: function(id) {
    						//切换到指定Tab项
    						element.tabChange('tabs', id); //根据传入的id传入到指定的tab项
    					},
    					tabDelete: function(id) {
    						element.tabDelete("tabs", id); //删除
    					}
    				};
    
    				function FrameWH() {
    					var h = $(window).height();
    					$("iframe").css("height", h + "px");
    				}
    			});
    		</script>
    	</body>
    </html>
    

    userList.html

    <!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="../layui/css/layui.css" rel="external nofollow">
    		<script src="../layui/layui.js"></script>
    	</head>
    	<body style="padding-left: 10px;padding-right: 10px;">
    		<div class="searchTable">
    			用户名:
    			<div class="layui-inline">
    				<input class="layui-input" name="userName" id="userName" autocomplete="off">
    			</div>
    			手机号:
    			<div class="layui-inline">
    				<input class="layui-input" name="phoneNo" id="phoneNo" autocomplete="off">
    			</div>
    			<button id="searchBtn" class="layui-btn" data-type="reload">搜索</button>
    		</div>
    		<table class="layui-hide" id="test"></table>
    
    		<script>
    			layui.use('table', function() {
    				var table = layui.table;
    
    				table.render({
    					elem: '#test',
    					url: '../json/user.json',
    					toolbar: '#toolbarDemo', //开启头部工具栏,并为其绑定左侧模板
    					page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
    						layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    							//,curr: 5 //设定初始在第 5 页
    							,
    						groups: 1 //只显示 1 个连续页码
    							,
                            limit: 10, //默认的第一个每页记录数
                            limits : [50,100,150], //记录数的选择范围
    						first: false //不显示首页
    							,
    						last: false //不显示尾页
    
    					},
    					cols: [
    						[{
    							type: 'checkbox',
    							fixed:'left'
    						}, {
    							field: 'id',
    							align:'center',
    							title: 'ID',
    							sort: true
    						}, {
    							field: 'username',
    							align:'center',
    							title: '用户名'
    						}, {
    							field:'phone',
    							align:'center',
    							title:'手机号'
    						},{
    							field: 'sex',
    							align:'center',
    							title: '性别',
    							sort: true
    						}, {
    							field: 'city',
    							align:'center',
    							title: '城市'
    						},{
    							fixed: 'right',
    							title: '操作',
    							toolbar: '#barDemo'
    						}]
    					]
    
    				});
    
    
                      var $ = layui.$, active = {
    		            reload: function(){
                            //查询条件组装
    		            	var queryWhere = {}; 
    		            	
                            //搜索框自定义的id
    		                var companyName$_ = $('#companyName');
    		                if(companyName$_.val()!=''){
    		                	 queryWhere['companyName'] = companyName$_.val();
    		                }  
    		                
    		                //执行重载
    		                table.reload('test', {
    		                    page: {
    		                        curr: 1 //重新从第 1 页开始
    		                    }
    		                    ,where: queryWhere
    		                    ,done: function(res, curr, count){
    		                    	this.where= queryWhere;
    		                    }
    		                }, 'data');
    		            }
    		        };
    
    		        $('.searchTable .layui-btn').on('click', function(){
    		            var type = $(this).data('type');
    		            active[type] ? active[type].call(this) : '';
    		        });
    		        
    		        //头部工具栏
    		        table.on('toolbar(test)', function(obj) {
    					// debugger;
    					//var checkStatus = table.checkStatus(obj.config.id);
    					switch (obj.event) {
    						case 'add':
    							{
    								var addIndex = layer.open({
    									type: 2,
    									area: ['700px', '450px'],
    									fixed: false, //不固定
    									maxmin: true,
    									content: url, //url自定义
    								});
    								layer.full(addIndex);
    							}
    							break;
    					};
    				});
    		        
    		      	//监听操作工具条
    		        table.on('tool(test)', function(obj){
    		          var data = obj.data;
    		           if(obj.event === 'edit'){
    		            var updateIndex = layer.open({
    						type: 2,
    						area: ['700px', '450px'],
    						fixed: false, //不固定
    						maxmin: true,
    						content: url, //url自定义
    					});
    					layer.full(updateIndex);
    		          }
    		        });
    				
    			});
    		</script>
    
    		<!-- 操作栏的两个内容,id要和toolbar的一样 -->
    		<script type="text/html" id="barDemo">
    			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    		       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    		</script>
    
    		<!-- 头部工具栏按钮 -->
    		<script type="text/html" id="toolbarDemo">
    			<div class="layui-btn-container">
    		        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    		        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    		    </div>
    		</script>
    	</body>
    </html>
    

    user.json

    {
    	"code": 0,
    	"msg": "success",
    	"count": 14,
    	"data": [{
    		"id": 1,
    		"username": "zs",
    		"phone":"182****3110",
    		"sex": "男",
    		"city": "台州"
    	},
    	{
    		"id": 2,
    		"username": "ls",
    		"phone":"182****3110",
    		"sex": "女",
    		"city": "台州"
    	},{
    		"id": 3,
    		"username": "zs",
    		"phone":"182****3110",
    		"sex": "男",
    		"city": "台州"
    	},
    	{
    		"id": 4,
    		"username": "ls",
    		"phone":"182****3110",
    		"sex": "女",
    		"city": "台州"
    	},{
    		"id": 5,
    		"username": "zs",
    		"phone":"182****3110",
    		"sex": "男",
    		"city": "台州"
    	},
    	{
    		"id": 6,
    		"username": "ls",
    		"phone":"182****3110",
    		"sex": "女",
    		"city": "台州"
    	},{
    		"id": 7,
    		"username": "zs",
    		"phone":"182****3110",
    		"sex": "男",
    		"city": "台州"
    	},
    	{
    		"id": 8,
    		"username": "ls",
    		"phone":"182****3110",
    		"sex": "女",
    		"city": "台州"
    	},{
    		"id": 9,
    		"username": "zs",
    		"phone":"182****3110",
    		"sex": "男",
    		"city": "台州"
    	},
    	{
    		"id": 19,
    		"username": "ls",
    		"phone":"182****3110",
    		"sex": "女",
    		"city": "台州"
    	},{
    		"id": 11,
    		"username": "zs",
    		"phone":"182****3110",
    		"sex": "男",
    		"city": "台州"
    	},
    	{
    		"id": 12,
    		"username": "ls",
    		"phone":"182****3110",
    		"sex": "女",
    		"city": "台州"
    	},{
    		"id": 13,
    		"username": "zs",
    		"phone":"182****3110",
    		"sex": "男",
    		"city": "台州"
    	},
    	{
    		"id": 14,
    		"username": "ls",
    		"phone":"182****3110",
    		"sex": "女",
    		"city": "台州"
    	}]
    }
    

    更多使用技巧(radio的选择、下拉框回写、自定义数据展示模板等)查看:

    layui积累_� 大狗子的博客-CSDN博客

    ④图标获取

    通过这个地址:iconfont-阿里巴巴矢量图标库

    使用方法参考:前端引入icon的方法(iconfont,fontawesome) - 简书

    展开全文
  • 一款 Go 语言基于Revel、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,框架自研了一套个性化...
  • 是一款基于Golang、GoFrame、Layui、MySQL等技术栈开发平台框架,拥有完善的(RBAC)权限架构和基础核心管理模块,为了缩短研发周期,系统框架集成了代码生成器,内置平台自定义研发的模板引擎,可以一键CRUD生成整个...
  • layui搭建后台管理框架

    千次阅读 2019-12-27 10:15:08
    简介:layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞...
  • 一款 Go 语言基于Beego、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架,本着简化开发、提升开发效率的初衷触发,框架自研了一套个性化的组件,实现了可插拔的组件式开发方式:单图上传、...
  • 摘要:主要借助layui框架,方便实现后台搭建。上传参数:layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upl主要借助layui框架,方便实现后台搭建。上传参数:layui....
  • layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。...
  • // $(".layui-layout-left").animate({left: '200px'}) } /*隐藏左侧栏*/ function menuHide(btn) { btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left'); $(".layui-side").animate({...
  • 后台管理系统,程序基于ThinkPHP 5开发,后台UI使用LayUI搭建
  • 目录下载框架修改代码HBuilder X代码分析 下载框架 1 进入 https://www.layui.com,下载: 文件层次: 2 在线实例:https://www.layui.com/demo/ ...3 新建你的项目 前端 文件架: ...左图:刚从 layui 官网下
  • HTML部分(一些具体的看官方文档): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...link rel="stylesheet" href="css/layui.css"&g...
  • layuimini后台管理框架应用 查看效果:1.发布到IIS;2.创建asp.net web项目运行
  • 总结日常使用,记录搭建过程,方便以后复用。 核心技术: spring-cloud spring-boot eureka mybatis-plus mysql数据库 maven依赖管理 搭建父工程和eureka服务注册中心 新建 parent父工程 baymin-cloud-parent file–...
  • 适用于小体量,CRUD业务为主的后台系统快速搭建和学习. 在学习过程中发现很多地方网上没有给出一个整套的案例, 因此进行开源. 由于时间仓促, 没有加入权限验证和Redis等功能.但对于SpringBoot+LayUI开发来说是一个很...
  • 父工程搭建完毕后,接下来要搭建注册中心,所有的服务都要通过注册中心注册发现,才能进行调用。 new ->maven Project ->create a simple project 父工程选择之前建立的parent工程 修改pom.xml文件 <...
  • 后台管理界面 后台管理模板
  • 基于TP5+layui 手工添加控制器,通过model方法指定模型。 手工添加模型。模型内方法: search --列表搜索栏自动生成参数 coll --模型自动生成参数,未指定直接以表注释或表字段生成。 batch --列表页顶部操作按钮 op ...
  • 使用layui框架迅速搭建后台管理页面

    万次阅读 2018-09-01 08:52:26
    写在前面 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织...layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信...
  • 一、基本架构: CoreApi_BLL 逻辑层 CoreApi_Comm 公共层,存放枚举、序列化 CoreApi_DAL 连接数据库,Redis ...目前只设计了部分表,先完成系统的基础架构(2020-8-19) 下一编:ASP.NetCore+Layui 后台管理系统-DAL
  • layui管理后台模板

    2022-05-21 21:43:38
    layui搭建后台模板~
  • 基于layui+cmlphp开发基础后台管理系统,提供用户权限管理、日志管理等基础模块。登录插件化。提供FormBuildServer和GridBuildServer。通过后端生成form表单及列表页面注意事项:下载后请修改projllnnzxleeggwsb/...
  • 简单实现选项卡功能,能够快速搭建一个后台管理系统,一个简单的后台系统框架,适合小白使用。 项目使用的layui框架,可自行取网上百度扩充功能; 开发工具:Microsoft Visual Studio2013。
  • 基于SpringBoot+layui实现后台管理系统

    千次阅读 2020-07-17 15:03:35
    一款 Java 语言基于 SpringBoot2.x、Layui、Thymeleaf、MybatisPlus、Shiro、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,537
精华内容 1,014
关键字:

layui搭建后台