CN116974623A

CN116974623A - Method, device, equipment and storage medium for modular development of pages

Info

Publication number: CN116974623A
Application number: CN202310209522.1A
Authority: CN
Inventors: 颜泰国
Original assignee: Shenzhen Tencent Domain Computer Network Co Ltd
Current assignee: Shenzhen Tencent Domain Computer Network Co Ltd
Priority date: 2023-02-24
Filing date: 2023-02-24
Publication date: 2023-10-31

Abstract

The application provides a method, a device, equipment and a storage medium for modular development of pages, and relates to the technical field of computers. The method for the modularized development of the page comprises the following steps: acquiring component data of the page; the component data comprises a main data table, a sub data table and a component type corresponding to each component contained in the page, wherein the component type corresponds to a file name in an engineering code of a front-end engineering component; analyzing the component data to obtain the association relation of each component; according to the association relation, the component file reference configuration corresponding to the component type of each component is written into the component file; and loading the component file to obtain the component code of the page. The embodiment of the application can be beneficial to reducing the cost of the modularized development and maintenance of the page.

Description

Method, device, equipment and storage medium for modular development of pages

Technical Field

The embodiment of the application relates to the technical field of computers, in particular to a method, a device, equipment and a storage medium for modular development of pages.

Background

The front-end page can be componentized by means of a software development framework, making code easier to multiplex. Componentization is the standardized task of packaging certain functions that can be multiplexed. The components typically contain internal User Interface (UI) elements, styles, and JavaScript (JS) logic code. According to the idea of componentization, a web page is divided into individual components. The components can be assembled together to form a complete web page. Many identical components may be contained in different pages, with or without differences in component content, style, and presence. Therefore if components are multiplexed in these pages, development costs of the front-end page will be saved.

In the related art, all components contained in a page are packaged into one or more npm (node package manager) packages, and each page engineering uses these components by introducing the component npm packages. The component data is written into the component in the page code, or a background management end is made for each page to configure the component data, which results in higher development and maintenance cost because the corresponding npm package needs to be updated or corresponding code adjustment is carried out by page engineering when the component is repaired or updated.

Disclosure of Invention

The application provides a method, a device, equipment and a storage medium for the modularized development of a page, which can be beneficial to reducing the cost of the modularized development and maintenance of the page.

In a first aspect, an embodiment of the present application provides a method for componentized development of a page, including:

acquiring component data of the page; the component data comprises a main data table, a sub data table and a component type corresponding to each component contained in the page, wherein the component type corresponds to a file name in an engineering code of a front-end engineering component;

analyzing the component data to obtain the association relation of each component;

according to the association relation, the component file reference configuration corresponding to the component type of each component is written into the component file;

and loading the component file to obtain the component code of the page.

In a second aspect, an embodiment of the present application provides an apparatus for componentized development of a page, including:

the acquisition unit is used for acquiring the component data of the page; the component data comprises a main data table, a sub data table and a component type corresponding to each component contained in the page, wherein the component type corresponds to a file name in an engineering code of a front-end engineering component;

The analysis unit is used for analyzing the component data to obtain the association relation of each component;

the writing unit is used for writing the component file reference configuration corresponding to the component type of each component into the component file according to the association relation;

and the loading unit is used for loading the component files to obtain the component codes of the page.

In a third aspect, an embodiment of the present application provides an electronic device, including: a processor and a memory for storing a computer program, the processor being for invoking and running the computer program stored in the memory for performing the method as in the first aspect.

In a fourth aspect, embodiments of the present application provide a computer-readable storage medium comprising instructions which, when run on a computer, cause the computer to perform a method as in the first aspect.

In a fifth aspect, embodiments of the present application provide a computer program product comprising computer program instructions for causing a computer to perform the method as in the first aspect.

In a sixth aspect, embodiments of the present application provide a computer program for causing a computer to perform the method as in the first aspect.

Through the technical scheme, each component of the page can be uniformly combined through the component data of the page, the page required by dynamic configuration is realized, meanwhile, the component file reference configuration corresponding to the component type of each component of the page is written into the component file through analyzing the component data, only the component codes truly contained in the page can be packaged, so that the component codes of the page are more simplified, further, the loading performance of the page is improved, the componentization development cost of the page is reduced, and the user experience is improved.

In addition, when the component is repaired or updated or the component data parameters are adjusted, the embodiment of the application can dynamically update the component data of the configuration page, further analyze the updated component data, write the corresponding component file reference configuration into the component file, and package the component file reference configuration to obtain updated component codes.

Drawings

FIG. 1 is an alternative schematic view of a particular web page;

FIG. 2 is an alternative schematic view of another specific web page;

FIG. 3 is a schematic diagram of an application scenario according to an embodiment of the present application;

FIG. 4 is a schematic flow chart of a method of componentized development of a page in accordance with an embodiment of the application;

FIG. 5 is an alternative schematic diagram of a data table structure of component data;

FIG. 6 is an alternative schematic diagram of a tree data structure according to an embodiment of the present application;

