Low-code development method and device based on ames and storage medium

Abstract

The invention relates to an ais-based low-code development method and device and a storage medium, and the method comprises the steps: S100, building a vue3-based front-end project, and integrating an ais designer into the front-end project; s200, a back-end project based on spring boot is established, and the magic-api library is integrated to the back-end project; s300, designing an entity model; s400, designing a form model based on the entity model; s500, generating a page based on the form model, the front-end project and the background project; s600, carrying out page design and publishing; and S700, carrying out page mounting. The problem that the ais designer cannot operate in the vue3 environment is solved, and the maintenance cost of the multi-frame system is reduced. After the system is deployed, the development work can be completely carried out on line, a development tool does not need to be installed locally, the online step of a traditional development mode is omitted, development takes effect immediately, and the response speed of development is increased.

Description

Technical Field

[0001] The present invention relates to the technical field of computer web low-code, and specifically relates to a low-code development method, device and storage medium based on amis. Background Art

[0002] With the development of the Internet, front-end technologies have been continuously iterated and updated. From the initial writing of interfaces using native html, js, and css, to the emergence of front-end frameworks such as React, Vue, and Angular later, the technical requirements for front-end developers have become higher and higher, resulting in an extended project development cycle and increased costs.

[0003] In order to reduce the development difficulty and improve the development efficiency, low-code technologies such as amis have emerged. However, even after using amis for development, there are still problems of cumbersome development and lack of some basic functions. For example, to develop a basic create, read, update, and delete (CRUD) page, it is necessary to first develop the backend interface, then drag the CRUD component into the designer, and then drag in the table field control and form field control one by one. And once a certain field needs to be modified, it is necessary to perform 5 repeated operations at 5 positions in the table, query form, new form, edit form, and view form, which is very inconvenient and greatly reduces the development efficiency. Summary of the Invention

[0004] In view of the technical defects and drawbacks existing in the prior art, embodiments of the present invention provide a low-code development method, device and storage medium based on amis that overcome the above problems or at least partially solve the above problems. The specific solutions are as follows:

[0005] As a first aspect of the present invention, a low-code development method based on amis is provided. The method includes:

[0006] S100, establish a front-end project based on vue3 and integrate the amis designer into the front-end project;

[0007] S200, establish a backend project based on spring boot and integrate the magic-api library into the backend project;

[0008] S300, design an entity model;

[0009] S400, design a form model based on the entity model;

[0010] S500, generate a page based on the form model, front-end project, and backend project;

[0011] S600, perform page design and publishing;

[0012] S700, page mounting.

[0013] Further, S300 includes:

[0014] S310, design the structure of a data table, including field code, display name, data type, length, number of decimal places, whether it is a primary key, and whether it can be null, generate the corresponding table in the database, and generate an entity model at the same time.

[0015] S320, when there is already a business table in the database, select the business table to be used and import the business table structure as an entity model.

[0016] Further, S400 includes:

[0017] S410, select an entity model in S300;

[0018] S420, set the page attributes of the fields in the entity model to obtain a form model;

[0019] S430, set the service name of the form as the prefix of the interface address.

[0020] Further, S420 includes:

[0021] S421, set the control type of the field;

[0022] S422, set the characteristics of the field in the table;

[0023] S423, set the characteristics of the field in the query form;

[0024] S424, set the characteristics of the field in the add, edit, and view forms;

[0025] S425, select whether to require function buttons for adding, modifying, deleting, batch deleting, batch importing, and batch exporting.

[0026] Further,

[0027] The control type of the field includes text, interface dictionary, static dictionary, number, and date. If the interface dictionary is set, synchronously set the interface address, request method, request parameters, and return value mapping field attributes;

[0028] The characteristics of the field in the table include the display order of the column, whether the column is hidden, whether the column can be sorted, and whether the column data can be filtered;

[0029] The characteristics of the field in the query form include whether it is used as a query condition and the display order of the field in the form. The field attributes not configured will default to the field attributes configured in the add form.

[0030] The characteristics of fields in the new, edit, and view forms, including the display order of fields in the form, whether they are hidden, whether they are required, and whether they are read-only. When only setting the attributes of fields in the new form, the fields in the edit and query forms will default to using the field attributes configured in the new form.

[0031] Furthermore, S500 includes:

