1. Introduction to the article

Low-code should be known to everyone nowadays, and major companies are also scrambling to launch their own low-code platforms, as shown in the following figure:

insert image description here

More low-code platforms can visit this link: Domestic low-code exchange platform

To know more open source frameworks with low-code front-end, you can visit this blog: Inventory of 12 open-source projects with low-code front-end frameworks

Low-code development is to build applications online by dragging and dropping pages, aiming to simplify the development process, shorten the development cycle, improve development efficiency, and save development costs.

Through low-code development platforms (some are also called no-code development platforms), applications can be quickly built on a zero-code basis.

Since I am learning amisthe framework recently, this is Baidu's open source low-code front-end framework, and I will introduce amisthe framework in detail next.

2. amis official website

amisOfficial website address: https://aisuda.bce.baidu.com/amis/zh-CN/docs/index

We open the link address of the official website, and the information that comes into view is as follows:

insert image description here

Documentation: This part is amisrelated information introduced, such as concepts, advanced usage of amis, etc.
amisComponents: Layout, function, data input, data display, feedback and other components introduced in this part , such as input box components, rich text box components, radio box components, etc.

insert image description here

Style: This part introduces the relevant styles of amis, such as css variables, layout styles, table ( grid) styles, border ( margin) and other styles.

insert image description here

Example: This part is the usage example of amis, such as form example, list example, bullet box example, etc.

insert image description here

Editor: Clicking on the editor will jump to githubthe above, the downloaded amisvisual editor.

insert image description here

3. Introduction to amis

3.1 Brief description of amis

Baidu’s low-code platform product is called Aispeed, which is an open-source front-end low-code framework of the Aispeed team amis. develop.amisamis

Note that most of them are not all, that is, the project is still inseparable from professional development.

amisIts positioning is the front-end UIframework, which JSONcan generate various back-end pages through configuration, even without knowing the front-end, similar to Element, Ant Design, you can quickly develop front-end pages based on it, but you need to integrate it into your own internal system and realize the routing function.

3.2 The original intention of amis

After more than ten years of development, front-end development has become more and more complicated, and the threshold is getting higher and higher. To use the current popular UIcomponent libraries, you must understand npm、webpack、react/vue, you must be familiar with ES6syntax, and it is best to understand state management, such as Redux.

If you have not been exposed to functional programming, it is very difficult to get started, but after you get started, you will find that it still has a huge ecology, there are 23473 many functions are similar, and the selection cost is high.

However, the development of front-end technology will not stagnate. After learning this, you may find that everyone has used it Hooks, and a certain packaging tool has replaced Webpackit...

And sometimes I just want to make a common addition, deletion, modification and query interface for information management, similar to the following:

insert image description here

Although this interface can be made Bootstrapwith various front-end libraries, but a careful observation will reveal that it has a lot of detailed functions, such as:UI

Data can be filtered
There is a button to refresh the data
Edit single row data
Bulk edit and delete
sort by a column
some columns can be hidden
Column order can be adjusted
Automatically generate top query fields
Adjustable column width
Enable drag-and-drop sorting for full-page content
The table has pagination (the number of pages can also be synchronized to the address bar, but it is turned off in this example)
There are data summaries\
Support exportExcel
There is a hint text in the header of the "Rendering Engine" column
There is a magnifying glass symbol when the mouse is moved to the content in the "Platform" column, which can be expanded to view more
If you drag down, the first row will be frozen to facilitate viewing the header (due to the limitation of the document page, this function cannot be seen here)

Implementing all of this requires a lot of code.

But as you can see, amisonly one 157line JSONof configuration is needed ( 47the line has only one parenthesis).

Since it cannot be displayed JSON配置, you can click the edit code in the above figure to view the generated page JSON配置, as shown in the figure below:

insert image description here

You don't need to understand React/Vue, Webpack, or even know very well JavaScript, even if you haven't learned it, amisyou can guess the function of most configurations, and you can complete all page development with simple configuration.