FIG. 7 is an alternative schematic view of a portion of a page displayed after loading components;

FIG. 8 is a schematic diagram of an alternative system architecture according to an embodiment of the present application;

FIG. 9 is a schematic flow chart diagram of a method of componentized development of another page provided by an embodiment of the present application;

FIG. 10 is a schematic block diagram of an apparatus for componentized development of pages in accordance with an embodiment of the application;

fig. 11 is a schematic block diagram of an electronic device according to an embodiment of the application.

Detailed Description

The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application.

It should be understood that in embodiments of the present application, "B corresponding to a" means that B is associated with a. In one implementation, B may be determined from a. It should also be understood that determining B from a does not mean determining B from a alone, but may also determine B from a and/or other information.

In the description of the present application, unless otherwise indicated, "at least one" means one or more, and "a plurality" means two or more. In addition, "and/or" describes an association relationship of the association object, and indicates that there may be three relationships, for example, a and/or B may indicate: a alone, a and B together, and B alone, wherein a, B may be singular or plural. The character "/" generally indicates that the context-dependent object is an "or" relationship. "at least one of" or the like means any combination of these items, including any combination of single item(s) or plural items(s). For example, at least one (one) of a, b, or c may represent: a, b, c, a-b, a-c, b-c, or a-b-c, wherein a, b, c may be single or plural.

It should be further understood that the description of the first, second, etc. in the embodiments of the present application is for illustration and distinction of descriptive objects, and is not intended to represent any limitation on the number of devices in the embodiments of the present application, nor is it intended to constitute any limitation on the embodiments of the present application.

It should also be appreciated that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the application. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments.

Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or server that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed or inherent to such process, method, article, or apparatus, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

First, related terms related to the embodiments of the present application will be described.

Component (Component): is a simple package of data and methods. Components may have attributes and methods. The attributes are simple visitors to the component data, and the methods are some simple and visible functions of the component.

Page component: is a component produced according to a certain specification that can be assembled into a complete web page. The page component typically contains UI elements, styles, and JS data logic. Common basic components are buttons, navigation, prompt boxes, forms, dialog boxes, and the like. Further combinations of more complex components are present on the basis of these basic components.

FIG. 1 shows an alternative schematic view of a particular web page, which is the operational activity top page of a XXXX programming educational platform, that includes a header component 101, a main visual (main KV) component 102, a sub-page component 103, a graphic component 104, and a camp component 105, among others. It will be appreciated that there may be some heterogeneous components in different operational activity pages, with or without differences in content, style, and/or presence. For example, in the event activity front page of the XXXX programming educational platform shown in FIG. 2, a head component 201, a main visual screen component 202, a sub-page component 203, a graphic component 204, a graphic component 205, and the like are included. If components are multiplexed in these pages, such as the pages of fig. 1 and 2, the development costs of the web page will be saved.

In the related art, all components contained in a page are packaged into one or more npm (node package manager) packages, and each page engineering uses these components by introducing the component npm packages. The component data writes dead incoming components in the page code or a background manager is made for each page to configure the component data. This results in higher development and maintenance costs when components are repaired or updated, requiring page-by-page engineering to update the corresponding npm packages or making corresponding code adjustments. For example, when the component is repaired or updated, the corresponding npm packets need to be updated from one page engineering area to another, and when the component adjusts the data parameters, the corresponding code adjustment needs to be performed by each page engineering, so that the maintenance cost is high. For another example, because the component data is written dead in the code, the code and the issue page need to be re-modified when the component data needs to be adjusted, resulting in a corresponding increase in development cost. Even if the component data is placed on the background management side for configuration, development and maintenance costs of the management side are increased. In addition, each page is a separate project, multiplexing can only be realized by copying codes if the same style is available, and the synchronization cost is high when the same style is updated.

In view of this, the embodiments of the present application provide a method, an apparatus, a device, and a storage medium for componentized development of a page, which can be beneficial to reducing costs of componentized development and maintenance of a page.

Specifically, component data of the page can be obtained, wherein the component data comprises a main data table, a sub data table and a component type corresponding to each component contained in the page, and the component type corresponds to a file name in an engineering code of a front-end engineering component; analyzing the component data to obtain the association relation of each component; according to the association relation, writing the component file reference configuration corresponding to the component type of each component into the component file; and loading the component file to obtain the component code of the page.

According to the embodiment of the application, each component of the page is unified through the component data of the page, the page required by dynamic configuration can be realized, meanwhile, the component file reference configuration corresponding to the component type of each component of the page is written into the component file through analyzing the component data, only the component codes truly contained in the page can be packed, so that the component codes of the page are more simplified, the loading performance of the page is improved, the componentization development cost of the page is reduced, and the user experience is improved.

In addition, when the component is repaired or updated or the component data parameters are adjusted, the embodiment of the application can dynamically update the component data of the configuration page, or write the updated component file reference configuration corresponding to the component data into the component file, and package the component file reference configuration to obtain updated component codes.