[0032] S510, based on the front-end project of S100, design a front-end page template based on amis. The front-end page template contains crud components, add functions that the crud components lack, and optimize the functions of the crud components that are insufficient, including row click highlighting, zebra stripes, and removing the border of the search form.

[0033] S520, based on the back-end project of S200, design a back-end interface template based on magic-api, including query, add, modify, delete, import, and export interfaces.

[0034] S530, select one form model in S400, and combine the front-end page template and the back-end interface template. By clicking the generate button, generate a page. When generating the page, inject the interface address prefix in S430, generate the json code of the front-end page and the json code of the back-end interface, and store them in the corresponding database tables respectively. When generating the page, also generate the unique primary key of the page.

[0035] Furthermore, S600 includes:

[0036] S610, select the page generated in S500. By clicking the design button, open the amis designer. Based on the page design and publishing requirements, adjust the page layout or add new components and business logic through the amis designer.

[0037] S620, select the crud component. By clicking the crud constructor button of the crud component, open the form model design window. Based on the page design and publishing requirements, adjust the various attributes in S420.

[0038] S630, by clicking the preview button, view the page loading effect.

[0039] S640, by clicking the save button, store the json structure data of the current page in the page table and the page record table.

[0040] S650. When the business requirements change and page function rollback is needed, by clicking the history button, a list of historical versions will pop up. Select any two versions, and then by clicking the comparison button, a version comparison pop-up window will appear. The code differences between the two versions will be marked in red (deleted lines) or green (added lines) for easy viewing of the code differences. And by clicking the button to load the corresponding version, the historical version page will be loaded onto the current page;

[0041] S660. By clicking the publish button, a publish pop-up window will appear, and the unique primary key of the corresponding page will be displayed in the pop-up window. By clicking the publish button in the pop-up window, the modified page status will be set to published. The page in the published state will obtain its page json data through an interface.

[0042] Furthermore, S700 includes:

[0043] S710. Create an amis rendering component that can parse the json data of the page.

[0044] S720. Use the component created in S710 to create a new page. The page can call an interface to obtain the page json data according to the S660 unique primary key in the url parameter and pass it to the amis rendering component.

[0045] S730. Add a new menu in the menu management, write the path of the page created in S720 into it, write the unique primary key shown in S660 as a parameter, and then click the save button to complete the development of a page with functions of adding, deleting, modifying, and querying;

[0046] S740. Refresh the browser, open the page through the menu configured in S730, and obtain the page with functions of adding, deleting, modifying, and querying.

[0047] As the second aspect of the present invention, there is provided a low-code development device based on amis. The device includes:

[0048] A front-end project establishment module for establishing a front-end project based on vue3 and integrating the amis designer into the front-end project;

[0049] A back-end project establishment module for establishing a back-end project based on spring boot and integrating the magic-api library into the back-end project;

[0050] An entity model design module for designing an entity model;

[0051] A page generation module for generating a page based on a form model, a front-end project, and a back-end project;

[0052] A design and publish module for page design and publishing;

[0053] Mounting module for page mounting.

[0054] As a third aspect of the present invention, there is provided a computer-readable storage medium storing a computer program, which when executed by a computer, causes the computer to execute the low-code development method based on amis as described in any one of the above.

[0055] The present invention has the following beneficial effects:

[0056] 1. The present invention solves the problem that the amis designer cannot run in the vue3 environment, reducing the maintenance cost of the multi-framework system. After deploying the system, all development work can be carried out online without installing development tools locally, omitting the online steps of the traditional development mode, that is, the development takes effect immediately, improving the response speed of development.

[0057] 2. Through the form model configuration operation, the cumbersome code-biased crud page development work in the amis designer is transformed into content that is easier for ordinary developers to understand, improving the development efficiency and lowering the technical threshold for developers. As long as personnel with basic development skills can participate in business development.

[0058] 3. Some functions added to the template design and editor of amis effectively make up for the deficiencies of amis itself, making it more conducive to developing and implementing business requirements. Description of the Drawings

[0059] Figure 1 It is a flowchart of a low-code development method based on amis provided by an embodiment of the present invention. Detailed Embodiments

[0060] The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the present invention, rather than all of the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0061] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those of ordinary skill in the technical field to which the present invention belongs. The terms used in the description of the present invention herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention. The term "and / or" used herein includes any and all combinations of one or more of the related listed items.

