管理系统中layui的一些常规操作，增加、修改、删除、查询

最新推荐文章于 2024-05-23 16:44:13 发布
最新推荐文章于 2024-05-23 16:44:13 发布
阅读量202 收藏
点赞数 7
文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yncjxnc/article/details/138927562
版权

对于一个管理系统，数据操作通常有增加、修改、删除、查询，对于老码农来讲，layui是非常适合的，比vue要简单很多。

以下是一个文章管理的例子

<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="../../header.jspf" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文章中心管理</title>
    <link rel="stylesheet" href="${ROOT }/static/sys/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ROOT }/static/sys/style/admin.css?v=318"/>
    <style>
        /* 左树 */
        #organizationTreeBar {
            padding: 10px 15px;
            border: 1px solid #e6e6e6;
            background-color: #f2f2f2;
        }

        #organizationTree {
            border: 1px solid #e6e6e6;
            border-top: none;
            padding: 10px 5px;
            overflow: auto;
            height: -webkit-calc(100vh - 125px);
            height: -moz-calc(100vh - 125px);
            height: calc(100vh - 125px);
        }

        .layui-tree-entry .layui-tree-txt {
            padding: 0 5px;
            border: 1px transparent solid;
            text-decoration: none !important;
        }

        .layui-tree-entry.ew-tree-click .layui-tree-txt {
            background-color: #fff3e0;
            border: 1px #FFE6B0 solid;
        }

        /* 右表搜索表单 */
        #organizationUserTbSearchForm .layui-form-label {
            box-sizing: border-box !important;
            width: 90px !important;
        }

        #organizationUserTbSearchForm .layui-input-block {
            margin-left: 90px !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid" style="padding-bottom: 0;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <!-- 树工具栏 -->
                    <div class="layui-form toolbar" id="organizationTreeBar">
                        <button id="organizationAddBtn" class="layui-btn layui-btn-xs icon-btn">
                            <i class="layui-icon">&#xe654;</i>添加
                        </button>&nbsp;
                        <button id="organizationEditBtn" class="layui-btn layui-btn-xs layui-btn-warm icon-btn">
                            <i class="layui-icon">&#xe642;</i>修改
                        </button>&nbsp;
                        <button id="organizationDelBtn"
                                class="layui-btn layui-btn-xs layui-btn-danger icon-btn">
                            <i class="layui-icon">&#xe640;</i>删除
                        </button>
                    </div>
                    <!-- 左树 -->
                    <div id="organizationTree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
               <input  type="hidden" name="categoryId" value="" id="categoryId"/>
                <div class="layui-card-body" style="padding: 10px;">
                    <!-- 数据表格 -->
                    <table id="organizationUserTable" lay-filter="organizationUserTable"></table>
                    <script type="text/html" id="imgTpl">
          				<img onclick="showBigImage(this)" style="display: inline-block; width: 55%; height: 55%;" src= {{ d.logo ==''||d.logo==undefined?'https://images-cn.babalish.com/nopic.jpg':d.logo}}>
        			</script> 
			        <script type="text/html" id="articleTbState">
    					<input type="checkbox" lay-filter="articleTbStateCk" value="{{d.id}}" lay-skin="switch"
           						lay-text="已发布|未发布" {{d.status==1?'checked':''}} style="display: none;"/>
    					<p style="display: none;">{{d.status==1?'已发布':'未发布'}}</p>
					</script>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 表格操作列 
<script type="text/html" id="organizationUserTbBar">
    <a class="layui-btn layui-btn-primary 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="organizationUserTbToolBar">
    
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
              <input type="text" name="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">短标题</label>
            <div class="layui-input-block">
              <input type="text" name="shortTitle" placeholder="请输入文章短标题" autocomplete="off" class="layui-input">
            </div>
          </div> 
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block" style="width:100px">
              <select name="status">
                <option value="">全部</option>
                <option value="0">未上架</option>
                <option value="1">已上架</option>
                <option value="-1">已删除</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-forum-list" lay-submit lay-filter="LAY-app-foodlist-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