By way of example, the embodiment of the application can be used for the componentization development of the game pages in the game scene, the multiplexing components in the game pages are realized, and the componentization development and maintenance cost of the game pages is reduced. Specifically, component data of the game page, including a main data table, a sub data table and a component type corresponding to each component of the game page, can be obtained, then the component data is analyzed to obtain an association relationship of each component of the game page, and according to the association relationship, component file reference configuration corresponding to the component type of each component is written into a component file, and the component file is loaded to obtain a component code of the game page. According to the embodiment of the application, all components of the game page are unified through the component data of the game page, so that the game page required by dynamic configuration can be realized, meanwhile, the component file reference configuration corresponding to the component types of all the components of the game page is written into the component file through analyzing the component data, only the component codes truly contained in the game page can be packaged, so that the component codes of the game page are more simplified, further, the loading performance of the game page is improved, the componentized development cost of the game page is reduced, and the user experience is improved. In addition, when repairing or updating components in the game page or adjusting parameters of the component data, the embodiment of the application can dynamically update the component data configuring the game page or write the updated component file reference configuration corresponding to the component data into the component file, and package the component file reference configuration to obtain updated component codes.

Fig. 3 shows a schematic diagram of an application scenario according to an embodiment of the present application.

As shown in fig. 3, the application scenario involves a server 1 and a terminal device 2, and the terminal device 2 may communicate data with the server 1 through a communication network. The server 1 may be a background server of the terminal device 2.

The terminal device 2 may be, for example, a device with rich man-machine interaction, internet access capability, various operating systems, and strong processing capability. The terminal device may be a terminal device such as a smart phone, a tablet computer, a portable notebook computer, a desktop computer, a wearable device, a vehicle-mounted device, etc., but is not limited thereto.

Optionally, in the embodiment of the present application, a client with a component configuration function, a client with a page packaging function, or a client with a page display function is installed and operated in the terminal device 2. The client with the component configuration function is the software for configuring the component data, the client with the page packaging function is the software for packaging the page, and the client with the page display function is the software for displaying the page.

Alternatively, the server 1 may be used to store component data and provide an interface for clients to access the component data.

The server 1 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs (Content Delivery Network, content delivery networks), basic cloud computing services such as big data and artificial intelligent platforms, and the like. Servers may also become nodes of the blockchain.

The server may be one or more. Where the servers are multiple, there are at least two servers for providing different services and/or there are at least two servers for providing the same service, such as in a load balancing manner, as embodiments of the application are not limited in this respect.

The terminal device and the server may be directly or indirectly connected through wired or wireless communication, which is not limited in the present application. The present application does not limit the number of servers or terminal devices. The scheme provided by the application can be independently completed by the terminal equipment, can be independently completed by the server, and can be completed by the cooperation of the terminal equipment and the server, and the application is not limited to the scheme.

It should be understood that fig. 3 is only an exemplary illustration, and does not specifically limit the application scenario of the embodiment of the present application. For example, fig. 3 illustrates one terminal device, one server, and may actually include other numbers of terminal devices and servers, which the present application is not limited to.

The following describes the technical scheme of the embodiments of the present application in detail through some embodiments.

Fig. 4 is a schematic flow chart of a method 400 for componentized development of pages according to an embodiment of the present application, the method 400 being executable by any electronic device having data processing capabilities, such as a server or a terminal device, to which the present application is not limited.

As shown in fig. 4, method 400 includes steps 410 through 440.

410, acquiring component data of a page; the component data comprises a main data table, a sub data table and a component type corresponding to each component contained in the page, wherein the component type corresponds to a file name in an engineering code of a front-end engineering component.

Specifically, the front-end page to be developed may be stripped to obtain each component (may also be referred to as a UI component), and the content of the component (i.e., component data) may be configured. For example, a product operator may configure component data of a page at a background management end (e.g., a component configuration client). For another example, component data may be configured within a client local project through manual administration.

By way of example, the components may include at least one of a header component, a home screen component, a sub-page component, a graphic introduction component, a form component, a bottom bar component, a multi-diagram introduction component, or other components, as the application is not limited in this regard. One example of the component data is described below in connection with tables 1 to 5.

Table 1 shows an alternative configuration table of the operational activity homepage of the YYYY event, including the components contained in the operational activity homepage. As shown in Table 1, the configuration table may include a serial number, an identification (id), an event to which each component belongs, a component type, and a component id.

TABLE 1

Sequence number	id	Event of the game	Component type	Component id
					1	1	YYYY	Main KV
2	2	YYYY	Sub-page assembly

Optionally, data of each component layer down can also be configured. Tables 2 through 4 show alternative configuration tables for the sub-page assembly layer-down data (main data and sub-data) in table 1. Specifically, table 2 is a specific example of the main data table of the sub-page component in table 1. As shown in table 2, the configuration table may include a serial number, an id, an event, a name, and the like of each main data included in the sub-page component. Optionally, an indication of whether each master datum initiates a side navigation may also be included in table 2.

TABLE 2

The main data contained in the sub-page component in table 2, i.e., the contained sub-pages, can be respectively for campaign introduction, creative programming, and virtual simulation.

Table 3 is a specific example of the sub data table further included in each main data in table 2. As shown in table 3, the configuration table may include a sub-data table included in each main data of the sub-page component, and the configuration table may include a serial number, an id, an event to which each sub-data belongs, a sub-page to which the sub-data belongs, a name (available for internal viewing), a picture title (picture priority when mutually exclusive to the title and the supplementary notes), a title, a supplementary notes, a side navigation name, a status of a through-field background color setting, and the like.

TABLE 3 Table 3

Sub-pages, i.e., sub-data contained in the campaign introduction (not shown in table 3), creative programming, and virtual simulation, are further configured in table 3, such as sub-data further included in the creative programming are participation objects, participation tools, scoring criteria, and the like; the sub-data further included in the virtual simulation are activity topics, participation objects, participation tools, scoring rules, scoring criteria, and the like.

Table 4 is a specific example of a component (which may also be referred to as a subcomponent) further included in the sub data in table 3. As shown in table 4, the configuration table may include a sub-component table corresponding to the sub-data in table 3, and the configuration table may include a serial number, an id, an event, a sub-page directory, a sub-component type, a sub-component id, and the like of each sub-data.

TABLE 4 Table 4

In table 4, a sub-component table, such as sub-components with numbers 13 and 14, respectively corresponding to sub-data (YYYY-participation object) with number 11 in table 3, is further configured for each sub-data in table 3. Wherein, table 3 may be referred to as a configuration table of sub data 1, and table 4 may be referred to as a configuration table of sub data 2.

In table 4, parent-child components may be associated between components by child component type (child componenttype) and child component id (childComponentId). Illustratively, each sub-component in Table 4 is a sub-component of the sub-page component in Table 1. When a component includes a sub-component, the component type includes a sub-component type.

In tables 3 and 4, the inside of the component can associate the main sub data by the belonging main data id (pantid). For example, the "belonging child page" column may be used to represent the main data to which the child data belongs. Further, the column "belonging to the sub page directory" is used to indicate which sub data in table 3 the sub data in table 4 belongs to.

Alternatively, the component data table may identify the page to which the data belongs by page id (pageId).

It should be noted that, the above description of the component data configured in conjunction with tables 1 to 4 does not limit the embodiments of the present application, that is, other manners of configuring the component data may be adopted, which are all within the protection scope of the embodiments of the present application.

In some embodiments, the component data further comprises a component table comprising a component type, a component name, a corresponding primary data table name, and a list of child data table names for each of the components. The component table is used for indicating the corresponding relation among the components, the main data table and the sub data table. All data of the component can be acquired through the main data table and the sub data table of the component configured by the component table.

Optionally, the component table is further used to indicate whether the component is a top-level component. When the component is a top-level component, the component includes a main component entry for a markup page of the front-end page.

Table 5 shows a specific example of the component table.

TABLE 5

As a specific example, for a sub-page component, its corresponding primary data table name in the component table is the table name of table 2 above, and the corresponding sub-data table name list includes the table names of tables 3 and 4 above.

Fig. 5 shows an alternative schematic diagram of a data table structure 500 of component data. As shown in FIG. 5, data table structure 500 includes page table 501, component table 502, component 1 data table 503, component 2 data table 504, and the like. It should be appreciated that the data table structure 500 may also include a data table of other components not shown in fig. 5, which is not limited in this regard by the present application.

The component table 502 is, for example, table 5 above. Taking component 1 as a sub-page component as an example, the main data table of component 1 may be table 2 above, the sub-data table 1 in component 1 may be table 3 above, and the sub-data table 2 may be table 4 above.

The page table 501 includes configuration information related to the page, such as title, ID, name, style, theme, etc., which is not limited in the present application.

In the embodiment of the application, the component type of the component corresponds to the file name in the engineering code of the front-end engineering component, and can be used for loading the component according to the component type.

For example, the component type of the head component is a Header, the component type of the main visual picture component is MainKV, the component type of the Graphic introduction component is Graphic, the component type of the Table component is Table, the component type of the bottom column component is Footer, and the component type of the multi-picture introduction component is ImgMod.

The following codes are one specific example of codes corresponding to the front-end engineering components:

∨templateComponents

〉Camplnquiry

〉CamplnquiryDreamCamp

〉CarouselGraphic

〉CourseItem

〉CourseList

〉Footer

〉Graphic

〉Homepage

〉ImgMod

〉MainKV

〉MainKVDreamCamp

〉MatchIntro

〉MatchProcess

〉MatchTool

〉MultiRaceTimeline

〉PageTabsNavigation

〉Partner

〉Table

〉XXXXCarnival

the component type of the component corresponds to each file name contained in the template components file in the engineering code.

In some embodiments, the page packaging client may obtain the component data and package the code of the page according to the component data.

As one possible implementation, the page packaging client may send a request message to the background server requesting component data including an identification of the page, such as a pageId. The background server may send the component data to the page packaging client in response to the request message. Correspondingly, the page packaging client can receive the component data sent by the background server.

And 420, analyzing the component data to obtain the association relation of each component.

In some embodiments, the data analysis module may be invoked to analyze the component data, so as to obtain the association relationship of the components, thereby facilitating other modules to use the component data.

In some embodiments, the association relationship may include a tree data structure, a root node of the tree data structure is a component set node, a child node of the root node includes a component node, a child node of the component node includes a main data node and a child data set node, and a child node of the child data set node includes each child data node.

Fig. 6 shows a specific example of a tree data structure. As shown in fig. 6, the child nodes of the component set node include component nodes, such as component 1 node, component 2 node, and the like. Illustratively, the component 1 node further may include a main data node and a sub-data set node, which further may include sub-data nodes, such as a sub-data 1 node, a sub-data 2 node, and so on.

In some embodiments, tree data structures may be detected. For example, a configuration detection module may be invoked to detect a tree data structure.

As one possible implementation, the tree data structure may be traversed to determine whether component code files corresponding to each component type exist. For example, when the file management module determines that the component code file corresponding to the component type does not exist in the process of traversing the tree data structure, an error may be reported and detection may be exited. As another possible implementation, a tree data structure may be traversed to determine whether the data corresponding to a component or sub-component is correct. For example, when the data (e.g., component) corresponding to the detection sub-component is incorrect, the detection may be reported in error and exited.

And 430, writing the component file reference configuration corresponding to the component type of each component into the component file according to the association relation of each component.

In some embodiments, the tree data structure may be traversed, and the component type corresponding to the main data node and the component type corresponding to the sub data node are saved in the component type list. Then, traversing the component type list, and writing the component file reference configuration corresponding to the component type of each component into the component file.

As a possible implementation, all component types are saved to a component type list (e.g., requireComponentTypeList) during the process of traversing the tree data structure for detection. When the detection is passed, the file management module may be used to write the component file reference corresponding to the component type into the component file (e.g., templatecomponents. Js) by traversing the component type list.

The following code is a specific example of code configured by referencing a component file corresponding to a component type:

constTemplateComponents＝{

Header：require(′./Header′).default,

Homepage：require(′./Homepage′).default,

MainKVDreamCamp：require(′./MainKVDreamCamp′).default,

PageTabsNavigation：require(′./PageTabsNavigation′).default,

Graphic：require(′./Graphic′).default,

CarouselGraphic：require(′./CarouselGraphic′).default,

CamplnquiryDreamCamp：require(′./CamplnquiryDreamCamp′).

default,

ImgMod：require(′./ImgMod′).default,

CourseList：require(′./CourseList′).default,

XXXXCarnival：require(′./XXXXCarnival′).default,

Partner：require(′./Partner′).default,

VideoList：require(′./VideoList′).default,

MatchProcess：require(′./MatchProcess′).default,

MatchTool：require(′./MatchTool′).default,

PicList：require(′./PicList′).default,

MatchIntro：require(′./MatchIntro′).default,

Table：require(′./Table′).default,

GettingStarted：require(′./GettingStarted′).default,

Footer：require(′./Footer′).default,

}；

export default TemplateComponents；

and 440, loading the component files to obtain the component codes of the pages.

Specifically, the component files are loaded by the component types in the engineering files. The code is as follows:

const ChildComponent＝

TemplateComponents[componentsData.childComponentType]；

therefore, the embodiment of the application combines all the components of the page uniformly through the component data of the page, can realize dynamic configuration of the required page, and simultaneously writes the component file reference configuration corresponding to the component types of all the components of the page into the component file through analyzing the component data, so that only the component codes truly contained in the page can be packaged, the component codes of the page are more simplified, the loading performance of the page is further improved, the componentization development cost of the page is reduced, and the user experience is improved.

In some embodiments, configuration information for a page may also be obtained, written to a page configuration file, and the style filename referenced by the page configuration file stored in a global variable. Thus, by loading the style file of the page, the style file code of the page can be obtained.

Specifically, after the client obtains the configuration information of the page, the configuration information can be written into the page configuration file (such as pageconfig. Js) by calling the file management module for engineering reference of the client.

The configuration information related code in pageconfig. Js is exemplified as follows:

const pageApp＝′AppTemplate′；

const theme＝′zhuimengying′；

const clientType＝′pc′；

…

module.Exports＝{

pageApp,theme,clientType,…

}

thereafter, the client may store the style filename referenced in the pageconfig. Js into the global variable through weback. DefineP lugin, for example, by the following code:

THEME：JSON.stringify(theme)

At this time, the engineering code can load the style file needed by the page through the request, as follows:

require(′../../assets/style/theme/${THEME},less′)；

therefore, the embodiment of the application can dynamically introduce the style in the code packaging process by configuring the style of the page, thereby realizing the purpose of meeting the requirements of various page styles. Because the style can be dynamically introduced during packaging, the same style can be directly and simply multiplexed, and compared with the mode that the same style can only be realized by copying codes in the prior art, the embodiment of the application can reduce the synchronization cost during updating the same style.

