低代码开发平台(LCDP)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台 。让具有不同经验水平的开发人员可以通过图形化的用户界面,通过拖拽组件和模型驱动的逻辑来创建网页和移动应用程序 。
低代码的核心是呈现、交互和扩展,其中呈现和交互需要借助自行研发的渲染引擎实现 。而此处的扩展特指物料库,也就是各类自定义的业务组件,有了物料库后才能满足更多的场景 。
在 4 个月前研发过一套可视化搭建系统,当时采用的是生成代码的方式渲染页面 。而本次研发采用的则是运行时渲染 , 功能比较基础,基于React开发,代码量在 3000 多行左右 , 用户群是本组团队成员,目标是:
- 满足 80% 的后台需求,高效赋能解放生产力 。
- 抽象共性,标准化流程 , 提升代码维护性 。
- 减少项目代码量,加快构建速度 。
![24 Node.js躬行记——低代码](http://img.zhejianglong.com/231018/1406034309-0.png)
文章插图
组件区域可以选择内置的通用模板组件 , 点击添加可在预览区域显示对应的组件,位置可上下调整,并且可以像真实的页面那样进行动态交互 。配置区域可填写菜单名称、权限、路由等信息,点击更新文件后,会将数据存储到 MongoDB 中 。
一、渲染引擎在数据库中保存的组件是一套 JSON 格式的 Schema(页面的描述性数据) , 将 Schema 读取出来后,经过渲染引擎解析后,得到对应的组件,最后在页面中显示 。
1)Schema
下面的 Schema 描述的是一个提示组件,参数的值是字符串和布尔值 。为了能让组件满足更多的场景,有时候,组件的参数值可以是字符串类型的 JSX 代码或回调函数 , 例如下面的 description 属性 , 那这些就需要做特殊处理了 。
{props: {message: "123",description: "<p>456</p>",showIcon: true},name: "Prompt"}点击 Schema 按钮,可实时查看当前的 Schema 结构,这些 Schema 最终也会存储到 MongoDB 中 。
![24 Node.js躬行记——低代码](https://www.huyubaike.com//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2ltZzIwMjIuY25ibG9ncy5jb20vYmxvZy8yMTE2MDYvMjAyMjA5LzIxMTYwNi0yMDIyMDkzMDEzMjcyMTkwOS02NzQ1NTg4NC5wbmc=.jpg)
文章插图
2)参数解析
从组件区域得到的参数都是字符串类型,此时需要做一次适当的类型转换,变成数组、函数等 。eval() 比较适合做这个活,它会将字符串当做 JavaScript 代码进行执行,执行后就能得到各种类型的值 。
在下面的遍历中,先对数组做特殊处理,然后再判断字符串是否是对象或数组,最后在运行 eval()函数时,要加 try-catch,捕获异常,因为字符串中有可能包含各种语法错误 。
for (const key in values) {// 未定义的值不做处理if (values[key] === undefined) continue;// 对数组做特殊处理if (Array.isArray(values[key])) {// 将数组的空元素过滤掉values[key] = removeEmptyInArray(values[key]);newValues[key] = values[key];continue;}const originValue = https://www.huyubaike.com/biancheng/values[key];let value = originValue;// 判断是对象或数组const len = originValue.length;if ((originValue[0] ==="{" && originValue[len - 1] === "}") ||(originValue[0] === "[" && originValue[len - 1] === "]")) {try {/*** 字符串转换成对象* 若 values[key] 是数组,会有BUG* eval(`(${[1,2]})`)的值为 2,因为数组会先调用toString(),得到 eval("(1,2)")*/value = https://www.huyubaike.com/biancheng/eval(`(${originValue})`);} catch (e) {// eval(`test`)字符串也会报test未定义的错误value = originValue;}}newValues[key] = value;}在将参数转换类型后 , 接下来渲染引擎就会根据不同的组件对这些参数进行定制处理,例如将提示组件的 description 属性转换成 JSX 语法的代码 。parse()是一个解析函数 , 来自于 html-react-parser 库,可将组件转换成 React.createElement() 的形式 。回调函数的处理会在后面做详细的讲解 。
{handleProps: (values: ObjectType) => {// 将字符串转换成JSXif (values.description) {values.description = parse(values.description.toString());}return values;};}3)回调函数
除了 JSX 之外,为了能适应更多的业务场景,提供了自定义的回调函数 。
{props: {btns: `onClick: function(dispatch) {dispatch({type: "template/showCreate",payload: {modalName: 'add'}});`},name: "Btns"}编辑器组件使用的是 react-monaco-editor,即 React 版本的 Monaco Editor 。
![24 Node.js躬行记——低代码](http://img.zhejianglong.com/231018/14060341V-2.png)
推荐阅读
- 点亮led esp32把玩记-④ 星星点灯
- 题解 2021 CCPC 威海站 VP记录
- Docker | 发布镜像到镜像仓库
- 如何更新电脑的显卡驱动(笔记本显卡驱动要不要更新)
- 简单好记的微信号 augenstern什么意思
- 奔腾处理器和i5哪个好-英特尔奔腾处理器和酷睿i5处理器哪个好
- JavaFx 使用字体图标记录
- 记一次 .NET 某企业OA后端服务 卡死分析
- AlexNet-文献阅读笔记
- 小米笔记本Pro15增强版参数_小米笔记本Pro15增强版参数介绍