后台在不分离的情况下，搭建页面前端框架使用layui页面风格比较良好

js代码

(function($,window,layui,layer) {
    $.extend({
        _layui: layui,

        modal:  {
            //弹出层指定宽度
            open: function (title,url,w,h,cb) {

                if ($.common.isEmpty(cb)) {
                    cb = function(index, layero) {
                        var iframeWin = layero.find('iframe')[0];
                        iframeWin.contentWindow.submitHandler(index, layero);
                    }
                }
                let area = ["100%", "100"];
                if(w && h) {
                    area =  [w + 'px', h + 'px']
                }

                let index = layer.open({
                    type: 2,
                    // area: [w + 'px', h + 'px'],
                    area: area,
                    fix: false,
                    //不固定
                    maxmin: true,
                    shade: 0.3,
                    title: title,
                    content: url,
                    btn: ['确定', '关闭'],
                    // 弹层外区域关闭
                    shadeClose: true,
                    yes: cb,
                    cancel: function(index) {
                        return true;
                    }
                });
                if(!(w && h)) {
                    layer.full(index);
                }

            }
        },

        //操作封装处理
        operate: {

            // 提交数据
            submit: function(url, type, data, callback) {
                var config = {
                    url: url,
                    type: "post",
                    contentType: 'application/json;charset=utf-8;',
                    dataType: "json",
                    data: data,
                    beforeSend: function () {
                        // $.modal.loading("正在处理中，请稍后...");
                    },
                    success: function(result) {
                        if(result.code == "000") {
                            if (typeof callback == "function") {
                                callback(result);
                            }

                        }else {
                            layer.alert("接口异常或服务器问题")

                        }
    
                        // $.operate.ajaxSuccess(result);
                    }
                };
                $.ajax(config)
            },
            // post请求传输
            post: function(url, data,method, callback) {
                let params = $.operate.handleParams(data,method);
                $.operate.submit(url, "post", params, callback);
            },
         
            //处理请求参数封装（加签）
            handleParams: function(data,method,page,size) {
                let params = {
                    method:method,
                    biz_params: JSON.stringify(data), 
                }
                if(page && size) {
                    params.pager = page,
                    params.pager_len = size
                }
                let json = window.getParams(params);
                return JSON.stringify(json);
            },

            //重新生成请求数据，分页变化
            handleParamsPage: function(page, size) {
                let o = JSON.parse($.table._options.data);
                let temp = {};
                temp.biz_params = o.biz_params;
                temp.method = o.method;
                temp.pager = page;
                temp.pager_len = size;
                let json = window.getParams(temp);
                return JSON.stringify(json);                // let json = getParamsDoc(pageNum, numPerPage);
            },
            //打开新增页面
            addPage: function(title,url) {   
                $.modal.open(title,url,null,null,function(index) {
                    layer.close(index);
                })
            },
            //打开编辑页面
            edtiorPage: function(title,url,id) {
                $.modal.open(title,url,null,null,function(index) {
                    layer.close(index);
                })
            }


        },

        table: {
            _options:{},
            //表格初始化
            init: function(options) {
                let defaults = {
                    pageElem: "layui-table-page" //分页的节点，不需要带#
                    ,pageNum: 1  //默认 1
                    ,pageSize: 10// 默认 10条
                    // ,data:{} //请求 对象数据，
                    ,getParams: null //获取参数数据
                    ,delUrl:""
                    ,delParams: null


                    ,elem: "#layui-table"//表格dom:lay-filter="layui-table"
                    ,url: ""//列表请求方式
                    ,method: "POST" 
                    ,contentType:"application/json"
                    ,parseData: function(res){
                        res.data = JSON.parse(res.biz_params).list;
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.pager_max, //解析数据长度
                            "data":  res.data//解析数据列表
                        };
                    },
                    where: {}
                    ,request: {
                        pageName: 'pager' //页码的参数名称，默认：page
                        ,limitName: 'pager_len' //每页数据量的参数名，默认：limit
                    }
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        ,layEvent: 'LAYTABLE_TIPS'
                        ,icon: 'layui-icon-tips'
                      }]////自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    ,title: "表格名称"
                    ,cols: []
                    // ,page: true
                    ,id: "layui-table" //id="layui-table"
                }
                
                let opt = $.extend(defaults, options);
                console.log(opt);
                $.table._options = opt;
               
                //页面第一次请求，默认 1页 10条
                $.table.getListByPage(opt,1,10,true);
                  //初始化监听事件
                ;
                $.table.initEvent();

            },

            //请求数据
            getListByPage: function(opt,page,size,isPage) {
                let data = $.table._options.getParams(page, size);
            
                $.operate.submit(opt.url, "post", data, function(res) {
                   
                       console.log(res);
                       list = JSON.parse(res.biz_params).list;
                       let pageRO = {
                        totalCount: null,
                        numPerPage: null
                      }
                      pageRO.totalCount = res.pager_max;
                      pageRO.numPerPage = 10;
                        $.table.renderTable(list, opt);
                        if(isPage) {
                            $.table.renderPage(pageRO, opt);
                        }

                });

            },

            //渲染表格
            renderTable: function(list, opt) {
                layui.table.render({
                    elem: opt.elem
                    , title: '用户数据表'
                    , cols: opt.cols
                    // , page: true
                    , data: list
                    ,toolbar: opt.toolbar
            
                    , done: function (res, curr, count) {
                        // consoled.log(res, curr, count)
            
                    }
                  });
                
            },
            //渲染分页
            renderPage: function(data, opt) {
                layui.laypage.render({
                    elem: opt.pageElem, //注意，这里的 page 是 ID，不用加 # 号
                    count: data.totalCount, //数据总数，从服务端得到
                    limit: data.numPerPage, // 每页条数
                    limits: [10, 20, 30, 40, 50],
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    jump: function (obj, first) {
                      //console.log(obj)
                      //obj包含了当前分页的所有参数，比如：
                      //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                      //console.log(obj.limit); //得到每页显示的条数
              
                      //首次不执行
                      if (!first) {
                        //do something
                        $.table.numpage(obj.curr, obj.limit) // 分页点击传参 
                      }
                    }
                  });
            },
            //分页变化
            numpage: function(page, size) {
                //解析初始化 请求
                $.table.getListByPage($.table._options,page,size,false);
            },

            initEvent: function() {
                ;
                $.table.bindEvent();
                $.table.bindToolbar();
                $.table.bindToolbarHead();
            },

            //自定义事件
            bindEvent: function() {
                 active = {
                    //表格搜索
                    search: function() {
                       $.table.getListByPage($.table._options,1,10,true);
                    },
                    //新增操作
                    add: function() {
                        $.modal.open("新增"+$.table._options.title,"./edtior_add.html",600,800,function(index) {
                            layer.close(index);
                        })

                    }
                  };
                  $('.layui-btn-g').on('click', function () {
                    ;
                    var type = $(this).attr('lay-event');
                    active[type] ? active[type].call(this) : '';
                  });
            },
            //表格【行】工具栏事件
            bindToolbar: function() {
                //查询行工具 dom
                let dom = $.table._options.elem.substring(1)
                layui.table.on(`tool(${dom})`, function(obj) {
                    console.log(obj);
                    if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            // $.table._options.delParams();
                            $.operate.submit( $.table._options.delUrl, "post", data, function(res){

                            });

                        });

                    }else if(obj.event === 'edit'){
                        $.modal.open("编辑"+$.table._options.title,"./edtior_add.html",600,800,function(index) {
                            layer.close(index);
                        })
                    } 
                })
            },
            //表格【头】工具栏事件
            bindToolbarHead: function() {
                ;
                let dom = $.table._options.elem.substring(1)
                layui.table.on(`toolbar(${dom})`, function(obj){
                    var checkStatus = layui.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;
                      
                      //自定义头工具栏右侧图标 - 提示
                      case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                      break;
                    };
                  });
            }


        },



        form: {
            _options:{},
            //表单初始化
            init: function(options) {
                let defaults = {
                     id:"layui-form",
                     submitBtn: "save_btn",
                     data: null, //表单对应的数据name:value,不是页面数据包含
                     verify: undefined,//对输入框值校验
                     verifyCheckBox:{//对复选框校验并且友好提示
                         "name": 1  // 属性：限制个数
                     },
                     addUrl: {
                        method: "",
                        url:"",
                        data:""
                     },
                     editorUrl:{
                        method: "",
                        url:""

                     },
                     descUrl:{
                        method: "",
                        url:""

                     },
                     requestMethod:"",
                     contentType:"application/x-www-form-urlencoded",
                     isDate: true,//是否有时间控件   
                     width: undefined,//表单宽度
                     height: undefined,//表单高度
                }
                let opt = $.extend(defaults, options);
                $.form._options = opt;
                //初始化监听事件
                // $.form.initEvent();
                //初始化数据
                layui.form.val(opt.id, opt.data);
                //初始化校验
                layui.form.verify(opt.verify);
                //提交
                 //初始化事件提交
                 layui.form.on(`submit(${opt.submitBtn})`, function(data) {
                    ;
                    console.log(data.field);
                    let res_params = $.extend(data.field,opt.data);
                    console.log(res_params);
                    if(res_params.id) {
                        $.operate.post(opt.editorUrl.url, data.field, opt.editorUrl.method, function(res) {
                            console.log(res);
                            if("000" == res.code) {
                                layer.msg("修改成功")
                            }else {
                                layer.msg("修改失败")
                            }
                        })

                    }else {
                        $.operate.post(opt.addUrl.url, data.field, opt.addUrl.method, function(res) {
                            console.log(res);
                            if("000" == res.code) {
                                layer.msg("保存成功")
                            }else {
                                layer.msg("保存失败")
                            }
                        })
                    }
                   
                    return false;
                })
            }

        },


        // 通用方法封装处理
        common: {
            // 判断字符串是否为空
            isEmpty: function (value) {
                if (value == null || this.trim(value) == "") {
                    return true;
                }
                return false;
            },
            // 判断一个字符串是否为非空串
            isNotEmpty: function (value) {
                return !$.common.isEmpty(value);
            },
            // 空对象转字符串
            nullToStr: function(value) {
                if ($.common.isEmpty(value)) {
                    return "-";
                }
                return value;
            },
            // 是否显示数据 为空默认为显示
            visible: function (value) {
                if ($.common.isEmpty(value) || value == true) {
                    return true;
                }
                return false;
            },
            // 空格截取
            trim: function (value) {
                if (value == null) {
                    return "";
                }
                return value.toString().replace(/(^\s*)|(\s*$)|\r|\n/g, "");
            },
            // 比较两个字符串（大小写敏感）
            equals: function (str, that) {
                return str == that;
            },
            // 比较两个字符串（大小写不敏感）
            equalsIgnoreCase: function (str, that) {
                return String(str).toUpperCase() === String(that).toUpperCase();
            },
            // 将字符串按指定字符分割
            split: function (str, sep, maxLen) {
                if ($.common.isEmpty(str)) {
                    return null;
                }
                var value = String(str).split(sep);
                return maxLen ? value.slice(0, maxLen - 1) : value;
            },
            // 字符串格式化(%s )
            sprintf: function (str) {
                var args = arguments, flag = true, i = 1;
                str = str.replace(/%s/g, function () {
                    var arg = args[i++];
                    if (typeof arg === 'undefined') {
                        flag = false;
                        return '';
                    }
                    return arg;
                });
                return flag ? str : '';
            },
            // 指定随机数返回
            random: function (min, max) {
                return Math.floor((Math.random() * max) + min);
            },
            // 判断字符串是否是以start开头
            startWith: function(value, start) {
                var reg = new RegExp("^" + start);
                return reg.test(value)
            },
            // 判断字符串是否是以end结尾
            endWith: function(value, end) {
                var reg = new RegExp(end + "$");
                return reg.test(value)
            },
            // 数组去重
            uniqueFn: function(array) {
                var result = [];
                var hashObj = {};
                for (var i = 0; i < array.length; i++) {
                    if (!hashObj[array[i]]) {
                        hashObj[array[i]] = true;
                        result.push(array[i]);
                    }
                }
                return result;
            },
            // 数组中的所有元素放入一个字符串
            join: function(array, separator) {
                if ($.common.isEmpty(array)) {
                    return null;
                }
                return array.join(separator);
            },
            // 获取form下所有的字段并转换为json对象
            formToJSON: function(formId) {
                 var json = {};
                 $.each($("#" + formId).serializeArray(), function(i, field) {
                     json[field.name] = field.value;
                 });
                return json;
            }
        }

    })




})(jQuery,window,layui,layer)

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表格——分页独立封装</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui-v2.6.0//dist/css/layui.css"
  tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">
  
