CN115878923A - Method and system for constructing reusable interaction framework of arrangement and configuration - Google Patents
Method and system for constructing reusable interaction framework of arrangement and configuration Download PDFInfo
- Publication number
- CN115878923A CN115878923A CN202310044493.8A CN202310044493A CN115878923A CN 115878923 A CN115878923 A CN 115878923A CN 202310044493 A CN202310044493 A CN 202310044493A CN 115878923 A CN115878923 A CN 115878923A
- Authority
- CN
- China
- Prior art keywords
- configuration
- page
- content
- reusable
- file
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The application provides a method and a system for constructing an interaction framework with reusable layout and configuration, wherein the method comprises the following steps: performing global registration according to components required to be used in the project; compiling and exporting configuration files of all pages in the project; loading configuration content according to the configuration file of each page; and according to the configuration file and the configuration content, performing front-end routing setting, loading configuration and displaying a page.
Description
Technical Field
The application relates to the field of browser webpage application, in particular to a method and a system for constructing a reusable interaction framework for arrangement and configuration.
Background
In the conventional front-end project, a project usually only contains an application project, and the conventional method of component multiplexing is to pull the components into a public directory and then refer them from a page when the components need to be used, wherein the page and the components are directly coupled, and fig. 1 shows a schematic diagram of the prior front-end project in which the components are multiplexed by multiple pages.
For a multi-page web site, the referencing of components is more complicated. Taking a live broadcast web page terminal based on Software as a Service (SaaS), the live broadcast web page terminal generally includes a PC live broadcast initiating terminal, a PC live broadcast watching terminal, and a WAP live broadcast watching terminal: because many components are multiplexed in three ends, if the component multiplexing mode is also adopted, the common components are put in a directory of a higher layer and are referred in a plurality of pages of application items of a plurality of ends, that is, one component is added or deleted, and the pages of the application items of the three ends need to be processed at the same time, so that the complexity is obviously improved, and the maintenance cost is increased. Fig. 2 is a diagram illustrating an example structure in which multiple components are multiplexed by multiple pages in a conventional multi-front-end project. A component is referenced by multiple pages in multiple applications. If an application involves tens or hundreds of components, the complexity is greatly increased, and the problems of inflexible operation and difficult maintenance are generated.
Therefore, it is necessary to provide a method and a system for constructing an interaction framework with layout and configuration reusability, which solve the problems of complex structure and inconvenient maintenance caused by direct coupling of multiple projects, multiple pages and multiple components.
The above information disclosed in this background section is only for enhancement of understanding of the background of the application and therefore it may contain information that does not constitute prior art that is already known to a person of ordinary skill in the art.
Disclosure of Invention
In order to solve the above problems, the present application provides a method and a system for constructing an interaction framework with reusable layout and configuration.
According to a first aspect of the present application, a method for constructing an interaction framework with reusable layout and configuration is provided, which includes:
performing global registration according to components required to be used in the project;
compiling and exporting configuration files of all pages in the project;
loading configuration content according to the configuration file of each page;
and according to the configuration file and the configuration content, performing front-end routing setting, loading configuration and displaying a page.
According to some embodiments, the content in the configuration file comprises a plurality of key-value pairs.
According to some embodiments, the method further comprises:
globally mixing identification codes into all the components;
the key in the key value pair corresponds to the identification code, the value in the key value pair includes a class annotation and an array, wherein:
the class annotation corresponds to the components required to be used in each page respectively;
the array includes sub-components under the component corresponding to the class annotation.
According to some embodiments, said loading configuration content according to the configuration file of each page comprises:
and importing the configuration file.
According to some embodiments, the loading configuration content according to the configuration file of each page includes:
recursively traversing the array from the root node to obtain a tree structure of the component; the root node is the identification code;
and compiling the tree structure to obtain the configuration content of the page.
According to some embodiments, the performing front-end routing, loading configuration, and displaying a page according to the configuration file and the configuration content includes:
adding page sub-attributes according to the configuration file to enable each page to establish contact with the configuration content;
intercepting and processing by using a global navigation guard method of a route;
different page configurations are loaded.
According to a second aspect of the present application, an interaction framework building system with reusable orchestration and configuration is provided, including:
the global registration unit is used for carrying out global registration according to components required to be used in the project;
the file configuration unit is used for compiling and exporting configuration files of all pages in the project;
the configuration content loading unit is used for loading configuration content according to the configuration file of each page;
and the configuration display unit is used for carrying out front-end route setting, loading configuration and displaying pages according to the configuration file and the configuration content.
According to some embodiments, the system further comprises a global mixing unit for mixing the identification code in each component globally;
the content in the configuration file comprises a plurality of key value pairs, keys correspond to the identification codes, and the values comprise class annotations and arrays;
the configuration content loading unit is further configured to:
recursively traversing the array from the root node to obtain a tree structure of the component; the root node is the identification code;
and compiling the tree structure to obtain the configuration content of the page.
According to some embodiments, the configuration content loading unit is further configured to import the configuration file.
According to some embodiments, the configuration presentation unit is further configured to:
adding page sub-attributes according to the configuration file to enable each page to establish contact with the configuration content;
intercepting and processing by using a global navigation guard method of a route;
different page configurations are loaded.
The application provides a method and a system for constructing an interaction framework with layout and configuration reusability, which can realize loading page configuration only according to identification codes when pages are arranged and configured by setting corresponding information of components in configuration files of the pages, and only need to find the configuration files of the corresponding pages for modification when the configuration files of the corresponding pages are modified at a later stage, thereby simplifying the process, leading the layout and configuration pages to have higher flexibility, reducing the coupling degree between the components in the pages, and reducing the maintenance difficulty
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.
Drawings
The above and other objects, features and advantages of the present application will become more apparent by describing in detail exemplary embodiments thereof with reference to the attached drawings. The drawings described below are for illustrative purposes only of certain embodiments of the present application and are not intended to limit the present application.
FIG. 1 is a diagram illustrating how components are multiplexed into a front-end project according to the prior art;
FIG. 2 is a diagram illustrating an example of a multi-component multi-page multiplexing structure in a conventional multi-front-end project;
FIG. 3 illustrates a flowchart of an orchestration and configuration reusable interaction framework building method of an exemplary embodiment;
FIG. 4 illustrates a diagram of an orchestration and configuration reusable interaction framework building system according to an exemplary embodiment.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the embodiments set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The same reference numerals in the drawings denote the same or similar parts, and a repetitive description thereof will be omitted.
The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the disclosure. One skilled in the relevant art will recognize, however, that the embodiments of the disclosure can be practiced without one or more of the specific details, or with other means, components, materials, devices, etc. In such cases, well-known structures, methods, devices, implementations, materials, or operations will not be shown or described in detail.
The flowcharts shown in the figures are illustrative only and do not necessarily include all of the contents and operations/steps, nor do they necessarily have to be performed in the order described. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the actual execution sequence may be changed according to the actual situation.
The terms "first," "second," and the like in the description and claims of the present application and in the above-described drawings are used for distinguishing between different objects and not for describing a particular order. Furthermore, the terms "include" and "have," as well as any variations thereof, are intended to cover a non-exclusive inclusion. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements but may alternatively include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
It will be appreciated by those skilled in the art that the drawings are merely schematic representations of exemplary embodiments, and that the blocks or processes shown in the drawings are not necessarily required to practice the present application and are, therefore, not intended to limit the scope of the present application.
FIG. 3 illustrates a flowchart of an orchestration and configuration reusable interaction framework building method of an example embodiment.
And S101, performing global registration according to the components required to be used in the project.
According to the embodiment, the method is based on the service line unit, one service line is a project, and a plurality of web end applications are included under one project. Taking a SaaS service line as an example: the SaaS engineering comprises three applications of a PC initiating terminal, a PC viewing terminal and a WAP viewing terminal.
According to the embodiment, one end application is one project, the components needed to be used by each project are determined, and when an entry file is initialized, the entry is imported through an import and is globally registered by using Vue.
And S102, globally mixing the identification codes into all the components.
According to an exemplary embodiment, an identification code is globally mixed using a method of vue.mixin, wherein the identification code is one cuid attribute mixed into a prop attribute of each component, at the time of entry file initialization.
And S103, compiling and exporting the configuration file of each page in the project.
According to an example embodiment, a project includes multiple pages, each of which is written with a corresponding configuration file and exported.
According to an example embodiment, the content in the configuration file includes a plurality of key-value pairs in the form of key-values, wherein a key in a key-value pair is a component id customized by a developer and corresponds to an identification code mixed in each component, and a value in a key-value pair is an object and includes a class annotation component, an array child and other attributes, wherein: the class annotation component corresponds to the components required to be used in each page respectively; the array child comprises sub-components under the component corresponding to the annotation component.
According to an example embodiment, one cuid attribute of the tips attributes of each component corresponds to a key in the configuration file.
And S104, loading configuration content according to the configuration file of each page.
According to an example embodiment, when an entry file is initialized, a configuration file of a page arranged is imported through an import and named pageConfig, and configuration content of a certain page is acquired by reading the pageConfig [ pageKey ].
According to the embodiment, in a render function, the configuration information of a corresponding page is found through the cuid attribute, then the sub-component information in the array child is read, and finally the sub-components are mounted and rendered.
According to an example embodiment, a page file to be displayed is found in a views directory, a vamp-air-container label is added, an attribute cuid is set as a root node in a configuration file, an array is recursively traversed from the root node to obtain a tree structure of the component, and sub-components are transmitted into the cuid attribute through the vamp-air-container label to be automatically rendered; compiling the tree structure to obtain the configuration content of the page; wherein, the root node is an identification code.
And S105, performing front-end routing setting, loading configuration and displaying a page according to the configuration file and the configuration content.
According to an example embodiment, each front-end route corresponds to a page, a page sub-attribute is added to a meta attribute according to a configuration file, and the corresponding value is the name of the configuration file, so that each page is associated with configuration content; intercepting and processing by using a global navigation guard beforeEach method of the route; and dynamically loading different page configurations according to different pages.
According to some embodiments, when some components are not needed or the positions of the components need to be replaced, only the configuration file of the corresponding page needs to be found from the page and the configuration page-config to be modified.
The method for constructing the reusable interaction framework for arranging and configuring the pages has the advantages that the page configuration can be loaded only according to the identification codes when the pages are arranged and configured by setting the corresponding information of the components in the configuration files of the pages, and the configuration files of the corresponding pages are only required to be found for modifying when the pages are modified in the later period, so that the process is simplified, the arrangement and configuration pages have higher flexibility, the coupling degree between the components in the pages is reduced, and the maintenance difficulty is reduced.
FIG. 4 illustrates a diagram of an orchestration and configuration reusable interaction framework building system according to an exemplary embodiment.
As shown in fig. 4, the orchestration and configuration reusable interaction framework building system includes a global registration unit 201, a file configuration unit 203, a configuration content loading unit 205, a configuration presentation unit 207, and a global mixing unit 209.
According to an example embodiment, the global registration unit 201 is configured to perform global registration according to components that need to be used in the project.
According to the embodiment, the method takes a service line as a unit, one service line is a project, and one project comprises a plurality of web end applications. Taking a SaaS service line as an example: the SaaS engineering comprises three applications of a PC initiating terminal, a PC watching terminal and a WAP watching terminal.
According to an example embodiment, an end application is an item, global registration unit 201 determines components that each item needs to use, and when an entry file is initialized, global registration unit 201 imports and uses vue.
According to an exemplary embodiment, a global mixing unit 209 is used for mixing the identification code in each component globally.
According to an exemplary embodiment, the global mixing unit 209 globally mixes an identification code using a method of vue.mix, in which the identification code is one cuid attribute mixed into the prop attribute of each component, at the time of initialization of an entry file.
According to an example embodiment, the file configuration unit 203 is configured to write and export a configuration file for each page in the project.
According to an exemplary embodiment, a project includes a plurality of pages, and the file configuring unit 203 writes a corresponding configuration file for each page and exports the corresponding configuration file.
According to an example embodiment, the content in the configuration file includes a plurality of key-value pairs in the form of key-value pairs, where a key in a key-value pair is a component id customized by a developer and corresponds to an identification code mixed in each component, and a value in a key-value pair is an object and includes a class annotation component, an array child, and other attributes, where: the class annotation component corresponds to the components required to be used in each page respectively; the array child comprises sub-components under the component corresponding to the annotation component.
According to an example embodiment, one cuid attribute of the tips attributes of each component corresponds to a key in the configuration file.
According to an exemplary embodiment, the configuration content loading unit 205 is configured to load configuration content according to the configuration file of each page.
According to an example embodiment, when the entry file is initialized, the configuration content loading unit 205 imports the configuration file of the arranged page through an import and names pageConfig, and the configuration content loading unit 205 obtains the configuration content of a certain page by reading pageConfig [ pageKey ].
According to an example embodiment, in a render function, the configuration content loading unit 205 finds the configuration information of a corresponding page through the cuid attribute, then reads the sub-component information in the array child, and finally performs mount rendering on the sub-components.
According to an example embodiment, the configuration content loading unit 205 finds a page file to be displayed in a views directory, adds a vmp-air-container tag, sets an attribute cuid as a root node in the configuration file, recursively traverses an array from the root node to obtain a tree structure of the component, and transmits the cuid attribute to sub-components through the vmp-air-container tag for automatic rendering; compiling the tree structure to obtain the configuration content of the page; wherein, the root node is an identification code.
According to an example embodiment, the configuration presenting unit 207 is configured to perform front-end routing setting, load configuration, and present a page according to the configuration file and the configuration content.
According to an exemplary embodiment, each front-end route corresponds to one page, the configuration presentation unit 207 adds a page sub-attribute to the meta attribute according to the configuration file, and the corresponding value is the name of the configuration file, so that each page is associated with the configuration content; intercepting and processing by using a global navigation guardian beforeEach method of a route; and dynamically loading different page configurations according to different pages.
According to some embodiments, when some components are not needed or the positions of the components need to be replaced, only the configuration file of the corresponding page needs to be found from the page and the configuration page-config to be modified.
The arrangement and configuration reusable interactive framework construction system has the advantages that page configuration can be loaded only according to identification codes when pages are arranged and configured by setting corresponding information of components in configuration files of the pages, and the configuration files of the corresponding pages are only needed to be found for modification when the pages are modified in the later period, so that the process is simplified, the arrangement and configuration pages have higher flexibility, the coupling degree among the components in the pages is reduced, and the maintenance difficulty is reduced.
It should be clearly understood that this application describes how to make and use particular examples, but the application is not limited to any details of these examples. Rather, these principles can be applied to many other embodiments based on the teachings of the present disclosure.
Furthermore, it should be noted that the above-mentioned figures are only schematic illustrations of the processes involved in the method according to exemplary embodiments of the present application, and are not intended to be limiting. It will be readily understood that the processes shown in the above figures are not intended to indicate or limit the chronological order of the processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, e.g., in multiple modules.
Exemplary embodiments of the present application are specifically illustrated and described above. It is to be understood that the application is not limited to the details of construction, arrangement, or method of implementation described herein; on the contrary, the intention is to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.
Claims (10)
1. A method for constructing an interaction framework with reusable layout and configuration is characterized by comprising the following steps:
performing global registration according to components required to be used in the project;
compiling and exporting configuration files of all pages in the project;
loading configuration content according to the configuration file of each page;
and according to the configuration file and the configuration content, performing front-end routing setting, loading configuration and displaying a page.
2. The orchestration and configuration reusable interaction framework building method of claim 1, wherein content in the configuration file comprises a plurality of key-value pairs.
3. The orchestration and configuration reusable interaction framework building method according to claim 2, further comprising:
globally mixing identification codes into all the components;
the key in the key value pair corresponds to the identification code, the value in the key value pair includes a class annotation and an array, wherein:
the class annotation corresponds to the components required to be used in each page respectively;
the array includes sub-components under the component corresponding to the class annotation.
4. The method for constructing an interaction framework that is reusable for orchestration and configuration according to claim 1, wherein the loading configuration content according to the configuration file of each page comprises:
and importing the configuration file.
5. The method for constructing an interaction framework with layout and configuration reusability according to claim 3, wherein the loading configuration contents according to the configuration file of each page comprises:
recursively traversing the array from the root node to obtain a tree structure of the component; the root node is the identification code;
and compiling the tree structure to obtain the configuration content of the page.
6. The method for constructing an interaction framework with layout and configuration reusable according to claim 1, wherein the performing front-end routing, loading configuration, and displaying pages according to the configuration file and the configuration content comprises:
adding page sub-attributes according to the configuration file to enable each page to be in contact with the configuration content;
intercepting and processing by using a global navigation guard method of a route;
different page configurations are loaded.
7. An interaction framework building system that is reusable for orchestration and configuration, comprising:
the global registration unit is used for carrying out global registration according to components required to be used in the project;
the file configuration unit is used for compiling and exporting configuration files of all pages in the project;
the configuration content loading unit is used for loading configuration content according to the configuration file of each page;
and the configuration display unit is used for carrying out front-end route setting, loading configuration and displaying pages according to the configuration file and the configuration content.
8. The orchestration and configuration reusable interaction framework building system according to claim 7, wherein the system further comprises a global blending unit for globally blending an identification code in each component;
the content in the configuration file comprises a plurality of key value pairs, keys correspond to the identification codes, and the values comprise class annotations and arrays;
the configuration content loading unit is further configured to:
recursively traversing the array from the root node to obtain a tree structure of the component; the root node is the identification code;
and compiling the tree structure to obtain the configuration content of the page.
9. The orchestration and configuration reusable interaction framework building system according to claim 7, wherein the configuration content loading unit is further configured to import the configuration file.
10. The orchestration and configuration reusable interaction framework building system according to claim 7, wherein the configuration presentation unit is further configured to:
adding page sub-attributes according to the configuration file to enable each page to establish contact with the configuration content;
intercepting and processing by using a global navigation guard method of a route;
different page configurations are loaded.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310044493.8A CN115878923B (en) | 2023-01-30 | 2023-01-30 | Interactive framework construction method and system capable of multiplexing arrangement and configuration |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310044493.8A CN115878923B (en) | 2023-01-30 | 2023-01-30 | Interactive framework construction method and system capable of multiplexing arrangement and configuration |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115878923A true CN115878923A (en) | 2023-03-31 |
| CN115878923B CN115878923B (en) | 2023-07-18 |
Family
ID=85758531
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310044493.8A Active CN115878923B (en) | 2023-01-30 | 2023-01-30 | Interactive framework construction method and system capable of multiplexing arrangement and configuration |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115878923B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110515683A (en) * | 2019-07-15 | 2019-11-29 | 平安普惠企业管理有限公司 | A kind of method, apparatus and storage medium of front end Vue page visual configuration |
| CN110647320A (en) * | 2019-08-14 | 2020-01-03 | 平安普惠企业管理有限公司 | Project framework construction method and device, computer equipment and storage medium |
| CN111966337A (en) * | 2020-07-28 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Vue-based front-end multi-project display method, system, equipment and storage medium |
| CN112035197A (en) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN113760253A (en) * | 2021-01-08 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Front-end rendering method, apparatus, device, medium, and program product |
-
2023
- 2023-01-30 CN CN202310044493.8A patent/CN115878923B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110515683A (en) * | 2019-07-15 | 2019-11-29 | 平安普惠企业管理有限公司 | A kind of method, apparatus and storage medium of front end Vue page visual configuration |
| CN110647320A (en) * | 2019-08-14 | 2020-01-03 | 平安普惠企业管理有限公司 | Project framework construction method and device, computer equipment and storage medium |
| CN111966337A (en) * | 2020-07-28 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Vue-based front-end multi-project display method, system, equipment and storage medium |
| CN112035197A (en) * | 2020-08-11 | 2020-12-04 | 深圳前海微众银行股份有限公司 | Configuration method and device of front-end page |
| CN113760253A (en) * | 2021-01-08 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Front-end rendering method, apparatus, device, medium, and program product |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115878923B (en) | 2023-07-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CA2674659C (en) | Synchronous to asynchronous web page conversion | |
| US8261235B2 (en) | System for generating a tutorial application | |
| McKay et al. | Using the generic synteny browser (GBrowse_syn) | |
| Ingalls et al. | The lively kernel a self-supporting system on a web page | |
| JP2005196504A (en) | System capable of communication with tag by providing tag function to client computer | |
| JPH07200278A (en) | Program system using graphic | |
| Servant et al. | Chronos: Visualizing slices of source-code history | |
| McFarlane | Rapid application development with Mozilla | |
| Cano et al. | Quality Control with R | |
| CN115878923A (en) | Method and system for constructing reusable interaction framework of arrangement and configuration | |
| CN103634160A (en) | Web-based general Internet product data comparison test method and apparatus | |
| EP0692112B1 (en) | Dynamic browser system | |
| CN114371848A (en) | Page joint debugging method, device, equipment and storage medium | |
| Vestdam et al. | Aspects of internal program documentation-an elucidative perspective | |
| CN114356783A (en) | Method and device for automatically generating unit test code, storage medium and equipment | |
| Stegmaier et al. | Insights for improving diagram editing gained from an empirical study | |
| Asenov | Envision: reinventing the integrated development environment | |
| Gordon et al. | A pilot study into the usability of a scientific workflow construction tool | |
| Graubmann | Describing interactions between MSC components: the MSC connectors | |
| Sridhar | Building portable C++ applications with YACL | |
| Lamar | Introduction to a user interface design/information architecture process for Web sites | |
| Andersen | Adding Visual and Interactive-Syntax to Textual Programs | |
| CN112926290A (en) | System, method and medium for generating presentation interface document | |
| Nguyen et al. | Versioned hypermedia can improve software document management | |
| Kerr et al. | Use of object-oriented programming in a time series analysis system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |