CN112925513A - Web page construction method and device - Google Patents
Web page construction method and device Download PDFInfo
- Publication number
- CN112925513A CN112925513A CN202110192551.2A CN202110192551A CN112925513A CN 112925513 A CN112925513 A CN 112925513A CN 202110192551 A CN202110192551 A CN 202110192551A CN 112925513 A CN112925513 A CN 112925513A
- Authority
- CN
- China
- Prior art keywords
- component
- web
- version
- target web
- target
- 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.)
- Pending
Links
- 238000010276 construction Methods 0.000 title claims abstract description 59
- 238000000034 method Methods 0.000 claims abstract description 51
- 230000008859 change Effects 0.000 claims description 46
- 230000008569 process Effects 0.000 claims description 18
- 238000004806 packaging method and process Methods 0.000 claims description 7
- 238000011161 development Methods 0.000 abstract description 13
- 238000009877 rendering Methods 0.000 abstract description 3
- 238000010586 diagram Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012806 monitoring device Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a web page construction method and a device, wherein the method comprises the following steps: responding to a page construction request sent by a user, and loading a component editing platform according to the request; when component selection information sent by a user is received, determining each target web component for constructing a web page; acquiring component information of each target web component and a position identifier corresponding to each target web component; determining the nesting relation among the target web components based on the position identification and the component selection information corresponding to each target web component; generating a page description file based on the component information of each target web component and the nesting relation among the target web components; and loading the page description file in the editor, and rendering each target web component through the page description file to generate a web page. By applying the method provided by the invention, the development and adjustment codes are not needed when the web page is constructed every time, and the efficiency of developing and constructing the web page is improved.
Description
Technical Field
The invention relates to the technical field of webpage development, in particular to a method and a device for constructing a web page.
Background
With the continuous development of internet technology, web services have gradually become an indispensable part of people's daily life, wherein web services generally need to be realized through web page development, and for web page development, how to quickly construct a suitable page is an extremely important realization factor in the web page development process.
At present, web pages are rich and various, activity rules change frequently, and business codes need to be researched and modified for each change, so that business logic is large, and characters and pictures are small, and the business logic and the characters and the pictures need to be researched and supported. When a new web page is developed or the web page is modified at every time, a developer needs to manually and continuously search the attribute and the application of the component according to the requirement and adjust the code, so that the construction efficiency of the component is not high, and further the whole webpage development and construction efficiency is not high.
Disclosure of Invention
In view of this, the invention provides a web page construction method, by which an adjustment code does not need to be developed each time a web page is constructed, and efficiency of web page development and construction is improved.
The invention also provides a web page construction device used for ensuring the realization and the application of the method in practice.
A web page construction method, comprising:
responding to a page construction request sent by a user, and loading a preset component editing platform based on the page construction request, wherein the component editing platform comprises a plurality of constructed web components;
when component selection information sent by the user is received, determining each target web component selected by the user in each web component of the component editing platform for constructing a web page based on the component selection information;
acquiring component information of each target web component and a position identifier corresponding to the target web component contained in each component information;
determining nesting relation among the target web components based on the position identification corresponding to each target web component and the component selection information;
generating a page description file based on the component information of each target web component and the nesting relation among the target web components;
and loading the page description file in a preset editor so as to render each target web component through the page description file and generate a web page.
The method described above, optionally, includes a process of constructing each web component in the component editing platform, including:
acquiring each component source code uploaded to the component editing platform;
calling a preset component construction tool, compiling each component source code, and obtaining a code file corresponding to each component source code;
and compressing and packaging the code files to obtain a web component corresponding to the source code of each component, storing each web component into a Content Delivery Network (CDN) of a component editing platform, and generating a unique resource address corresponding to each web component.
The above method, optionally, further includes:
when a component change message is received, determining a web component corresponding to the component change message;
acquiring the component parameters contained in the component change message;
and adjusting the web component corresponding to the component change message by applying the component parameter to obtain the component version of the web component corresponding to the component change message.
Optionally, the determining, based on the component selection information, each target web component that is selected by the user from among the web components of the component editing platform and used for building a web page includes:
acquiring each identification information contained in the component selection information, and determining a web component corresponding to each identification information as a target web component;
checking whether each piece of identification information contains a version identification number, wherein the version identification number is used for indicating the component version of the target web component corresponding to the identification information to which the version identification number belongs;
if any identification information contains a version identification number, determining that the component version corresponding to the version identification number is a target version; acquiring a unique resource address corresponding to the target version, and acquiring a component version corresponding to the identification information as a target web component of the target version through the unique resource address corresponding to the target version;
if any identification information does not contain a version identification number, determining the latest version of the target web component corresponding to the identification information; and acquiring the unique resource address corresponding to the latest version, and acquiring the component version corresponding to the identification information as the target web component of the latest version through the unique resource address corresponding to the latest version.
Optionally, the above method, where the determining a nesting relationship between the target web components based on the location identifier corresponding to each target web component and the component selection information includes:
dragging each target web component to a preset page editor, and determining an initial nesting relation among the target web components according to a position identifier corresponding to each target web component;
generating a page tree corresponding to each target web component based on the initial nesting relation among the target web components;
acquiring a position parameter corresponding to each target web component in the component selection information, and changing a position identifier corresponding to each target web component according to the position parameter corresponding to each target web component;
based on the changed position identifications, adjusting the positions of the target web components in the page tree to determine new nesting relations among the target web components.
A web page building apparatus comprising:
the system comprises a loading unit, a display unit and a display unit, wherein the loading unit is used for responding to a page construction request sent by a user and loading a preset component editing platform based on the page construction request, and the component editing platform comprises a plurality of constructed web components;
the first determining unit is used for determining each target web component selected by the user in each web component of the component editing platform based on the component selection information when the component selection information sent by the user is received, wherein the target web components are used for constructing a web page;
the acquisition unit is used for acquiring the component information of each target web component and the position identification corresponding to the target web component contained in each component information;
the second determining unit is used for determining the nesting relation among the target web components based on the position identification corresponding to each target web component and the component selection information;
the first generation unit is used for generating a page description file based on the component information of each target web component and the nesting relation among the target web components;
and the second generating unit is used for loading the page description file in a preset editor so as to render each target web component through the page description file and generate a web page.
The above apparatus, optionally, further comprises:
the building unit is used for acquiring each component source code uploaded to the component editing platform; calling a preset component construction tool, compiling each component source code, and obtaining a code file corresponding to each component source code; and compressing and packaging the code files to obtain a web component corresponding to the source code of each component, storing each web component into a Content Delivery Network (CDN) of a component editing platform, and generating a unique resource address corresponding to each web component.
The above apparatus, optionally, further comprises:
the change unit is used for determining the web component corresponding to the component change message when the component change message is received; acquiring the component parameters contained in the component change message; and adjusting the web component corresponding to the component change message by applying the component parameter to obtain the component version of the web component corresponding to the component change message.
The above apparatus, optionally, the first determining unit includes:
the first determining subunit is configured to acquire each piece of identification information included in the component selection information, and determine a web component corresponding to each piece of identification information as a target web component;
a checking subunit, configured to check whether each piece of identification information includes a version identification number, where the version identification number is used to indicate a component version of a target web component corresponding to identification information to which the version identification number belongs;
the first obtaining subunit is configured to determine, if any identification information includes a version identification number, that a component version corresponding to the version identification number is a target version; acquiring a unique resource address corresponding to the target version, and acquiring a component version corresponding to the identification information as a target web component of the target version through the unique resource address corresponding to the target version;
the second acquiring subunit is configured to determine, if any identification information does not include a version identification number, the latest version of the target web component corresponding to the identification information; and acquiring the unique resource address corresponding to the latest version, and acquiring the component version corresponding to the identification information as the target web component of the latest version through the unique resource address corresponding to the latest version.
The above apparatus, optionally, the second determining unit includes:
the second determining subunit is used for dragging each target web component to a preset page editor, and determining an initial nesting relationship among the target web components according to the position identifier corresponding to each target web component;
the generating subunit is used for generating a page tree corresponding to each target web component based on the initial nesting relation among the target web components;
the change subunit is configured to acquire a location parameter corresponding to each target web component in the component selection information, and change a location identifier corresponding to each target web component according to the location parameter corresponding to each target web component;
and the third determining subunit is used for adjusting the position of each target web component in the page tree based on each changed position identifier so as to determine a new nesting relationship between the target web components.
A storage medium comprising stored instructions, wherein the instructions, when executed, control a device on which the storage medium is located to perform the above-mentioned web page construction method.
An electronic device comprising a memory, and one or more instructions, wherein the one or more instructions are stored in the memory and configured to be executed by one or more processors to perform the web page construction method described above.
Compared with the prior art, the invention has the following advantages:
the invention provides a web page construction method, which comprises the following steps: responding to a page construction request sent by a user, and loading a preset component editing platform based on the page construction request, wherein the component editing platform comprises a plurality of constructed web components; when component selection information sent by the user is received, determining each target web component selected by the user in each web component of the component editing platform for constructing a web page based on the component selection information; acquiring component information of each target web component and a position identifier corresponding to the target web component contained in each component information; determining nesting relation among the target web components based on the position identification corresponding to each target web component and the component selection information; generating a page description file based on the component information of each target web component and the nesting relation among the target web components; and loading the page description file in a preset editor so as to render each target web component through the page description file and generate a web page. By applying the method provided by the invention, the development and adjustment codes are not needed when the web page is constructed every time, and the efficiency of developing and constructing the web page is improved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
FIG. 1 is a flowchart of a method for constructing a web page according to an embodiment of the present invention;
FIG. 2 is a flowchart of another method for constructing a web page according to an embodiment of the present invention;
FIG. 3 is a flowchart of another method of a web page construction method according to an embodiment of the present invention;
fig. 4 is a device structure diagram of a web page constructing device according to an embodiment of the present invention;
fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In this application, relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions, and the terms "comprises", "comprising", or any other variation thereof are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The invention is operational with numerous general purpose or special purpose computing device environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet-type devices, multi-processor apparatus, distributed computing environments that include any of the above devices or equipment, and the like.
The embodiment of the invention provides a web page construction method, which can be applied to various system platforms, wherein an execution main body of the method can be a computer terminal or a processor of various mobile devices, and a flow chart of the method is shown in fig. 1 and specifically comprises the following steps:
s101: responding to a page construction request sent by a user, and loading a preset component editing platform based on the page construction request.
Wherein the component editing platform comprises a plurality of constructed web components.
In the embodiment of the invention, when a user needs to construct a web page, a page construction request is sent to a processor, the processor responds to the request and loads a component editing platform, the component editing platform is displayed on a preset display interface, and the user can select a component for constructing the web page through the component editing platform.
It should be noted that each web component in the present invention is used for characterizing different layouts, data presentations, and implementation of functions in a web page.
S102: when receiving the component selection information sent by the user, determining each target web component selected by the user in each web component of the component editing platform for constructing a web page based on the component selection information.
In the embodiment of the invention, a user can personally select the web components needing to construct the web page in the component editing platform, and each web component selected by the user is a target web component.
Optionally, when the user selects a web component on the component editing platform, a preset monitoring device is used to monitor the process of selecting the web component by the user, so as to determine each target web component finally selected by the user.
The component selection information comprises a plurality of identification information, and each identification information corresponds to information such as a component name, a serial number, a version identification number and the like of each web component selected by a user.
S103: and acquiring the component information of each target web component and the position identification corresponding to the target web component contained in each component information.
In an embodiment of the invention, the location identification of the web component is used to determine the location of the component as it is rendered to the page.
S104: and determining the nesting relation among the target web components based on the position identification corresponding to each target web component and the component selection information.
In the embodiment of the invention, the position identifier in each component information represents the preset fixed position of each component, the user can adjust the position of the web component when selecting the web component, and the adjusted position of each target web component is determined through the relevant parameters of the position of the component adjusted by the user in the component selection information sent by the user so as to determine the final position relationship among the target web components.
S105: and generating a page description file based on the component information of each target web component and the nesting relation among the target web components.
In the embodiment of the invention, the page description file is a deployment file for deploying the web page, and the page description file contains target web components to be rendered, component information and nesting relation among the target web components.
S106: and loading the page description file in a preset editor so as to render each target web component through the page description file and generate a web page.
In the embodiment of the invention, script editing is carried out on the page description file through an editor, each target web component is rendered, and finally a complete web page is generated.
In the web page construction method provided by the embodiment of the invention, a page construction request of a user is responded to load a component editing platform, a plurality of web components are constructed in the component editing platform, and the user can select each web component needing to construct the web page through the component editing platform. When component selection information sent by a user is received, representing that the user selects each target web component completing the construction of the web page, acquiring component information of each web component and a position identifier contained in the component information, and determining a final nesting relation between each target web component according to the position of the position identifier and the component selection information sent by the user. And generating a page description file based on the nesting relation and the component information of each target web component, loading the file in an editor, editing the page description file by the editor, rendering each target web component, and finally generating a web page.
By applying the method provided by the embodiment of the invention, the development and adjustment codes are not required when the web page is constructed every time, and the efficiency of developing and constructing the web page is improved.
In the method provided by the embodiment of the invention, the component editing platform is a front-end project for constructing the web component, the related codes of the editing component are arranged in the component editing platform, and a user can construct a basic web component through the component editing platform for the subsequent construction of a web page. Specifically, the process of constructing each web component on the component editing platform may specifically include:
acquiring each component source code uploaded to the component editing platform;
calling a preset component construction tool, compiling each component source code, and obtaining a code file corresponding to each component source code;
and compressing and packaging the code files to obtain a web component corresponding to the source code of each component, storing each web component into a Content Delivery Network (CDN) of a component editing platform, and generating a unique resource address corresponding to each web component.
In the web page construction method provided by the embodiment of the invention, maintenance personnel can upload general component source codes to the component editing platform in advance, each component source code realizes the function, default layout and the like of one component, and each component source code can be developed by an vue front-end framework. The component building tool may be a Webpack building tool or an npm dependency package management tool, etc. The Webpack construction tool is a front-end engineering packaging construction tool and realizes the conversion process of source codes; npm the dependency package management tool is used to manage package dependencies describing the versions of third party dependencies. The component construction tool is used for constructing the web component, the functions of the component construction tool are perfected before the development and construction of the web component are realized, and the dependency relationship between the component source code and the component construction relationship is realized by applying the dependency library. And after the function development of the component construction tool is completed, compiling the component source code to obtain a corresponding code file. And after the code file is compressed and packaged, a web component of a standard version is obtained, the web component is stored in the CDN, and a unique resource address stored in the CDN by the web component is generated.
It should be noted that, in the embodiment of the present invention, the process of compiling the component source code is to convert the component source code into a code file conforming to a set format. When uploading each component source code to the component editing platform, the format of each component source code may not meet the semantic specification of the platform, so that the source code needs to be subjected to the semantic specification.
It should be further noted that the same web component may have multiple versions in the CDN, and after the first version of the web component is generated in the component editing platform, a maintenance worker may update and upgrade the web component as needed to obtain more versions of the web component, and unique resource addresses corresponding to the versions of the same web component may be different.
Further, the process of updating the component version of the web component may specifically include:
when a component change message is received, determining a web component corresponding to the component change message;
acquiring the component parameters contained in the component change message;
and adjusting the web component corresponding to the component change message by applying the component parameter to obtain the component version of the web component corresponding to the component change message.
It will be appreciated that the component version of the web component may be changed at any time after the web component is generated by the component editing platform. In the process of updating the component version of the web component, the sent component change message needs to be received, and the microblog component needing to be updated at present is determined from the component change message. Acquiring the component parameters contained in the component change message, positioning the parameter position of the web component needing to be changed, adjusting the component parameters according to the parameter position, acquiring the web component of a new component version, storing the web component, and allocating a corresponding unique resource address for the web component.
It should be noted that, after the web component updates the component version, the old version of the web component and the new version of the web component are simultaneously saved, and the user can call the web component of each component version at any time as desired.
By applying the method provided by the embodiment of the invention, after each web component is built on the component editing platform, a user does not need to rewrite new codes when building a web page, the web page is directly formed by selecting the web components, and meanwhile, the component version of the web components can be updated in real time, so that the diversification of the web components is realized.
In the method provided in the embodiment of the present invention, based on the content of S102 and the component selection information, the process of determining each target web component selected by the user in each web component of the component editing platform for constructing a web page, which is shown in fig. 2, may specifically include:
s201: and acquiring each identification information contained in the component selection information, and determining the web component corresponding to each identification information as a target web component.
In the embodiment of the present invention, the selection information includes a plurality of identification information, and each identification information corresponds to information such as a component name, a serial number, and a version identification number of each web component selected by the user. Each web component in the component editing platform corresponds to at least one component version, after each web component selected by a user is determined according to the identification information,
s202: checking whether each piece of identification information contains a version identification number; if yes, go to S203; if not, go to S205.
The version identification number is used for representing the component version of the target web component corresponding to the identification information to which the version identification number belongs.
In the embodiment of the invention, the user can select the version of the component of the web component at the same time when selecting the web component, and if the user selects the version of the component of the web component, the identification information contains the version identification number.
S203: and if any identification information contains the version identification number, determining that the component version corresponding to the version identification number is the target version.
In the embodiment of the present invention, if the identification information includes the version identification number, the component version corresponding to the version identification number selected by the user is the target version, and S204 is executed.
S204: and acquiring the unique resource address corresponding to the target version, and acquiring the component version corresponding to the identification information as the target web component of the target version through the unique resource address corresponding to the target version.
In the embodiment of the present invention, the unique resource address is a storage address of a target web component whose component version is a target version and which corresponds to the identification information, and the target web component is obtained by the unique resource address.
S205: and if any identification information does not contain the version identification number, determining the latest version of the target web component corresponding to the identification information.
In the embodiment of the invention, if the identification information does not contain the version identification number, the component version of the target web component corresponding to the identification information is not selected by the representation user, and the target web component is the latest version by default.
S206: and acquiring the unique resource address corresponding to the latest version, and acquiring the component version corresponding to the identification information as the target web component of the latest version through the unique resource address corresponding to the latest version.
In the implementation of the present invention, consistent with the implementation process of S204 described above, the unique resource address corresponding to the latest version obtains the target web component whose version of the component corresponding to the identification information is the latest version.
In the web page construction method provided by the embodiment of the invention, when a user needs to construct a web page, the user sends selection information for selecting the web components, the selection information comprises identification information for selecting the component version, each identification information corresponds to one web component, and the web component corresponding to the identification information is determined as a target web component. For each piece of identification information, it is checked whether the identification information contains a version identification number for characterizing the version of the component selected by the user. If the web component is included, the web component whose component version corresponding to the identification information is the component version corresponding to the version identification number needs to be acquired. And determining the component version corresponding to the version identification number as a target version, acquiring a position resource address corresponding to the target version, and obtaining the web component through the unique resource address. If the identification information does not contain the version identification number, the component version of the target web component corresponding to the identification information is defaulted to be the latest version, the unique resource address of the latest version is obtained, and the target web component is obtained through the unique resource address of the latest version.
Based on the method provided by the above embodiment, taking the web component a as an example, the web component a currently has three versions, namely 1.0 version, 2.0 version and 3.0 version, where the 3.0 version is the latest version, and therefore, the specific process of acquiring the web component a is as follows:
when the identification information corresponding to the web component A is determined to be contained in the component selection information, the web component A is the target component. It is checked whether the identification information contains a version identification. If the identification information contains a version identification, and the version of the component corresponding to the version identification is 1.0, acquiring a unique resource address corresponding to the version of the web component A of 1.0, and acquiring the web component A of the version 1.0 through the unique resource address; if the identification information does not contain the version identification, the version of the component selected by the current user is defaulted to be the 3.0 version, the unique resource address corresponding to the version of the web component A to be the 3.0 version is obtained, and the web component A of the 3.0 version is obtained through the unique resource address.
By applying the method provided by the embodiment of the invention, the user can select the web components with different versions according to the version of the component when selecting the web components, thereby realizing the diversity of the web pages.
The method provided in the embodiment of the present invention, based on the content of S104, and based on the location identifier corresponding to each target web component and the component selection information, a process of determining a nesting relationship between the target web components is shown in fig. 3, and may specifically include:
s301: dragging each target web component to a preset page editor, and determining an initial nesting relation among the target web components according to the position identification corresponding to each target web component.
In the embodiment of the invention, the component information of each web component comprises the position identifier initially set by the web component, and the initial nesting relation of each web component is determined through the position identifier.
S302: and generating a page tree corresponding to each target web component based on the initial nesting relation among the target web components.
In the embodiment of the invention, the page tree corresponding to each target web component is generated in the page editor, and each target web component has a corresponding position relationship in the page tree.
S303: and acquiring a position parameter corresponding to each target web component in the component selection information, and changing a position identifier corresponding to each target web component according to the position parameter corresponding to each target web component.
In the embodiment of the invention, the position of the web component can be changed when the user selects the web component, and the position parameter corresponding to each target web component input by the user is obtained through the component selection information, so that the position identifier of the target web component is changed according to the position parameter.
It can be understood that, in the process of selecting a web component, a user pops up a position selection box corresponding to each web component, and an initial position parameter of the web component is displayed in the selection box, and the user may change the initial position parameter or may not change the initial position parameter. Therefore, the location parameter of each web component in the component selection information may be an initial location parameter or a changed location parameter.
S304: based on the changed position identifications, adjusting the positions of the target web components in the page tree to determine new nesting relations among the target web components.
In the embodiment of the invention, when the position identifier is changed, the position of the web component in the page tree is changed, so that the nesting relationship among the target web components is changed, and the changed nesting relationship is the nesting relationship which needs to be rendered among the target web components.
In the web page construction method provided by the embodiment of the invention, after the user selects each target web page, each target web page is dragged into the page editor, and the initial nesting relationship between the target web pages is determined through the page editor. Generating a page tree through the initial nesting relation, acquiring a position parameter corresponding to each target web page in the component selection information, readjusting the position identifier of each target web component through the position parameter, and adjusting the position of each target web component in the page tree to obtain the nesting relation among the target web components after final adjustment.
By applying the method provided by the embodiment of the invention, the positions of the web components on the page can be positioned when the web page is generated through the nesting relation among the web components.
The specific implementation procedures and derivatives thereof of the above embodiments are within the scope of the present invention.
Corresponding to the method described in fig. 1, an embodiment of the present invention further provides a web page constructing apparatus, which is used for implementing the method in fig. 1 specifically, the web page constructing apparatus provided in the embodiment of the present invention may be applied to a computer terminal or various mobile devices, and a schematic structural diagram of the web page constructing apparatus is shown in fig. 4, and specifically includes:
the loading unit 401 is configured to respond to a page construction request sent by a user, and load a preset component editing platform based on the page construction request, where the component editing platform includes multiple constructed web components.
A first determining unit 402, configured to, when receiving the component selection information sent by the user, determine, based on the component selection information, each target web component that is selected by the user in each web component of the component editing platform and used for building a web page.
An obtaining unit 403, configured to obtain component information of each target web component, and a location identifier corresponding to the target web component included in each component information.
A second determining unit 404, configured to determine, based on the location identifier corresponding to each target web component and the component selection information, a nesting relationship between the target web components.
A first generating unit 405, configured to generate a page description file based on the component information of each target web component and the nesting relationship between the target web components.
A second generating unit 406, configured to load the page description file in a preset editor, so as to render each target web component through the page description file, and generate a web page.
In the web page construction device provided by the embodiment of the invention, a page construction request of a user is responded to load a component editing platform, a plurality of web components are constructed in the component editing platform, and the user can select each web component needing to construct a web page through the component editing platform. When component selection information sent by a user is received, representing that the user selects each target web component completing the construction of the web page, acquiring component information of each web component and a position identifier contained in the component information, and determining a final nesting relation between each target web component according to the position of the position identifier and the component selection information sent by the user. And generating a page description file based on the nesting relation and the component information of each target web component, loading the file in an editor, editing the page description file by the editor, rendering each target web component, and finally generating a web page.
By applying the device provided by the embodiment of the invention, the development and adjustment codes are not required when the web page is constructed every time, and the efficiency of developing and constructing the web page is improved.
The device provided by the embodiment of the invention further comprises:
the building unit is used for acquiring each component source code uploaded to the component editing platform; calling a preset component construction tool, compiling each component source code, and obtaining a code file corresponding to each component source code; and compressing and packaging the code files to obtain a web component corresponding to the source code of each component, storing each web component into a Content Delivery Network (CDN) of a component editing platform, and generating a unique resource address corresponding to each web component.
The device provided by the embodiment of the invention further comprises:
the change unit is used for determining the web component corresponding to the component change message when the component change message is received; acquiring the component parameters contained in the component change message; and adjusting the web component corresponding to the component change message by applying the component parameter to obtain the component version of the web component corresponding to the component change message.
In the apparatus provided in an embodiment of the present invention, the first determining unit includes:
the first determining subunit is configured to acquire each piece of identification information included in the component selection information, and determine a web component corresponding to each piece of identification information as a target web component;
a checking subunit, configured to check whether each piece of identification information includes a version identification number, where the version identification number is used to indicate a component version of a target web component corresponding to identification information to which the version identification number belongs;
the first obtaining subunit is configured to determine, if any identification information includes a version identification number, that a component version corresponding to the version identification number is a target version; acquiring a unique resource address corresponding to the target version, and acquiring a component version corresponding to the identification information as a target web component of the target version through the unique resource address corresponding to the target version;
the second acquiring subunit is configured to determine, if any identification information does not include a version identification number, the latest version of the target web component corresponding to the identification information; and acquiring the unique resource address corresponding to the latest version, and acquiring the component version corresponding to the identification information as the target web component of the latest version through the unique resource address corresponding to the latest version.
In the apparatus provided in the embodiment of the present invention, the second determining unit includes:
the second determining subunit is used for dragging each target web component to a preset page editor, and determining an initial nesting relationship among the target web components according to the position identifier corresponding to each target web component;
the generating subunit is used for generating a page tree corresponding to each target web component based on the initial nesting relation among the target web components;
the change subunit is configured to acquire a location parameter corresponding to each target web component in the component selection information, and change a location identifier corresponding to each target web component according to the location parameter corresponding to each target web component;
and the third determining subunit is used for adjusting the position of each target web component in the page tree based on each changed position identifier so as to determine a new nesting relationship between the target web components.
The specific working processes of each unit and sub-unit in the web page construction apparatus disclosed in the above embodiment of the present invention may refer to corresponding contents in the web page construction method disclosed in the above embodiment of the present invention, and are not described herein again.
The embodiment of the invention also provides a storage medium, which comprises a stored instruction, wherein when the instruction runs, the device where the storage medium is located is controlled to execute the web page construction method.
An electronic device is provided in an embodiment of the present invention, and the structural diagram of the electronic device is shown in fig. 5, which specifically includes a memory 501 and one or more instructions 502, where the one or more instructions 502 are stored in the memory 501, and are configured to be executed by one or more processors 503 to perform the following operations according to the one or more instructions 502:
responding to a page construction request sent by a user, and loading a preset component editing platform based on the page construction request, wherein the component editing platform comprises a plurality of constructed web components;
when component selection information sent by the user is received, determining each target web component selected by the user in each web component of the component editing platform for constructing a web page based on the component selection information;
acquiring component information of each target web component and a position identifier corresponding to the target web component contained in each component information;
determining nesting relation among the target web components based on the position identification corresponding to each target web component and the component selection information;
generating a page description file based on the component information of each target web component and the nesting relation among the target web components;
and loading the page description file in a preset editor so as to render each target web component through the page description file and generate a web page.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, the system or system embodiments are substantially similar to the method embodiments and therefore are described in a relatively simple manner, and reference may be made to some of the descriptions of the method embodiments for related points. The above-described system and system embodiments are only illustrative, wherein the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
Those of skill would further appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both.
To clearly illustrate this interchangeability of hardware and software, various illustrative components and steps have been described above generally in terms of their functionality. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. 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 invention.
The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims (10)
1. A web page construction method, comprising:
responding to a page construction request sent by a user, and loading a preset component editing platform based on the page construction request, wherein the component editing platform comprises a plurality of constructed web components;
when component selection information sent by the user is received, determining each target web component selected by the user in each web component of the component editing platform for constructing a web page based on the component selection information;
acquiring component information of each target web component and a position identifier corresponding to the target web component contained in each component information;
determining nesting relation among the target web components based on the position identification corresponding to each target web component and the component selection information;
generating a page description file based on the component information of each target web component and the nesting relation among the target web components;
and loading the page description file in a preset editor so as to render each target web component through the page description file and generate a web page.
2. The method of claim 1, wherein the process of building each web component in the component editing platform comprises:
acquiring each component source code uploaded to the component editing platform;
calling a preset component construction tool, compiling each component source code, and obtaining a code file corresponding to each component source code;
and compressing and packaging the code files to obtain a web component corresponding to the source code of each component, storing each web component into a Content Delivery Network (CDN) of a component editing platform, and generating a unique resource address corresponding to each web component.
3. The method of claim 2, further comprising:
when a component change message is received, determining a web component corresponding to the component change message;
acquiring the component parameters contained in the component change message;
and adjusting the web component corresponding to the component change message by applying the component parameter to obtain the component version of the web component corresponding to the component change message.
4. The method of claim 3, wherein determining, based on the component selection information, each target web component that the user selected among the web components of the component editing platform for building a web page comprises:
acquiring each identification information contained in the component selection information, and determining a web component corresponding to each identification information as a target web component;
checking whether each piece of identification information contains a version identification number, wherein the version identification number is used for indicating the component version of the target web component corresponding to the identification information to which the version identification number belongs;
if any identification information contains a version identification number, determining that the component version corresponding to the version identification number is a target version; acquiring a unique resource address corresponding to the target version, and acquiring a component version corresponding to the identification information as a target web component of the target version through the unique resource address corresponding to the target version;
if any identification information does not contain a version identification number, determining the latest version of the target web component corresponding to the identification information; and acquiring the unique resource address corresponding to the latest version, and acquiring the component version corresponding to the identification information as the target web component of the latest version through the unique resource address corresponding to the latest version.
5. The method according to claim 1, wherein the determining the nesting relationship between the target web components based on the location identifier corresponding to each target web component and the component selection information comprises:
dragging each target web component to a preset page editor, and determining an initial nesting relation among the target web components according to a position identifier corresponding to each target web component;
generating a page tree corresponding to each target web component based on the initial nesting relation among the target web components;
acquiring a position parameter corresponding to each target web component in the component selection information, and changing a position identifier corresponding to each target web component according to the position parameter corresponding to each target web component;
based on the changed position identifications, adjusting the positions of the target web components in the page tree to determine new nesting relations among the target web components.
6. A web page building apparatus, comprising:
the system comprises a loading unit, a display unit and a display unit, wherein the loading unit is used for responding to a page construction request sent by a user and loading a preset component editing platform based on the page construction request, and the component editing platform comprises a plurality of constructed web components;
the first determining unit is used for determining each target web component selected by the user in each web component of the component editing platform based on the component selection information when the component selection information sent by the user is received, wherein the target web components are used for constructing a web page;
the acquisition unit is used for acquiring the component information of each target web component and the position identification corresponding to the target web component contained in each component information;
the second determining unit is used for determining the nesting relation among the target web components based on the position identification corresponding to each target web component and the component selection information;
the first generation unit is used for generating a page description file based on the component information of each target web component and the nesting relation among the target web components;
and the second generating unit is used for loading the page description file in a preset editor so as to render each target web component through the page description file and generate a web page.
7. The apparatus of claim 6, further comprising:
the building unit is used for acquiring each component source code uploaded to the component editing platform; calling a preset component construction tool, compiling each component source code, and obtaining a code file corresponding to each component source code; and compressing and packaging the code files to obtain a web component corresponding to the source code of each component, storing each web component into a Content Delivery Network (CDN) of a component editing platform, and generating a unique resource address corresponding to each web component.
8. The apparatus of claim 7, further comprising:
the change unit is used for determining the web component corresponding to the component change message when the component change message is received; acquiring the component parameters contained in the component change message; and adjusting the web component corresponding to the component change message by applying the component parameter to obtain the component version of the web component corresponding to the component change message.
9. The apparatus of claim 8, wherein the first determining unit comprises:
the first determining subunit is configured to acquire each piece of identification information included in the component selection information, and determine a web component corresponding to each piece of identification information as a target web component;
a checking subunit, configured to check whether each piece of identification information includes a version identification number, where the version identification number is used to indicate a component version of a target web component corresponding to identification information to which the version identification number belongs;
the first obtaining subunit is configured to determine, if any identification information includes a version identification number, that a component version corresponding to the version identification number is a target version; acquiring a unique resource address corresponding to the target version, and acquiring a component version corresponding to the identification information as a target web component of the target version through the unique resource address corresponding to the target version;
the second acquiring subunit is configured to determine, if any identification information does not include a version identification number, the latest version of the target web component corresponding to the identification information; and acquiring the unique resource address corresponding to the latest version, and acquiring the component version corresponding to the identification information as the target web component of the latest version through the unique resource address corresponding to the latest version.
10. The apparatus of claim 6, wherein the second determining unit comprises:
the second determining subunit is used for dragging each target web component to a preset page editor, and determining an initial nesting relationship among the target web components according to the position identifier corresponding to each target web component;
the generating subunit is used for generating a page tree corresponding to each target web component based on the initial nesting relation among the target web components;
the change subunit is configured to acquire a location parameter corresponding to each target web component in the component selection information, and change a location identifier corresponding to each target web component according to the location parameter corresponding to each target web component;
and the third determining subunit is used for adjusting the position of each target web component in the page tree based on each changed position identifier so as to determine a new nesting relationship between the target web components.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110192551.2A CN112925513A (en) | 2021-02-20 | 2021-02-20 | Web page construction method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110192551.2A CN112925513A (en) | 2021-02-20 | 2021-02-20 | Web page construction method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112925513A true CN112925513A (en) | 2021-06-08 |
Family
ID=76169974
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110192551.2A Pending CN112925513A (en) | 2021-02-20 | 2021-02-20 | Web page construction method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112925513A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113434472A (en) * | 2021-06-25 | 2021-09-24 | 平安国际智慧城市科技股份有限公司 | File generation method and device, server and storage medium |
| CN113590100A (en) * | 2021-09-28 | 2021-11-02 | 深圳市信润富联数字科技有限公司 | Front-end interface processing method, system, electronic equipment and storage medium |
| CN114691135A (en) * | 2022-03-25 | 2022-07-01 | 北京金堤科技有限公司 | Page construction method and device, storage medium and electronic equipment |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107908399A (en) * | 2017-11-14 | 2018-04-13 | 山东浪潮通软信息科技有限公司 | A kind of page development method and device |
| CN108108194A (en) * | 2016-11-24 | 2018-06-01 | 腾讯科技（深圳）有限公司 | User interface edit methods and user interface editing machine |
| CN109299422A (en) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | Visualize page authoring method, system, equipment and storage medium |
| CN109508191A (en) * | 2018-11-22 | 2019-03-22 | 北京腾云天下科技有限公司 | A kind of code generating method and system |
| CN110442336A (en) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | A kind of web development methods and device, storage medium and electronic equipment |
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
-
2021
- 2021-02-20 CN CN202110192551.2A patent/CN112925513A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108108194A (en) * | 2016-11-24 | 2018-06-01 | 腾讯科技（深圳）有限公司 | User interface edit methods and user interface editing machine |
| CN107908399A (en) * | 2017-11-14 | 2018-04-13 | 山东浪潮通软信息科技有限公司 | A kind of page development method and device |
| CN109299422A (en) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | Visualize page authoring method, system, equipment and storage medium |
| CN109508191A (en) * | 2018-11-22 | 2019-03-22 | 北京腾云天下科技有限公司 | A kind of code generating method and system |
| CN110442336A (en) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | A kind of web development methods and device, storage medium and electronic equipment |
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113434472A (en) * | 2021-06-25 | 2021-09-24 | 平安国际智慧城市科技股份有限公司 | File generation method and device, server and storage medium |
| CN113590100A (en) * | 2021-09-28 | 2021-11-02 | 深圳市信润富联数字科技有限公司 | Front-end interface processing method, system, electronic equipment and storage medium |
| CN114691135A (en) * | 2022-03-25 | 2022-07-01 | 北京金堤科技有限公司 | Page construction method and device, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112925513A (en) | Web page construction method and device | |
| US11389960B2 (en) | Systems and methods for robotic process automation | |
| CN111563220A (en) | Business website project construction method and device, computer equipment and storage medium | |
| CN111580926A (en) | Model publishing method, model deploying method, model publishing device, model deploying device, model publishing equipment and storage medium | |
| CN101944032A (en) | Microware updating method, client, server and system | |
| CN111399840B (en) | Module development method and device | |
| CN108897543B (en) | Temporary compiling system, method, device and storage medium of version | |
| CN111428170B (en) | Web page rendering method and device | |
| CN111068328A (en) | Game advertisement configuration table generation method, terminal device and medium | |
| CN111142884A (en) | Applet version deployment method and device, electronic equipment and storage medium | |
| CN115480801A (en) | Multi-project development, deployment and operation method and system based on Vue framework | |
| CN111443923A (en) | Service publishing method and device | |
| CN110109684B (en) | Block chain link point management proxy service installation method, electronic device and storage medium | |
| CN114691132A (en) | ARXML file generation method, device, equipment and storage medium | |
| CN114912897A (en) | Workflow execution method, workflow arrangement method and electronic equipment | |
| CN112860251A (en) | Method and system for constructing website front end | |
| CN112416384A (en) | Software upgrading method and device and computer equipment | |
| CN112235132A (en) | Method, device, medium and server for dynamically configuring service | |
| CN109871560B (en) | Method and device for operating target model | |
| CN115794214A (en) | Application module metadata management method, device, storage medium and device | |
| CN112181409A (en) | Application construction method, application rendering method and device | |
| CN113568758B (en) | GPU resource pooling method, system, device and computer readable storage medium | |
| CN114721681A (en) | Configuration file updating method, device, equipment and storage medium | |
| CN114816418A (en) | Method, device, equipment and medium for building embedded operating system | |
| CN113326052A (en) | Method and device for upgrading service component, computer equipment and storage medium |
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 |