[0062] Such as Figure 1As shown in the figure, a low-code development method based on amis provided by an embodiment of the present invention, the method includes:

[0063] S100, establish a front-end project based on vue3, and integrate the amis designer into the front-end project;

[0064] Among them, since the amis designer is in the react architecture, the amis designer is integrated into the front-end project through the veaury plugin, and the code is as follows:

[0065]

[0066]

[0067] S200, establish a back-end project based on spring boot, and integrate the magic-api library into the back-end project;

[0068] S300, design an entity model;

[0069] S400, based on the entity model of S300, design a form model;

[0070] S500, generate a page based on the form model of S400, the front-end project of S100, and the back-end project of S200;

[0071] S600, perform page design and publishing;

[0072] S700, page mounting.

[0073] The present invention solves the problem that the amis designer cannot run in the vue3 environment, and reduces the maintenance cost of the multi-framework system. After the system is deployed, the development work can be all carried out online, without installing development tools locally, omitting the online steps of the traditional development mode, that is, the development takes effect immediately, improving the response speed of development.

[0074] In some embodiments, the specific process in S300 includes the following:

[0075] S310, design the structure of a data table on the page, including field code, display name, data type, length, decimal places, whether it is a primary key, whether it is null, etc., click the OK button, generate the table in the database, and generate an entity model at the same time.

[0076] S320, when there is already a business table in the database, you can click the import button, select the business table to be used, click the OK button, and import the business table structure as an entity model.

[0077] In some embodiments, the specific process in S400 includes the following:

[0078] S410, Select an entity model in S300;

[0079] S420, Set the page attributes of the fields in the entity model to obtain a form model;

[0080] S430, Set the service name of the form as the prefix of the interface address.

[0081] Among them, the specific process in step S420 includes the following:

[0082] S421, Set the control types of the fields, including text, interface dictionary, static dictionary, number, date, etc. If the interface dictionary is set, it is necessary to further set attributes such as the interface address, request method, request parameters, and return value mapping fields;

[0083] S422, Set the characteristics of the fields in the table, including the display order of the columns, whether to hide the columns, whether the columns can be sorted, and whether the column data can be filtered;

[0084] S423, Set the characteristics of the fields in the query form, including whether they are used as query conditions, the display order of the fields in the form, etc. The field attributes not configured will default to the field attributes configured in the new form;

[0085] S424, Set the characteristics of the fields in the new, edit, and view forms, including the display order of the fields in the form, whether to hide, whether to be required, whether to be read-only, etc. When only setting the attributes of the fields in the new form, the fields in the edit and query forms will default to the field attributes configured in the new form;

[0086] S425, Select whether function buttons such as new, modify, delete, batch delete, batch import, and batch export are required.

[0087] In some embodiments, the specific process in step S500 includes the following:

[0088] S510, Based on the front-end project of S100, design a front-end page template based on amis, including crud components, and add the functions missing in the crud components and optimize the functions lacking in the crud components, such as row highlighting on click, zebra stripes, and removing the border of the search form, etc.;

[0089] The code is as follows:

[0090]

[0091]

[0092] S520. Based on the backend project of S200, design a backend interface template based on magic-api, including interfaces such as query, add, modify, delete, import, and export.

[0093] S530. Select one form model in S400, and combine it with the front-end page template and the backend interface template to generate a page. When generating the page, inject the interface address prefix in S430, generate the json code of the front-end page and the json code of the backend interface, and store them in the corresponding database tables respectively. At the same time, generate the unique primary key of the page when generating the page.

[0094] Optionally, the present invention newly adds a generation button. Clicking the generation button will perform a series of actions as described in S530.

[0095] The code is as follows:

[0096] / / Generate page

[0097] export const generatePage=(row:PageModel,uuid)=>{

[0098] const page=cloneDeep(pageJson);

[0099] page.schemaId=uuid;

[0100] const crud=generateCrud(crudTemplate,row);

[0101] const crudPath='body[0]';

[0102] set(page,crudPath,crud);

[0103] return page;

[0104] };

[0105] In some embodiments, the specific process in step S600 includes the following:

[0106] S610. Select the page generated in S500, and by clicking the design button, open the amis designer. Through the amis designer, the page layout can be adjusted or new components and business logics can be added.

