CN111177621A - Web page development method, device and system - Google Patents

Web page development method, device and system Download PDF

Info

Publication number
CN111177621A
CN111177621A CN201911340159.7A CN201911340159A CN111177621A CN 111177621 A CN111177621 A CN 111177621A CN 201911340159 A CN201911340159 A CN 201911340159A CN 111177621 A CN111177621 A CN 111177621A
Authority
CN
China
Prior art keywords
web page
vue
vue component
json file
node
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201911340159.7A
Other languages
Chinese (zh)
Other versions
CN111177621B (en
Inventor
瞿靖坤
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Reach Best Technology Co Ltd
Original Assignee
Reach Best Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Reach Best Technology Co Ltd filed Critical Reach Best Technology Co Ltd
Priority to CN201911340159.7A priority Critical patent/CN111177621B/en
Publication of CN111177621A publication Critical patent/CN111177621A/en
Application granted granted Critical
Publication of CN111177621B publication Critical patent/CN111177621B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

The disclosure relates to a web page development method, a device, an electronic device and a storage medium, which are used for at least solving the problem that the web page development and update efficiency is low due to the fact that a large amount of repeated code compiling is needed in the web page development and update process in the related technology and the web page development and update needs to be recompiled and online after each modification, and the method comprises the following steps: determining the page requirements of the web page to be developed according to the received web page development request; creating a json file corresponding to the web page to be developed according to the page requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component; determining a vue component set for rendering the web page to be developed according to the unique identification of the vue component carried by each node in the json file, and generating the web page by utilizing each vue component in the vue component set.

Description

Web page development method, device and system
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method, an apparatus, and a system for web page development.
Background
With the rapid development of internet information technology, terminal devices are increasingly popularized, and more Application programs (APPs) for the terminal devices are developed, so that the lives of people are greatly enriched, and the terminal devices gradually become an indispensable part of the work and the life of people.
And also because APP and people's daily life relation are more and more inseparable, also lead to the user to the higher and higher requirement that APP page demonstrates from another side. In order to bring better use experience to users, the front-end development requirements of APP development enterprises for web pages are becoming higher and higher.
In the development process of the application program, front-end development is an indispensable ring. The front-end development refers to a process of creating a front-end interface such as a webpage or an application program and presenting the front-end interface to a user, and the main function of the front-end development is to present the interface of an internet product to the user in a better and more convenient manner, and the user interface interaction of the internet product is realized through various technologies, frames, solutions and the like derived from hypertext markup language (HTML), Cascading Style Sheet (CCS) tools, scripting language (JavaScript) and the like.
The web page development process of the traditional internet product mainly comprises the following steps: 1. drawing a page image file by a designer; 2. manually analyzing the image file to determine a page style layout; 3. writing a code description page style layout; 4. and converting the written codes into page configuration information, such as view layer codes, which can be executed by a graphic processor, and displaying a page corresponding to the page design data on a target terminal screen based on the page configuration information. Therefore, in the existing web page development process, a large amount of manual operation is needed in the process from page design to writing of the style layout code, and the front-end development efficiency is greatly reduced.
In addition, most of the current APP interfaces often perform some font, color, background map and text adjustment on display pages of the APP according to current festivals, hot events, current popularization activities and the like, the adjusted pages may be finished only for showing in a certain festival activity for one day, and in order to perform such page adjustment, page developers often need to write a large amount of repeated codes, and compiling and putting on the line are needed after each modification, on one hand, the enthusiasm of the developers can be consumed by a large amount of repeated tedious work, and on the other hand, the development and updating efficiency of web pages is greatly reduced.
Therefore, how to reduce a large amount of repeated code compiling in the web page development and updating process as much as possible and avoid compiling on-line after each modification so as to improve the development efficiency of the web page as much as possible becomes a problem to be solved in the prior art.
Disclosure of Invention
The invention provides a web page development method, a device and a system, which are used for at least solving the problem that the web page development and update efficiency is low because a large amount of repeated code compiling is needed in the web page development and update process in the related technology and the web page development and update needs to be recompiled online after each modification. The technical scheme of the disclosure is as follows:
according to a first aspect of the embodiments of the present disclosure, there is provided a web page development method, including:
determining the page requirements of the web page to be developed according to the received web page development request; creating a json file corresponding to the web page to be developed according to the page requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component; determining a vue component set for rendering the web page to be developed according to the unique identification of the vue component carried by each node in the json file, and generating the web page by rendering each vue component in the vue component set.
In one embodiment, a vue component set corresponding to the page requirement is determined, and a unique identifier of each vue component in the vue set is determined; determining style information and attribute information corresponding to each vue component in the vue set according to the page requirement; and creating a unique identifier of each node in the json file according to the unique identifier of each vue component in the vue component set, and writing style information and attribute information corresponding to each vue component in the vue set into the corresponding node of the json file.
In one embodiment, determining a vue component set for rendering the web page to be developed according to the unique identifier of vue components carried by each node in the json file, and generating a web page by rendering each vue component in the vue component set includes: traversing the json file, and respectively determining vue components corresponding to each node in the json file according to the unique identifier of each node in the json file; determining vue components corresponding to each node in the json file as a vue component set for rendering the web page to be developed, and generating the web page by utilizing each vue component in the vue component set.
In one embodiment, generating a web page using each vue component rendering in the vue component set comprises: respectively determining style information and attribute information corresponding to each vue component in the vue component set according to the style information and the attribute information contained in each node in the json file; each vue component in the vue component set renders a generated web page using the corresponding style information and attribute information.
In one embodiment, creating a json file corresponding to the web page to be developed includes: and creating a json file corresponding to the identity field according to the identity field of the web page query parameter to be developed.
According to a second aspect of the embodiments of the present disclosure, there is provided a web page updating method, including:
determining the updating requirement of the web page to be updated according to the received web page updating request;
modifying a json file corresponding to the web page to be updated according to the updating requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component;
determining an updated vue component set for updating the web page to be updated according to unique identifiers of vue components carried by nodes in the modified json file, and rendering and updating the web page to be updated by using each updated vue component in the updated vue component set.
In an embodiment, modifying the json file corresponding to the web page to be updated according to the update requirement includes: determining a json file corresponding to the web page to be updated according to the identity field of the query parameter of the web page to be updated; determining an updated vue component set corresponding to the update requirement, and determining a unique identifier of each updated vue component in the updated vue set; determining updated style information and updated attribute information corresponding to each updated vue component in the updated vue component set according to the updating requirement; modifying the unique identifier of each node in the json file according to the updated vue component set, so that the modified unique identifier of each node in the json file corresponds to the updated unique identifier of each vue component in the updated vue component set; and modifying the style information and the attribute information contained in each node in the json file according to the updated style information and the updated attribute information.
In one embodiment, rendering and updating the web page to be updated using each updated vue component of the set of updated vue components includes: respectively determining style information and attribute information corresponding to each updated vue component in the updated vue component set according to style information and attribute information contained in each node in the modified json file; each updated vue component in the updated vue component set renders and updates the web page to be updated using the corresponding style information and the attribute information.
According to a third aspect of the embodiments of the present disclosure, there is provided a web page development apparatus including:
the demand determining unit is configured to execute the step of determining the page demand of the web page to be developed according to the received web page development request; the file creating unit is configured to execute creating a json file corresponding to the web page to be developed according to the page requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component; and the rendering unit is configured to determine a vue component set used for rendering the web page to be developed according to the unique identification of the vue component carried by each node in the json file, and generate the web page by rendering each vue component in the vue component set.
In one embodiment, the file creation unit is specifically configured to perform: determining vue component sets corresponding to the page requirements, and determining unique identifiers of vue components in the vue set; determining style information and attribute information corresponding to each vue component in the vue set according to the page requirement; and creating a unique identifier of each node in the json file according to the unique identifier of each vue component in the vue component set, and writing style information and attribute information corresponding to each vue component in the vue set into the corresponding node of the json file.
In one embodiment, the rendering unit is specifically configured to perform: traversing the json file, and respectively determining vue components corresponding to each node in the json file according to the unique identifier of each node in the json file; determining vue components corresponding to each node in the json file as a vue component set for rendering the web page to be developed, and generating the web page by utilizing each vue component in the vue component set.
In one embodiment, the rendering unit is specifically configured to perform: respectively determining style information and attribute information corresponding to each vue component in the vue component set according to the style information and the attribute information contained in each node in the json file; each vue component in the vue component set renders a generated web page using the corresponding style information and attribute information.
In one embodiment, the stable file creating unit is specifically configured to perform: and creating a json file corresponding to the identity field according to the identity field of the web page query parameter to be developed.
According to a fourth aspect of the embodiments of the present disclosure, there is provided a web page updating apparatus, including:
the updating demand confirming unit is configured to execute the step of determining the updating demand of the web page to be updated according to the received web page updating request; the file modification unit is configured to modify a json file corresponding to the web page to be updated according to the update requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component; and the updating unit is configured to determine a vue component set used for updating the web page to be updated according to the unique identification of vue components carried by each node in the modified json file, and render and update the web page to be updated by using each vue component in the vue component set.
In one embodiment, the file modification unit is specifically configured to perform: determining a json file corresponding to the web page to be updated according to the identity field of the query parameter of the web page to be updated; determining an updated vue component set corresponding to the update requirement, and determining a unique identifier of each updated vue component in the updated vue set; determining updated style information and updated attribute information corresponding to each updated vue component in the updated vue component set according to the updating requirement; modifying the unique identifier of each node in the json file according to the updated vue component set, so that the modified unique identifier of each node in the json file corresponds to the updated unique identifier of each vue component in the updated vue component set; and modifying the style information and the attribute information contained in each node in the json file according to the updated style information and the updated attribute information.
In one embodiment, the update unit is specifically configured to perform: respectively determining style information and attribute information corresponding to each updated vue component in the updated vue component set according to style information and attribute information contained in each node in the modified json file; each updated vue component in the updated vue component set renders and updates the web page to be updated using the style information and the attribute information.
According to a fifth aspect of embodiments of the present disclosure, there is provided a web page development electronic device, including:
a processor;
a memory for storing the processor-executable instructions;
wherein the processor is configured to execute the instructions to implement any of the web page development method steps of the first aspect.
According to a sixth aspect of the embodiments of the present disclosure, there is provided a web page updating electronic device, including:
a processor;
a memory for storing the processor-executable instructions;
wherein the processor is configured to execute the instructions to implement the web page updating method steps of any one of the above second aspects.
According to a seventh aspect of embodiments of the present disclosure, there is provided a storage medium including:
the instructions in the storage medium, when executed by a processor of a web page development electronic device, enable the web page development electronic device to perform any of the web page development method steps of the first aspect described above.
According to an eighth aspect of embodiments of the present disclosure, there is provided a storage medium comprising:
the instructions in the storage medium, when executed by a processor of a web page updating electronic device, enable the web page updating electronic device to perform the web page updating method steps of any of the second aspects described above.
According to a ninth aspect of embodiments of the present disclosure, there is provided a computer program product comprising:
when it is run on the device, it causes the item packaging device to perform: any of the web page development method steps of the first aspect above.
According to a tenth aspect of embodiments of the present disclosure, there is provided a computer program product comprising:
when it is run on the device, it causes the item packaging device to perform: the web page updating method steps of any of the second aspect above.
The technical scheme provided by the embodiment of the disclosure at least brings the following beneficial effects:
by adopting the web page development method provided by the embodiment of the disclosure, after a web page development request is received, the page requirement of a web page to be developed can be determined firstly, and then a json file corresponding to the web page to be developed can be created according to the determined page requirement, unique identifiers of all vue components in an vue component set required for rendering the web page are recorded in the json file, so that when the web page is developed, only vue components for rendering the web page to be developed are determined according to the json file, and the vue components are utilized to render and generate the web page according to style information and attribute information recorded in the json file, and then the web page development can be completed. When the developed web page needs to be updated, only the json file corresponding to the web page needs to be determined, and the unique identifier of the corresponding node in the json file and the carried style information and attribute information are modified according to the received modification requirement, so that the codes of the whole web page do not need to be repeatedly written, the codes do not need to be compiled and online again after being modified every time, and the development and update efficiency of the web page is greatly improved.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the disclosure and are not to be construed as limiting the disclosure.
FIG. 1 is a flow diagram illustrating a method of web page development in accordance with an exemplary embodiment.
FIG. 2 is a flow diagram illustrating a web page update method in accordance with an exemplary embodiment.
FIG. 3 is a block diagram illustrating a web page development apparatus in accordance with an exemplary embodiment.
FIG. 4 is a block diagram illustrating a web page update apparatus according to an example embodiment.
FIG. 5 is a block diagram illustrating a web page development electronic device, according to an example embodiment.
Detailed Description
In order to make the technical solutions of the present disclosure better understood by those of ordinary skill in the art, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.
It should be noted that the terms "first," "second," and the like in the description and claims of the present disclosure and in the above-described drawings are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the disclosure described herein are capable of operation in sequences other than those illustrated or otherwise described herein. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.
Technical solutions provided by embodiments of the present disclosure are described in detail below with reference to the accompanying drawings.
The embodiment of the disclosure provides a web page development method, which is used for at least solving the problem that the web page development and update efficiency is low because a large amount of repeated code writing is needed in the web page development and update process in the related technology and recompilation is needed to be carried out on line after each modification.
The execution subject of the web page development method provided by the embodiment of the present disclosure may be, but is not limited to, at least one of a mobile phone, a tablet Computer, a Personal Computer (PC), a smart television, and any terminal device that can run an application. Alternatively, the execution subject of the method may be the application itself installed on the above-described apparatus. In addition, the execution main body of the method can also be a pre-constructed front-end application development platform.
For convenience of description, the web page development method provided by the embodiment of the disclosure is described below by taking an execution subject of the method as a pre-constructed front-end application development platform as an example. It is understood that the execution subject of the method is a pre-built front-end application development platform which is only an exemplary illustration and should not be understood as a limitation to the disclosed embodiments.
Fig. 1 is a flowchart illustrating a web page development method according to an exemplary embodiment, which is used in a development platform, as shown in fig. 1, and includes the following steps:
in step S101, determining a page requirement of a web page to be developed according to a received web page development request;
specifically, in this embodiment, the execution subject is a pre-constructed development platform on which the web page independent development process described in this embodiment is deployed, and it should be noted that in practical application, the development platform may be a traditional physical server (which needs to occupy a real physical space), or may be a virtual cloud server, which is not limited herein.
In the embodiment of the present disclosure, a web page development request received by a development platform is generally triggered by a program developer, and the developer may interact with the development platform to input a page requirement for a web page to be developed through the development platform. In the embodiment of the present disclosure, a developer may specifically access the development platform through a Web browser of a self-contained or third party in the terminal device, so as to implement interaction with the development platform. The specific page development request triggering mode and the mode of inputting the page requirement for the web page to be developed can be set by a person skilled in the art according to needs, and the specific limitation is not made here.
In addition, the page requirements for the Web page to be developed in this embodiment may be use drawings, flow charts, product prototypes, and the like of a Web front-end page designed by a requirement engineer according to project requirements, which are not listed one by one here, and are not limited thereto.
With regard to the above-mentioned use Case diagram (User Case), it specifically refers to a view for describing system functions, which is composed of participants (Actor), use cases (usedase), boundaries and relationships among them, and a model diagram of system functions that can be observed by external users (called participants) is shown in the use Case diagram.
The flow chart is an implementation flow for showing the association of each functional component and user operation in the Web front-end page in the use process of the Web front-end page.
The product prototype can be summarized into a frame design before the whole front-end application product is listed in the market in practical application. Taking website registration as an example, after the whole early interactive design flow chart, the design stage of prototype development is just followed, and in a simple way, the model, element and man-machine interaction form of the front-end page is expressed more specifically and vividly under the condition that the product is separated from the skin state by using a wire frame description method, and the functions which can be realized by the front-end application needing to be synthesized, the number of the front-end pages which the front-end application needs to contain, the style, style and attribute parameters of each page and the like can be known through the product prototype.
In step S102, creating a json file corresponding to the web page to be developed according to the page requirement determined by executing step 101;
in an embodiment, the unique identifier of the json file, which is created by the development platform and corresponds to the web page to be developed, may be determined according to an id field of a Query parameter (Query parameter) of the web page to be developed. And then, when the web page is updated subsequently, the json file corresponding to the web page can be quickly determined according to the id field of the query parameter of the web page.
In the embodiment of the disclosure, the json file corresponding to the web page to be developed is created, so that the requirement information of the web page to be developed is recorded through the json file, and then the components and related parameters required for rendering the web page can be determined through the json file subsequently, and meanwhile, page modification can be rapidly realized according to the json file subsequently when the web page is updated. In order to achieve the above object, when creating a json file corresponding to a web page to be developed, it is necessary to determine relevant information of the web page to be developed according to a development requirement of the web page, and record the relevant information in the json file.
In one embodiment, creating a json file corresponding to a web page to be developed may specifically include: determining vue component sets corresponding to the page requirements, and determining unique identifiers of vue components in the vue set; determining style information and attribute information corresponding to each vue component in the vue set according to the page requirement; and creating a unique identifier of each node in the json file according to the unique identifier of each vue component in the vue component set, and writing style information and attribute information corresponding to each vue component in the vue set into the corresponding node of the json file.
Vue is a set of progressive JavaScript development framework for constructing a user interface, and the core library Vue focuses only on the view layer and has the characteristic of data-driven view change. Different vue components can display data contents in different formats, and realize different functions in a web page, for example, according to development requirements, a web page to be developed includes four parts, namely an image display area, a video display area, an audio display area and a text display area, the image display area in the web page to be developed is rendered by an "image vue component", the video display area is rendered by a "video vue component", the audio display area is rendered by an "audio vue component", and so on. Therefore, by executing step S101, after the development platform receives the page development request carrying the page requirement, the vue component set required to be used in developing the web page can be determined according to the design of the page designer related to the web page style to be developed in the page requirement.
For example, the development platform determines the style of the page to be developed as follows according to the page requirement carried in the received page development request: the system consists of two image display areas, a video display area, two character display areas and 5 display modules in total. Then, based on the page requirements of the web page, the development platform may determine that the vue component set consisting of two "image vue components," one "video vue component," and two "text vue components" may be the vue component set that is needed to be used when developing the web page.
After the development platform determines the vue component set required to be used for developing the web page according to the page requirement, the number of nodes of the json file and the corresponding id of each node can be determined according to the vue component contained in the vue component set. For example, the development platform determines the vue component set that needs to be used to develop the web page including: an "image vue component", a "video vue component", and two "text vue components", which total 4 vue components, so that when creating a json file, the development platform can write four nodes for the json file, where each node corresponds to one vue component in the vue component set.
In order to distinguish the correspondence between each node in the json file and each vue component in the vue component set, after determining the vue component set required to be used for developing the web page, the development platform may set a unique id for each component in the component set, where, for example, the id of the "image vue component" is: the id of a1 and the id of a "video vue component" are b1, the id of the first "text vue component" is c1, and the id of the second "text vue component" is c2, so that when a json file is created by a subsequent development platform, the id of each node in the json file can be set according to the id of the vue component, and then the id of each node in the json file can be sequentially set as: a1, b1, c1 and c 2.
Meanwhile, the development platform can also determine the display style parameters such as the position, the size, the color and the like of each display module in the web page to be developed according to the page requirements, and then the development platform can write the page style parameters into specific nodes in corresponding json files, so that page rendering can be carried out subsequently by using vue components according to the page style parameters. Still in the above example, it is assumed that the developing platform determines the style parameter of the "image display area" of the web page to be developed according to the page requirement as follows: "position (a)1,b1) Color: green ", which may be rendered by" image vue component "a 1; the style parameters of the "video presentation area" are: "position (a)2,b3) Color: red ", which may be rendered by" video vue component "b 1; the style parameters of the "text display area 1" are: "position (a)3,b4) Color: blue ", which may be rendered by" text vue component "c 1; the style parameters of the "text display area 2" are: "position (a)5,b7) Color: purple, "which may be rendered by" text vue component "c 2. The json file created by the development platform may contain id: four nodes of a1, b1, c1 and c2, wherein the node a1 comprises the style parameters: "position (a)1,b1) Color: green "; node b1 contains the style parameter: "position (a)2,b3) Color: red color'(ii) a Node c1 contains the style parameter: "position (a)3,b4) Color: blue "; node c2 contains the style parameter: "position (a)5,b7) Color: purple color ".
In step S103, a vue component set for rendering the web page to be developed is determined according to the unique identifier of vue components carried by each node in the json file created by executing step S102, and each vue component in the vue component set is used for rendering and generating the web page.
After the development platform completes creation of a json file corresponding to a web page to be developed, the development platform traverses the json file, and then determines an vue component for rendering the web page according to an id of each node in the json file, specifically, in an embodiment, a vue component for rendering the web page to be developed may be determined from the json file in the following manner: traversing the json file, and respectively determining vue components corresponding to each node in the json file according to the unique identifier of each node in the json file; determining vue components corresponding to each node in the json file as a vue component set for rendering the web page to be developed, and generating the web page by utilizing each vue component in the vue component set.
Generally, each Vue component records each attribute item of the component in the form of a configuration file, and the vue component generates a corresponding web page presentation module by assigning values to the attribute items. In this embodiment of the present disclosure, the development platform may extract a style parameter from each node in the json file, as a parameter value of each attribute item corresponding to the vue component, specifically, the method provided in this embodiment of the present disclosure may include: respectively determining style information and attribute information corresponding to each vue component in the vue component set according to the style information and the attribute information contained in each node in the json file; each vue component in the vue component set renders a generated web page using the corresponding style information and attribute information.
In one embodiment, assume that the "image vue component" determined from node a1 in the json file includes "attribute item a: position "and"attribute item b: color ", the development platform may further determine the style parameter as" location (a) from node a1 of json file1,b1) Color: green ", and the development platform may assign the" image vue component "attribute item a to: "position (a)1,b1) ", assign the" image vue component "attribute item b to: "color: green ", and rendering of the image presentation area may be accomplished with the assigned style parameter via the" image vue component ". And the development platform can generate various display modules of the web page through the vue component rendering determined according to the json file, and can generate the complete web page through splicing the display modules.
Since the web page development process is implemented based on the Vue component, the Vue component's goal is to implement the binding of data and view components through as simple an API as possible so that the data and views are associated. Further, the Document Object Model (DOM) operation of the bottom layer on the webpage is shielded, and the development difficulty of the web page is greatly reduced.
By adopting the web page development method provided by the embodiment of the disclosure, after a web page development request is received, the page requirement of a web page to be developed can be determined firstly, and then a json file corresponding to the web page to be developed can be created according to the determined page requirement, unique identifiers of all vue components in an vue component set required for rendering the web page are recorded in the json file, so that when the web page is developed, only vue components for rendering the web page to be developed are determined according to the json file, and the vue components are utilized to render and generate the web page according to style information and attribute information recorded in the json file, and then the web page development can be completed. When the developed web page needs to be updated, only the json file corresponding to the web page needs to be determined, and the unique identifier of the corresponding node in the json file and the carried style information and attribute information are modified according to the received modification requirement, so that the codes of the whole web page do not need to be repeatedly written, the codes do not need to be compiled and online again after being modified every time, and the development and update efficiency of the web page is greatly improved.
FIG. 2 is a flow diagram illustrating a web page update method, as shown in FIG. 2, for use in a development platform, including the steps of:
in step S201, the development platform may determine an update requirement of the web page to be updated according to the received web page update request;
in the embodiment of the present disclosure, the web page update request received by the development platform is generally triggered by a program developer, and the developer may interact with the development platform to input a page requirement for the web page to be developed through the development platform. In the embodiment of the present disclosure, a developer may specifically access the development platform through a Web browser of a self-contained or third party in the terminal device, so as to implement interaction with the development platform. The specific page update request triggering mode and the mode of inputting the update requirement for the web page to be updated may be set by a person skilled in the art according to the need, and are not limited specifically here.
In addition, aiming at the updating requirement of the web page to be updated, a requirement engineer can modify the content such as the style, the color, the background and the like of the original web page according to the project requirement.
In step S202, the development platform may modify a json file corresponding to the web page to be updated according to the update requirement determined by executing step S201;
in an embodiment, the development platform may determine which newly added display modules are added in the updated web page and which original display modules are adjusted according to the update requirement, and then the development platform may determine the json file corresponding to the web page according to the id field of the query parameter of the web page to be updated, and modify the json file according to the update requirement.
In the embodiment of the present disclosure, the json file may be specifically updated by the following method: determining a json file corresponding to the web page to be updated according to the identity field of the query parameter of the web page to be updated; determining an updated vue component set corresponding to the update requirement, and determining a unique identifier of each updated vue component in the updated vue set; determining updated style information and updated attribute information corresponding to each updated vue component in the updated vue component set according to the updating requirement; modifying the unique identifier of each node in the json file according to the updated vue component set, so that the modified unique identifier of each node in the json file corresponds to the updated unique identifier of each vue component in the updated vue component set; and modifying the style information and the attribute information contained in each node in the json file according to the updated style information and the updated attribute information.
For example, assume that the original web page includes: the system comprises an image display area, a video display area and an audio display area, wherein the development platform determines that an image display area is added to an updated web page according to an updating requirement, and adjusts the position of the video display area in the web page, so that the development platform can add a node in a json file corresponding to the web page, wherein the id of the added node corresponds to an added 'image vue component', and the node comprises the style parameter of the added image display area; meanwhile, the development platform can adjust the position parameters in the style parameters contained in the nodes corresponding to the video vue components in the json file so as to modify the json file.
In step S203, the development platform may render vue components to update the web page to be updated according to the json file modified by performing step S102 to determine vue components for updating the web page to be updated.
And the development platform determines vue components for rendering the web page according to the id of each node in the modified json file by traversing the modified json file, and renders and updates the web page by using the vue components and the sample parameters contained in each node in the modified json file.
Specifically, in the disclosed embodiment, the update of the web page may be accomplished by: respectively determining style information and attribute information corresponding to each updated vue component in the updated vue component set according to style information and attribute information contained in each node in the modified json file; each updated vue component in the updated vue component set renders and updates the web page to be updated with the corresponding style information and the attribute information
By adopting the web page updating method provided by the embodiment of the disclosure, after a web page updating request is received, the development platform only needs to determine the json file corresponding to the web page to be updated, and modifies the unique identifier of the corresponding node in the json file and the carried style information and attribute information according to the received modification requirement, without repeatedly writing the code of the whole web page or compiling again after modifying the code every time, so that the development and updating efficiency of the web page is greatly improved.
FIG. 3 is a block diagram illustrating a web page development apparatus, according to an example embodiment. Referring to fig. 3, the apparatus includes a requirement determining unit 121, a file creating unit 122, and a rendering unit 123.
The requirement determining unit 121 is configured to perform determining a page requirement of a web page to be developed according to the received web page development request;
the file creating unit 122 is configured to execute creating a json file corresponding to the web page to be developed according to the page requirement, where each node in the json file carries a unique identifier of a corresponding vue component;
the rendering unit 123 is configured to determine a vue component set for rendering the web page to be developed according to the unique identifier of the vue component carried by each node in the json file, and generate the web page by rendering each vue component in the vue component set.
In an embodiment, the file creating unit 122 is specifically configured to perform determining vue component sets corresponding to the page requirement, and determining unique identifiers of vue components in the vue set; determining style information and attribute information corresponding to each vue component in the vue set according to the page requirement; and creating a unique identifier of each node in the json file according to the unique identifier of each vue component in the vue component set, and writing style information and attribute information corresponding to each vue component in the vue set into the corresponding node of the json file.
In an embodiment, the rendering unit 123 is specifically configured to execute traversal of the json file, and determine vue components corresponding to each node in the json file according to the unique identifier of each node in the json file; determining vue components corresponding to each node in the json file as a vue component set for rendering the web page to be developed, and generating the web page by utilizing each vue component in the vue component set.
In an embodiment, the rendering unit 123 is specifically configured to determine style information and attribute information corresponding to each vue component in the vue component set according to style information and attribute information contained in each node in the json file; each vue component in the vue component set renders a generated web page using the corresponding style information and attribute information.
In an embodiment, the file creating unit 122 is specifically configured to execute the step of creating a json file corresponding to the identification field according to the identification field of the query parameter of the web page to be developed.
With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.
By adopting the web page development device provided by the embodiment of the disclosure, after a web page development request is received, firstly, the page requirement of a web page to be developed can be determined, and then a json file corresponding to the web page to be developed can be created according to the determined page requirement, unique identifiers of all vue components in an vue component set required for rendering the web page are recorded in the json file, so that when the web page is developed, only vue components for rendering the web page to be developed are determined according to the json file, and the web page is generated by rendering according to style information and attribute information recorded in the json file by using the vue components, and then the web page development can be completed. When the developed web page needs to be updated, only the json file corresponding to the web page needs to be determined, and the unique identifier of the corresponding node in the json file and the carried style information and attribute information are modified according to the received modification requirement, so that the codes of the whole web page do not need to be repeatedly written, the codes do not need to be compiled and online again after being modified every time, and the development and update efficiency of the web page is greatly improved.
FIG. 4 is a block diagram illustrating a web page update apparatus according to an example embodiment. Referring to fig. 4, the apparatus includes an update requirement confirming unit 221, a file modifying unit 222, and an updating unit 223.
The update requirement confirming unit 221 is configured to determine an update requirement of the web page to be updated according to the received web page update request;
the file modifying unit 222 is configured to modify a json file corresponding to the web page to be updated according to the update requirement, where each node in the json file carries a unique identifier of a corresponding vue component;
the updating unit 223 is configured to determine a vue component set for updating the web page to be updated according to the unique identifier of the vue component carried by each node in the modified json file, and render and update the web page to be updated by using each vue component in the vue component set.
In an embodiment, the file modifying unit 222 is specifically configured to execute determining a json file corresponding to the web page to be updated according to the identity field of the query parameter of the web page to be updated; determining an updated vue component set corresponding to the update requirement, and determining a unique identifier of each updated vue component in the updated vue set; determining updated style information and updated attribute information corresponding to each updated vue component in the updated vue component set according to the updating requirement; modifying the unique identifier of each node in the json file according to the updated vue component set, so that the modified unique identifier of each node in the json file corresponds to the updated unique identifier of each vue component in the updated vue component set; and modifying the style information and the attribute information contained in each node in the json file according to the updated style information and the updated attribute information.
In an embodiment, the updating unit 223 is specifically configured to determine style information and attribute information corresponding to each updated vue component in the updated vue component set according to the style information and attribute information included in each node in the modified json file; each updated vue component in the updated vue component set renders and updates the web page to be updated using the style information and the attribute information.
With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.
By adopting the web page updating device provided by the embodiment of the disclosure, after a web page updating request is received, the development platform only needs to determine the json file corresponding to the web page to be updated, and modifies the unique identifier of the corresponding node in the json file and the carried style information and attribute information according to the received modification requirement, without repeatedly writing the code of the whole web page or compiling again after modifying the code every time, so that the development and updating efficiency of the web page is greatly improved.
FIG. 5 is a block diagram illustrating an electronic device 500 for web page development in accordance with an exemplary embodiment. Referring to fig. 5, at a hardware level, the web page development electronic device includes a processor 520, and optionally further includes an internal bus 530, a network interface 510, and a memory. The Memory may include a Memory 540, such as a Random-Access Memory (RAM), and a non-volatile Memory 550 (e.g., at least 1 disk Memory). Of course, the electronic device may also include hardware required for other services.
The processor 520, the network interface 510, and the memory may be connected to each other by an internal bus 530, which may be an ISA (Industry Standard Architecture) bus, a PCI (peripheral component Interconnect) bus, an EISA (Extended Industry Standard Architecture) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one double-headed arrow is shown in FIG. 5, but this does not indicate only one bus or one type of bus.
And the memory is used for storing programs. In particular, the program may include program code comprising computer operating instructions. The memory may include both memory and non-volatile storage and provides instructions and data to the processor.
The processor reads the corresponding computer program from the nonvolatile memory into the memory and then runs the computer program to form the page development device on the logic level. The processor is used for executing the program stored in the memory and is specifically used for executing the following operations:
determining the page requirements of the web page to be developed according to the received web page development request;
creating a json file corresponding to a web page to be developed according to the page requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component;
determining a vue component set for rendering the web page to be developed according to the unique identification of the vue component carried by each node in the json file, and generating the web page by utilizing each vue component in the vue component set.
The method performed by the web page development electronic device disclosed in the embodiment of fig. 5 of the present disclosure may be applied to or implemented by a processor. The processor may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or instructions in the form of software. The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but also Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components. The various methods, steps, and logic blocks disclosed in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present application may be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software module may be located in ram, flash memory, rom, prom, or eprom, registers, etc. storage media as is well known in the art. The storage medium is located in a memory, and a processor reads information in the memory and completes the steps of the method in combination with hardware of the processor.
The electronic device may also perform the method of fig. 1 and implement the functionality of the web page development apparatus in the embodiment shown in fig. 1. In addition, the electronic device may also execute the method of fig. 2 and implement the function of the web update apparatus in the embodiment shown in fig. 2, which is not described herein again in this disclosure.
Of course, besides the software implementation, the electronic device of the present disclosure does not exclude other implementations, such as logic devices or a combination of software and hardware, and the like, that is, the execution main body of the following processing flow is not limited to each logic unit, and may also be hardware or logic devices.
In an exemplary embodiment, a storage medium comprising instructions, such as a memory comprising instructions, executable by the processor 520 of the electronic device 500 to perform the above-described method is also provided. Alternatively, the storage medium may be a non-transitory computer readable storage medium, which may be, for example, a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims (10)