This is amisthe original intention of the establishment. We believe that for most commonly used pages, the simplest method should be used, and there is no need to learn front-end frameworks and tools.

3.3 Other highlights of amis

In addition to the above highlights, amis has other highlights as follows:

Provide a complete interface solution : other UIframeworks must be used JavaScriptto assemble business logic, and complete functional development can be completed amisonly JSONby configuration, including functions such as data acquisition, form submission and verification, and the pages produced can be completed without secondary development Go online directly;
A large number of built-in components (120+), one-stop solution : UImost of the other frameworks only have the most common components, if you encounter some slightly less commonly used components, you have to find a third party, and these third-party components are often displayed and interacted Inconsistent, the integration effect is not good, but amisa large number of built-in components, including rich text editor, code editor, diff, conditional combination, real-time log and other business components, most of the middle and background page development only need to understand amisis enough;
Support for extension : In addition to the low-code mode, components can also be expanded through custom components. In fact, they can be used amisas ordinary UIlibraries to achieve 90%low-code and 10%mixed-mode code development, which not only improves efficiency, but also does not lose flexibility;
Containers support unlimited nesting: various layout and display requirements can be met through nesting;
After a long time of actual combat test : amisit has been widely used in Baidu, and 6it has been created in more than a year 5万页面. From content review to machine management, from data analysis to model training, amisit meets various page needs, and finally Complex pages have more than 1ten thousand lines JSONof configuration.

3.4 Discomfort of amis

It JSONhas advantages but also has obvious disadvantages, and it is not suitable for the following occasions amis:

Mass customization UI: JSONConfiguration makes it amismore suitable for UIpages with a large number of common components, but for toCpages facing ordinary customers ( ), they often pursue personalized visual effects. In this case, amisit is not appropriate to use them. In fact, most front-end UIcomponent libraries Neither is suitable, only custom development.
Extremely complex or idiosyncratic interactions:
- Some complex front-end functions, such as visual editors, have a large number of customized drag-and-drop operations, which cannot be DOMused if they rely on native implementations amis.
- However, for some fields with fixed interaction, such as graph connection, amisthere will be special components to implement it later.

4. Use of amis

4.1 amis framework integration

amisThere are two ways to use it:

JS SDK, which can be used in any page
React, which can be used in Reactprojects

SDKThis version is suitable for Reactdevelopers who are familiar with the front end or do not understand it. It does not depend on npmand can be used with external link codes webpacklike that.Vue/jQuery

For more information, refer to the documentation.

4.2 amis switch theme

jssdkThe version uses sdk.cssthe Yunshe theme by default.

If you want to use faux Antd, csschange the reference to antd.css.

At the same time, jsthe fourth parameter of the rendering place passes in themethe attribute, as shown below:

amis.embed(
  '#root',
  {
    
    
    // amis schema
  },
  {
    
    
    // 这里是初始 props
  },
  // 注意是第四个参数
  {
    
    
    theme: 'antd'
  }
);

If you want to use amis 1.2.2the previous default theme, the name is ang.

4.3 amis configuration and components

A simplest amisconfiguration looks like this:

{
    
    
  "type": "page",
  "body": "Hello World!"
}

Please observe the above code, this is a piece of JSON, its meaning is:

typeIs amisthe most important field in the node, it tells amisthe current node that the component needs to be rendered Page.
The field bodywill be used as Pagea property of the component, and Pagethe component will render the page content according to this value.

The effect of this configuration is as follows:

insert image description here

This simple code amiswill render a simple page in the editor, which can be previewed in real time.

People who have used Echartscharts may have experienced this convenience. We only need to modify the value of each attribute of the seven types to see the magical changes on the page.

Complex pages are also built through such simple components, such as form components, dialog components, form components and forms, etc. The functions input、select、radio、switch开关、checkboxof these components are controlled by different attributes.

4.4 amis variable

amisVariables ${}are represented using .

For example, if there is an editing operation in the list, when the edit pop-up box is clicked, the data needs to be echoed, as shown in the following figure:

insert image description here