[0107] S620. Select the crud component. By clicking the crud constructor button of the crud component, the form model design window can be opened again to adjust the various properties in S420.

[0108] S630. By clicking the preview button, the page loading effect can be viewed.

[0109] S640. By clicking the save button, the JSON structure data of the current page is stored in the page table and the page record table.

[0110] S650. When the business requirements change and page function rollback is needed, the history button can be clicked to pop up the history version list. Select any two versions and click the comparison button. A version comparison pop-up window will be displayed, and the code differences between the two versions will be marked in red (deleted lines) or green (added lines) for easy viewing of the code differences. The button to load this version can be clicked to load the historical version page onto the current page.

[0111] S660. Click the publish button, and a publish pop-up window will be displayed. The unique primary key of the page will be shown in the pop-up window. Click the publish button in the pop-up window to change the page status to published. The page in the published state can obtain its page JSON data through an interface.

[0112] In some embodiments, the specific process in step S700 includes the following:

[0113] S710. Create an amis rendering component that can parse the JSON data of the page. The code is as follows:

[0114]

[0115]

[0116] S720. Use the component created in S710 to create a new page. The page can call the interface to obtain the page JSON data according to the unique primary key in the url parameter in S660 and pass it to the amis rendering component.

[0117] S730. Add a new menu in the menu management, write the path of the page created in S720 into the path, write the unique primary key shown in S660 into the parameters, and then click the save button. Thus, the development work of a page with create, delete, update, and query functions is completed.

[0118] S740. Refresh the browser and open the page from the menu configured in S730, and a page with create, delete, update, and query functions can be seen.

[0119] Through the configuration operation of the form model, the present invention transforms the cumbersome code-based CRUD page development work in the amis designer into content that is easier for ordinary developers to understand, improves the development efficiency, and reduces the technical threshold for developers. As long as a person has basic development skills, they can participate in business development. Some functions added to the template design and editor of amis effectively make up for the deficiencies of amis itself and are more conducive to the development and implementation of business requirements.

[0120] The embodiment of the present invention also provides a low-code development device based on amis, and the device includes:

[0121] A front-end project establishment module, which is used to establish a front-end project based on vue3 and integrate the amis designer into the front-end project;

[0122] A back-end project establishment module, which is used to establish a back-end project based on spring boot and integrate the magic-api library into the back-end project;

[0123] An entity model design module, which is used to design an entity model;

[0124] A page generation module, which is used to generate a page based on the form model, the front-end project, and the background project;

[0125] A design and publishing module, which is used to perform page design and publishing;

[0126] A mounting module, which is used to perform page mounting.

[0127] The embodiment of the present invention also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a computer, the computer is made to execute the low-code development method based on amis as described in any one of the above.

[0128] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0129] This application is described with reference to the flowcharts and / or block diagrams of methods, apparatuses (systems), and computer program products according to embodiments of the present application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, as well as the combination of flows and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing devices generate a means for implementing the functions specified in one flow Figure 1 one flow or multiple flows and / or blocks Figure 1 or a means for implementing the functions specified in multiple blocks.

[0130] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory generate a manufactured article including an instruction means that implements the functions specified in one flow Figure 1 one flow or multiple flows and / or blocks Figure 1 or a means for implementing the functions specified in multiple blocks.

[0131] These computer program instructions can also be loaded onto a computer or other programmable data processing device, such that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, so that the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one flow Figure 1 one flow or multiple flows and / or blocks Figure 1 or a means for implementing the functions specified in multiple blocks.

[0132] The above are only the preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention shall be included in the protection scope of the present invention.

Claims

1. A low-code development method based on amis, characterized in that, The method includes: S100, establish a front-end project based on vue3 and integrate the amis designer into the front-end project; S200, establish a back-end project based on spring boot and integrate the magic-api library into the back-end project; S300, design an entity model; S400, based on the entity model, design a form model; S500, generate a page based on the form model, front-end project, and back-end project; S600, perform page design and publishing; S700, page mounting.

2. The low-code development method based on amis according to claim 1, wherein S300 includes: S310, design the structure of a data table, including field code, display name, data type, length, decimal places, whether it is the primary key, and whether it is nullable. Generate the corresponding table in the database and generate the entity model at the same time; S320, when there is already a business table in the database, select the business table to be used and import the business table structure as the entity model.