1. A web page development method, comprising:
determining the page requirements of the web page to be developed according to the received web page development request;
creating a json file corresponding to the web page to be developed according to the page requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component;
determining a vue component set for rendering the web page to be developed according to the unique identification of the vue component carried by each node in the json file, and generating the web page by utilizing each vue component in the vue component set.
2. The web page development method according to claim 1, wherein creating a json file corresponding to the web page to be developed according to the page requirement includes:
determining vue component sets corresponding to the page requirements, and determining unique identifiers of vue components in the vue set;
determining style information and attribute information corresponding to each vue component in the vue set according to the page requirement;
and creating a unique identifier of each node in the json file according to the unique identifier of each vue component in the vue component set, and writing style information and attribute information corresponding to each vue component in the vue set into the corresponding node of the json file.
3. The web page development method of claim 2, wherein a vue component set for rendering the web page to be developed is determined according to unique identifiers of vue components carried by nodes in the json file, and a web page is generated by rendering each vue component in the vue component set, the method comprising:
traversing the json file, and respectively determining vue components corresponding to each node in the json file according to the unique identifier of each node in the json file;
determining vue components corresponding to each node in the json file as a vue component set for rendering the web page to be developed, and generating the web page by utilizing each vue component in the vue component set.
4. The web page development method of claim 3, wherein generating a web page using each vue component rendering of the vue component set comprises:
respectively determining style information and attribute information corresponding to each vue component in the vue component set according to the style information and the attribute information contained in each node in the json file;
each vue component in the vue component set renders a generated web page using the corresponding style information and attribute information.
5. The web page development method according to claim 1, wherein creating a json file corresponding to the web page to be developed comprises:
and creating a json file corresponding to the identity field according to the identity field of the web page query parameter to be developed.
6. A web page update method, comprising:
determining the updating requirement of the web page to be updated according to the received web page updating request;
modifying a json file corresponding to the web page to be updated according to the updating requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component;
determining an updated vue component set for updating the web page to be updated according to unique identifiers of vue components carried by nodes in the modified json file, and rendering and updating the web page to be updated by using each updated vue component in the updated vue component set.
7. A web page development apparatus, comprising:
the demand determining unit is configured to execute the step of determining the page demand of the web page to be developed according to the received web page development request;
the file creating unit is configured to execute creating a json file corresponding to the web page to be developed according to the page requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component;
and the rendering unit is configured to determine a vue component set used for rendering the web page to be developed according to the unique identification of the vue component carried by each node in the json file, and generate the web page by rendering each vue component in the vue component set.
8. A web page updating apparatus, comprising:
the updating demand confirming unit is configured to execute the step of determining the updating demand of the web page to be updated according to the received web page updating request;
the file modification unit is configured to modify a json file corresponding to the web page to be updated according to the update requirement, wherein each node in the json file carries a unique identifier of a corresponding vue component;
and the updating unit is configured to determine a vue component set used for updating the web page to be updated according to the unique identification of vue components carried by each node in the modified json file, and render and update the web page to be updated by using each vue component in the vue component set.
9. A web page development electronic device, comprising:
a processor;
a memory for storing the processor-executable instructions;
wherein the processor is configured to execute the instructions to implement the web page development method of any of claims 1 to 5.
10. A web page update electronic device, comprising:
a processor;
a memory for storing the processor-executable instructions;
wherein the processor is configured to execute the instructions to implement the web page update method of any of claims 6 to 8.
CN201911340159.7A 2019-12-23 2019-12-23 Web page development method, device and system Active CN111177621B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911340159.7A CN111177621B (en) 2019-12-23 2019-12-23 Web page development method, device and system

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911340159.7A CN111177621B (en) 2019-12-23 2019-12-23 Web page development method, device and system

