Front-end and back-end joint debugging of low-code development - APICloud Studio 3 API management tool combined with Data Cloud 3.0 tutorial

Recently, APICloud, a domestic low-code platform, has launched a drag-and-drop development model. By dragging and dropping components, you can set component styles, properties, and events to generate code. I also experienced it for the first time, and shared some learning experiences in the previous article. And also found that an API management tool has been added. This article is to share the learning experience of API management tools.

To experience these latest features, first download the latest version of APICloud Studio 3 (download link: https://www.apicloud.com/studio3 )

When many people learn app development for the first time, they have a question: how does the front-end page of the app communicate with the database back-end? That is, how to get data from the database and display it on the page. Let's take this problem as an entry point and see if this API management tool can provide great help.

APICloud provides a data cloud 3.0, which can not only be used as a database to store data, but also import some template data models. By learning to understand these data models, it can help us master its grammar rules. Once mastered, we can edit and add Cloud functions for the specific needs of your own projects.

First, open the data cloud 3.0 in the APICloud console, and add the demo model. After adding the demo model, we see that two tables are generated, the department table (department) and the employee table (employee)

Open the API debugging interface:

Click Show/Hide

After expanding, you can see some default debugging interfaces

Click to find data based on conditions, and then click Try out; you can see the requested URL and returned data.

The above are the data cloud API debugging tools provided by the APICloud console for developers. Experienced developers are familiar with curl, http, and ajax, and can quickly write the code to request the database according to the prompts. However, novice users may still not know how to write. This time, the API management tool in APICloud Studio 3 can directly generate request codes, which is a good news for newbies.

Click the API icon on the left column, and the API management interface on the right will appear:

You can create new API methods in the API interface

Variables can be set in the variable interface

After setting the request URL, query parameters, and request headers, you can click Send to test.

Finally, click the Generate API Code button in the lower left corner:

You can see that an apiModel folder is generated in the project root directory:

By referencing apiModel.js on the page that needs to request data, you can call the generated encapsulated request method. It's really convenient without typing a lot of code by hand.