As one possible implementation, the client may send a request message to the background server requesting page configuration information, including an identification of the page, such as a pageId. The background server may send the configuration information to the client in response to the request message. Correspondingly, the client may receive the configuration information sent by the background server. As an example, the configuration information may be the page table 501 in fig. 5, which is not limited by the present application.

In some embodiments, the page may also be displayed according to the association relationship of the components and the component file reference configuration.

The page display client can acquire and organize the component data by calling the data analysis module, and load the component file reference configuration in a mode that the sub-components are referenced layer by the main entry component according to the association relation of each component, so that the whole page is displayed. FIG. 7 shows a schematic of a portion of a page displayed after loading a component.

Fig. 8 is a schematic diagram of an alternative system architecture 800 provided by an embodiment of the present application. As shown in fig. 8, system architecture 800 may include a background module 810, a component configuration client module 820, a page packaging client module 830, a page presentation client module 840, a communication module 850, a data parsing module 860, a configuration detection module 870, and a file management module 880.

The background module 810, i.e., a typical background server, is mainly used for storing component data and providing an interface for clients to access the data.

The component configuration client module 820, i.e., software for configuring component data, may provide a visual component data editing service. The component configuration client module synchronizes with the component data of the background module 810 by invoking the communication module 850.

The page packaging client module 830 is the software for packaging pages. By way of example, the page packaging client module 830 may call the communication module 850, the configuration detection module 870, and the file management module 880, and perform integration of the flow, so as to achieve the purpose of packaging different pages in the same engineering.

The page display client module 840 is software for actually displaying a page, and can acquire the component data of the background module 810 by calling the communication module 850 to display the page.

The communication module 850 is mainly used for providing communication services between each client and the background module 810.

The data analysis module 860 mainly analyzes the component data to obtain the association relationship of the components, so that other modules can use the component data conveniently.

The configuration detection module 870 is mainly used for checking whether the component data obtained by the data analysis module exist in the component code file or not and detecting the correctness of the sub-component data.

The file management module 880 is mainly configured to write the component reference code required by the page and the configuration information (such as style filename) of the page into the corresponding file.

FIG. 9 is a schematic flow chart diagram of a method for componentized development of pages provided by an embodiment of the application. It should be understood that fig. 9 illustrates steps or operations of a method for componentized development of a page, but these steps or operations are merely examples, and that other operations or variations of the operations in fig. 9 may also be performed by embodiments of the present application. Further, the various steps in fig. 9 may be performed in a different order than presented in fig. 9, and it is possible that not all of the operations of fig. 9 are to be performed. The same modules in fig. 9 and fig. 8 have the same or similar functions, and are not described here again. The client in fig. 9 refers to a page packaging client.

As shown in fig. 9, the method of componentized development of a page includes steps 901 to 925.

901, the client module requests page configuration information from the background module through the communication module. Wherein the request includes a page unique tag.

The background module reads the configuration according to the page tag 902.

903, the background module returns configuration information to the client module via the communication module.

904, the client-side module sends page configuration information to the file management module.

905, the file management module writes page configuration information to the page configuration file.

Specifically, the client module writes the page configuration information into the page configuration file pageconfig.js by calling the file management module for the client page engineering reference.

906, return.

907, the client-side module loads the style file.

Specifically, the client-side module may load style files as needed. Specifically, the client module may store the style file name of the music in the pageconfig. Js into the global variable through weback. DefineP lugin, and at this time, the engineering code may load the style file required by the page through require. Specific codes may be found in the relevant description above.

The client-side module requests 908 the component data from the background module via the communication module. Wherein the request includes a page unique tag.

The back-office module reads the component data according to the page flag 909. In particular, the component data may be found in the relevant description above.

The background module returns the component data to the client module via the communication module 910.

911, the client module sends the component data to the data parsing module.

The data parsing module parses the component data 912.

913, the data parsing module returns the tree data structure to the client module. In particular, the tree data structure may be found in the relevant description above.

914, the client-side module sends a tree data structure to the configuration detection module.

915, the file management module detects whether the component code file exists.

The file management module returns 916 to the configuration detection module whether the component code file exists.

917, the configuration detection module detects the component data.

918, return if it is correct.

919, the configuration detection module saves the component type.

920, the configuration detection module returns the component type array to the client module.

Specifically, the configuration detection module can traverse the tree-shaped data structure, in the process, the file management module is firstly used for judging whether the component code file corresponding to the component type does not exist, and if the component code file does not exist, the error is reported and the detection is exited. If no error is reported, whether the data (such as the component) corresponding to the sub-component is correct or not is detected. If the error is not correct, the detection is wrongly performed. Alternatively, all component types may be saved to the back component type array requireComponentTypeList during traversal.

921, the client module traverses the array of component types.

922, the client-side module sends the component type to the file management module.

923, the file management module writes the component file reference to the component file.

Specifically, the client module may traverse the array requireComponentTypeList, and write the component file reference corresponding to the component type in the array to the component file template components.

924, return.

925, the client module loads the component file.

Specifically, the engineering file in the client module can load the component file through the component type to obtain the component code of the page.

