# 第2节 基于element的使用文档


### 2.1 前期准备

    因布局器的页面代码需要持久化到本地数据库，所以您可以参考一下方式 把布局器数据保存和初始化
    打开callback.js 可以看到


    /**
     * 初始化布局器成功后执行：您可以调用api.insert(html,javascript)来初始化布局器的默认数据
     * @param api 接口api对象 具体方法参考api.js
     */
    MagicalCallback.prototype.after_start = function (api) {
        $.get("您的服务器后端地址",{pageId:从页面地址获取一个参数},function(data){
                //方式1 如果您使用html方式来回初始化和保存
                api.insert(data.html,data.javascript);//api请参考api.js文件
                //方式2 如果您使用rootNode来回初始化和保存
                api.insertNode(JSON.parse(data.rootNode));
                api.insertJavascript(data.javascript);
        })
    }


    /**
     * 保存按钮
     * @param html 源码部分
     * @param rootNode 当前布局器JSON 这个数据您可以选择不保存 因为只有html足够初始化和还原布局器了
     * @param javascript 脚本
     */
    MagicalCallback.prototype.save_html = function (html,rootNode,javascript) {
        //方式一 保存html
        $.post("您的服务器后端地址",{pageId:从页面地址获取一个参数,html:html,javascript:javascript},function(data){
                api.insert(data.html,data.javascript);//api请参考api.js文件
        })
        //方式二 保存rootNode json 不建议您保存json来初始化 因为json非常大 而html是必须要保存的 如果您后续有脱离布局器单独部署页面的需求
         $.post("您的服务器后端地址",{pageId:从页面地址获取一个参数,html:JSON.stringify(rootNode),javascript:javascript},function(data){
                api.insert(data.html,data.javascript);//api请参考api.js文件
        })
    }



### 2.2 数据库实体

page:页面

| 字段名   | 字段类型 | 注释     |
| -------- | -------- | -------- |
| id       | bigint   | 页面id   |
| pageHtml | longtext | 页面HTML |
| pageJs   | longtext | 页面脚本 |

建表语句(mysql)

    CREATE TABLE `page` (
      `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
      `page_html` longtext COMMENT '页面HTML',
      `page_js` longtext COMMENT '页面js',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

method:方法    (不使用js脚本编辑器可以忽略此表)

| 字段名   | 字段类型 | 注释     |
| -------- | -------- | -------- |
| id       | bigint   | 页面id   |
| methodHtml | longtext | 页面HTML |
| functionJs   | longtext | 可执行js脚本 |

建表语句(mysql)

    CREATE TABLE `method` (
      `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
      `method_html` longtext COMMENT '方法html',
      `function_js` longtext COMMENT '方法函数',
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4;

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

    1 保存页面数据 POST deployer/project/save_page?id=1&pageHtml=xxx&pageJs=xxx
      /**
       *  id为空则insert数据库 否则update数据库
       * @param {id:页面id,pageHtml:页面html,pageJs:页面脚本}
       */
    2 获取页面数据 GET deployer/project/page/{pageId}
    /**
     * 布局器加载后需要调用此方法 恢复布局器数据
     * @param pageId
     * @return {flag:true,data:{pageHtml:'',pageJs:''}}
     */
    3 保存方法数据 POST deployer/project/save_page_method?id=1&methodHtml=xxx&functionJs=xxx
    (不使用js脚本编辑器可以忽略此接口)
    /**
     * id为空请insert数据库 否则update数据库
     * @param {id:方法id,methodHtml:页面html,functionJs:可执行的js,pageId:方法所属页面ID}
     * @return 方法id    {flag:true,data:1}
     */
    4 获取方法数据 GET deployer/project/page_method/{methodId}
        (不使用js脚本编辑器可以忽略此接口)
    /**
     * 脚本布局器加载后 自动 初始化上一次的方法配置
     * @param methodId 方法ID
     * @return {flag:true,data:{method.methodHtml}}
     */
    5 根据多个方法获取方法实体数组 GET deployer/project/page_method_list?methodIds=1,2,3
        (不使用js脚本编辑器可以忽略此接口)
    /**
     * y页面布局器加载后 自动 初始化上一次的方法配置
     * @param methodIds 方法ID逗号分隔多个
     * @return {flag:true,data:[{id:1,methodHtml:"xxx"},{id:2,methodHtml:"xxx"}]}
     */


### 2.4 页面流程

#### 2.4.1 如果您选择高级版elementUi(包含js脚本编辑器)

    首先您需要关注页面加载流程
        1 自己业务先建立一个页面 拿到页面主键 pageId
        2 跳转到布局器，地址参数携带此pageId 例如 http://xxx/magicaldrag/index-page.html?pageId=123
    
        3 当index-page.html加载完毕
                        |
                     会自动调用
                        |
         lowcode/page/page-magicaldrag-callback.js
                        |
         进入after_start() 重写了callback.js回调方法 所以布局器加载完会自动通知
                        |
             获取浏览器参数pageId然后初始化页面(后续就看代码吧 )
    
        此模块有操作数据库的接口 请嵌入自己系统后自行实现
            主要参考lowcode/page/page-ajax.js
            这里就用到我们的接口了
                        |
        4 点击事件扩展按钮 会调出脚本编辑器
                        |
          lowcode/code/code-magicaldrag-callback.js
                        |
              after_start()初始化完成后 需要加载出上一次的数据
                        |
              进而我们来到code.ajax.js
                        |
              查看下里面与后端的交互接口 与我们的实际接口对接完成即可
                        |

#### 2.4.2 如果您选择精简版elementUi(不包含js脚本编辑器)

    首先您需要关注页面加载流程
        1 自己业务先建立一个页面 拿到页面主键 pageId
        2 跳转到布局器，地址参数携带此pageId 例如 http://xxx/magicaldrag/index-element.html?pageId=123

        3 当index-element.html加载完毕
                        |
                     会自动调用
                        |
         magicaldrag/assets/drag/js/user/callback.js
                        |
         进入after_start(api) 布局器加载完后会调用此方法 您可以在此处初始化上一次的数据
                        |
                    自行提供后端接口保存和初始化
                        |
                    如果您点击了保存按钮
                        |
                则自动进入callback.js的save_html方法

## 2.5 集成示例 magicaldemo for java

    请参考 magicaldemo 项目 集成的是element高级版
    1 导入 magicaldemo/magicaldemo.sql
      并且修改 application.yml中 全局配置下的mysql连接信息
    2 此项目基于maven构建，请自行导入
![](img/导入magicaldemo.png)

    3 运行StartApplication.java 的main函数 即可启动项目
    4 其他： 本项目基于springboot 所以自带tomcat无需再依赖
    5 启动成功浏览器访问：http://localhost:18088/lowcode-web/magicaldrag/index-page.html?pageId=
    6 预览页面 http://localhost:18088/lowcode-web/page/{此处填写pageId}
    7 web/api/web/xxxController 包含了布局器嵌入后需要的后端接口
    8 布局器在resources/static目录下

### 2.6 文件上传


### 2.7 自定义组件各类示例(陆续添加中)

#### 2.7.1 示例一


    此为markdown文档，请使用Typora软件访问 或者支持markdown的软件皆可
