In the previous article, we have simply completed the front-end page of the cinema management background, but the core of the management background is to complete the addition, deletion, and modification of the page. This time we will actually complete the addition, deletion, and modification functions in the management background. To complete the creation of the database and system, you can refer to the previous case 1 and case 2:
Methodot low-code movie box office management system practical case (1): Create a database Management system https://blog.csdn.net/StarOS_Test/article/details/126991054
Case practice (following the content of the actual combat case 2, add, edit, and delete functions to the existing management system):
1. Drag the button component into the canvas, and you can adjust the text of the button by yourself
2. At this time, we will add a new column to the existing list, click the existing list, and there will be a table1 button in the upper right corner
3. Click the [Add a column] button
4. Click the setting button on the right side of edit, we modify the data type of edit, so that a new button is ready, similarly, we make a delete button
5. Add a delete button. Now the new and delete buttons on the page are completed. Next, we need to add some events for these buttons
6. Now we add a new pop-up window event to the [Add] button
7. After creating a pop-up window, we can modify the name and size of the pop-up window and drag it into the input box
8. We set the action event for the [OK] button and choose to execute the query
9. After the execution is completed, we can set success or failure actions, for example: close the pop-up window after success
10. According to the content entered in the input box, we edit the request body of the insert interface and select the json format
11. The added field in this case is title, and other fields can also be deleted and modified by yourself (for example: revenue, vote_average
, vote_count, status)
[{
"title": {
{Input1.text}}
}]
12. If we want to update the form content in real time after the popup window is closed, we can modify the JS logic of the button and call the method to update the list [get_list.run()]
{
{
movie_insert_data_db_test4.run(
() => {
closeModal('Modal1');
movie_get_data_list_db_test4.run()
} , () => {})
}}After the modification, we can try to add data to the form. Next, we set the Edit button
13. Enter the setting page of Table1 and edit the button of the Edit list
14. Set an event for the Edit button, such as opening a pop-up window (you can try to set other action events by yourself)
15. Click JS, and store the current row data as currentRow in the click event of the edit button
16. Adjust the pop-up window size, title content, etc. From the component on the left, we drag the input box into the pop-up window
17. Pull the information corresponding to the form in the input box
18. Get the global variable global.store.currentRow and set it as the default echo value of the input box
19. After the modification is completed, the information will be echoed to the input box. Similarly, we can add a few more input boxes for editing, as above
20. After the input box is edited, we can set the update action on the [OK] button at this time to update the data into the form
21. After the execution is successful, choose to close the pop-up window (you can also try other events). After the setting is successful, we need to make some code modifications to the movie_update interface
22. According to the front-end interface components, modify the request body to pass parameters. And modify the current row id at the end of the url to global.store.currentRow.id
{
"vote_average":{
{Input3.text}},
"title": {
{Input2.text}},
"revence":{
{Input4.text}}
}23. If you want to update the form content in real time after the pop-up window is closed, we can modify the JS logic of the [OK] button and call the method [get_list.run()] to update the list
{
{
movie_update_data_byId_db_test4.run(
() => {
closeModal('Modal2');movie_get_data_list_db_test4.run()
},() => {})
}}
24. The functional component of the edit button has been completed, and the content of the form can be directly modified. In the next step, we start to set the delete function and set the delete button
25. Then set an event for the delete button: open the pop-up window (you can also try other ones, this case is set to open the pop-up window), and adjust the title and text of the pop-up window, for example:
26. At this time, we need to call another delete interface for the [OK] button
27. After setting, we need to go back to the interface and modify the current row id at the end of the delete interface url
28. Similarly, if we want to update the form content in real time after the pop-up window is closed, we can modify the JS logic of the [OK] button and call the method [get_list.run()] to update the list
{
{
movie_delete_data_byId_db_test4.run(
() => {
closeModal('Modal3');movie_get_data_list_db_test4.run()
}, () => {})
}}29. In this way, the addition, deletion and modification function of our management system is completed, and you can click submit in the upper right corner to preview
30. Afterwards, we can return to our architecture diagram, click Save in the upper right corner, publish and deploy to the production environment
31. Deploy to the production environment (the system will be equipped with a free domain name), personal version and professional version package, support custom domain name
32. Publish in the left menu bar, you can view the application release status
33. Access the system by accessing the domain name
A management system background is so easy to develop and deploy online, free of operation and maintenance, free of construction, and integrated with the cloud to complete development, delivery, access, and operation and maintenance . Methodot also has mirror images, small program low-code, products, external, API orchestration components, etc. Welcome to experience,
More project case experience demonstrations:
1) Engineering management system (PC web application)
System experience link: Methodot - engineering management system
2) Enterprise CRM system (PC web application)
Experience Link: Methodot - Enterprise CRM System
3) E-commerce carefully selected applets (Methodot low-code applets)
Experience link QR code:
If you want to quickly develop and launch the production environment, choose Methodot . If you like the article, please like and bookmark it, so as not to find it. I hope that everyone will follow the tutorial and have more innovative projects
More high-quality article content:
1. Cloud management MySQL database
Save time by 40%, bid farewell to MySQL database local management tools (with MySQL database free download, free installation tutorial ) ://blog.csdn.net/StarOS_Test/article/details/126894993 2. Free database resources
Free installation! 3s Get cloud database, MySQL, Mongo, Redis all have it! _Methodot's Blog-CSDN Blog_Free cloud database free download, free installation, out-of-the-box cloud database https://blog.csdn.net/StarOS_Test/article/details/126711118 3. Free environment construction, out-of-the-box data analysis artifact