低代码引擎编辑多个页面那点事

写在前面

使用阿里低代码引擎有段时间了，我们的主要需求就是：使用低代码平台搭建一套系统，技术栈使用了antd+lowcode-engine，加上后端的配合。

因为我们的页面比较多，又要和传统项目类似，就是需要route来管理路由，所以我们采用把出码器放到我们自己服务器上的方式实现出码，下面就简单介绍下具体实现方式。

前端架构

前端系统使用Ant Design来搭建，主要功能就是登录页、页面列表页和编辑页。

登录不必说，主要是做权限会用到；

页面列表主要是为了生成菜单，和页面编辑，大体长这个样子：

这里主要介绍页面编辑和发布功能：

点击编辑，就进入了设计器，编辑完页面保存后就需要请求接口，后端处理后写入schema.json文件中，最终会放到json中的componentsTree字段中，具体配置可参考lowcode-engine.cn/site/docs/s… 。

最终生成的数据就会是这样的：

  "version": "1.0.0",
  "componentsMap": [],
  "componentsTree": [
    {
      "children": [
      ],
      "componentName": "Page",
      "condition": true,
      "conditionGroup": "",
      "css": "",
      "dataSource": {
        "list": [
        ]
      },
      "fileName": "page_25",
      "hidden": false,
      "id": "node_855658",
      "isLocked": false,
      "lifeCycles": {
        "componentDidMount": {
          "source": "function componentDidMount() {}",
          "type": "JSFunction",
          "value": "function componentDidMount() {}"
        },
        "componentWillUnmount": {
          "source": "function componentWillUnmount() {}",
          "type": "JSFunction",
          "value": "function componentWillUnmount() {}"
        }
      },
      "meta": {
        "router": "/页面1/子页面1",
        "title": "demo页面"
      },
      "methods": {
      },
      "originCode": "",
      "props": {
        "ref": "outerView",
        "style": {
          "height": "100%"
        }
      },
      "state": {
        "dataLoading": {
          "type": "JSExpression",
          "value": "false"
        }
      },
      "title": ""
    }
    ...
  ],
  "constants": {
    "ENV": "prod"
  },
  "css": "body {font-size: 12px;}",
  "config": {
    "sdkVersion": "1.0.3",
    "historyMode": "hash",
    "targetRootID": "J_Container",
    "layout": {
      "componentName": "BasicLayout",
      "props": {
        "logo": "...",
        "name": ""
      }
    },
    "theme": {
      "package": "@alife/theme-fusion",
      "version": "^0.1.0",
      "primary": "#106ebe"
    }
  },
  "meta": {
    "name": "",
    "project_name": "",
    "description": ""
  }
}

这里meta字段最后会生成路由。

点击发布按钮就会执行一个shell文件，主要功能就是执行出码。

shell大体代码长这样：

npm run prod
cd ./generated/
npm run build
if [[ $? -eq 0 ]]; then
  echo "构建成功，开始删除文件..."
  rm -rf $WEBSITE_PATH/*
  cp -rf ./build/* $WEBSITE_PATH/
  echo "文件删除成功！"
else
  echo "构建失败。"
fi
exit 0

后端配置

后端配置好出码环境，代码可以从github上下载到服务器上并安装好依赖，shell文件也可以放到这里。

最后

在lowcode-engine中也可以开发很多好玩的东西，比如定制模版，页面懒加载等，如果大家有更好的想法欢迎讨论。

“本文正在参加阿里低代码引擎征文活动”