The third lesson of the Methodot low-code tutorial series is here!
https://www.bilibili.com/video/BV1644y177Yy?spm_id_from=333.999.0.0Methodot, a one-stop cloud-native online development platform, O&M-free container clusters, out-of-the-box R&D facilities All in one cloud-native application development experience.
Methodot, waiting for you to experience for free>>
This time, Methodot played with zero code . Based on "front-end low-code" + "DB component", we made a movie box office management background in ten minutes, without a single line of code.
step
Step1: Still open the browser and log in to Methodot.
Step2: Create a new blank project.
Step3: Enter the middleware page > add a middleware > edit middleware, select the database.
Step4: Go back to the architecture diagram again > drag in the DB component > edit the DB component, select the database just added, save > click the DB edit on the right side of the interface, check the data > click the API declaration, and view the automatically generated API, such as adding and deleting , query, etc.
Step5: Drag in the front-end low-code > add component parameters according to the wizard; then connect the DB component to the front-end low-code component to receive the API statement from the DB component; save the architecture diagram.
Step6: Open the front-end low-code design interface on the right, and you can see that all the API parameters have been placed on the left side of the interface; open the data editor > slightly modify the API for obtaining the data list > run.
Step7: Click Add Table component on the right side of the interface > Edit component to design the name of the management background, data addition, deletion, modification and query.
Step8: For example, do the "add" function > drag into a container > do editing design. (Detailed editing tutorial can view the original video)
Step9: Edit the "request body".
Step10: After the "Add" function is designed, do "Modify"; in the same way, drag in a container again to edit and design.
Step11: Implement the "delete" function through the API, and delete according to the selected ID. The specific API design is as shown in the figure:
Step12: Go back to the architecture diagram interface and click "Publish" > complete the release in seconds.
Step13: Check the URL.
Step14: Results display.
