视频教程:https://edu.csdn.net/course/play/10747/442707
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);
}
})
}
}
page:页面
字段名 | 字段类型 | 注释 |
---|---|---|
id | bigint | 页面id |
pageHtml | longtext | 页面HTML |
pageJs | longtext | 页面脚本 |
css | longtext | 页面css |
canvasStyle | longtext | 画布样式 |
magicalJsCodeData | longtext | 脚本编辑器数据 |
建表语句(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;
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:''}}
*/
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方法