解放双手！推荐一款阿里开源的低代码工具，YYDS！

蔚落 2023-09-23 20:09 22阅读 0赞

### LowCodeEngine简介 ###

LowCodeEngine是阿里开源的一套面向扩展设计的企业级低代码技术体系，目前在在Github上已有`4.7K+Star`。这个项目大概是今年2月中旬开源的，两个月不到收获这么多Star，确实非常厉害！

![format_png][]

LowCodeEngine主要具有如下特性：

*  提炼自企业级低代码平台的低代码引擎，奉行高度可扩展、最小内核、最强生态的设计理念；
 *  部署简单，基本上就是开箱即用，拥有完善的物料体系、功能强大的设置器、丰富的插件等；
 *  可视化编辑器具有完善的工具链，支持物料体系、设置器、插件等生态元素；
 *  强大的扩展能力，已支撑近 100 个各种垂直类低代码平台；
 *  使用 TypeScript 开发，能生成基于React的前端代码。

下面是LowCodeEngine使用过程中的一张效果图，功能还是很强大的！

![format_png 1][]

### 搭建低代码平台 ###

> 接下来我们将使用LowCodeEngine搭建一个低代码开发平台，仅需5分钟，可以说是开箱即用！

*  首先我们需要想下载LowCodeEngine编辑器的示例代码，下载地址：[github.com/alibaba/low…][github.com_alibaba_low]

![format_png 2][]

*  下载成功后解压到指定目录，安装此项目需要使用`Node.js`和`npm`，确保已经安装完毕，由于依赖中有些`npm源`无法访问，这里推荐使用`cnpm`来安装，先使用如下命令安装`cnpm`；

npm install -g cnpm --registry=https://registry.npmmirror.com
    复制代码

*  `cnpm`安装成功后，进入解压目录使用如下命令安装依赖；

cnpm install
    复制代码

*  依赖安装完成后，使用`npm start`命令启动项目；

![format_png 3][]

*  项目运行成功后将运行在`5556`端口上，访问地址：[http://localhost:5556][http_localhost_5556]

![format_png 4][]

### 使用低代码平台 ###

> 之前在我的开源项目[mall][]中有个品牌管理功能，接下来我们将使用LowCodeEngine来实现下它，看看低代码开发有何神奇之处！

#### 目标效果 ####

[mall][]项目中的品牌管理功能效果如下，这里使用低代码简单实现下品牌列表功能。

![format_png 5][]

#### 组件库 ####

*  首先我们从`组件库`中选择`查询筛选`组件，通过拖拽的形式插入编辑区中；

![format_png 6][]

*  然后选中`查询筛选`组件，通过右侧的`设置器`进行设置；

![format_png 7][]

*  可以点击组件左侧的`编辑`按钮对组件进行详细设置，比如说组件外观和输入提示等；

![format_png 8][]

*  接下来再拖拽一个`高级表格`组件到编辑器中去；

![format_png 9][]

*  同样选中`高级表格`组件可以对表格进行设置，我们可以通过`数据列`来设置需要显示的数据。

![format_png 10][]

#### 数据源 ####

*  由于表格中的数据需要访问接口来获取，这里我们可以通过`数据源`功能来实现，这里我们调用演示环境的API，填入请求参数即可，值得注意的是由于数据列表在`data.list`属性中，我们需要定制下请求成功的处理函数；

![format_png 11][]

*  接下来选中`高级表格`组件，修改`表格数据源`，选择`表达式输入`，填入我们之前设置的`数据源ID`即可；

![format_png 12][]

*  然后修改`数据列`信息，将每个数据列`数据字段`修改为JSON数据中对应的属性即可。

![format_png 13][]

#### 预览及出码 ####

*  如果想查看搭建的页面效果的话，点击右上角的`预览`按钮即可；

![format_png 14][]

*  下面是由低代码生成的页面预览效果；

![format_png 15][]

*  如果你想获取工具生成的代码的话，点击右上角的`出码`按钮即可，支持直接下载。

![format_png 16][]

#### 其他功能 ####

*  如果你想自定义一些函数的话，可以通过`源码面板`进行自定义；

![format_png 17][]

*  通过`大纲视图`我们可以查看整个界面的结构。

![format_png 18][]

### 总结 ###

今天体验了一把阿里开源的低代码开发工具，功能确实很强大。但是低代码并不意味着可以不写代码了，想用好低代码工具还得熟悉工具生成的代码。LowCodeEngine目前仅支持生成React的前端代码，所以想要实现更为复杂的业务系统，还得熟悉React。如果有小伙伴想更深入了解低代码的概念，

[format_png]: https://img-blog.csdnimg.cn/img_convert/d2e872826a739d09cae7d8f957c979ca.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/a3d5a8c24057f94da56f3ea42d3af0d0.webp?x-oss-process=image/format,png
[github.com_alibaba_low]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Falibaba%2Flowcode-demo
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/202b0427c0c15fda85dede6a645f8260.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/7688f15488c57be6ff15cf0c29768b45.webp?x-oss-process=image/format,png
[http_localhost_5556]: https://link.juejin.cn?target=http%3A%2F%2Flocalhost%3A5556
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/403c09d1f99748a0101e3a6fff5a421e.webp?x-oss-process=image/format,png
[mall]: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fmacrozheng%2Fmall
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/93026e5f17f7a0ce9ecfbbedc975b261.webp?x-oss-process=image/format,png
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/737db77a00cf8ac1c724e1a3924b3da9.webp?x-oss-process=image/format,png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/7ccb931b7ddcda9d6bec83afc133a520.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/36a3a4eeae0d549b7a2d6ef23b9be57a.webp?x-oss-process=image/format,png
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/924ff6ab396cb28f01ac5c2eb717681c.webp?x-oss-process=image/format,png
[format_png 10]: https://img-blog.csdnimg.cn/img_convert/0235d5df1b9069c8e569a8b304c1b08d.webp?x-oss-process=image/format,png
[format_png 11]: https://img-blog.csdnimg.cn/img_convert/0e3a4127c7358c62c697f7eb7c7dd82f.webp?x-oss-process=image/format,png
[format_png 12]: https://img-blog.csdnimg.cn/img_convert/abb5158f4dcda08f68e05d62fc5330a4.webp?x-oss-process=image/format,png
[format_png 13]: https://img-blog.csdnimg.cn/img_convert/c25f323c38af873cf151d27d9d7b234b.webp?x-oss-process=image/format,png
[format_png 14]: https://img-blog.csdnimg.cn/img_convert/d856fc6572b88afdcc82f14dcb96c103.webp?x-oss-process=image/format,png
[format_png 15]: https://img-blog.csdnimg.cn/img_convert/a21b58ed2eb25de9265c92fc9095e559.webp?x-oss-process=image/format,png
[format_png 16]: https://img-blog.csdnimg.cn/img_convert/33918451efc091212ef602b752ada9d7.webp?x-oss-process=image/format,png
[format_png 17]: https://img-blog.csdnimg.cn/img_convert/12bfd36e407abeacb244e7a4eeb2d4d6.webp?x-oss-process=image/format,png
[format_png 18]: https://img-blog.csdnimg.cn/img_convert/cef2090c9c542da58c76ad1568c561f5.webp?x-oss-process=image/format,png