CN114816400A

CN114816400A - Method and system for building page based on JSON configuration, intelligent terminal and storage medium

Info

Publication number: CN114816400A
Application number: CN202210319289.8A
Authority: CN
Inventors: 戴荣兴
Original assignee: Beijing Motie Sumeng Information Technology Co ltd
Current assignee: Beijing Motie Sumeng Information Technology Co ltd
Priority date: 2022-03-29
Filing date: 2022-03-29
Publication date: 2022-07-29

Abstract

The invention discloses a method, a system, an intelligent terminal and a storage medium for constructing a page based on JSON configuration, wherein the method comprises the following steps: prededesigning a dynamic component of a background page, and defining JSON data in the dynamic component; when the JSON data is defined, displaying the generated page on a first system; when the page is displayed on the first system, if the page is applied to the second system, embedding the page by using a micro front end technology; and after the page is displayed, creating a configuration module, creating the page based on the configuration module, and configuring the JSON configuration required by the display module. According to the method, the JSON is generated through page configuration, the generated JSON is used for generating the page, repeated development is reduced, testing time is shortened, the purpose of quickly building the page is achieved, subsequent maintenance cost can be reduced, functions needing customized development can be developed in a traditional mode, and the functions needing customized development are embedded by adopting a micro front-end technology.

Description

Method and system for building page based on JSON configuration, intelligent terminal and storage medium

Technical Field

The invention relates to the technical field of IT, in particular to a method and a system for building a page based on JSON configuration, an intelligent terminal and a storage medium.

Background

The front-end development mode of the management background is mainly built by MVVM frames such as React/Vue and the like and UI component frames (Element, Antd and the like) corresponding to the MVVM frames, the development difficulty and time of the management background are reduced by the technology, a developer can complete the development of a background page only by combining the components to build a page and an interface joint tone, but the pages of the management background are of types of addition, deletion, modification and check, and part of the pages have great similarity.

However, in the development process of a background management project, a plurality of similar pages are often included, but the development of each page needs to be performed from the beginning, so that the development and test period is long, and the subsequent maintenance is troublesome; for the existing low-code platform, the dependence of the generation of the page on the matched tools is too high, and the functions needing customization cannot be completed.

Accordingly, the prior art is yet to be improved and developed.

Disclosure of Invention

The invention mainly aims to provide a method, a system, an intelligent terminal and a storage medium for constructing a page based on JSON configuration, and aims to solve the problem of repeated development of a management background front-end basic page in the prior art.

In order to achieve the above object, the present invention provides a method for building a page based on JSON configuration, which includes the following steps:

prededesigning a dynamic component of a background page, and defining JSON data in the dynamic component;

when the JSON data is defined, displaying the generated page on a first system;

when the page is displayed on the first system, if the page is applied to the second system, embedding the page by using a micro front end technology;

and after the page is displayed, creating a configuration module, creating the page based on the configuration module, and configuring the JSON configuration required by the display module.

Optionally, the method for constructing a page based on JSON configuration, where the dynamic component of the background page is pre-designed, and JSON data in the dynamic component is defined, specifically including:

pre-designing a dynamic component comprising a dynamic form and a dynamic form in a background page;

and when the dynamic assembly is set, defining JSON data required by the dynamic assembly, and formulating a page data source and a JSON format of page front-end and page back-end interaction.

Optionally, the method for constructing the page based on the JSON configuration, where the dynamic form is a background page data display component, and the dynamic form is composed of a plurality of form items and used for submission, resetting, and verification of the form.

Optionally, the method for constructing a page based on JSON configuration, where, when the JSON data completes definition, the generated page is displayed in a first system, specifically including:

when the JSON data is defined, acquiring a query parameter of a URL (uniform resource locator), and taking the query parameter as an interface to acquire the JSON configuration of the page;

and after the obtained JSON configuration is initialized, displaying the generated page in the first system by taking the initialized configuration information as the dynamic component attribute.

Optionally, the method for building a page based on JSON configuration, where when the page is displayed in a first system, if the page is applied to a second system, embedding is performed using a micro front end technology, specifically including:

