Node.js躬行记——低代码

最新推荐文章于 2024-04-18 04:53:35 发布

「已注销」

最新推荐文章于 2024-04-18 04:53:35 发布

阅读量781

点赞数

文章标签：低代码

本文链接：https://blog.csdn.net/weixin_47367099/article/details/127358692

版权

　　低代码开发平台（LCDP）是无需编码（0代码）或通过少量代码就可以快速生成应用程序的开发平台。让具有不同经验水平的开发人员可以通过图形化的用户界面，通过拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

　　低代码的核心是呈现、交互和扩展，其中呈现和交互需要借助自行研发的渲染引擎实现。而此处的扩展特指物料库，也就是各类自定义的业务组件，有了物料库后才能满足更多的场景。

　　在 4 个月前研发过一套可视化搭建系统，当时采用的是生成代码的方式渲染页面。而本次研发采用的则是运行时渲染，功能比较基础，基于React开发，代码量在 3000 多行左右，用户群是本组团队成员，目标是：

　　平台的操作界面如下，由于管理后台页面的元素比较单一，所以暂不支持拖拽和缩放等功能，也就是没有通用的布局器。

　　组件区域可以选择内置的通用模板组件，点击添加可在预览区域显示对应的组件，位置可上下调整，并且可以像真实的页面那样进行动态交互。配置区域可填写菜单名称、权限、路由等信息，点击更新文件后，会将数据存储到 MongoDB 中。

一、渲染引擎

　　在数据库中保存的组件是一套 JSON 格式的 Schema（页面的描述性数据），将 Schema 读取出来后，经过渲染引擎解析后，得到对应的组件，最后在页面中显示。

1）Schema

　　下面的 Schema 描述的是一个提示组件，参数的值是字符串和布尔值。为了能让组件满足更多的场景，有时候，组件的参数值可以是字符串类型的 JSX 代码或回调函数，例如下面的 description 属性，那这些就需要做特殊处理了。

{
  props: {
    message: "123",
    description: "<p>456</p>",
    showIcon: true
  },
  name: "Prompt"
}

　　点击 Schema 按钮，可实时查看当前的 Schema 结构，这些 Schema 最终也会存储到 MongoDB 中。

2）参数解析

　　从组件区域得到的参数都是字符串类型，此时需要做一次适当的类型转换，变成数组、函数等。eval() 比较适合做这个活，它会将字符串当做 JavaScript 代码进行执行，执行后就能得到各种类型的值。

　　在下面的遍历中，先对数组做特殊处理，然后再判断字符串是否是对象或数组，最后在运行 eval()函数时，要加 try-catch，捕获异常，因为字符串中有可能包含各种语法错误。

for (const key in values) {
  // 未定义的值不做处理
  if (values[key] === undefined) continue;
  // 对数组做特殊处理

关注