Publications (2)

Publication Number Publication Date
CN111177621A true CN111177621A (en) 2020-05-19
CN111177621B CN111177621B (en) 2024-03-08

Family

ID=70655630

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911340159.7A Active CN111177621B (en) 2019-12-23 2019-12-23 Web page development method, device and system

Country Status (1)

Country Link
CN (1) CN111177621B (en)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111796820A (en) * 2020-05-21 2020-10-20 苏宁云计算有限公司 Method and device for constructing front-end page based on integrated assembly and electronic equipment
CN111857803A (en) * 2020-07-20 2020-10-30 北京达佳互联信息技术有限公司 Page updating method, device, server and storage medium
CN112114805A (en) * 2020-08-27 2020-12-22 长沙市到家悠享网络科技有限公司 Page generation method, device and equipment
CN112433741A (en) * 2020-11-24 2021-03-02 北京奇艺世纪科技有限公司 Page processing method, device and system, electronic equipment and storage medium
CN112579242A (en) * 2020-12-23 2021-03-30 平安普惠企业管理有限公司 Page jump relation analysis method, device, equipment and storage medium
CN112433741B (en) * 2020-11-24 2024-05-17 北京奇艺世纪科技有限公司 Page processing method, device and system, electronic equipment and storage medium

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110167332A1 (en) * 2010-01-07 2011-07-07 Neopost Technologies System and Method for Generating Web Pages
CN107704234A (en) * 2017-08-22 2018-02-16 北京三快在线科技有限公司 Front end engineering construction method, device, electronic equipment and readable storage medium storing program for executing
CN108491195A (en) * 2018-01-26 2018-09-04 海尔优家智能科技(北京)有限公司 Equipment controls page generation method and system
CN108846087A (en) * 2018-06-12 2018-11-20 恒生电子股份有限公司 A kind of page rendering method, apparatus, terminal and server
CN109542427A (en) * 2018-11-30 2019-03-29 深圳市元征科技股份有限公司 A kind of system customization method, apparatus and electronic equipment and storage medium
CN109582909A (en) * 2018-12-19 2019-04-05 拉扎斯网络科技(上海)有限公司 Webpage automatic generation method, device, electronic equipment and storage medium
CN109901834A (en) * 2019-01-25 2019-06-18 平安科技(深圳)有限公司 Document file page generation method, device, computer equipment and storage medium

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110167332A1 (en) * 2010-01-07 2011-07-07 Neopost Technologies System and Method for Generating Web Pages
CN107704234A (en) * 2017-08-22 2018-02-16 北京三快在线科技有限公司 Front end engineering construction method, device, electronic equipment and readable storage medium storing program for executing
CN108491195A (en) * 2018-01-26 2018-09-04 海尔优家智能科技(北京)有限公司 Equipment controls page generation method and system
CN108846087A (en) * 2018-06-12 2018-11-20 恒生电子股份有限公司 A kind of page rendering method, apparatus, terminal and server
CN109542427A (en) * 2018-11-30 2019-03-29 深圳市元征科技股份有限公司 A kind of system customization method, apparatus and electronic equipment and storage medium
CN109582909A (en) * 2018-12-19 2019-04-05 拉扎斯网络科技(上海)有限公司 Webpage automatic generation method, device, electronic equipment and storage medium
CN109901834A (en) * 2019-01-25 2019-06-18 平安科技(深圳)有限公司 Document file page generation method, device, computer equipment and storage medium

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111796820A (en) * 2020-05-21 2020-10-20 苏宁云计算有限公司 Method and device for constructing front-end page based on integrated assembly and electronic equipment
CN111796820B (en) * 2020-05-21 2022-11-18 苏宁云计算有限公司 Method and device for constructing front-end page based on integrated assembly and electronic equipment
CN111857803A (en) * 2020-07-20 2020-10-30 北京达佳互联信息技术有限公司 Page updating method, device, server and storage medium
CN112114805A (en) * 2020-08-27 2020-12-22 长沙市到家悠享网络科技有限公司 Page generation method, device and equipment
CN112433741A (en) * 2020-11-24 2021-03-02 北京奇艺世纪科技有限公司 Page processing method, device and system, electronic equipment and storage medium
CN112433741B (en) * 2020-11-24 2024-05-17 北京奇艺世纪科技有限公司 Page processing method, device and system, electronic equipment and storage medium
CN112579242A (en) * 2020-12-23 2021-03-30 平安普惠企业管理有限公司 Page jump relation analysis method, device, equipment and storage medium
CN112579242B (en) * 2020-12-23 2023-08-11 艾普科创(北京)控股有限公司 Page jump relation analysis method, device, equipment and storage medium