<button lay-event="add" class="layui-btn layui-btn-sm icon-btn">
        <i class="layui-icon">&#xe654;</i>添加
    </button>&nbsp;
    <button lay-event="edit" id="articleEditBtn" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
        <i class="layui-icon">&#xe642;</i>修改
    </button>&nbsp;
    <button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn">
        <i class="layui-icon">&#xe640;</i>删除
    </button>&nbsp;
	<button lay-event="move" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
        <i class="layui-icon">&#xe65b;</i>移动
    </button>&nbsp;
	<button lay-event="pics" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
        <i class="layui-icon">&#xe64a;</i>图片
    </button>&nbsp;
	<button lay-event="push" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
        <i class="layui-icon">&#xe686;</i>蜘蛛推送
    </button>&nbsp;
</script>
<!-- 表单弹窗 -->
<script type="text/javascript"> var host="${ROOT}"</script>
<!-- js部分 -->
<script type="text/javascript" src="${ROOT }/static/sys/layui/layui.js"></script>
<script type="text/javascript" src="${ROOT }/static/js/jquery.min.js"></script> 
<script>
layui.config({
    base: '${ROOT }/static/sys/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['layer', 'form', 'table', 'util', 'tree', 'dropdown', 'xmSelect', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var tree = layui.tree;
        var xmSelect = layui.xmSelect;
        var selObj, treeData;  // 左树选中数据

        /* 渲染树形 */
        function renderTree() {
            $.post('${ROOT}/sys/category/ajaxList',{"limit":1000}, function (res) {
                for (var i = 0; i < res.data.length; i++) {
                    res.data[i].spread = true;
                }
                treeData = layui.treeTable.pidToChildren(res.data, 'id', 'pid');
                tree.render({
                    elem: '#organizationTree',
                    onlyIconControl: true,
                    data: treeData,
                    click: function (obj) {
                        selObj = obj;
                        $("#categoryId").val(obj.data.id);
                        $('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        insTb.reload({
                            where: {categoryId: obj.data.id},
                            page: {curr: 1},
                            method:'post',
                            url: '${ROOT}/sys/article/list'
                        });
                    }
                });
                $('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
            });
        }

        renderTree();

        /* 添加 */
        $('#organizationAddBtn').click(function () {
        	layer.open({
                type: 2
                ,title: '添加栏目'
                ,content: '${ROOT}/sys/category/categoryForm?type=QA'
                ,maxmin: false
                ,area: ['600px', '550px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  var iframeWindow = window['layui-layer-iframe'+ index]
                  ,submitID = 'LAY-user-role-submit'
                  ,submit = layero.find('iframe').contents().find('#'+ submitID);
                  //监听提交
                  iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                  	var i=0;
                    var field = data.field; //获取提交的字段
                    if(i<1){
                    	i++;
                    	$.ajax({
                            url:"${ROOT}/sys/category/save",
                            data:field,
                            type:'post',
                            dataType:'json',
                            success:function(json) {
                            	
                                if(json.code == 0) {
                              	  layer.msg(json.msg, { icon: 1, time: 2000 });
           	        				setTimeout(function () {
           	        					renderTree();
          	                        }, 1500);
          			              layer.close(index); //关闭弹层
                                } else {
                                    layer.msg(json.msg);
                                }
                            }
                        });
                    }else{
                    	layer.msg("正在保存...", { icon: 1, time: 2000 });
                    }
                    
                  });  
                  
                  submit.trigger('click');
                }
              });
        });

        /* 修改 */
        $('#organizationEditBtn').click(function () {
        	console.info(selObj);
            if (!selObj) {
            	return layer.msg('未选择栏目', {icon: 2})
            }else{
            	layer.open({
                    type: 2
                    ,title: '修改栏目'
                    ,content: '${ROOT}/sys/category/categoryForm?id='+selObj.data.id
                    ,maxmin: false
                    ,area: ['600px', '550px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                      var iframeWindow = window['layui-layer-iframe'+ index]
                      ,submitID = 'LAY-user-role-submit'
                      ,submit = layero.find('iframe').contents().find('#'+ submitID);
                      //监听提交
                      iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                      	
                        var field = data.field; //获取提交的字段
                        
                        $.ajax({
                            url:"${ROOT}/sys/category/save",
                            data:field,
                            type:'post',
                            dataType:'json',
                            success:function(json) {
                            	
                                if(json.code == 0) {
                              	  layer.msg(json.msg, { icon: 1, time: 2000 });
           	        				setTimeout(function () {
           	        					renderTree();
          	                        }, 1500);
          			              layer.close(index); //关闭弹层
                                } else {
                                    layer.msg(json.msg);
                                }
                            }
                        });
                      });  
                      
                      submit.trigger('click');
                    }
                  });
            }
         
        });

        /* 删除 */
        $('#organizationDelBtn').click(function () {
            if (!selObj){
            	return layer.msg('未选择机构', {icon: 2});
            } else{
            	doDel(selObj);
            }
            
            
        });

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除此栏目吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('${ROOT}/sys/category/del', {
                    id: obj.data.id,
                }, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        renderTree();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#organizationUserTable',
            data: [],
            height: 'full-52',
            page: true,
            toolbar: '#organizationUserTbToolBar',
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox',field:'id'},
                {type: 'numbers',field:'id'},
                {title: 'ID',field:'id'},
                {field: 'title', title: '文章标题',minWidth:400, style:'cursor: pointer;color:#20A0FF',templet:'<div><a class="iconfont icon-chakanbaogao" style="margin-left: 3%; color: #2196F3;border-radius: 5px; cursor: pointer;text-decoration: underline;" target="_blank" onclick="skip({{d.id}})">{{ d.title }}</a></div>'},
                {field: 'shortTitle', title: '短标题',width:250},
                {field: 'logo', title: '缩略图',width:100,templet: "#imgTpl"},
                {field: 'attrs', title: '标识',minWidth:110,templet:function(d){
                	return d.attrs
                } ,sort: true,},
                {field: 'sort', title: '排序', edit:"text",sort: true,width:80},
                {field: 'status', title: '状态', templet: '#articleTbState', sort: true, width: 100},
                {
                    field: 'createTime', title: '创建时间', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, sort: true,width:170
                }
                //,{title: '操作', toolbar: '#organizationUserTbBar', align: 'center', width: 120, minWidth: 120}
            ]],
            done: function () {
                // 表格搜索
                form.on('submit(organizationUserTbSearch)', function (data) {
                    insTb.reload({where: data.field, page: {curr: 1}});
                    return false;
                });
            }
        });
        form.on('submit(LAY-app-foodlist-search)', function(data){
            var field = data.field;
            
            insTb.reload({where: field, page: {curr: 1}});
          });

        /* 表格工具条点击事件 */
        table.on('tool(organizationUserTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel2(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel2(obj);
            }
        });
        table.on('edit(organizationUserTable)', function (obj) {
        	var value = obj.value //得到修改后的值
    	      ,data = obj.data //得到所在行所有键值
    	      ,field = obj.field; //得到字段
    	    
    	      if(field=='sort'){
    	    	  $.ajax({
    	         		type:"post",
    	         		url:"${ROOT}/sys/article/sort",
    	         		data:{
    	         			id:data.id,
    	         			sort:value
    	         		},
    	         		dataType:"json",
    	         		success:function(res){
    	         			if(res.code==0){
    	         				//layer.msg("修改成功");
    	         			}else{
    	         				layer.msg("排序失败，请修改为数字重试");
    	         			}
    	         		}
    	         	});
    	      }
        });
        /* 表格头工具栏点击事件 */
        table.on('toolbar(organizationUserTable)', function (obj) {
        	var categoryId = $("#categoryId").val();
            if (obj.event === 'add') { // 添加
            	var i=0;
            	var  varindex = layer.open({
                    type: 2
                    ,title: '添加文章'
                    ,content: '${ROOT}/sys/article/form?categoryId='+categoryId
                    ,maxmin: false
                    ,area: ['1000px', '750px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                      var iframeWindow = window['layui-layer-iframe'+ index]
                      ,submitID = 'LAY-article-submit'
                      ,submit = layero.find('iframe').contents().find('#'+ submitID);
                      //监听提交
                      iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                      	
                        var field = data.field; //获取提交的字段
                        if(i<1){
                        	i++;
                        	$.ajax({
                                url:"${ROOT}/sys/article/save",
                                data:field,
                                type:'post',
                                dataType:'json',
                                success:function(json) {
                                    if(json.code == 0) {
                                  	  layer.msg(json.msg, { icon: 1, time: 2000 });
               	        				setTimeout(function () {
               	        					insTb.reload({page: {curr: 1}});
              	                        }, 1500);
              			              layer.close(index); //关闭弹层
                                    } else {
                                        layer.msg(json.msg);
                                    }
                                }
                            });
                        }else{
                        	layer.msg("正在保存...", { icon: 1, time: 2000 });
                        }
                        
                      });  
                      
                      submit.trigger('click');
                    }
                  });
            	layer.full(varindex);
            } else if (obj.event === 'edit') { // 修改
            	
            	var checkRows = table.checkStatus('organizationUserTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要修改的数据', {icon: 2});
                    return;
                }
                if (checkRows.data.length != 1) {
                    layer.msg('一次只能选择一条数据修改', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                var i=0;
                var varindex = layer.open({
                    type: 2
                    ,title: '编辑文章'
                    ,content: '${ROOT}/sys/article/form?id='+ids
                    ,maxmin: false
                    ,area: ['1000px', '750px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                      var iframeWindow = window['layui-layer-iframe'+ index]
                      ,submitID = 'LAY-article-submit'
                      ,submit = layero.find('iframe').contents().find('#'+ submitID);
                      //监听提交
                      iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                    	 
                        var field = data.field; //获取提交的字段
                        if(i<1){
                        	i++
                        	$.ajax({
                                url:"${ROOT}/sys/article/save",
                                data:field,
                                type:'post',
                                dataType:'json',
                                success:function(json) {
                                    if(json.code == 0) {
                                  	  layer.msg(json.msg, { icon: 1, time: 2000 });
               	        				setTimeout(function () {
               	        					insTb.reload({page: {curr: 1}});
              	                        }, 1500);
              			              layer.close(index); //关闭弹层
                                    } else {
                                        layer.msg(json.msg);
                                    }
                                }
                            });
                        }else{
                        	layer.msg("正在保存...", { icon: 1, time: 2000 });
                        }
                        
                      });  
                      
                      submit.trigger('click');
                    }
                  });
                  layer.full(varindex);
                
            } else if (obj.event === 'del') { // 删除
                var checkRows = table.checkStatus('organizationUserTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doDel2({ids: ids});
            }else if(obj.event === 'move'){

          		 var checkStatus = table.checkStatus('organizationUserTable')
       	        ,checkData = checkStatus.data; //得到选中的数据

       	        if(checkData.length === 0){
       	          return layer.msg('请选择数据');
       	        }
       	        var id = "";
       	        for (var i = 0; i < checkStatus.data.length; i++) {

       	            if (i == (checkStatus.data.length - 1)) {
       	                id += checkStatus.data[i].id;
       	            } else {
       	                id += checkStatus.data[i].id + ",";
       	            }
       	        }
       	        
       	        layer.open({
       	   	          type: 2
       	   	          ,title: '移动分类'
       	   	          ,content: '${ROOT}/sys/article/batchCategory'
       	   	          ,maxmin: false
       	   	          ,area: ['500px', '500px']
       	   	          ,btn: ['确定', '取消']
       	   	          ,yes: function(index, layero){
       	   	            var iframeWindow = window['layui-layer-iframe'+ index]
       	   	            ,submitID = 'LAY-article-submit'
       	   	            ,submit = layero.find('iframe').contents().find('#'+ submitID);
       	   	            //监听提交
       	   	            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
       	   	            	data.field["ids"]= id;
       	   	              var field = data.field; //获取提交的字段
       	   	              $.ajax({
       	   	                  url:"${ROOT}/sys/article/batchCategory",
       	   	                  data:field,
       	   	                  type:'post',
       	   	                  dataType:'json',
       	   	                  success:function(json) {
       	   	                      if(json.code == 0) {
       	   	                    	  layer.msg(json.msg, { icon: 1, time: 2000 });
       	   		        				setTimeout(function () {
       	   		        					layui.table.reload("organizationUserTable",{page:{curr:$(".layui-laypage-em").next().html()}}) 
       	   		                        }, 1500);
       	   				              layer.close(index); //关闭弹层
       	   	                      } else {
       	   	                          layer.msg(json.msg);
       	   	                      }
       	   	                  }
       	   	              });
       	   	            });  
       	   	            
       	   	            submit.trigger('click');
       	   	          }
       	   	        });
            }else if(obj.event === 'pics'){
            	var checkRows = table.checkStatus('organizationUserTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要添加图片的数据', {icon: 2});
                    return;
                }
                if (checkRows.data.length != 1) {
                    layer.msg('一次只能选择一条数据添加图片', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
            	layer.open({
                    type: 2
                    ,title: '图片('+ids+')'
                    ,content: '${ROOT}/sys/uploads/uploadsList?pid='+ids
                    ,maxmin: false
                    ,area: ['1000px', '700px']
                  });
            }else if (obj.event === 'push') { // 删除
                var checkRows = table.checkStatus('organizationUserTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要推送的数据', {icon: 2});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doPush({ids: ids});
            }
        });
 
        function doPush(obj) {
            layer.confirm('确定要推送选中文章吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('${ROOT}/sys/article/bdPush', {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        //insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
        
        /* 删除2 */
        function doDel2(obj) {
            layer.confirm('确定要删除选中文章吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('${ROOT}/sys/article/del', {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
        
        /* 修改用户状态 */
        form.on('switch(articleTbStateCk)', function (obj) {
            var loadIndex = layer.load(2);
            $.post('${ROOT}/sys/article/updateStatus', {
                articleId: obj.elem.value,
                status: obj.elem.checked ? 1 : 0
            }, function (res) {
                layer.close(loadIndex);
                if (res.code === 0) {
                	
                	layer.msg(res.msg, {icon: 1});
                    form.render('checkbox');
                    
                } else {
                	$(obj.elem).prop('checked', !obj.elem.checked);
                	layer.msg(res.msg, {icon: 2});
                    
                }
            }, 'json');
        });

    });
    
function skip(code){
	window.open(host+"/article/view/"+code)
}
/**
 * @param e 图片对象
 */
function showBigImage(e) {
    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shadeClose: true, //点击阴影关闭
        area: [$(e).width + 'px', ($(e).height-100) + 'px'], //宽高
        content: "<img  src=" + $(e).attr('src') + " />"
    });
}
</script>
</body>
</html>