taking a first system where a current page is located as a first sub-application, receiving a life cycle derived by the first sub-application and calling the life cycle by a main application;

when the life cycle is received, confirming that a second system using the page is used as a main application, and registering a second sub application for matching;

and when the route matching of the second sub-application is successful, the main application is controlled to trigger the life cycle hook of the first sub-application, and data is transmitted to perform page display in a second system.

Optionally, the method for building a page based on JSON configuration, where when receiving the lifecycle, the base confirms that a system using the page is used as a main application, and registers a second sub-application for matching, and then further includes:

adding a page menu and a subsystem display container in the main application; the page menu is used for switching the sub-applications, and the subsystem display container is used for displaying the subsystem.

Optionally, the method for building a page based on JSON configuration, where after the page is completely displayed, a configuration module is created, and a page is created based on the configuration module and a JSON configuration required by the display module is configured, specifically including:

after the page is displayed, a configuration module is established, and a page configuration is newly established based on the configuration module;

when the page configuration is completed, editing the page configuration and generating JSON configuration required by a display module;

and after finishing the page configuration editing, saving the page containing the configuration information.

In addition, to achieve the above object, the present invention further provides an intelligent terminal, wherein the intelligent terminal includes: the method comprises the steps of storing a JSON configuration building page, storing a JSON configuration building page program in the storage, and running on the processor, wherein the JSON configuration building page program realizes the steps of the JSON configuration building page based method when being executed by the processor.

In addition, in order to achieve the above object, the present invention further provides a system for building a page based on JSON configuration, where the system for building a page based on JSON configuration includes:

the definition module is used for predefining a dynamic component of a background page and defining JSON data in the dynamic component;

the display module is used for displaying the generated page on a first system when the JSON data is defined;

the access module is used for embedding the page by using a micro front end technology if the page is applied to a second system when the page is displayed on a first system;

and the configuration module is used for creating a configuration module after the page is displayed, creating the page based on the configuration module and configuring the JSON configuration required by the display module.

In addition, in order to achieve the above object, the present invention further provides a computer-readable storage medium, where the computer-readable storage medium stores a program for building a page based on a JSON configuration, and the program for building a page based on a JSON configuration implements the steps of the method for building a page based on a JSON configuration as described above when being executed by a processor.

In the invention, a dynamic component of a background page is designed in advance, and JSON data in the dynamic component is defined; when the JSON data is defined, displaying the generated page on a first system; when the page is displayed on the first system, if the page is applied to the second system, embedding the page by using a micro front end technology; and after the page is displayed, creating a configuration module, creating the page based on the configuration module, and configuring the JSON configuration required by the display module. According to the method, the JSON is generated through page configuration, the generated JSON is used for generating the page, repeated development is reduced, testing time is shortened, the purpose of quickly building the page is achieved, subsequent maintenance cost can be reduced, functions needing customized development can be developed in a traditional mode, and the functions needing customized development are embedded by adopting a micro front-end technology.

Drawings

FIG. 1 is a flow chart of a preferred embodiment of the method for constructing a page based on JSON configuration of the present invention;

FIG. 2 is a flowchart of step S10 in the preferred embodiment of the method for constructing a page based on JSON configuration;

FIG. 3 is a flow chart of a display module creation in the method for building a page based on JSON configuration of the present invention;

FIG. 4 is a flowchart of step S20 in the preferred embodiment of the method for constructing a page based on JSON configuration;

FIG. 5 is a strong page display flow chart in the preferred embodiment of the method for constructing a page based on JSON configuration of the present invention;

FIG. 6 is a schematic diagram showing a page in a system A in the preferred embodiment of the method for constructing a page based on JSON configuration;

FIG. 7 is a flowchart of step S30 in the preferred embodiment of the method for building a page based on JSON configuration of the present invention;

FIG. 8 is a schematic diagram showing a page in a system B in the preferred embodiment of the method for constructing a page based on JSON configuration;

FIG. 9 is a flowchart of step S40 in the preferred embodiment of the method for constructing a page based on JSON configuration of the present invention;

FIG. 10 is a flow chart of page configuration in the preferred embodiment of the method for constructing a page based on JSON configuration of the present invention;