Also Published As

Publication number Publication date
CN111177621B (en) 2024-03-08

Similar Documents

Publication Publication Date Title
CN111177621B (en) Web page development method, device and system
CN108228188B (en) View component processing method, electronic device and readable storage medium
CN108293081B (en) Deep linking of program playback to mobile application state through user interface events
Firtman jQuery Mobile: Up and Running: Up and Running
US20170286068A1 (en) Development support system
CN107451162A (en) Network resource accession equipment, mixing apparatus and method
CN111796823A (en) Method and device for updating page and displaying page and page maintenance system
CN111079047A (en) Web-oriented page construction system
CN110020356A (en) A kind of code generating method of page module, apparatus and system
CN111767499A (en) Page configuration method and device
CN110780868A (en) Website development method, device, equipment and storage medium based on componentized template
CN111880813B (en) Method for realizing android card UI (user interface) and storage medium
CN108170430B (en) Interface display method and system
CN110941428A (en) Website creation method and device
CN113095056B (en) Generation method, processing method, device, electronic equipment and medium
CN112214202B (en) Mobile phone program development system without writing codes
CN110020370B (en) Method and device for realizing animation in client application and framework of animation script
US11126410B2 (en) Method and apparatus for building pages, apparatus and non-volatile computer storage medium
CN112068879A (en) Method and device for constructing client application development framework based on configuration
CN111831277B (en) Virtual data generation method, system, device and computer readable storage medium
CN115080046A (en) Multi-component abstract association fusion method and device in page design
CN113868565A (en) Skin style file editing method and device
KR101987183B1 (en) Apparatus, method and server for app development supporting front-end development using app development utility
CN111435313A (en) Method and device for changing skin of software
CN113934412A (en) Program generation method, device, 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
GR01 Patent grant
GR01 Patent grant