At this time, variables are needed, 姓名and the code is as follows:

{
    
    
  "clearable": false,
  "showCounter": false,
  "multiple": false,
  "label": "姓名",
  "type": "input-text",
  "required": false,
  "name": "name",
  "disabled": false,
  "style": {
    
    
  },
  "drag": false,
  "id": "u:20230404110907713",
  "value": "${name}"
}

5. Amis instance

5.1 amis example

Add, delete, modify and check the list through a CRUDcomponent, as shown below:

insert image description here

Select the component in the component tab on the left side of the editor CRUDand drag it into the main interface. If you can’t find it, you can search it. You can use the Chinese and English names, as shown in the figure below:

insert image description here

After the component is dragged, a pop-up window configuration page will appear. The interface address is a relative address (delete IP, port, and project root path). Select the button that needs to be implemented in the list. Here I have selected the query, view details, and edit functions.

These configurations can also be ignored, and can be modified after the component is initialized. The configuration is saved and compiled in real time.

5.2 List query

The most important thing in the list is the query function. Generally, low-code platforms will choose to implement the interface on the basis of data modeling (modeling is to generate a database table model by configuring fields, table names, etc.).
insert image description here

There is a panel on the right to modify various properties of the current component, as shown in the following figure:

insert image description here

I 常规changed the startup query condition in the tab, and 接口changed the interface query method in the tab to post(corresponding initApiattribute in the code). You can view the generated code from the code panel on the left JSON, as shown in the following figure:

insert image description here

The red box is one of the fields of the list:

nameThe attribute is the field name returned by the database
labelis the column name displayed on the page
typeis the data type

Field columns to be displayed can be added according to requirements.

The query function needs to pay attention to:

The address of the attribute interface assigned to the query condition is the same apias the interface of the page initialization interface . initApiThere is no need to concatenate attribute parameters and the like, the parameters are automatically passed to the backend, such as the query conditions in the figure below, the parameters received at the backend are keyword.
filterColumnCountThe attribute is to set the number of the first ones returned by default after the query

insert image description here

5.3 View details

After the component is checked, it comes with the function of viewing details. Clicking the details button will pop up a dialogcomponent. The default subcomponent will inherit the data of the parent page, including the fields that are not displayed in the list. Therefore, there is no need to add an interface. When querying the list, try to use Just check out the fields.

If you configure a new page instead of the one that comes with the list, the code is as shown in the figure below:

insert image description here

It is achieved by dialogadding a component to the component , which is the address of another form (here the page has a parsing interface, and a url address will be generated after each page is configured).serviceurlamis

dataThe attribute does not need to pass a value, it comes from a row of data in the list, and the pop-up window details page is shown in the following figure:

insert image description here

5.4 Custom Action Buttons

On the design page of adding, deleting, modifying and checking the list, drag a submit button behind the view details button, and click the submit button to view the corresponding code as follows:

{
    
    
  "type": "button",
  "label": "提交",
  "actionType": "dialog",
  "dialog": {
    
    
    "title": "测试表单提交",
    "size": "lg",
    "body": [
      {
    
    
        "type": "service",
        "schemaApi": {
    
    
          "method": "post",
          "url": "/test/updateTest",
          "data": {
    
    
            "id": "${id}",
            "sex": "${sex}",
            "username": "${username}"
          }
        },
        "messages": {
    
    
        }
      }
    ],
    "actions": [
    ]
  }
}

Similar to the implementation method of viewing details, dialoganother configuration page is introduced in the pop-up window component, the difference is that the data mapping is done for the new page.

The uppercase data on the right in the above figure is the list data field, and the lowercase data on the left is the data used in the submission form.

5.5 Submit the form

The following code is the code corresponding to the submit button Json. Clicking the button will send a ajaxrequest.

{
    
    
  "type": "button",
  "label": "提交",
  "actionType": "ajax",
  "visibleOn": "this.STATUS!=='1'",
  "api": {
    
    
    "method": "post",
    "url": "/flow/amis/startWorkFlow",
    "data": {
    
    
      "&": "$$",
      "processDefinitionKey": "flow_asset",
      "businessKey": "",
      "processName": "管理流程",
      "modelCode": "ASSET"
    },
    "dataType": "json"
  }
}