<script src="./layui-v2.6.0/dist/layui.js" charset="utf-8"></script>
</head>
<body>

    <div class="demoTable" id="">
        搜索ID：
        <div class="layui-inline">
          <input class="layui-input" name="atv" id="ct_name" autocomplete="off">
        </div>
        <!-- <button class="layui-btn" data-type="reload">搜索</button> -->
        <button class="layui-btn layui-btn-g" lay-event="search" id="search">搜索2</button>
        <button class="layui-btn layui-btn-g" lay-event="add" id="add">新增</button>
      </div>   
 
<table class="layui-hide" id="test" lay-filter="test"></table>
<div id="page"></div>
 
<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 src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js" integrity="sha512-E8QSvWZ0eCLGk4km3hxSsNmGWbLtSCSUcewDQPQWZF6pEU8GlT8a5fF32wOl1i8ftdMhssTrF/OhyGWwonTcXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/core.js"></script>
<script src="./js/crypto.js"></script>
<script src="./gzsz_ui_2.js"></script>
     
<script>
  
    function getParamsDoc(num, size) {
    console.log("getParamsDoc",this);
    let atv_name = document.getElementById("ct_name").value;
      //  console.dir(atv_name)
        let temp = {
          ct_name: atv_name,
        }  
    let query = {
        method:"copyTempPO.getPaperTempList",
        pager: num,
        pager_len: size,
        biz_params: JSON.stringify(temp)
    }
    return  JSON.stringify(getParams(query)) ;
  }
  function delParamsDoc() {
    console.log("delParamsDoc",this);
 
        let temp = {
          id: "",
          state: 1
        }  
    let query = {
        method:"copyTempPO.getPaperTempList",
        pager: num,
        pager_len: size,
        biz_params: JSON.stringify(temp)
    }
    return  JSON.stringify(getParams(query)) ;
  }  
  

  $.table.init({
    pageElem: "page",
    elem: "#test",
    url: "xxx",
    // data:json,
    getParams: getParamsDoc,
    delUrl:"yyy",
    delParams: delParamsDoc,
    toolbar: "#toolbarDemo",
    title:"文案管理",
    cols: [[
          {type: 'checkbox', fixed: 'left'}
          ,{ field: 'id', title: 'ID', width: 100 }
          , { field: 'ct_code', title: '名称', width: 300, }
          , { field: 'ct_name', title: '名称12', width: 400, }
          , { title: '操作', toolbar: '#barDemo', width: 200 }

    ]]
  })


  // // function(data,method,page,size)
  // let temp = {
  //    ct_name: $("#ct_name").val()
  // }
  // handleParams: function(data,method,page,size)
  // let json = $.operate.handleParams(temp, "copyTempPO.getPaperTempList", 1, 10);

</script>



</body>
</html>