Web page development method, device, equipment and storage medium
By uniformly managing font icon resources in web page development, the problem of project package size increases and static resource chaos is solved, and more efficient resource management and code simplification is achieved.
Patent Information
- Application Number
- CN202210513782.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-05-11
- Publication Date
- 2025-03-14
- Estimated Expiration
- 2042-05-11
AI Technical Summary
When developing web pages, the existing technology adds cuts to projects for reference and style, resulting in project package size increasing, static resource placement confusion, and adds redundant code.
A web page development method is proposed, by obtaining the target font icon resource link in the page development request, judging and replacing the font icon resource link introduction results, running the font icon update script to update the font icon folder, introducing style files, and generating the target Web page data package based on the font icon folder.
Avoid confusion in static resource placement in projects, reduce project package size, reduce the number of redundant codes, and simplify the style configuration of font icons.
Smart Images

Figure CN114895906B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of development assistance technology, and in particular to a method, device, equipment and storage medium for developing a Web page. Background Art
[0002] When developing a Web (Global Wide Area Network) page, if you need to add or modify an icon, the front-end developer will first ask the UI (interface) designer to cut the image, and then add it to the project for reference and style adjustment. Each time a new icon is introduced, the project package size increases, and style code needs to be written, which increases the redundant code of the project; different front-end developers add icons and place icons in different locations, which may lead to repeated storage of icons, increase the project package size, and cause confusion in the placement of static resources in the project, which is not conducive to the later maintenance of the project package. Summary of the invention
[0003] The main purpose of the present application is to provide a method, device, equipment and storage medium for developing a web page, aiming to solve the technical problems in the prior art of adding cutouts to a project for reference and style adjustment when developing a web page, which increases the size of the project package, causes confusion in the placement of static resources in the project, and increases redundant code in the project.
[0004] In order to achieve the above-mentioned invention object, the present application proposes a method for developing a web page, the method comprising:
[0005] Obtaining a page development request, wherein the page development request carries a target font icon resource link;
[0006] Determine whether the font icon resource link introduction result in the preset font icon update script is the same as the target font icon resource link;
[0007] If they are not the same, replacing the font icon resource link introduction result according to the target font icon resource link;
[0008] Running the font icon update script to update the font icon folder of the page development project package according to the preset font icon library;
[0009] Introducing the style file in the font icon folder into the page development project package;
[0010] In the page development engineering package, based on the font icon folder, a target Web page code input by a user is obtained;
[0011] A target Web page data packet is generated according to the font icon folder and the target Web page code.
[0012] Furthermore, the step of updating the font icon folder of the page development project package according to the preset font icon library includes:
[0013] Determine whether the font icon folder exists in the resource folder of the page development project package;
[0014] If it does not exist, create a new folder in the resource folder as the font icon folder;
[0015] According to the font icon resource link introduction result, obtaining CSS resource content from the font icon library;
[0016] Performing dependent resource link analysis on the CSS resource content;
[0017] Acquire a dependent resource file corresponding to each dependent resource link from the font icon library;
[0018] According to the link address of the font icon folder, the remote link in the CSS resource content is replaced to obtain the style file to be stored;
[0019] The font icon folder is updated according to each of the dependent resource files and the style files to be stored.
[0020] Furthermore, the step of resolving the dependent resource links of the CSS resource content includes:
[0021] Convert the CSS resource content into a string to obtain a string to be parsed;
[0022] The dependent resource link is parsed for the character string to be parsed.
[0023] Furthermore, in the page development engineering package, the step of obtaining the target Web page code input by the user based on the font icon folder includes:
[0024] In the page development engineering package, a preset code development interface display rule is used to display the interface to obtain a code development interface;
[0025] The target Web page code input by the user is obtained according to the code development interface and the font icon folder.
[0026] Furthermore, the step of acquiring the target Web page code input by the user according to the code development interface and the font icon folder includes:
[0027] Acquire the initial Web page code input by the user according to the code development interface;
[0028] According to the initial Web page code in the code development interface, obtaining a font icon introduction request input by the user, wherein the font icon introduction request carries an identifier of an element to be configured;
[0029] Obtain the element input by the user corresponding to the element identifier to be configured and add the ClassName attribute as the attribute to be configured;
[0030] Based on the font icon folder, obtaining a target font icon identifier input by the user for the attribute to be configured;
[0031] Repeating the step of obtaining the font icon introduction request input by the user according to the initial Web page code in the code development interface until a packaging signal input by the user is obtained;
[0032] In response to the packaging signal, the initial Web page code and each of the target font icon identifiers in the code development interface are used as the target Web page code.
[0033] Furthermore, the step of using the initial Web page code and each of the target font icon identifiers in the code development interface as the target Web page code includes:
[0034] Acquire a style modification request input by the user, wherein the style modification request carries one or more identifiers of elements to be modified;
[0035] In the code development interface, based on the font icon folder, the style configuration result input by the user is obtained according to the target font icon identifier of the ClassName attribute corresponding to each element identifier to be modified;
[0036] The initial Web page code, each of the target font icon identifiers and each of the style configuration results in the code development interface are used as the target Web page code.
[0037] Furthermore, in the page development engineering package, the step of obtaining the target Web page code input by the user based on the font icon folder includes:
[0038] In the page development engineering package, a code download request is obtained, wherein the code download request carries a target code identifier;
[0039] In the page development engineering package, a web page code corresponding to the target code identifier is obtained from a web page code library of a server as the web page code to be edited;
[0040] In the page development engineering package, the web page code to be edited is displayed on an interface to obtain a code development interface;
[0041] The target Web page code input by the user is obtained according to the code development interface and the font icon folder.
[0042] The present application also proposes a web page development device, the device comprising:
[0043] A request acquisition module, used to acquire a page development request, wherein the page development request carries a target font icon resource link;
[0044] A judgment module, used to judge whether the font icon resource link introduction result in the preset font icon update script is the same as the target font icon resource link;
[0045] A replacement module, used for replacing the font icon resource link introduction result according to the target font icon resource link if they are not the same;
[0046] A font icon folder update module, used to run the font icon update script and update the font icon folder of the page development project package according to a preset font icon library;
[0047] A style file import module, used to import the style file in the font icon folder into the page development project package;
[0048] A target Web page code acquisition module, which is used in the page development engineering package to acquire the target Web page code input by the user based on the font icon folder;
[0049] The target Web page data packet generating module is used to generate a target Web page data packet according to the font icon folder and the target Web page code.
[0050] The present application also proposes a computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of any one of the above methods when executing the computer program.
[0051] The present application also proposes a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the steps of any of the above methods are implemented.
[0052] The method, device, equipment and storage medium for developing a Web page of the present application, wherein the method determines whether the introduction result of the font icon resource link in the preset font icon update script is the same as the target font icon resource link; if not, the introduction result of the font icon resource link is replaced according to the target font icon resource link; the font icon update script is run to update the font icon folder of the page development engineering package according to the preset font icon library; the style file in the font icon folder is introduced into the page development engineering package; in the page development engineering package, based on the font icon folder, the target Web page code input by the user is obtained; and the target Web page data packet is generated according to the font icon folder and the target Web page code. The method realizes that when developing a Web page, the files of the font icon are first uniformly placed in the font icon folder of the page development engineering package, and then the Web page is developed based on the font icon folder, avoiding the confusion of the static resource placement in the project; the font icon is introduced into the Web page code through the files in the font icon folder, avoiding the repeated storage of the font icon in the project, and reducing the project package size; the font icon is provided with a variety of default styles, and there is no need to write code for adjusting the style of the font icon, reducing the redundant code of the project. BRIEF DESCRIPTION OF THE DRAWINGS
[0053] Figure 1 A flowchart of a method for developing a web page according to an embodiment of the present application;
[0054] Figure 2 A schematic block diagram of the structure of a web page development device according to an embodiment of the present application;
[0055] Figure 3 A schematic block diagram of the structure of a computer device according to an embodiment of the present application.
[0056] The realization of the purpose, functional features and advantages of this application will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION
[0057] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.
[0058] Reference Figure 1 In an embodiment of the present application, a method for developing a web page is provided, the method comprising:
[0059] S1: Obtain a page development request, wherein the page development request carries a target font icon resource link;
[0060] S2: Determine whether the font icon resource link introduction result in the preset font icon update script is the same as the target font icon resource link;
[0061] S3: If they are not the same, replacing the font icon resource link introduction result according to the target font icon resource link;
[0062] S4: running the font icon update script to update the font icon folder of the page development project package according to a preset font icon library;
[0063] S5: introducing the style file in the font icon folder into the page development project package;
[0064] S6: in the page development project package, based on the font icon folder, obtaining the target Web page code input by the user;
[0065] S7: Generate a target Web page data packet according to the font icon folder and the target Web page code.
[0066] This embodiment implements the following steps: when developing a Web page, the font icon files are first uniformly placed in the font icon folder of the page development project package, and then the Web page is developed based on the font icon folder, thereby avoiding confusion in the placement of static resources in the project; font icons are introduced into the Web page code through the files in the font icon folder, thereby avoiding repeated storage of font icons in the project and reducing the size of the project package; the font icon has a variety of default styles, and there is no need to write code to adjust the style of the font icon, thereby reducing redundant code in the project.
[0067] For S1, on the local computer of the front-end developer, the page development request input by the user can be obtained, and the page development request sent by the third-party application system can also be obtained.
[0068] A page development request is a request to develop a web page.
[0069] The target font icon resource link is the font icon resource link that the page development request wants to use. The font icon resource link is the resource link generated by the font icon library. When the UI developer uploads the font icon to the font icon library, the font icon library will generate a CSS (Cascading Style Sheet) resource link and use the generated CSS resource link as the font icon resource link.
[0070] For S2, determine whether the font icon resource link introduction result in the preset font icon update script is the same as the target font icon resource link. If they are the same, it means that the files in the font icon folder of the page development project package are already the latest. If they are not the same, it means that the files in the font icon folder of the page development project package are not the latest.
[0071] The page development project package will set up a resource folder, and subdivide a folder under the resource folder as a font icon folder. The font icon folder is used to store font files and style files related to font icons, which facilitates resource management and later maintenance of font icons.
[0072] The font icon update script uses Node.js script. Node.js is a JavaScript runtime environment based on the Chrome V8 engine. It uses an event-driven, non-blocking I / O model to run JavaScript on the server-side development platform. It makes JavaScript a scripting language on par with server-side languages such as PHP, Python, Perl, and Ruby. JavaScript is a lightweight, interpreted or just-in-time compiled programming language with function priority.
[0073] For S3, if they are not the same, it means that the files in the font icon folder of the page development project package are not the latest, and the files in the font icon folder need to be updated. Therefore, according to the target font icon resource link, the font icon resource link introduction result is replaced to update the font icon resource link introduction result in the font icon update script to the latest font icon resource link.
[0074] For S4, run the font icon update script, obtain font files and style files related to the font icon from the preset font icon library according to the font icon resource link introduction result in the font icon update script, and update the files in the font icon folder of the page development project package according to the obtained font files and style files.
[0075] For S5, the storage address and file name of the style file in the font icon folder are introduced into the page development project package, so that the page development project package can rely on the style file in the font icon folder and call each font file in the font icon folder through the style file.
[0076] For S6, when a user develops a web page code in the page development engineering package, he only needs to add a ClassName attribute (element style attribute) to the element when developing the web page code, and configure the font icon identifier in the added ClassName attribute, so that the font icon corresponding to the file in the font icon folder can be introduced into the web page code, and the developed web page code is used as the target web page code. In other words, the element in the target web page code introduces the font icon through the font icon identifier configured by the ClassName attribute.
[0077] For S7, a preset Web page data packet packaging method is used to generate a Web page data packet according to the files in the font icon folder and the target Web page code, and the packaged Web page data packet is used as the target Web page data packet.
[0078] Optionally, after the step of generating a target Web page data packet according to the font icon folder and the target Web page code, the method further includes: updating a Web page code library of the server according to the target Web page data packet.
[0079] Optionally, after the step of determining whether the result of introducing the font icon resource link in the preset font icon update script is the same as the target font icon resource link, it also includes: if they are the same, in the page development project package, obtaining the target Web page code input by the user based on the font icon folder; and generating a target Web page data packet based on the font icon folder and the target Web page code.
[0080] In one embodiment, the step of updating the font icon folder of the page development project package according to the preset font icon library includes:
[0081] S41: Determine whether the font icon folder exists in the resource folder of the page development project package;
[0082] S42: If it does not exist, create a new folder in the resource folder as the font icon folder;
[0083] S43: acquiring CSS resource content from the font icon library according to the font icon resource link introduction result;
[0084] S44: parsing the dependent resource links of the CSS resource content;
[0085] S45: Acquire a dependent resource file corresponding to each dependent resource link from the font icon library;
[0086] S46: replacing the remote link in the CSS resource content according to the link address of the font icon folder to obtain a style file to be stored;
[0087] S47: updating the font icon folder according to each of the dependent resource files and the style files to be stored.
[0088] This embodiment implements updating of the font icon folder of the page development project package according to a preset font icon library, and provides a basis for developing Web page codes based on the files in the font icon folder.
[0089] For S41, it is determined whether the font icon folder exists in the resource folder of the page development project package. If it exists, it means that there is already a folder for storing font icon related files. If it does not exist, it means that there is no folder for storing font icon related files.
[0090] For S42, if it does not exist, it means that there is no folder for storing the related files of the font icon, then a new folder is created in the resource folder, and the new folder is used as the font icon folder.
[0091] For S43, the address corresponding to the font icon resource link introduction result is opened to access the font icon library and obtain the CSS resource content corresponding to the opened address.
[0092] For S44, various dependent resource links are parsed from the CSS resource content. The dependent resource link is the link address of the font file that the CSS resource content depends on.
[0093] For S45, a file download request is sent to the font icon library according to each of the dependent resource links; and the dependent resource file sent by the font icon library according to the dependent resource link in each of the file download requests is obtained.
[0094] Dependent resource files are font files that allow font icons to be displayed like text, and can also control color, size, etc. There are four main types of dependent resource files: woff font files, woff2 font files, ttf font files, and eot font files. Different dependent resource files are designed to be compatible with different platforms and browsers. The eot font file is mainly compatible with IE browsers, while the woff font file, woff2 font file, and ttf font file are compatible with all platforms and browser versions. The woff font file is mainly a re-encapsulation of the ttf font file, which will compress the font file and is the mainstream format of current web fonts. The woff2 font file is an optimization of the woff font file, which can further reduce the font file size.
[0095] For S46, the link address of the font icon folder is used to replace the remote link in the CSS resource content, so as to point the CSS resource content to the local computer of the front-end developer, and the replaced CSS resource content is used as the style file to be stored.
[0096] For S47, each of the dependent resource files replaces the font files in the font icon folder, and the style files to be stored replace the style files in the font icon folder.
[0097] In one embodiment, the step of resolving the dependent resource link of the CSS resource content includes:
[0098] S441: Convert the CSS resource content into a string to obtain a string to be parsed;
[0099] S442: performing the dependent resource link resolution on the character string to be resolved.
[0100] This embodiment converts the CSS resource content into a character string and then parses it, thereby improving the accuracy of the dependent resource link parsing.
[0101] For S441, the CSS resource content in binary format is converted into a string, and the converted string is used as the string to be parsed.
[0102] For S442, a regular expression is used to parse each dependent resource link of the character string to be parsed.
[0103] In one embodiment, the step of obtaining the target Web page code input by the user based on the font icon folder in the page development engineering package includes:
[0104] S611: In the page development engineering package, a preset code development interface display rule is used to display the interface to obtain a code development interface;
[0105] S612: Acquire the target Web page code input by the user according to the code development interface and the font icon folder.
[0106] This embodiment realizes obtaining the target Web page code input by the user according to the code development interface and the font icon folder, thereby facilitating the introduction of font icons into the Web page code and avoiding confusion in the placement of static resources in the project.
[0107] For S611, in the page development engineering package, a preset code development interface display rule is used to display the interface, and the displayed interface is used as the code development interface.
[0108] For S612, the user develops the Web page code in the code development interface. When developing the Web page code, he only needs to add the ClassName attribute to the element, and configure the font icon identifier in the added ClassName attribute. Then, the font icon corresponding to the file in the font icon folder can be introduced into the Web page code, and the developed Web page code can be used as the target Web page code.
[0109] In one embodiment, the step of obtaining the target Web page code input by the user according to the code development interface and the font icon folder includes:
[0110] S6121: Acquire the initial Web page code input by the user according to the code development interface;
[0111] S6122: Acquire, according to the initial Web page code in the code development interface, a font icon introduction request input by the user, wherein the font icon introduction request carries an identifier of an element to be configured;
[0112] S6123: Obtain the element input by the user corresponding to the element identifier to be configured and add the ClassName attribute as the attribute to be configured;
[0113] S6124: Based on the font icon folder, obtain the target font icon identifier input by the user for the attribute to be configured;
[0114] S6125: Repeat the step of obtaining the font icon introduction request input by the user according to the initial Web page code in the code development interface until a packaging signal input by the user is obtained;
[0115] S6126: In response to the packaging signal, the initial Web page code and each of the target font icon identifiers in the code development interface are used as the target Web page code.
[0116] When developing the Web page code in this embodiment, you only need to add the ClassName attribute to the element, configure the font icon identifier in the added ClassName attribute, and then introduce the font icon corresponding to the file in the font icon folder into the Web page code, avoiding repeated storage of font icons in the project, reducing the size of the project package, and eliminating the need to write code for adjusting the font icon style, thereby reducing redundant code in the project.
[0117] For S6121, the user enters the initial Web page code in the code development interface.
[0118] Initial web page code, code for page elements of the web page
[0119] For S6122, according to the element identifier in the initial Web page code in the code development interface, the user selects a specified element identifier to send a font icon import request, wherein the specified element identifier is used as the element identifier to be configured carried in the font icon import request.
[0120] For S6123, the user adds a ClassName attribute to the element corresponding to the element identifier to be configured, providing support for defining the class name.
[0121] For S6124, the user enters a target font icon identifier in the class name of the attribute to be configured, and the target font icon identifier is a font icon identifier in the font icon folder.
[0122] For S6125, the step of obtaining the font icon introduction request input by the user according to the initial Web page code in the code development interface is repeated, that is, steps S6122 to S6125 are repeated.
[0123] Repeat steps S6122 to S6125 until the packaging signal input by the user is obtained, that is, the user continues to input the initial Web page code and introduce the font icon until the user completes the development and clicks the packaging button; a packaging signal will be generated when the packaging button is clicked.
[0124] For S6126, when the packaging signal is received, the initial Web page code and each target font icon identifier in the code development interface are all used as the target Web page code.
[0125] In one embodiment, the step of using the initial Web page code and each of the target font icon identifiers in the code development interface as the target Web page code includes:
[0126] S61261: Acquire a style modification request input by the user, wherein the style modification request carries one or more identifiers of elements to be modified;
[0127] S61262: In the code development interface, based on the font icon folder, obtain the style configuration result input by the user according to the target font icon identifier of the ClassName attribute corresponding to each element identifier to be modified;
[0128] S61263: Use the initial Web page code, each target font icon identifier and each style configuration result in the code development interface as the target Web page code.
[0129] This embodiment implements style configuration based on the font icons that have been introduced, avoids introducing new icons for modifying icons, and avoids causing bloated projects.
[0130] For S61261, according to each element identifier in the initial Web page code in the code development interface, obtain the style modification request input by the user, and the element identifier to be modified carried by the style modification request comes from each element identifier in the initial Web page code in the code development interface.
[0131] For S61262, in the code development interface, based on the font icon folder, for the font icon corresponding to the target font icon identifier of the ClassName attribute corresponding to each element identifier to be modified, the user can modify the color attribute of the font icon to change the font icon color, modify the size attribute of the font icon to modify the size of the font icon, and use the modified font icon color attribute and / or the modified font icon size attribute as the style configuration result.
[0132] The style configuration result includes: font icon color configuration data and / or font icon size configuration data.
[0133] For S61263, the initial Web page code, each target font icon identifier and each style configuration result in the code development interface are all used as the target Web page code.
[0134] In one embodiment, the step of obtaining the target Web page code input by the user based on the font icon folder in the page development engineering package includes:
[0135] S621: Obtain a code download request in the page development project package, wherein the code download request carries a target code identifier;
[0136] S622: In the page development project package, obtaining the web page code corresponding to the target code identifier from the web page code library of the server as the web page code to be edited;
[0137] S623: In the page development project package, the web page code to be edited is displayed on an interface to obtain a code development interface;
[0138] S624: Acquire the target Web page code input by the user according to the code development interface and the font icon folder.
[0139] This embodiment realizes downloading the Web page code from the Web page code library of the server for modification and addition, which is conducive to the development of Web page code based on the font icon folder and avoids the confusion of static resource placement in the project.
[0140] For S621, in the page development engineering package, the code identifier entered by the user is used as the target code identifier, and then the code download button is clicked; when the code download button is clicked, a code download request will be generated according to the target code identifier, and the target code identifier will also be used as a parameter carried by the code download request.
[0141] The target code identifier can be a code name or a code ID.
[0142] For S623, in the page development project package, the web page code to be edited is displayed in an interface, and the displayed interface is used as a code development interface.
[0143] For S624, the user develops the Web page code in the code development interface. When developing the Web page code, he only needs to add the ClassName attribute to the element, and configure the font icon identifier in the added ClassName attribute. Then, the font icon corresponding to the file in the font icon folder can be introduced into the Web page code, and the developed Web page code can be used as the target Web page code.
[0144] Reference Figure 2 The present application also proposes a web page development device, the device comprising:
[0145] A request acquisition module 100 is used to acquire a page development request, wherein the page development request carries a target font icon resource link;
[0146] A judgment module 200 is used to judge whether the font icon resource link introduction result in the preset font icon update script is the same as the target font icon resource link;
[0147] A replacement module 300 is used to replace the font icon resource link introduction result according to the target font icon resource link if they are not the same;
[0148] The font icon folder update module 400 is used to run the font icon update script and update the font icon folder of the page development project package according to the preset font icon library;
[0149] A style file importing module 500 is used to import the style file in the font icon folder into the page development project package;
[0150] A target Web page code acquisition module 600 is used to acquire the target Web page code input by the user based on the font icon folder in the page development engineering package;
[0151] The target Web page data packet generating module 700 is used to generate a target Web page data packet according to the font icon folder and the target Web page code.
[0152] This embodiment implements the following steps: when developing a Web page, the font icon files are first uniformly placed in the font icon folder of the page development project package, and then the Web page is developed based on the font icon folder, thereby avoiding confusion in the placement of static resources in the project; font icons are introduced into the Web page code through the files in the font icon folder, thereby avoiding repeated storage of font icons in the project and reducing the size of the project package; the font icon has a variety of default styles, and there is no need to write code to adjust the style of the font icon, thereby reducing redundant code in the project.
[0153] Reference Figure 3 In the embodiment of the present application, a computer device is also provided. The computer device may be a server, and its internal structure may be as follows: Figure 3As shown. The computer device includes a processor, a memory, a network interface and a database connected through a system bus. Among them, the processor designed by the computer is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store data such as a method for developing a web page. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a method for developing a web page is implemented. The method for developing a Web page includes: obtaining a page development request, the page development request carrying a target font icon resource link; determining whether a font icon resource link introduction result in a preset font icon update script is the same as the target font icon resource link; if not, replacing the font icon resource link introduction result according to the target font icon resource link; running the font icon update script, and updating a font icon folder of a page development project package according to a preset font icon library; introducing a style file in the font icon folder into the page development project package; obtaining a target Web page code input by a user in the page development project package based on the font icon folder; and generating a target Web page data packet according to the font icon folder and the target Web page code.
[0154] This embodiment implements the following steps: when developing a Web page, the font icon files are first uniformly placed in the font icon folder of the page development project package, and then the Web page is developed based on the font icon folder, thereby avoiding confusion in the placement of static resources in the project; font icons are introduced into the Web page code through the files in the font icon folder, thereby avoiding repeated storage of font icons in the project and reducing the size of the project package; the font icon has a variety of default styles, and there is no need to write code to adjust the style of the font icon, thereby reducing redundant code in the project.
[0155] An embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, a method for developing a web page is implemented, including the following steps: obtaining a page development request, the page development request carrying a target font icon resource link; determining whether a font icon resource link introduction result in a preset font icon update script is the same as the target font icon resource link; if not, replacing the font icon resource link introduction result according to the target font icon resource link; running the font icon update script, and updating the font icon folder of a page development project package according to a preset font icon library; introducing a style file in the font icon folder into the page development project package; in the page development project package, based on the font icon folder, obtaining a target web page code input by a user; and generating a target web page data packet according to the font icon folder and the target web page code.
[0156] The method for developing a Web page executed above realizes that when developing a Web page, the files of the font icon are first uniformly placed in the font icon folder of the page development project package, and then the Web page is developed based on the font icon folder, thereby avoiding confusion in the placement of static resources in the project; the font icon is introduced into the Web page code through the files in the font icon folder, thereby avoiding repeated storage of the font icon in the project and reducing the size of the project package; the font icon has a variety of default styles, and there is no need to write code to adjust the style of the font icon, thereby reducing redundant code in the project.
[0157] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media provided in this application and used in the embodiments may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.
[0158] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, device, article or method including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, device, article or method. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the existence of other identical elements in the process, device, article or method including the element.
[0159] The above description is only a preferred embodiment of the present application, and does not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.
Claims
1. A method for developing a web page, characterized in that: The method comprises: Obtaining a page development request, wherein the page development request carries a target font icon resource link; Determine whether the font icon resource link introduction result in the preset font icon update script is the same as the target font icon resource link; If they are not the same, replacing the font icon resource link introduction result according to the target font icon resource link; Running the font icon update script to update the font icon folder of the page development project package according to the preset font icon library; Introducing the style file in the font icon folder into the page development project package; In the page development engineering package, based on the font icon folder, a target Web page code input by a user is obtained; Generate a target Web page data packet according to the font icon folder and the target Web page code; The step of updating the font icon folder of the page development project package according to the preset font icon library includes: Determine whether the font icon folder exists in the resource folder of the page development project package; If it does not exist, create a new folder in the resource folder as the font icon folder; According to the font icon resource link introduction result, obtaining CSS resource content from the font icon library; Performing dependent resource link analysis on the CSS resource content; Acquire a dependent resource file corresponding to each dependent resource link from the font icon library; According to the link address of the font icon folder, the remote link in the CSS resource content is replaced to obtain the style file to be stored; According to each of the dependent resource files and the style files to be stored, the font icon folder is updated; The step of obtaining the target Web page code input by the user based on the font icon folder in the page development engineering package includes: In the page development engineering package, a preset code development interface display rule is used to display the interface to obtain a code development interface; The target Web page code input by the user is obtained according to the code development interface and the font icon folder.
2. The method for developing a web page according to claim 1, characterized in that: The step of performing resource dependency link parsing on the CSS resource content includes: Convert the CSS resource content into a string to obtain a string to be parsed; The dependent resource link is parsed for the character string to be parsed.
3. The method for developing a web page according to claim 1, characterized in that: The step of acquiring the target Web page code input by the user according to the code development interface and the font icon folder includes: Acquire the initial Web page code input by the user according to the code development interface; According to the initial Web page code in the code development interface, obtaining a font icon introduction request input by the user, wherein the font icon introduction request carries an identifier of an element to be configured; Obtain the element input by the user corresponding to the element identifier to be configured and add the ClassName attribute as the attribute to be configured; Based on the font icon folder, obtaining a target font icon identifier input by the user for the attribute to be configured; Repeating the step of obtaining the font icon introduction request input by the user according to the initial Web page code in the code development interface until a packaging signal input by the user is obtained; In response to the packaging signal, the initial Web page code and each of the target font icon identifiers in the code development interface are used as the target Web page code.
4. The method for developing a web page according to claim 3, characterized in that: The step of using the initial Web page code and each of the target font icon identifiers in the code development interface as the target Web page code includes: Acquire a style modification request input by the user, wherein the style modification request carries one or more identifiers of elements to be modified; In the code development interface, based on the font icon folder, the style configuration result input by the user is obtained according to the target font icon identifier of the ClassName attribute corresponding to each element identifier to be modified; The initial Web page code, each of the target font icon identifiers and each of the style configuration results in the code development interface are used as the target Web page code.
5. The method for developing a web page according to claim 1, characterized in that: The step of obtaining the target Web page code input by the user based on the font icon folder in the page development engineering package includes: In the page development engineering package, a code download request is obtained, wherein the code download request carries a target code identifier; In the page development engineering package, a web page code corresponding to the target code identifier is obtained from a web page code library of a server as the web page code to be edited; In the page development engineering package, the web page code to be edited is displayed on an interface to obtain a code development interface; The target Web page code input by the user is obtained according to the code development interface and the font icon folder.
6. A web page development device, characterized in that: For executing the method according to any one of claims 1 to 5, the device comprises: A request acquisition module, used to acquire a page development request, wherein the page development request carries a target font icon resource link; A judgment module, used to judge whether the font icon resource link introduction result in the preset font icon update script is the same as the target font icon resource link; A replacement module, used for replacing the font icon resource link introduction result according to the target font icon resource link if they are not the same; A font icon folder update module is used to run the font icon update script to update the font icon folder of the page development project package according to a preset font icon library; A style file import module, used to import the style file in the font icon folder into the page development project package; A target Web page code acquisition module, which is used in the page development engineering package to acquire the target Web page code input by the user based on the font icon folder; The target Web page data packet generating module is used to generate a target Web page data packet according to the font icon folder and the target Web page code.
7. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 5 are implemented.
8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.
Citation Information
Patent Citations
Page decorating method and system for displaying stylized font and client-side equipment
CN104951309A
Page content display method and device, storage medium and electronic device
CN112765516A