The parameters in it dataneed to pay attention to:

When the variable value in the data field $$is , it means that all the field values returned by the interface dataare assigned to the corresponding field as a whole key.

6. Complete json configuration

The following is curda complete json configuration of the list, including the operations of adding, deleting, modifying, and checking, as shown in the following code:

{
    
    
  "type": "crud",
  "api": {
    
    
    "method": "get",
    "url": "http://xxx/initApi"
  },
  "id": "u:20230404110907209",
  "outputName": "rows",
  "syncLocation": false,
  "columns": [
    {
    
    
      "clearable": false,
      "showCounter": false,
      "multiple": false,
      "name": "sex",
      "disabled": false,
      "drag": false,
      "id": "u:20230404110907712",
      "label": "sex",
      "type": "text",
      "required": false,
      "searchable": {
    
    
        "clearable": false,
        "showCounter": false,
        "name": "sex",
        "options": [
          {
    
    
            "label": "男",
            "value": "male"
          },
          {
    
    
            "label": "女",
            "value": "female"
          },
          {
    
    
            "label": "未知",
            "value": "unknown"
          }
        ],
        "style": {
    
    
        },
        "label": "sex",
        "placeholder": "请输入sex",
        "type": "select",
        "required": false,
        "id": "u:3c3572e98932"
      }
    },
    {
    
    
      "clearable": false,
      "showCounter": false,
      "multiple": false,
      "name": "name",
      "disabled": false,
      "drag": false,
      "id": "u:20230404110907713",
      "label": "姓名",
      "type": "text",
      "required": false,
      "searchable": {
    
    
        "clearable": false,
        "showCounter": false,
        "name": "name",
        "style": {
    
    
        },
        "label": "name",
        "placeholder": "请输入name",
        "type": "input-text",
        "required": false,
        "id": "u:06edf56b332f"
      }
    },
    {
    
    
      "clearable": false,
      "buttons": [
        {
    
    
          "actionType": "dialog",
          "dialog": {
    
    
            "body": {
    
    
              "api": {
    
    
                "method": "put",
                "url": "http://xxx/edit/${id}"
              },
              "body": [
                {
    
    
                  "clearable": false,
                  "showCounter": false,
                  "multiple": false,
                  "label": "sex",
                  "type": "select",
                  "required": false,
                  "accept": "gender",
                  "name": "sex",
                  "options": [
                    {
    
    
                      "label": "男",
                      "value": "male"
                    },
                    {
    
    
                      "label": "女",
                      "value": "female"
                    },
                    {
    
    
                      "label": "未知",
                      "value": "unknown"
                    }
                  ],
                  "disabled": false,
                  "style": {
    
    
                  },
                  "drag": false,
                  "id": "u:20230404110907712",
                  "value": "${sex}"
                },
                {
    
    
                  "clearable": false,
                  "showCounter": false,
                  "multiple": false,
                  "label": "姓名",
                  "type": "input-text",
                  "required": false,
                  "name": "name",
                  "disabled": false,
                  "style": {
    
    
                  },
                  "drag": false,
                  "id": "u:20230404110907713",
                  "value": "${name}"
                }
              ],
              "type": "form"
            },
            "title": "编辑"
          },
          "level": "link",
          "id": "u:20230404110907448",
          "label": "编辑",
          "type": "button"
        },
        {
    
    
          "actionType": "ajax",
          "level": "danger",
          "className": "text-danger",
          "confirmText": "确定删除当前记录吗?",
          "api": {
    
    
            "method": "delete",
            "url": "http://xxx/delete/${id}"
          },
          "id": "u:20230404110907449",
          "label": "删除",
          "type": "button"
        },
        {
    
    
          "actionType": "dialog",
          "dialog": {
    
    
            "body": {
    
    
              "body": [
                {
    
    
                  "clearable": false,
                  "showCounter": false,
                  "multiple": false,
                  "label": "sex",
                  "type": "select",
                  "required": false,
                  "accept": "gender",
                  "name": "sex",
                  "options": [
                    {
    
    
                      "label": "男",
                      "value": "male"
                    },
                    {
    
    
                      "label": "女",
                      "value": "female"
                    },
                    {
    
    
                      "label": "未知",
                      "value": "unknown"
                    }
                  ],
                  "disabled": true,
                  "style": {
    
    
                  },
                  "drag": false,
                  "id": "u:20230404110907712",
                  "value": "${sex}"
                },
                {
    
    
                  "clearable": false,
                  "showCounter": false,
                  "multiple": false,
                  "label": "姓名",
                  "type": "input-text",
                  "required": false,
                  "name": "name",
                  "disabled": true,
                  "style": {
    
    
                  },
                  "drag": false,
                  "id": "u:20230404110907713",
                  "value": "${name}"
                }
              ],
              "type": "form"
            },
            "title": "查看详情",
            "actions": [
              {
    
    
                "actionType": "confirm",
                "label": "关闭",
                "type": "button",
                "primary": true
              }
            ]
          },
          "level": "link",
          "id": "u:20230404110907450",
          "label": "查看详情",
          "type": "button"
        }
      ],
      "showCounter": false,
      "multiple": false,
      "name": "操作",
      "disabled": false,
      "drag": false,
      "id": "u:20230404110907209",
      "label": "操作",
      "type": "operation",
      "required": false
    }
  ],
  "autoGenerateFilter": true,
  "source": "${rows}",
  "inputName": "rows",
  "features": [
    "create",
    "filter",
    "update",
    "view",
    "delete"
  ],
  "perPage": 10,
  "footerToolbar": [
    "statistics",
    "switch-per-page",
    "pagination"
  ],
  "filterColumnCount": 3,
  "position": "bottom",
  "headerToolbar": [
    {
    
    
      "actionType": "dialog",
      "dialog": {
    
    
        "body": {
    
    
          "api": {
    
    
            "method": "post",
            "url": "http://xxx/add"
          },
          "body": [
            {
    
    
              "clearable": false,
              "showCounter": false,
              "multiple": false,
              "label": "sex",
              "type": "select",
              "required": false,
              "accept": "gender",
              "name": "sex",
              "options": [
                {
    
    
                  "label": "男",
                  "value": "male"
                },
                {
    
    
                  "label": "女",
                  "value": "female"
                },
                {
    
    
                  "label": "未知",
                  "value": "unknown"
                }
              ],
              "disabled": false,
              "style": {
    
    
              },
              "drag": false,
              "id": "u:20230404110907712",
              "value": "${sex}"
            },
            {
    
    
              "clearable": false,
              "showCounter": false,
              "multiple": false,
              "label": "姓名",
              "type": "input-text",
              "required": false,
              "name": "name",
              "disabled": false,
              "style": {
    
    
              },
              "drag": false,
              "id": "u:20230404110907713",
              "value": "${name}"
            }
          ],
          "type": "form"
        },
        "title": "新增"
      },
      "level": "primary",
      "id": "u:20230404110907447",
      "label": "新增",
      "type": "button"
    },
    "bulkActions"
  ]
}

7. Summary at the end of the paper

amisThere are many components to learn, you can refer to amisthe official website tutorial for details.

The whole network introduces Baidu's low-code framework amis in detail and explains it with examples

Article directory

1. Introduction to the article

2. amis official website

3. Introduction to amis

3.1 Brief description of amis

3.2 The original intention of amis

3.3 Other highlights of amis

3.4 Discomfort of amis

4. Use of amis

4.1 amis framework integration

4.2 amis switch theme

4.3 amis configuration and components

4.4 amis variable

5. Amis instance

5.1 amis example

5.2 List query

5.3 View details

5.4 Custom Action Buttons

5.5 Submit the form

6. Complete json configuration

7. Summary at the end of the paper

Guess you like