Optionally, the page display client module can also acquire and organize the component data by calling the communication module and the data analysis module, and then load component file reference configuration and display the whole page in a mode that the sub-components are referenced layer by the main inlet component according to the association relation of each component. The page display result can be seen in fig. 7.

The specific embodiments of the present application have been described in detail above with reference to the accompanying drawings, but the present application is not limited to the specific details of the above embodiments, and various simple modifications can be made to the technical solution of the present application within the scope of the technical concept of the present application, and all the simple modifications belong to the protection scope of the present application. For example, the specific features described in the above embodiments may be combined in any suitable manner, and in order to avoid unnecessary repetition, various possible combinations are not described further. As another example, any combination of the various embodiments of the present application may be made without departing from the spirit of the present application, which should also be regarded as the disclosure of the present application.

It should be further understood that, in the various method embodiments of the present application, the sequence numbers of the foregoing processes do not mean the order of execution, and the order of execution of the processes should be determined by the functions and internal logic of the processes, and should not constitute any limitation on the implementation process of the embodiments of the present application. It is to be understood that the numbers may be interchanged where appropriate such that the described embodiments of the application may be practiced otherwise than as shown or described.

The method embodiments of the present application are described above in detail, and the apparatus embodiments of the present application are described below in detail with reference to fig. 10 to 11.

FIG. 10 is a schematic block diagram of an apparatus 10 for componentized development of pages in accordance with an embodiment of the application. As shown in fig. 10, the apparatus 10 may include an acquisition unit 11, an analysis unit 12, a writing unit 13, and a loading unit 14.

An acquiring unit 11, configured to acquire component data of the page; the component data comprises a main data table, a sub data table and a component type corresponding to each component contained in the page, wherein the component type corresponds to a file name in an engineering code of a front-end engineering component;

the parsing unit 12 is configured to parse the component data to obtain an association relationship of each component;

A writing unit 13, configured to write the component file reference configuration corresponding to the component type of each component into a component file according to the association relationship;

and the loading unit 14 is used for loading the component files to obtain the component codes of the page.

In some embodiments, the component data further comprises a component table comprising the component type, component name, corresponding primary data table name, and a list of child data table names for the components.

In some embodiments, the component table is further used to indicate whether the components are top level components.

In some embodiments, the association relationship includes a tree data structure, a root node of the tree data structure is a component set node, a child node of the root node includes a component node, a child node of the component node includes a main data node and a child data set node, and a child node of the child data set node includes each child data node.

In some embodiments, the writing unit 13 is specifically configured to:

traversing the tree data structure, and storing the component types corresponding to the main data nodes and the component types corresponding to the sub data nodes into a component type list;

Traversing the component type list, and writing component file reference configuration corresponding to the component types of the components into the component file.

In some embodiments, the obtaining unit 11 is further configured to obtain configuration information of the page;

the writing unit 13 is further configured to write the configuration information into a page configuration file, and store a style file name referenced by the page configuration file into a global variable;

the loading unit 14 is further configured to load a style file of the page, to obtain a style file code of the page.

In some embodiments, the display unit is further configured to:

and displaying the page according to the association relation and the component file reference configuration.

In some embodiments, the obtaining unit 11 is specifically configured to:

sending a request message to a background server, wherein the request message comprises an identification of the page;

and receiving the component data sent by the background server in response to the request message.

In some embodiments, the components include at least one of a header component, a home screen component, a sub-page component, a graphic introduction component, a form component, a bottom bar component, a multi-diagram introduction component.

It should be understood that apparatus embodiments and method embodiments may correspond with each other and that similar descriptions may refer to the method embodiments. To avoid repetition, no further description is provided here. Specifically, the apparatus 10 shown in fig. 10 may perform the above-described method embodiments, and the foregoing and other operations and/or functions of each module in the apparatus 10 are respectively for implementing the corresponding flows in the above-described method 400, which are not repeated herein for brevity.

The apparatus of the embodiments of the present application is described above in terms of functional modules with reference to the accompanying drawings. It should be understood that the functional module may be implemented in hardware, or may be implemented by instructions in software, or may be implemented by a combination of hardware and software modules. Specifically, each step of the method embodiment in the embodiment of the present application may be implemented by an integrated logic circuit of hardware in a processor and/or an instruction in a software form, and the steps of the method disclosed in connection with the embodiment of the present application may be directly implemented as a hardware decoding processor or implemented by a combination of hardware and software modules in the decoding processor. Alternatively, the software modules may be located in a well-established storage medium in the art such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, and the like. The storage medium is located in a memory, and the processor reads information in the memory, and in combination with hardware, performs the steps in the above method embodiments.

Fig. 11 is a schematic block diagram of an electronic device 30 provided by an embodiment of the present application.

As shown in fig. 11, the electronic device 30 may include:

a memory 31 and a processor 32, the memory 31 being for storing a computer program and for transmitting the program code to the processor 32. In other words, the processor 32 may call and run a computer program from the memory 31 to implement the method in the embodiment of the present application. For example, the processor 32 may be configured to perform the above-described method embodiments according to instructions in the computer program.