3. The low-code development method based on amis according to claim 1, characterized in that S400 includes: S410, select one entity model in S300; S420, set the page attributes of the fields in the entity model to obtain the form model; S430, set the service name of the form as the prefix of the interface address.

4. The low-code development method based on amis according to claim 3, wherein S420 includes: S421, set the control type of the field; S422, set the characteristics of the field in the table; S423, set the characteristics of the field in the query form; S424, set the characteristics of the field in the add, edit, and view forms; S425, select whether to require function buttons for adding, modifying, deleting, batch deleting, batch importing, and batch exporting.

5. The low-code development method based on amis according to claim 4, characterized in that The control type of the field includes text, interface dictionary, static dictionary, number, and date. If the interface dictionary is set, the interface address, request method, request parameters, and return value mapping field attributes are synchronously set; The characteristics of the field in the table include the display order of the columns, whether to hide the column, whether to sort the corresponding column, and whether to filter the data in the corresponding column; The characteristics of the field in the query form include whether it is used as a query condition and the display order of the field in the form. The field attributes not configured will default to the field attributes configured in the add form; The characteristics of the field in the add, edit, and view forms include the display order of the field in the form, whether to hide, whether to be required, and whether to be read-only. When only the attributes of the fields in the add form are set, the fields in the edit and query forms will default to the field attributes configured in the add form.

6. The low-code development method based on amis according to claim 3, characterized in that S500 includes: S510, based on the front-end project of S100, design a front-end page template based on amis, and the front-end page template contains crud components; S520, based on the back-end project of S200, design a back-end interface template based on magic-api, including query, add, modify, delete, import, and export interfaces; S530 selects one form model in S400, combines the front-end page template and the back-end interface template to generate a page. When generating the page, inject the interface address prefix in S430 to generate the JSON code of the front-end page and the JSON code of the back-end interface, and store them in the corresponding database tables respectively. A unique primary key for the page is generated simultaneously when generating the page.

7. The low-code development method based on amis according to claim 6, characterized in that, S600 includes: S610 selects the page generated in S500. By clicking the design button, open the amis designer. Based on the page design and publishing requirements, adjust the page layout or add new components and business logic through the amis designer. S620 selects the crud component. By clicking the crud constructor button of the crud component, open the form model design window. Based on the page design and publishing requirements, adjust the various attributes in S420. S630 views the page loading effect by clicking the preview button. S640 saves the JSON structure data of the current page into the page table and the page record table by clicking the save button. S650, when the business requirements change and page function rollback is required, click the history button to pop up the list of historical versions, select any two versions, and click the comparison button to pop up the version comparison pop-up window. Mark the code differences between the two versions in red or green to facilitate viewing the code differences, and click the button to load the corresponding version to load the historical version page into the current page. S660 clicks the publish button to pop up the publish pop-up window. The unique primary key of the corresponding page is displayed in the pop-up window. By clicking the publish button in the pop-up window, change the status of the modified page to published. The page in the published state obtains its page JSON data through the interface.

8. The low-code development method based on amis according to claim 7, wherein S700 includes: S710 creates an amis rendering component that can parse the JSON data of the page. S720 creates a new page using the component created in S710. The page can call the interface to obtain the page JSON data according to the unique primary key in the url parameter and pass it to the amis rendering component. S730 adds a new menu in the menu management, writes the path to the page created in S720, writes the parameter to the unique primary key displayed in S660, and then clicks the save button to complete the development of a page with create, read, update, and delete functions. S740 refreshes the browser and opens the page through the menu configured in S730 to obtain the page with create, read, update, and delete functions.

9. A low-code development device based on amis, characterized in that, The device includes: The front-end project establishment module is used to establish a front-end project based on vue3 and integrate the amis designer into the front-end project. The back-end project establishment module is used to establish a back-end project based on spring boot and integrate the magic-api library into the back-end project. The entity model design module is used to design the entity model. The page generation module is used to generate pages based on the form model, front-end project, and back-end project. The design and publishing module is used to perform page design and publishing. The mounting module is used to perform page mounting.

10. A computer-readable storage medium, characterized in that, A computer program is stored in the computer-readable storage medium. When the computer program is executed by a computer, the computer is caused to execute the amis-based low-code development method according to any one of claims 1 to 8.

Images