基于layui布局器与现有系统集成细节

视频教程：https://edu.csdn.net/course/play/10747/442707

1 前期准备

xxxxxxxxxx
本节我们以layui为例，讲述集成步骤，其他ui类似
因布局器的页面代码需要持久化到本地数据库，所以您可以参考一下方式 把布局器数据保存和初始化
打开callback.js 可以看到以下代码 您页可以把以下代码拷贝到my-callback.js中 便于后续无缝升级
​
    /**
     * 初始化布局器成功后执行：您可以调用api.insert(...)来初始化布局器的默认数据
     * @param api 接口api对象 具体方法参考api.js
     */
    MagicalCallback.prototype.after_start = function (param) {
        var api = param.api;
        var pageId = this.getParameter("pageId");
        if(pageId){
            $.getJSON(APPLICATION_ENV.getEnv().serverPath+"admin/user_project_page_rest/get/"+pageId,{date:new Date().getTime()},function (data) {
                if(data.flag){
                    var item = data.data;
                    if(item){
                        if(item.pageHtml){
                            api.insert({html:item.pageHtml,javascript:item.pageJs,css:item.css,magicalJsCodeData:JSON.parse(item.magicalJsCodeData),canvasStyle:JSON.parse(item.canvasStyle)});
                        }
                    }
                }else {
                    layer.msg(data.desc);
                }
            })
            //加载我自定义的组件 参考即可 不是必须的
            var addDataFun = {
                add:function (api,data,title) {
                    if(data.flag){
                        var list = data.data;
                        if(list && list.length>0){
                            var item = {
                                name:title,
                                children:[]
                            }
                            for(var i=0;i<list.length;i++){
                                var itemObj = list[i];
                                item.children.push({name:itemObj.componentName,icon:"",html:itemObj.contentHtml});
                            }
                            if(title=='用户自定义'){
                                api.getConstant().components.unshift(item);
                            }else {
                                api.getConstant().components.push(item);
                            }
                            api.rebuildLeftComponents();
                        }
                    }else {
                        layer.msg(data.desc)
                    }
                }
            }
            $.getJSON(APPLICATION_ENV.getEnv().serverPath+"admin/user_component_rest/page",{uiFirst:api.getConstant().UI_NAME,safeOrderBy:"sort_num asc",page:1,limit:1000},function (data) {
                addDataFun.add(api,data,"用户自定义");
            })
            $.getJSON(APPLICATION_ENV.getEnv().serverPath+"admin/user_component_enjoin_rest/page",{uiFirst:api.getConstant().UI_NAME,safeOrderBy:"sort_num asc",page:1,limit:1000},function (data) {
                addDataFun.add(api,data,"用户分享");
            })
        }
​
    }

xxxxxxxxxx
    /**
     * 保存按钮
     * @param param.html 源码部分            string
     * @param param.rootNode 当前布局器JSON  JSON
     * @param param.javascript 脚本         string
     * @param param.css 样式         string
     * @param param.magicalJsCodeData 脚本编辑器数据  JSON
     * @param param.canvasStyle 画布样式         JSON
     */
    MagicalCallback.prototype.save_html = function (param) {
        var html = param.html,javascript=param.javascript,css=param.css,magicalJsCodeData=JSON.stringify(param.magicalJsCodeData),canvasStyle=JSON.stringify(param.canvasStyle);
        var pageId = this.getParameter("pageId");
        if(pageId){
            $.post(APPLICATION_ENV.getEnv().serverPath+"admin/user_project_page_rest/save",{id:pageId,pageHtml:html,pageJs:javascript,css:css,magicalJsCodeData:magicalJsCodeData,canvasStyle:canvasStyle},function (data) {
                if(data.flag){
                    layer.msg("保存成功");
                }else {
                    layer.msg(data.desc);
                }
            })
        }
    }

2 数据库实体

page:页面

建表语句(mysql)

xxxxxxxxxx
CREATE TABLE `page` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `page_html` longtext COMMENT '页面HTML',
  `page_js` longtext COMMENT '页面js',
  `css` longtext COMMENT '页面css',
  `canvas_style` longtext COMMENT '画布样式',
  `magical_js_code_data` longtext COMMENT '脚本编辑器数据',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

3 后端接口(可参考 集成示例magicaldemo for java)

xxxxxxxxxx
1 保存页面数据 POST deployer/project/save_page?id=1&pageHtml=xxx&pageJs=xxx&css=xx&canvasStyle=xxx&magicalJsCodeData=xxx
  /**
   *  id为空则insert数据库 否则update数据库
   * @param {id:页面id,pageHtml:页面html,pageJs:页面脚本,css:页面样式,canvasStyle:画布样式,magicalJsCodeData:xxx}
   */
2 获取页面数据 GET deployer/project/page/{pageId}
/**
 * 布局器加载后需要调用此方法 恢复布局器数据
 * @param pageId
 * @return {flag:true,data:{pageHtml:'',pageJs:'',css:'',canvasStyle:'',magicalJsCodeData:''}}
 */

4 页面流程

xxxxxxxxxx
    1 自己业务先建立一个页面 拿到页面主键 pageId
    2 跳转到布局器，地址参数携带此pageId 例如 http://xxx/magicaldrag/index-layui.html?pageId=123
​
    3 当index-layui.html加载完毕
                    |
                 会自动调用
                    |
     assets/drag/js/user/callback.js (如果您使用my-callback.js 那最好了 重写callback.js的几个方法)
                    |
     进入after_start(api) 布局器加载完后会调用此方法 您可以在此处初始化上一次的数据
                    |
                自行提供后端接口保存和初始化
                    |
                如果您点击了保存按钮
                    |
            则自动进入callback.js的save_html方法