FIG. 11 is a schematic diagram of a preferred embodiment of the system for building pages based on JSON configuration of the present invention;

fig. 12 is a schematic operating environment diagram of an intelligent terminal according to a preferred embodiment of the present invention.

Detailed Description

In order to make the objects, technical solutions and effects of the present invention clearer and clearer, the present invention is further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

It should be noted that, if directional indications (such as up, down, left, right, front, and back … …) are involved in the embodiment of the present invention, the directional indications are only used to explain the relative positional relationship between the components, the movement situation, and the like in a specific posture (as shown in the drawing), and if the specific posture is changed, the directional indications are changed accordingly.

In addition, if there is a description of "first", "second", etc. in an embodiment of the present invention, the description of "first", "second", etc. is for descriptive purposes only and is not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In addition, technical solutions between various embodiments may be combined with each other, but must be realized by a person skilled in the art, and when the technical solutions are contradictory or cannot be realized, such a combination should not be considered to exist, and is not within the protection scope of the present invention.

As shown in fig. 1, the method for building a page based on JSON configuration according to the preferred embodiment of the present invention includes the following steps:

and step S10, predefining a dynamic component of the background page, and defining JSON data in the dynamic component.

Fig. 2 is a flowchart of step S10 in the method for constructing a page based on JSON configuration according to the present invention.

As shown in fig. 2, the step S10 includes:

step S11, pre-designing a dynamic component containing a dynamic form and a dynamic form in the background page;

and step S12, when the dynamic assembly is set, defining JSON data required by the dynamic assembly, and making a page data source and a JSON format of page front-end and page back-end interaction.

Specifically, a conventional page of the background generally comprises modules such as a form, a search form, a newly-added/edited form, a export and the like, and after the page is created, the page is controlled to design a corresponding dynamic component, so that the page is convenient to assemble and use; the table is a common component of a background page, and comprises column display, header filtering, paging sorting, modification and deletion of a data row operation column and cell display, a dynamic table component is packaged according to the functions, and the basic format of the corresponding table display JSON is as follows: { "title": field 1 "," field ": f 1", "hidden": true "," width ": 120", "style": "" link ":" "," filter ": null, {" title ": 2", "field": f2 "," hidden ": false", "width": 130 "," style "", "link": http: "xxx.com/{ id }", "filter": null, { "title": "field 1", "field": f1 "," style ": link" "," filter "[ {" title ": state 1", "value" }, "default" "", "tree" "," value "", "2": value }; the title is a header text, the field is a field name, the width is a cell width, the style is a cell self-defined style, the link is a cell text link, and the filter is a header filtering condition.

In the embodiment of the invention, a page 'xxx management' is added in a configuration module of a first system (system A), the page type is a table page, the table page is added into a menu of a display module, and page information is configured; if the table data source is set, the page requests the background interface to acquire the table data through the configuration item, and will initiate a request after the page rendering is completed, as shown in the following table:

interface URL	Request mode	Default sort settings	Other arrangements
				http:xxx/list	POST	Start time, descending order	---

The display setting of the form defines information such as fields, styles and the like required to be displayed by the form, and the relationship between the field information and an interface return value set by a form data source is shown in the following table:

the basic functions of the dynamic form comprise submission, resetting and verification of the form, the form consists of a plurality of form items, and the form items comprise form element types, field names, label texts, place-occupying texts, verification rules and the like; the dynamic form component can be packaged into a search component, a newly-added component and an editing component for the second time; as shown in fig. 3, when the dynamic component is set, JSON data required by the dynamic component is defined, and a corresponding JSON data base format is: [ { "title": field 1 "," type ": text", "placeholder": fuzzy query "," field ": s 1", "maxLength": 12 "," rules ": {" type ": required", "errorMsg": error prompt ", } a {" error prompt "}, {" title "}, {" field 2 "," type ": datapicker", "placeholder": please select "," field ": s 2", "disabled": true, } ], the title being form label text, the type being a table element type, the placeholder being a placeholder, the field being a field name, the disabled being prohibited or not, the rules being form check rules.

