Liberating hands ！ Recommend an Alibaba open source low code tool ,YYDS！

I've shared some articles related to low code before , I found that you are still more interested . Before, in my impression, low code is to generate code through graphical interface , In fact, the real low code is not only responsible for generating code , Also responsible for code maintenance , It's not too much to treat it as a one-stop development platform ！ Recently, I experienced a low code tool opened by Alibaba LowCodeEngine, It's really a low code solution for enterprise class , I recommend it to you ！

SpringBoot Actual e-commerce projects mall（50k+star） Address ：https://github.com/macrozheng/mall

LowCodeEngine brief introduction

LowCodeEngine It is a set of enterprise level low code technology system for extension design opened by Alibaba , Currently in Github Previous 4.7K+Star. This project is about this year 2 Open source in mid June , Less than two months to harvest so much Star, It's really powerful ！

LowCodeEngine It has the following characteristics ：

• Low code engine refined from enterprise low code platform , Pursue highly scalable 、 Minimum kernel 、 The most ecological design concept ;
• Simple deployment , It's basically out of the box , Have a perfect material system 、 Powerful setter 、 Rich plug-ins, etc ;
• The visual editor has a complete tool chain , Support material system 、 Setter 、 Ecological elements such as plug-ins ;
• Strong scalability , Has supported nearly 100 A variety of vertical low code platforms ;
• Use TypeScript Development , It can generate data based on React The front-end code of .

Here is LowCodeEngine An effect picture in the process of use , It's still very powerful ！

Build a low code platform

Next we will use LowCodeEngine Build a low code development platform , Only 5 minute , Out of the box ！

• First, we need to download LowCodeEngine Editor sample code , Download address ：https://github.com/alibaba/lowcode-demo

• After downloading successfully, unzip it to the specified directory , Installing this project requires Node.js and npm, Make sure the installation is complete , Because some of the dependencies npm Source cannot access , It is recommended to use cnpm To install , First use the following command to install cnpm;

npm install -g cnpm --registry=https://registry.npmmirror.com

• cnpm After successful installation , Enter the decompression directory and use the following command to install the dependency ;

cnpm install

• After the dependency installation , Use npm start Command to start the project ;

• After the project runs successfully, it will run in 5556 On port , Access address ：http://localhost:5556

Using low code platform

Before in my open source project mall There is a brand management function in , Next we will use LowCodeEngine To realize it , Look at the magic of low code development ！

Target effect

mall The effect of brand management function in the project is as follows , Here, the brand list function is simply realized with low code .

Component library

• First we start with Component library Choose from Query filtering Components , Insert into the editing area by dragging ;

• Then select Query filtering Components , Through... On the right Setter Set it up ;

• You can click... On the left side of the component edit Button to set the components in detail , For example, component appearance and input prompt ;

• Then drag another Advanced forms Component into the editor ;

• Also select Advanced forms Component can set the table , We can go through Data columns To set the data to be displayed .

data source

• Because the data in the table needs an access interface to obtain , Here we can go through data source Function to achieve , Here we call... Of the demo environment API, Fill in the request parameters , It is worth noting that the data list is in data.list Properties of the , We need to customize the processing function for successful requests ;

• Next, choose Advanced forms Components , modify Table data source , choice Expression input , Fill in the... We set before data source ID that will do ;

• And then modify Data columns Information , Put each data column Data field It is amended as follows JSON The corresponding attribute in the data can .

Preview and code out

• If you want to see the effect of the built page , Click on the preview button ;

• The following is the page preview effect generated by low code ;

• If you want to get the code generated by the tool , Click on the Out code button , Support direct download .

Other features

• If you want to customize some functions , Can pass Source panel Customize ;

• adopt Outline view We can see the structure of the whole interface .

summary

Today, I experienced a low code development tool opened by Alibaba , It's really powerful . But low code doesn't mean you can stop writing code , If you want to make good use of low code tools, you must also be familiar with the code generated by the tools .LowCodeEngine At present, only generation is supported React The front-end code of , So you want to implement more complex business systems , You have to be familiar with it React. If a small partner wants to know more about the concept of low code , I recommend reading this article 《 Ali low code engine and ecological construction practice and thinking 》 .

Reference material

• Project address ：https://github.com/alibaba/lowcode-engine
• Project website ：https://lowcode-engine.cn/
• Operation guide ：https://www.yuque.com/lce/usage