系统中效果预览如下：

云中漫步·
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于ThinkPhp6+Layui的电商后台管理系统
西里古里的博客
01-25 414
一款 PHP 语言基于 ThinkPhp6.x、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发，提升研发效率，框架内置了一
tp6+layui后台管理系统
西里古里的博客
08-17 630
一款 PHP 语言基于 ThinkPhp6.x、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发，提升研发效率，框架内置了一
golang后台管理系统Echo+Layui框架搭建教程
weixin_50196917的博客
01-16 235
一款 Go 语言基于Echo、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块，同时支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实
golang后台管理系统Beego+Layui框架搭建教程
weixin_50196917的博客
04-17 3849
一款 Go 语言基于Beego、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。...
基于Iris+Layui的电商后台管理系统
weixin_50196917的博客
06-11 164
一款 Go 语言基于Iris、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。 项目特点 模块化、松耦合 模块丰富、开箱即用 简洁易用、快速接入 文档详尽、易于维护 自顶向下、体系化设计 统一框架、统一组件、降低选择成本 开发.....
ThinkPhp6+Layui大数据分析管理系统
西里古里的博客
01-25 252
一款 PHP 语言基于 ThinkPhp6.x、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发，提升研发效率，框架内置了一
Gin+Layui通用后台权限管理系统
weixin_50196917的博客
02-27 380
是一款基于Golang、Gin、Layui、MySQL等技术栈开发平台框架，拥有完善的(RBAC)权限架构和基础核心管理模块，为了缩短研发周期，系统框架集成了代码生成器，内置平台自定义研发的模板引擎，可以一键CRUD生成整个模块的全部代码，本框架为一站式系统框架开发平台，可以帮助开发者提升开发效率、降低研发成本，同时便于后期的系统维护升级。...
Django+Layui搭建后台管理系统
一米阳光的博客
03-13 232
一款 Python 语言基于Django、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
基于Go语言开发的Iris+Layui通用后台权限管理系统
weixin_50196917的博客
06-14 155
一款 Go 语言基于Iris、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。 项目特点 模块化、松耦合 模块丰富、开箱即用 简洁易用、快速接入 文档详尽、易于维护 自顶向下、体系化设计 统一框架、统一组件、降低选择成本 开发.....
springboot+layui后台管理系统
05-07
本项目由springboot+mybatis+layui 为框架开发的javaweb 后台管理系统，
基于SpringBoot + MyBatis + Layui的后台权限管理系统.zip
07-08
基于SpringBoot + MyBatis + Layui的后台权限管理系统。代码简洁易懂、界面美观大方，内部封装了权限管理系统常用的全部功能，可直接作为快速开发JavaWeb项目的脚手架使用。 基于SpringBoot + MyBatis + Layui的...
ASP.NET LayUI权限管理系统源码
06-07
4、该权限系统精确控制到每一条命令，并且采用缓存机制减少多余的数据库权限验证操作。 三、初次运行说明 在文件夹里有说明文档。 四、注意事项 1、同一个账号同时多个浏览器（包括手机浏览器）登陆，后者挤掉...
asp.net图书管理系统，layui mvc实现
06-23
asp.net图书管理系统，使用layui搭建后台，mvc模式，实现了图书的增删改查操作，连接sqlserver数据库
ThinkPHP+LayUI后台管理系统.zip
08-20
后台管理系统，程序基于ThinkPHP 5开发，后台UI使用LayUI搭建
layui table在不发送请求时更新templet操作列
lizaiismy的博客
05-23 267
【代码】layui table在不发送请求时更新templet操作列。
LayUI使用（一）点击树组件的右边空白区域也可响应事件
最新发布
qq_44648936的博客
05-23 228
LayUI的一些应用心得
vue源码之mustache模板引擎1
qweasl_的博客
05-21 476
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1355
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
idea中使用layui创建学生管理系统
07-09
使用 layui 在 IDEA 中创建学生管理系统的步骤如下： 1. 创建项目：在 IDEA 中创建一个新的 Java Web 项目。 2. 引入 layui：按照前面所述的步骤，将 layui 的 CSS 和 JavaScript 文件引入到项目中。 3. 创建 HTML 页面：在项目的 WebContent 目录下创建一个 HTML 页面，例如 `index.html`。 4. 编写页面结构：在 `index.html` 文件中编写学生管理系统的页面结构，可以使用 layui 提供的布局组件来构建页面。 5. 引入 layui 模块：在 `index.html` 文件中使用 `<script>` 标签引入 layui 的模块，例如 form、table 等，以实现表单和表格的功能。 6. 编写 JavaScript 代码：在 `index.html` 文件中编写 JavaScript 代码，使用 layui 提供的 API 来处理表单提交、数据展示等操作。 7. 创建 Java 类：在项目中创建相应的 Java 类来处理后端逻辑，比如数据的增删改查等操作。可以使用框架如 Spring MVC 来简化开发。 8. 配置 web.xml：在项目的 `WEB-INF` 目录下的 `web.xml` 文件中配置 servlet 和 url-pattern，以便处理前端请求。 9. 运行项目：启动服务器，访问 `index.html`，即可看到学生管理系统的界面。 以上是一个简单的步骤指引，具体实现过程还需要根据你的具体需求来进行详细设计和开发。希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值