After the JSON data required by the dynamic component is defined, a JSON format of a page data source and a JSON format of page front-back end interaction need to be formulated, the page data source and the page front-back end interaction are obtained through interfaces, the JSON format of the page data source and the JSON format of the page front-back end interaction need to contain an interface address, an interface request mode, an interface data value, an interface fixed parameter and the like, and the basic format of the JSON format is as follows: { "api": http:// xxxx/xxx "}," path _ expr ":" $ items "," method ": post", "params": { "field": id "," value ": 1" }, said api is an interface address, said path _ expr is a result operator, said method is a request mode, said params is an interface fixed parameter; then combining the interface configuration and the component configuration to form the configuration of a page; and the table query form setting defines the query condition of the data source and is associated with the interface request parameter set by the data source, and the following table shows that:

and step S20, when the JSON data is defined, displaying the generated page on the first system.

Fig. 4 is a flowchart of step S20 in the method for constructing a page based on JSON configuration according to the present invention.

As shown in fig. 4, the step S20 includes:

step S21, when the JSON data is defined, acquiring the query parameter of the URL, and taking the query parameter as an interface to acquire the JSON configuration of the page;

step S22, after the obtained JSON configuration is initialized, displaying the generated page in the first system with the initialized configuration information as a dynamic component attribute.

Specifically, when the JSON data is defined, a page display process is started, the page display process is as shown in fig. 5, a created page is opened, an api query parameter on a URL is acquired, and the api query parameter is used as a parameter request interface to acquire JSON configuration of a current page; initializing JSON configuration, wherein the JSON configuration comprises add, delete, export, list, modify and the like, confirming the dynamic component to be displayed through the configuration information, displaying a page in the first system by taking the initialized configuration information as the attribute of the dynamic component, and clicking a menu of 'xxx management' in a display module of the first system (system A) as shown in FIG. 6.

And step S30, when the page is displayed on the first system, if the page is applied to the second system, embedding the page by using a micro front end technology.

Fig. 7 is a flowchart of step S30 in the method for constructing a page based on JSON configuration according to the present invention.

As shown in fig. 7, the step S30 includes:

step S31, taking the first system where the current page is located as a first sub-application, receiving a life cycle derived by the first sub-application and calling the life cycle by a main application;

step S32, when the life cycle is received, confirming that the second system using the page is used as a main application, and registering a second sub application for matching;

and step S33, when the route of the second sub-application is successfully matched with the first sub-application, controlling the main application to trigger the life cycle hook of the first sub-application, and transmitting data to perform page display in a second system.

Specifically, after a first system (e.g., system a) completes page display, if it needs to be used in another system (e.g., system B), a micro front end technology is used to embed the page, in the embodiment of the present invention, the micro front end technology is implemented by using a qaankun (qaankun is a micro front end framework in ali, and a main application responsible for aggregation and switching and a plurality of micro applications independent of each other may be combined into one large front end application), and the embedding steps are: firstly, taking a system A as a first sub-application, and deriving a corresponding life cycle hook, wherein the life cycle hook can be called by a main application; then taking a system B needing to use the page as a main application, registering a second sub-application and configuring an entrance, a name, a rendering method and a route matching method of the second sub-application; finally, when the route of the second sub-application of the main application is matched with the first sub-application, acquiring the resource of the first sub-application and triggering the life cycle hook of the first sub-application to transmit data such as token and user information; as shown in fig. 8, in the embodiment of the present invention, it is necessary to use a "xxx management" page in the system B, in which the micro front end solution is accessed; adding a 'xxx management B' in a menu of a system B, wherein a path corresponding to the menu is a path of 'xxx management' of the system A, an original display container id on the right side of the system B is 'pageContainer', adding a container 'microContainer' to the right side, activating a route matching rule of a micro front end when clicking the 'xxx management B' menu, hiding the 'pageContainer' of the system B and displaying the 'microContainer'.

And step S40, after the page is displayed, creating a configuration module, creating a page based on the configuration module, and configuring JSON configuration required by the display module.

Fig. 9 shows a detailed process of the method for constructing a page based on JSON configuration according to the present invention, which is a flowchart of step S40.

As shown in fig. 9, the step S40 includes:

step S41, after the page is displayed, a configuration module is created, and a page configuration is newly created based on the configuration module;

step S42, when the new page configuration is completed, editing the page configuration and generating JSON configuration required by the display module;

and step S43, saving the page containing the configuration information after finishing the page configuration editing.

Specifically, the JSON data is firstly split into a plurality of modules according to dynamic components and functions, page basic information (such as page titles, page types and page descriptions) is called basic configuration, other page functional configurations are respectively provided with table configuration, new configuration, export configuration and the like, the split modules are displayed on a page one by one, and different tables are respectively designed to meet configuration requirements so as to create a configuration module; as shown in fig. 10, a new page configuration is created, JSON configuration is generated in a form of configuring a page editing form, if JSON configuration is not completed in the first editing, the page configuration is modified, and configuration information is stored after the modification is completed; and if the JSON configuration is finished by editing for the first time, storing the generated configuration information, then dynamically adding a submenu into the menu, and clicking to view the newly added page.

Further, as shown in fig. 11, based on the above method for building a page based on JSON configuration, the present invention further provides a system for building a page based on JSON configuration, where the system for building a page based on JSON configuration includes:

the defining module 51 is used for predefining a dynamic component of a background page and defining JSON data in the dynamic component;

the display module 52 is configured to display the generated page in the first system when the JSON data completes definition;

the access module 53, when the page is displayed on the first system, if the page is applied to the second system, the page is embedded by using a micro front end technology;

and the configuration module 54 is used for creating a configuration module after the page is displayed, creating a page based on the configuration module and configuring the JSON configuration required by the display module.

The invention provides a method for constructing a page based on JSON configuration, which defines JSON data in a dynamic component by pre-designing the dynamic component of a background page; when the JSON data is defined, displaying the generated page on a first system; when the page is displayed on the first system, if the page is applied to the second system, embedding the page by using a micro front end technology; and after the page is displayed, creating a configuration module, creating the page based on the configuration module, and configuring the JSON configuration required by the display module. According to the method, the JSON is generated through page configuration, the generated JSON is used for generating the page, repeated development is reduced, testing time is shortened, the purpose of quickly building the page is achieved, subsequent maintenance cost can be reduced, functions needing customized development can be developed in a traditional mode, and the functions needing customized development are embedded by adopting a micro front-end technology.

Further, as shown in fig. 12, the present invention also provides an intelligent terminal, which includes a processor 10, a memory 20 and a display 30. Fig. 11 shows only some of the components of the smart terminal, but it should be understood that not all of the shown components are required to be implemented, and that more or fewer components may be implemented instead.

The memory 20 may be an internal storage unit of the intelligent terminal in some embodiments, such as a hard disk or a memory of the intelligent terminal. The memory 20 may also be an external storage device of the Smart terminal in other embodiments, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the Smart terminal. Further, the memory 20 may also include both an internal storage unit and an external storage device of the smart terminal. The memory 20 is used for storing application software installed in the intelligent terminal and various data. The memory 20 may also be used to temporarily store data that has been output or is to be output. In an embodiment, the memory 20 stores a program 40 for building a page based on a JSON configuration, and the program 40 for building a page based on a JSON configuration can be executed by the processor 10, so as to implement the method for building a page based on a JSON configuration in the present application.

The processor 10 may be, in some embodiments, a Central Processing Unit (CPU), a microprocessor or other data Processing chip, and is configured to run program codes stored in the memory 20 or process data, such as executing the method for building pages based on JSON configuration.

The display 30 may be an OLED (Organic Light-Emitting Diode) display or the like in some embodiments. The display 30 is used for displaying information at the device and for displaying a visual user interface. The components 10-30 of the device communicate with each other via a system bus.

In one embodiment, when processor 10 executes program 40 that builds pages based on JSON configurations in memory 20, the following steps are implemented:

when the JSON data is defined, displaying the generated page on a first system;

The prededesigning a dynamic component of a background page defines JSON data in the dynamic component, and specifically includes:

The dynamic form is a background page data display component, and the dynamic form is composed of a plurality of form items and is used for submitting, resetting and checking the form.

When the JSON data is defined, displaying the generated page in the first system, specifically including:

when the JSON data is defined, acquiring query parameters of a URL (Uniform resource locator), and taking the query parameters as an interface to acquire JSON configuration of the page;

When the page is displayed on the first system, if the page is applied to the second system, the page is embedded by using a micro front end technology, which specifically comprises:

Wherein, when receiving the lifecycle, the base confirms that the system using the page is the primary application, and registers a second sub-application for matching, and then further comprises:

adding a page menu and a subsystem display container in the main application; the page menu is used for switching sub-applications, and the subsystem display container is used for displaying a subsystem.

After the page is displayed, creating a configuration module, creating a page based on the configuration module, and configuring JSON configuration required by the display module, specifically including:

The invention also provides a computer readable storage medium, wherein the storage medium stores a program for building a page based on JSON configuration, and the program for building a page based on JSON configuration realizes the steps of the method for building a page based on JSON configuration when being executed by a processor.

In summary, the present invention provides a method for building a page based on JSON configuration and a related device, where the method includes: prededesigning a dynamic component of a background page, and defining JSON data in the dynamic component; when the JSON data is defined, displaying the generated page on a first system; when the page is displayed on the first system, if the page is applied to the second system, embedding the page by using a micro front end technology; and after the page is displayed, creating a configuration module, creating the page based on the configuration module, and configuring the JSON configuration required by the display module. According to the method, the JSON is generated through page configuration, the generated JSON is used for generating the page, repeated development is reduced, testing time is shortened, the purpose of quickly building the page is achieved, subsequent maintenance cost can be reduced, functions needing customized development can be developed in a traditional mode, and the functions needing customized development are embedded by adopting a micro front-end technology.

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

Of course, it will be understood by those skilled in the art that all or part of the processes of the methods of the above embodiments may be implemented by a computer program instructing relevant hardware (such as a processor, a smart car, etc.), and the program may be stored in a computer readable storage medium, and when executed, the program may include the processes of the above method embodiments. The storage medium may be a memory, a magnetic disk, an optical disk, etc.

It is to be understood that the invention is not limited to the examples described above, but that modifications and variations may be effected thereto by those of ordinary skill in the art in light of the foregoing description, and that all such modifications and variations are intended to be within the scope of the invention as defined by the appended claims.

Claims

1. A method for building a page based on JSON configuration is characterized in that the method for building the page based on the JSON configuration comprises the following steps:

when the JSON data is defined, displaying the generated page on a first system;

2. The method for building a page based on JSON configuration according to claim 1, wherein the dynamic component of the background page is designed in advance, and JSON data in the dynamic component is defined, specifically comprising:

3. The method for building a page based on JSON configuration as claimed in claim 2, wherein the dynamic form is a background page data display component, and the dynamic form is composed of a plurality of form items and is used for submission, resetting and checking of the form.

4. The method for building a page based on JSON configuration according to claim 1, wherein when the JSON data is defined, the generated page is displayed on a first system, and specifically comprises:

5. The method for building a page based on JSON configuration of claim 1, wherein when the page is displayed on a first system, if the page is applied to a second system, embedding is performed by using a micro front end technology, specifically comprising:

6. The method for building a page based on JSON configuration according to claim 5, wherein the base, when receiving the lifecycle, confirms a system using the page as a main application and registers a second sub-application for matching, and thereafter further comprises:

7. The method for building a page based on JSON configuration according to claim 1, wherein the creating a configuration module after the page is completely displayed, the creating a page based on the configuration module, and configuring the JSON configuration required by the display module specifically include:

8. A system for building pages based on JSON configuration is characterized in that the system for building pages based on JSON configuration comprises:

9. An intelligent terminal, characterized in that, intelligent terminal includes: a memory, a processor and a program stored on the memory and executable on the processor for building a page based on a JSON configuration, the program for building a page based on a JSON configuration implementing the steps of the method for building a page based on a JSON configuration as claimed in any one of claims 1 to 7 when executed by the processor.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores a program for building a page based on a JSON configuration, which when executed by a processor implements the steps of the method for building a page based on a JSON configuration as claimed in any one of claims 1 to 7.