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

我会带着你远行 2023-09-23 18:28 180阅读 0赞

![format_png][]

> 之前分享过一些低代码相关的文章，发现大家还是比较感兴趣的。之前在我印象中低代码就是通过图形化界面来生成代码而已，其实真正的低代码不仅要负责生成代码，还要负责代码的维护，把它当做一站式开发平台也不为过！最近体验了一把阿里开源的低代码工具`LowCodeEngine`，确实是一款面向企业级的低代码解决方案，推荐给大家！

### LowCodeEngine简介 ###

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

![format_png 1][]

LowCodeEngine主要具有如下特性：

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

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

![format_png 2][]

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

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

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

![format_png 3][]

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

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

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

cnpm install
    复制代码

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

![format_png 4][]

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

![format_png 5][]

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

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

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

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

![format_png 6][]

#### 组件库 ####

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

![format_png 7][]

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

![format_png 8][]

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

![format_png 9][]

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

![format_png 10][]

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

![format_png 11][]

#### 数据源 ####

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

![format_png 12][]

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

![format_png 13][]

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

![format_png 14][]

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

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

![format_png 15][]

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

![format_png 16][]

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

![format_png 17][]

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

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

![format_png 18][]

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

![format_png 19][]

### 总结 ###

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

[format_png]: https://img-blog.csdnimg.cn/img_convert/7edd0b58993844182c8ef3fbf0126715.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/0e5dd1fa106621d8b19cdff61731b867.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/2074efb0484ed01c0bb6da7019b9fb12.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 3]: https://img-blog.csdnimg.cn/img_convert/0965834bce85fd7344b3fa72bffc35e1.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/34a94538f2b6a4d8920e2f24f874da33.webp?x-oss-process=image/format,png
[http_localhost_5556]: https://link.juejin.cn/?target=http%3A%2F%2Flocalhost%3A5556
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/0f3a0089e8ec70e72b7bc44a527bb09e.webp?x-oss-process=image/format,png
[mall]: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fmacrozheng%2Fmall
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/993437ebe47d8dac171af7fa0c94df4e.webp?x-oss-process=image/format,png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/569d40ae2c15cd6ee00ef4549cf2964e.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/bb188bc9e5950f951cea0fa0f9040c62.webp?x-oss-process=image/format,png
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/b6dbf1f09f14542fe4ffcb4933e6a1e2.webp?x-oss-process=image/format,png
[format_png 10]: https://img-blog.csdnimg.cn/img_convert/2232ceaeb247db7d33215ba0c31f7b93.webp?x-oss-process=image/format,png
[format_png 11]: https://img-blog.csdnimg.cn/img_convert/348f1fc7df4ba4bfb09dddb77bbedc0c.webp?x-oss-process=image/format,png
[format_png 12]: https://img-blog.csdnimg.cn/img_convert/f23166c3f7f7624803a1f9374c72a4fa.webp?x-oss-process=image/format,png
[format_png 13]: https://img-blog.csdnimg.cn/img_convert/e8c274804d0c8eed00274b6e888e1640.webp?x-oss-process=image/format,png
[format_png 14]: https://img-blog.csdnimg.cn/img_convert/be8754f4a8f0ff456725ef320db4118a.webp?x-oss-process=image/format,png
[format_png 15]: https://img-blog.csdnimg.cn/img_convert/8a091881a2d5691a2421a10c7e6421a7.webp?x-oss-process=image/format,png
[format_png 16]: https://img-blog.csdnimg.cn/img_convert/b0519cbfd9149b946b0ab2ed0a447a01.webp?x-oss-process=image/format,png
[format_png 17]: https://img-blog.csdnimg.cn/img_convert/8200417a1e2ef0a6dcbcdf448917c220.webp?x-oss-process=image/format,png
[format_png 18]: https://img-blog.csdnimg.cn/img_convert/3bec5652cb7ecf651d11b9038d9c2c2e.webp?x-oss-process=image/format,png
[format_png 19]: https://img-blog.csdnimg.cn/img_convert/967dd2b5b2bfd8aec9a3c8aa80f520b8.webp?x-oss-process=image/format,png