#项目#layui后台管理模板总结

最新推荐文章于 2024-09-13 22:51:53 发布

.Passion

最新推荐文章于 2024-09-13 22:51:53 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/108293752

版权

CRUD 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

xadmin 的部分模板片段，首页导航栏

<#macro navLeft>
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="会员管理">&#xe6b8;</i>
                        <cite>会员管理</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('统计页面','welcome1.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>统计页面</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('会员列表(静态表格)','member-list.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>会员列表(静态表格)</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('会员列表(动态表格)','member-list1.html',true)">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>会员列表(动态表格)</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('会员删除','member-del.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>会员删除</cite></a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="iconfont">&#xe70b;</i>
                                <cite>会员管理</cite>
                                <i class="iconfont nav_right">&#xe697;</i></a>
                            <ul class="sub-menu">
                                <li>
                                    <a onclick="xadmin.add_tab('会员删除','member-del.html')">
                                        <i class="iconfont">&#xe6a7;</i>
                                        <cite>会员删除</cite></a>
                                </li>
                                <li>
                                    <a onclick="xadmin.add_tab('等级管理','member-list1.html')">
                                        <i class="iconfont">&#xe6a7;</i>
                                        <cite>等级管理</cite></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="订单管理">&#xe723;</i>
                        <cite>订单管理</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('订单列表','order-list.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>订单列表</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('订单列表1','order-list1.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>订单列表1</cite></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="分类管理">&#xe723;</i>
                        <cite>分类管理</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('多级分类','cate.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>多级分类</cite></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="城市联动">&#xe723;</i>
                        <cite>城市联动</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('三级地区联动','city.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>三级地区联动</cite></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="管理员管理">&#xe726;</i>
                        <cite>管理员管理</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('管理员列表','admin-list.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>管理员列表</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('角色管理','admin-role.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>角色管理</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('权限分类','admin-cate.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>权限分类</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('权限管理','admin-rule.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>权限管理</cite></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="系统统计">&#xe6ce;</i>
                        <cite>系统统计</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('拆线图','echarts1.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>拆线图</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('拆线图','echarts2.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>拆线图</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('地图','echarts3.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>地图</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('饼图','echarts4.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>饼图</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('雷达图','echarts5.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>雷达图</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('k线图','echarts6.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>k线图</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('热力图','echarts7.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>热力图</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('仪表图','echarts8.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>仪表图</cite></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="图标字体">&#xe6b4;</i>
                        <cite>图标字体</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('图标对应字体','unicode.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>图标对应字体</cite></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="其它页面">&#xe6b4;</i>
                        <cite>其它页面</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a href="login.html" target="_blank">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>登录页面</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('错误页面','error.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>错误页面</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('示例页面','demo.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>示例页面</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('更新日志','log.html')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>更新日志</cite></a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont left-nav-li" lay-tips="第三方组件">&#xe6b4;</i>
                        <cite>layui第三方组件</cite>
                        <i class="iconfont nav_right">&#xe697;</i></a>
                    <ul class="sub-menu">
                        <li>
                            <a onclick="xadmin.add_tab('滑块验证','https://fly.layui.com/extend/sliderVerify/')" target="">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>滑块验证</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('富文本编辑器','https://fly.layui.com/extend/layedit/')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>富文本编辑器</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('eleTree 树组件','https://fly.layui.com/extend/eleTree/')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>eleTree 树组件</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('图片截取','https://fly.layui.com/extend/croppers/')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>图片截取</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('formSelects 4.x 多选框','https://fly.layui.com/extend/formSelects/')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>formSelects 4.x 多选框</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('Magnifier 放大镜','https://fly.layui.com/extend/Magnifier/')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>Magnifier 放大镜</cite></a>
                        </li>
                        <li>
                            <a onclick="xadmin.add_tab('notice 通知控件','https://fly.layui.com/extend/notice/')">
                                <i class="iconfont">&#xe6a7;</i>
                                <cite>notice 通知控件</cite></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</#macro>

<#macro header title>
    <head>
        <meta charset="UTF-8">
        <title>后台登录-X-admin2.2</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="xadmin/css/font.css">
        <link rel="stylesheet" href="xadmin/css/xadmin.css">
        <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
        <script src="xadmin/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="xadmin/js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script>
            // 是否开启刷新记忆tab功能
            // var is_remember = false;
        </script>
    </head>
</#macro>

两种数据表格的封装

<#macro studentSearchForm>
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so"   >
            <input class="layui-input" placeholder="请输入姓名  " name="studentName"         id="studentName">
            <input class="layui-input" placeholder="请输入学号"    name="studentId"    id="studentId">
            <input class="layui-input" placeholder="请输入班级编号" name="classId"   id="classId">
            <input class="layui-input" placeholder="请输入宿舍编号" name="dormitoryNum"   id="dormitoryNum">

            <#--            <input class="layui-input" type="hidden" name="pageIndex" value="1">-->
            <#--            <input class="layui-input" type="hidden" name="pageSize" value="3">-->
            <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
</#macro>


<#macro table>
    <table class="layui-hide" id="student" lay-filter="student"></table>
    <script>
        layui.use(['table','form'], function(){
            var table = layui.table;

            table.render({
                elem: '#student'
                ,url:'/api/student'
                ,title:'学生列表'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                     {field:'studentId', width:80, title: 'ID', sort: true}
                    ,{field:'studentName', width:80, title: '用户名'}
                    ,{field:'dormitoryNum', width:80, title: '性别', sort: true}
                    ,{field: 'classId',width: 80,title: "班级",sort: true}
                ]],
                limit:5,
                limits:[5,10,15],
                page: true,
                skin:'line',
                totalRow: true,
                parseData: function(ret){ //将原始数据解析成 table 组件所规定的数据
                    // let res = ret.data;
                    console.log(ret);
                    return {
                        "code": ret.code, //解析接口状态
                        "msg": ret.msg, //解析提示文本
                        "count": ret.count, //解析数据长度
                        "data": ret.data //解析数据列表
                    };
                }


            });
        });
    </script>

</#macro>

<#macro table2>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

    <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="img">
        <img src="images/{{d.fileName}}"/>
    </script>

    <script src="layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>
        layui.use('table', function(){
            var table = layui.table;

            //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
            //详见：https://www.layui.com/doc/modules/table.html#totalRow
            table.render({
                elem: '#test'
                ,url:'/api/student'
                ,toolbar: '#toolbarDemo'
                ,title: '用户数据表'
                ,totalRow: true
                ,cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        ,{field:'studentId', title:'商品ID', width:150, fixed: 'left', sort: true, totalRowText: '合计'}
                        ,{field:'studentName', title:'商品名称', width:150}
                        // ,{field:'description', title:'商品描述', width:150}
                        // ,{field:'price', title:'商品价格', width:150, sort: true, totalRow: true}
                        // ,{field:'stock', title:'商品库存', width:150, sort: true, totalRow: true}
                        // ,{field:'categorylevelone', title:'一级分类', width:150}
                        // ,{field:'categoryleveltwo', title:'二级分类', width:150}
                        // ,{field:'categorylevelthree', title:'三级分类', width:150}
                        // ,{field:'fileName', title:'商品图片',templet: '#img'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                    ]
                ]
                ,page: true
            });

            //工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                        break;
                };
            });

            //监听工具条
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.alert('编辑行：<br>'+ JSON.stringify(data))
                }
            });

        });
    </script>

</#macro>

后台代码

@GetMapping("/student")
    public Map<String, Object> queryPage(@RequestParam(defaultValue = "1") @Min(1) Integer page, @RequestParam(value = "limit",defaultValue = "5") @Min(1) @Max(30) Integer size) {
             List<Student> res = studentService.selectByExampleForPage(new StudentExample(), page, size);

             return ok(res,PageInfo.of(res).getTotal());
        }


  }