In some embodiments of the present application, the processor 32 may include, but is not limited to:

a general purpose processor, digital signal processor (Digital Signal Processor, DSP), application specific integrated circuit (Application Specific Integrated Circuit, ASIC), field programmable gate array (Field Programmable Gate Array, FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, or the like.

In some embodiments of the present application, the memory 31 includes, but is not limited to:

volatile memory and/or nonvolatile memory. The nonvolatile Memory may be a Read-Only Memory (ROM), a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically Erasable EPROM (EEPROM), or a flash Memory. The volatile memory may be random access memory (Random Access Memory, RAM) which acts as an external cache. By way of example, and not limitation, many forms of RAM are available, such as Static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (Double Data Rate SDRAM), enhanced SDRAM (ESDRAM), synchronous Link DRAM (SLDRAM), and Direct memory bus RAM (DR RAM).

In some embodiments of the present application, the computer program may be divided into one or more modules, which are stored in the memory 31 and executed by the processor 32 to perform the methods provided by the present application. The one or more modules may be a series of computer program instruction segments capable of performing the specified functions, which are used to describe the execution of the computer program in the electronic device.

As shown in fig. 11, the electronic device 30 may further include:

a transceiver 33, the transceiver 33 being connectable to the processor 32 or the memory 31.

The processor 32 may control the transceiver 33 to communicate with other devices, and in particular, may send information or data to other devices or receive information or data sent by other devices. Transceiver 730 may include a transmitter and a receiver. The transceiver 33 may further include antennas, the number of which may be one or more.

It will be appreciated that the various components in the electronic device are connected by a bus system that includes, in addition to a data bus, a power bus, a control bus, and a status signal bus.

The present application also provides a computer storage medium having stored thereon a computer program which, when executed by a computer, enables the computer to perform the method of the above-described method embodiments. Alternatively, embodiments of the present application also provide a computer program product comprising instructions which, when executed by a computer, cause the computer to perform the method of the method embodiments described above.

When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed on a computer, produces a flow or function in accordance with embodiments of the application, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by a wired (e.g., coaxial cable, fiber optic, digital subscriber line (digital subscriber line, DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., a floppy disk, a hard disk, a magnetic tape), an optical medium (e.g., a digital video disc (digital video disc, DVD)), or a semiconductor medium (e.g., a Solid State Disk (SSD)), or the like.

It will be appreciated that in the specific implementation of the present application, when the above embodiments of the present application are applied to specific products or technologies and relate to data related to user information and the like, user permission or consent needs to be obtained, and the collection, use and processing of the related data needs to comply with the relevant laws and regulations and standards.

Those of ordinary skill in the art will appreciate that the various illustrative modules and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.

In the several embodiments provided by the present application, it should be understood that the disclosed systems, devices, and methods may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, and for example, the division of the modules is merely a logical function division, and there may be additional divisions when actually implemented, for example, multiple modules or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or modules, which may be in electrical, mechanical, or other forms.

The modules illustrated as separate components may or may not be physically separate, and components shown as modules may or may not be physical modules, i.e., may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment. For example, functional modules in various embodiments of the present application may be integrated into one processing module, or each module may exist alone physically, or two or more modules may be integrated into one module.

The foregoing is merely illustrative of the present application, and the present application is not limited thereto, and any person skilled in the art will readily appreciate variations or alternatives within the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A method for componentized development of pages, comprising:

and loading the component file to obtain the component code of the page.

2. The method of claim 1, wherein the component data further comprises a component table comprising the component type, component name, corresponding primary data table name, and a list of child data table names for the components.

3. The method of claim 2, wherein the component table is further used to indicate whether the components are top-level components.

4. The method of claim 1, wherein the association comprises a tree data structure, a root node of the tree data structure is a component set node, a child node of the root node comprises a component node, a child node of the component node comprises a main data node and a child data set node, and a child node of the child data set node comprises each child data node.

5. The method of claim 4, wherein writing the component file reference configuration corresponding to the component type of each component into the component file according to the association relationship comprises:

6. The method of any one of claims 1-5, further comprising:

acquiring configuration information of the page;

writing the configuration information into a page configuration file, and storing a style file name referenced by the page configuration file into a global variable;

and loading the style file of the page to obtain the style file code of the page.

7. The method of any one of claims 1-5, further comprising:

8. The method of any of claims 1-5, wherein the obtaining component data of the page comprises:

9. The method of any of claims 1-5, wherein the components include at least one of a header component, a home screen component, a sub-page component, a graphic presentation component, a form component, a bottom bar component, a multi-diagram presentation component.

10. An apparatus for componentized development of pages, comprising:

11. An electronic device comprising a processor and a memory, the memory having instructions stored therein that when executed by the processor cause the processor to perform the method of any of claims 1-9.

12. A computer storage medium for storing a computer program, the computer program comprising instructions for performing the method of any one of claims 1-9.

13. A computer program product comprising computer program code which, when run by an electronic device, causes the electronic device to perform the method of any one of claims 1-9.