体验阿里开源低代码引擎
最近在闲逛的时候无意间发现了阿里的一个低代码引擎lowcode-engine.cn/。先简单介绍以下低代码的概念，引用百科上的解释，低代码（Low Code）是一种可视化的应用开发方法，用较少的代码、以较快的速度来交付应用程序，将程序员不想开发的代码做到自动化，称之为低代码。也就是说有一部分我们自己懒得做的工作可以交给一些低代码平台来实现。但是低代码并不代表无代码，并且依然要求我们要能看得懂里边的代码（阿里的这个低代码引擎生成的代码是react的），不然怎么实现定制化或者改bug呢？
下载和启动
回到阿里的这个低代码引擎上，看下如何启动并且我们自己的地代码平台。首先是下载低代码编辑器的源代码，
- github下载
- 使用git下载
git clone https://github.com/alibaba/lowcode-demo.git
下载或者拉取仓库代码之后就可以配置了，配置过程要求电脑上安装了node和npm，然后cd到元源代码根目录，执行npm install完成安装。安装完成之后执行npm start,会自动跳转到预览页。
页面构成
大体介绍以下这个页面，先看左侧四个图标，分别表示页面结构树、组件库、数据源和源代码。
左侧面板
- 默认页面的结构树
- 组件库，里边有一些常用的控件
- 数据源，主要和后台交互
- 源代码，可以在这里定义一些函数和样式
编辑器部分
中间比较大的一块区域就是编辑器部分了，在编辑器里可以将组件库里的选择的组件按照我们想要的效果进行组合。比如我们要实现一个列表展示的效果，就可以先将预览页的标题区域和区块标题部分隐藏（分别选中这两个区域，然后在右侧属性部分找到对应的隐藏显示开关），然后再到组件库中找到表格相关的组件拖拽到编辑器工作区完成布局。
这里选了一个高级表格，效果如下
属性面板
最后是右侧属性面板，这部分主要用来设置所选区域或者控件的一些属性、外观、事件等等。每个组件都预置了不同的属性和外观。比如刚才创建了表格，它的属性面板是这样的。
这只是部分属性，还有一些其他的属性可以自己探索。
一个小例子
介绍了如何安装启动以及页面的相关操作区域的功能之后我们来做一个小例子，实现一个列表展示的功能，数据采用springboot搭建的后台接口。
完成布局
要完成这个例子，首先要向编辑器里拖拽一个高级表格，然后隐藏掉标题区域
表格里边有一些多余的东西可以去掉，比如上边的操作一操作二两个按钮，以及右边的几个设置项，可以在表格的属性面板把这些去掉。
数据列的内容配置
去掉左边的操作一操作二两个按钮，以及原来表格中的假数据
关闭右侧的设置按钮组合
最后完成的效果
设置数据源
界面完成之后接下来就是要配置数据了，启动后台服务，在低代码引擎的左侧找到数据源面板，新建一个fetch数据源，填写一些接口信息。
添加数据请求之后接下来就是将表格和数据源绑定了，在属性面板找到表格数据源项，切换数据源的输入模式为 表达式输入 然后选择刚刚创建的数据源id(dataList)完成绑定。
效果预览
所有数据配置完成之后点击右上角的预览按钮，会打开一个新的预览页面，能看到我们的配置成功了。
