Method and device for generating web page of router
By generating a web page index tree and building a navigation bar in the router's web management interface, the problems of messy layout and complex operations of the traditional interface are solved, and faster page loading and better user experience are achieved.
Patent Information
- Application Number
- CN202510144163.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-02-10
- Publication Date
- 2025-05-30
AI Technical Summary
The web management interface of traditional routers is chaotic in layout, complex operation logic, poor user visual experience, and slow data loading, which affects the user experience.
Using the uHTTPd web server, by generating a web page index tree, building the home page navigation bar and various functional pages, simplifying the web page jump steps, reducing loading time, and dynamic generation of navigation bars and pages through Lua language and CSS.
Improve page loading speed, simplify user operations, enhance user experience, and support multilingual and flexible interface management by dynamically generating navigation bars and page content.
Smart Images

Figure CN120067480A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of computer networks, and particularly to a method and device for generating a web page of a router. Background Art
[0002] With the popularization of the Internet and the complexity of home and enterprise network environments, as a core device for network connection, the friendliness and usability of the web management interface of routers are particularly important. These web management interfaces are usually constructed using relatively basic HTML and CSS (Cascading Style Sheets) technologies, providing users with a series of function options and operation buttons. These interfaces often only include simple functions such as network settings, wireless settings, parental control, guest network, etc. However, the display methods of these functions on the interface are often relatively traditional, lacking innovation and optimization. Although the traditional router web management interfaces meet the basic needs of users in terms of functions, there are many deficiencies in terms of user experience and resource loading, including: (1) Messy layout: The traditional web management interfaces often lack a unified design specification in layout, resulting in a messy look. The division between each function area is not clear, and it is difficult for users to find the required function at a glance. (2) Complex operation logic: Due to the large number of functions, the operation of the traditional web management interfaces is often relatively complex. Users need to click on multiple links and fill in multiple forms to complete a configuration task. This complex operation logic not only increases the operation difficulty for users but also reduces the management efficiency of users. (3) Poor user visual experience: There are also some problems in the visual effects of the traditional web management interfaces, resulting in a poor user visual experience. (4) Slow data loading: The content displayed on the router display page generally needs to obtain a large amount of information resources internally, resulting in slow page loading and affecting the user experience. Summary of the Invention
[0003] In view of the above technical problems, the technical solution adopted by the present invention is as follows:
[0004] According to a first aspect of the present invention, there is provided a method for generating a web page of a router, wherein the web server of the router is a uHTTPd web server, and the method includes the following steps:
[0005] Generate a corresponding web page index tree based on the web page addresses of all web pages of the router.
[0006] Generate a web page corresponding to the home page of the router based on the web page index tree; wherein, the web page corresponding to the home page includes an htm page corresponding to the home page and a home page navigation bar located at the top of the web page, and the home page navigation bar includes multiple navigation items;
[0007] In response to detecting that any navigation item of the home page navigation bar is clicked, a web page corresponding to the clicked navigation item is generated based on the web page index tree, and the web page corresponding to the clicked navigation item includes the htm page corresponding to the clicked navigation item and the home page navigation bar.
[0008] According to a second aspect of the present invention, there is provided a web page generation device for a router, where the web server of the router is a uHTTPd web server, and the device includes:
[0009] A web page index tree generation module, configured to generate a corresponding web page index tree based on the web page addresses of all web pages of the router.
[0010] A home page generation module, configured to generate a web page corresponding to the home page of the router based on the web page index tree; wherein, the web page corresponding to the home page includes the htm page corresponding to the home page and a home page navigation bar located at the top of the web page, and the home page navigation bar includes a plurality of navigation items.
[0011] A web page generation module, configured to, in response to detecting that any navigation item of the home page navigation bar is clicked, generate a web page corresponding to the clicked navigation item based on the web page index tree, and the web page corresponding to the clicked navigation item includes the htm page corresponding to the clicked navigation item and the home page navigation bar.
[0012] The present invention has at least the following beneficial effects:
[0013] The web page generation method for a router provided by an embodiment of the present invention, where the web server of the router is a uHTTPd web server, the method generates a web page index for each web page of the router based on the entry() function pre-set with web page index generation code, which can accelerate the page loading speed. In addition, constructing a home page navigation bar according to the web page index can more conveniently guide users to control the functions of the router and improve the user experience.
[0014] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present invention, nor is it used to limit the scope of the present invention. Other features of the present invention will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS
[0015] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are only some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.
[0016] Figure 1 It is a flowchart of the method for generating the web page of the router provided by the embodiment of the present invention;
[0017] Figure 2 It is a schematic diagram of the web page index tree provided by the embodiment of the present invention;
[0018] Figure 3 It is a schematic diagram of the home page of the router provided by the embodiment of the present invention;
[0019] Figure 4 It is a schematic diagram of the web page of the router provided by the embodiment of the present invention. Detailed implementation manners
[0020] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative efforts shall fall within the protection scope of the present invention.
[0021] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the technical field to which the present invention belongs. The terms used in the specification of the present invention herein are only for the purpose of describing specific implementation manners, and are not intended to limit the present invention. The term "and / or" used herein includes any and all combinations of one or more of the related listed items.
[0022] It should be noted that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although the flowcharts describe the steps as sequential processes, many of the steps can be implemented in parallel, concurrently, or simultaneously. In addition, the order of the steps can be rearranged. The process can be terminated when its operation is completed, but there can also be additional steps not included in the drawings. The process can correspond to a method, function, procedure, subroutine, subprogram, etc.
[0023] The embodiment of the present invention provides a method for generating a web page of a router. The router is an IOT multi-protocol connection router, and the web server of the router is a uHTTPd web server. As Figure 1 shown, the method may include the following steps:
[0024] Generate a corresponding web page index tree based on the web page addresses of all web pages of the router.
[0025] Generate a web page corresponding to the home page of the router based on the web page index tree; wherein, the web page corresponding to the home page includes an htm page corresponding to the home page and a home page navigation bar located at the top of the web page, and the home page navigation bar includes a plurality of navigation items;
[0026] In response to detecting that any navigation item in the home page navigation bar is clicked, generate a web page corresponding to the clicked navigation item based on the web page index tree. The web page corresponding to the clicked navigation item includes an htm page corresponding to the clicked navigation item and the home page navigation bar.
[0027] The method for generating a web page of the router provided by the embodiment of the present invention, the web server of the router is the uHTTPd web server. This method generates a web page index for each web page of the router based on the entry() function pre-set with web page index generation code, which can accelerate the page loading speed. In addition, constructing the home page navigation bar according to the web page index can more conveniently guide users to control the functions of the router and improve the user experience.
[0028] Further, in the embodiment of the present invention, the generating a corresponding web page index tree based on the web page addresses of all web pages of the router specifically includes:
[0029] Create a web page index file in the controller file under the MVC architecture of the Luci framework. The web page index file stores multiple entry() function codes, and each entry() function code is used to generate a corresponding web page index for the corresponding web page.
[0030] In the embodiment of the present invention,
[0031] For any web page of the router, obtain the corresponding entry() function code from the web page index file to generate a corresponding web page index.
[0032] Based on the web page indexes corresponding to all web pages, use the create tree function to generate a corresponding web page index tree. In the embodiment of the present invention, the create tree function, i.e., the createtree() function, can be called to create nodes layer by layer according to the path parameters in the entry() function, and then obtain the web page index tree. Those skilled in the art know that any method of using the createtree() function to create nodes layer by layer according to the path parameters in the entry() function and then obtaining the web page index tree belongs to the protection scope of the present invention. In the embodiment of the present invention, the web page index tree may include three layers of nodes, namely, the root node, the child node, and the grandchild node. In the embodiment of the present invention, the web page names corresponding to the nodes in the web page index tree may be in English. In a schematic embodiment, the generated web page index tree may be asFigure 2 as shown Figure 2 Node 1 in Figure 2 is the root node, representing a router (ROUTER). Nodes 2 to 6 are some child nodes of the root node, and the node names can be home (home page), status (system information), wan (Internet access settings), wifi (wireless settings), and advanceSteup (advanced settings) respectively. Nodes 7 to 10 are some grandchild nodes of node 6, and the node names can be Lan (LAN settings), IPv6 (IPv6 settings), (IGMP settings), DDNS (DDNS settings), etc.
[0033] Further, in the embodiment of the present invention, generating a web page corresponding to the home page of the router based on the web index tree may specifically include the following steps:
[0034] S1, obtain the home page URL of the router input by the user.
[0035] In the embodiment of the present invention, the user can input the home page URL in the browser of the router. For example, input http: / / 192.168.10.1.
[0036] S2, according to the obtained home page URL, jump to the Luci file in the uHTTPd web server.
[0037] In the embodiment of the present invention, the uHTTPd web server will jump to the Luci file in the uHTTPd web server according to the input home page URL. Specifically, it jumps to the www directory under the root directory of the uHTTPd web server and executes the existing index.html file (index home page file) inside, so as to jump to the / www / cgi-bin / luci file.
[0038] S3, execute the run function in the Luci file to execute the httpdispatch function in the dispatcher script file, so as to obtain the htm file corresponding to the network URL according to the entry() function in the index home page file in the Luci file; the htm file includes navigation bar generation code and htm page generation code.
[0039] Specifically, executing the code luci.sgi.cgi.run() in the Luci file, which is the run() function in cgi.lua, will create a coroutine luci.dispatcher.httpdispatch, that is, execute the httpdispatch function in the dispatcher script dispatcher.lua. The httpdispatch function is used to parse the web address of the clicked navigation item to find the corresponding node in the web index tree and obtain the corresponding node as the requested node. Moreover, the httpdispatch function calls the nested dispatch function to find the web page name of the requested node, that is, get:ROUTERhome. Among them, the display part in the nested dispatch function finds the web page name of the requested node according to the entry() function in the index home page file; among them, the processing method of the entry() method includes: entry({"ROUTER","home"},template("YYY_web / home"). YYY_web is the directory for storing all the htm files of the router's web pages, such as home.htm, lan.htm, wifi.htm files.
[0040] In the embodiment of the present invention, by obtaining the htm file of the web page in the way of the pre-constructed web index tree, the jump steps of the web page can be simplified, the loading time of the web page can be reduced, the user's response interaction experience can be improved, and it is also convenient to add and delete web pages.
[0041] S4. Execute the navigation bar generation code in the htm file corresponding to the home page URL to generate the home page navigation bar.
[0042] In the embodiment of the present invention, the navigation bar generation code is created in the set header hypertext markup language file and is the code for generating the navigation bar. In the embodiment of the present invention, the set header hypertext markup language file can be defined as header.htm.
[0043] Further, in the embodiment of the present invention, the execution of the navigation bar generation code in the htm file corresponding to the home page URL to generate the home page navigation bar may specifically include:
[0044] S10. In the set header hypertext markup language file, introduce the Lua language using <% %> to determine the hierarchical structure of the web pages in the web index tree.
[0045] Specifically, introduce the lua language in header.htm using <% %> and use the dispatching function luci.dispatcher.context.path to parse the web index tree to determine the hierarchical structure of the web pages in the web index tree, so as toFigure 2 Taking the web page index tree shown as an example, the hierarchical structure may include ROUTER / home, ROUTER / status, ROUTER / advancesetup / lan, etc.
[0046] S11. Based on the determined hierarchical structure of the web page, use the node generation function in the scheduling function in the Lua language to generate the corresponding node tree; set the child node counter i = 1.
[0047] In the embodiment of the present invention, the node generation function may be luci.dispatche.node. The name of the node tree is the same as the name of the web page index tree, such as home, status, wan, etc.
[0048] S12. If i ≤ n, execute S13; otherwise, exit the current control program to obtain the home page navigation bar; n is the number of child nodes in the node tree.
[0049] S13. If the node name corresponding to the i-th child node is the home page, use Label Label and The label generates a navigation item with a preset click style corresponding to the sub-node at the top of the web page corresponding to the home page. If the node name corresponding to the i-th sub-node is not the home page, use Label, Label and Generate a navigation item corresponding to the i-th child node without a preset click style at the top of the web page corresponding to the label on the home page; set i = i + 1, and execute S12.
[0050] In an embodiment of the present invention, the preset click style can be highlighted display, etc. The preset click style can be generated by using Lua language combined with css to load the corresponding click effect.
[0051] In an embodiment of the present invention, the navigation item corresponding to each child node may include the Chinese name corresponding to the child node and the web page identifier. The web page name may include, for example, the home page, system settings, Internet settings, wireless settings, and advanced settings, etc. In a schematic embodiment, the generated home page navigation bar may be as Figure 3 as shown
[0052] In an embodiment of the present invention, in Used in the label Add various CSS (Cascading Style Sheets) properties to the home page navigation bar. As is known to those skilled in the art, any use of 、 and The method of generating a navigation item corresponding to each sub-node at the top of the web page corresponding to the home page of the label belongs to the protection scope of the present invention.
[0053] S5. Execute the htm page generation code in the htm file corresponding to the home page URL to generate the htm page corresponding to the home page; obtain the web page corresponding to the home page.
[0054] In the embodiment of the present invention, the htm page generation code may be the code for generating a page, and the htm page generation code may include Label In the label The label may include a set language identifier and a corresponding identifier value, and the style of the HTML element of the htm page generation code is determined based on the cascading style sheet css.
[0055] In a schematic embodiment of the present invention, the set language identifier may include sh_lang and sh_place. The identifier value of the set language identifier is a value equal to the text in the preset Chinese-English character library. For example, the identifier value st_ip = IP address. In a schematic embodiment, The label can be <span sh_lang="st_ip"> . In the embodiments of the present invention, each row in the preset Chinese-English character library includes an identification value and the corresponding Chinese and English texts. For example, the identification value st_ip = IP address.
[0056] In the embodiments of the present invention, in the htm file The label uses the set language identifier and identifier value instead of directly using Chinese and English texts, and has at least the following advantages: (1) Multi-language adaptation: By setting the language identifier such as the sh_lang attribute, it is easy to provide translated texts for different languages, thus supporting a multi-language environment. (2) Easy maintenance: Separating the text content from the HTML structure makes the maintenance and update of the translated text more convenient. (3) Dynamic display: The text on the interface can be dynamically replaced according to the user's real-time language selection without reloading the entire page. (4) Flexibility: Without changing the HTML structure, the display content can be changed by modifying the associated language resources. (5) Semanticization: The sh_lang attribute provides a semantic way to mark the text that needs to be internationalized, making the code clearer and easier to understand. (6) Easy identification: Developers can quickly identify which elements need to be replaced according to the language.
[0057] Further, execute the htm page generation code in the htm file corresponding to the home page URL to generate the htm page corresponding to the home page, which may specifically include:
[0058] Traverse all HTML elements in the htm page generation code in the htm file corresponding to the home page URL. For any HTML element traversed, if the HTML element has a set language identifier, obtain the corresponding text from the preset Chinese-English library according to the identifier value corresponding to the set language identifier, and replace the text or placeholder text of the HTML element; obtain the htm file with the text or placeholder text replaced as the intermediate htm file.
[0059] In the embodiment of the present invention, all HTML elements with sh_lang and sh_place attributes can be traversed by executing the plugin initialization function, that is, the plugInit() function, and the text or placeholder text of the elements can be replaced according to the values of these attributes.
[0060] Use the Lua language to obtain the configuration information corresponding to the home page URL, and use JavaScript code to replace the elements to be replaced in the intermediate htm file with the configuration information, so as to realize displaying various parameter information of the router in a block structure and obtain the htm page corresponding to the home page.
[0061] In the embodiment of the present invention, the elements to be replaced in the intermediate htm file can be replaced with the corresponding configuration information by the code document.getElementById("xxxx").innerHTML = xxxx, where xxxx represents the replacement value, that is, the configuration information.
[0062] In a schematic embodiment of the present invention, the generated web page corresponding to the home page may be as Figure 3 as shown
[0063] Further, in the embodiment of the present invention, the generating, in response to detecting that any navigation item of the home page navigation bar is clicked, a web page corresponding to the clicked navigation item based on the web page index tree may specifically include the following steps:
[0064] S100, according to the clicked navigation item, jump to the Luci file of the uHTTPd web server.
[0065] Specifically, jump to the www directory under the root directory of the uHTTPd web server and execute the existing index.html file (index home page file) therein, so as to jump to the / www / cgi-bin / luci file.
[0066] S200, execute the run function in the Luci file to execute the httpdispatch function in the scheduler script file, so as to obtain the htm file corresponding to the clicked navigation item according to the entry() function in the index home page file in the Luci file; the htm file includes a navigation bar generation code and an htm page generation code; wherein, if the clicked navigation item is a set navigation item, the navigation bar generation code corresponding to the clicked navigation item is used to generate a home page navigation bar in the home page navigation bar generation area of the web page corresponding to the clicked navigation item and generate a navigation bar associated with the set navigation item in the corresponding web page, wherein, the navigation bar associated with the set navigation item includes a vertical navigation bar and a horizontal navigation bar, wherein, the vertical navigation bar is used to display a plurality of general categories corresponding to the grandson nodes corresponding to the set navigation item, and the horizontal navigation bar is used to display the navigation items corresponding to the grandson nodes corresponding to any navigation item in the vertical navigation bar; if the clicked navigation item is not a set navigation item, the navigation bar generation code corresponding to the clicked navigation item is used to generate a home page navigation bar in the home page navigation bar generation area of the web page corresponding to the clicked navigation item.
[0067] In the embodiment of the present invention, the set navigation item may be advanced settings. The plurality of general categories corresponding to the grandson nodes corresponding to the set navigation item may be classified based on the names of the grandson nodes. For example, categories such as wifi settings and system tools. The navigation items corresponding to the grandson nodes corresponding to any navigation item in the vertical navigation bar are the navigation items corresponding to the grandson nodes included in the navigation item. For example, the wifi settings include grandson nodes such as wps and guest wifi.
[0068] In the embodiment of the present invention, the vertical navigation bar is located on the left side of the web page, and the horizontal navigation bar is located below the home page navigation bar generation area.
[0069] S300, execute the navigation bar generation code in the htm file corresponding to the clicked navigation item to generate the corresponding navigation bar.
[0070] In the embodiment of the present invention, the implementation manner of the navigation bar corresponding to the clicked navigation item is basically the same as that of the navigation bar corresponding to the home page.
[0071] Further, S300 may specifically include:
[0072] S20, in the set header hypertext markup language file, introduce the Lua language using <% %> to determine the hierarchical structure of the web pages in the web page index tree.
[0073] S21, based on the determined hierarchical structure of the web pages, use the node generation function in the scheduling function of the Lua language to generate the corresponding node tree.
[0074] S22, if the clicked navigation item is not the set navigation item, generate the home page navigation bar in the home page navigation bar generation area of the web page corresponding to the clicked navigation item based on the node tree. If the clicked navigation item is the set navigation item, generate the home page navigation bar in the home page navigation bar generation area of the web page corresponding to the clicked navigation item, and generate the vertical navigation bar and horizontal navigation bar corresponding to the set navigation item in the web page corresponding to the clicked navigation item.
[0075] In the embodiment of the present invention, the home page navigation bar generation area may be the top position of the page.
[0076] Among them, S22 may specifically include:
[0077] S2201, set the sub-node counter i = 1, and execute S2202.
[0078] S2202, if i ≤ n, execute S2203, otherwise, exit the current control program to obtain the navigation bar corresponding to the clicked navigation item; n is the number of sub-nodes in the node tree.
[0079] S2203, if the node name corresponding to the i-th sub-node is the web page name corresponding to the clicked navigation item, use Label, Label and The label generates a navigation item with a preset click style corresponding to the i-th child node at the top of the web page corresponding to the clicked navigation item. If the node name corresponding to the i-th child node is not the web page name corresponding to the clicked navigation item, use Label, Label and Generate a navigation item corresponding to the \(i\)-th child node without a preset click style at the top of the web page corresponding to the clicked navigation item; set \(i = i + 1\), and execute S2202.
[0080] Further, S23 may specifically include:
[0081] S2301, set the child node counter \(j = 1\), and execute S2302.
[0082] S2302, if \(j\leq n\), execute S2303, otherwise, obtain the home page navigation bar corresponding to the clicked navigation item, and execute S2304; \(n\) is the number of child nodes in the node tree.
[0083] S2303, if the node name corresponding to the \(j\)-th child node is the web page name corresponding to the clicked navigation item, use Label, Label and Generate a navigation item with a preset click style corresponding to the i-th child node at the top of the web page corresponding to the clicked navigation item. If the node name corresponding to the j-th child node is not the web page name corresponding to the clicked navigation item, use Label, Label and Generate a navigation item corresponding to the \(i\)-th child node without a preset click style at the top of the web page corresponding to the clicked navigation item; set \(j = j + 1\), and execute S2302.
[0084] S2304, use Label, Label and The label generates a vertical navigation bar and a horizontal navigation bar with a preset click style corresponding to the clicked navigation item on the web page corresponding to the clicked navigation item; wherein, the horizontal navigation bar corresponding to the clicked navigation item is the navigation item corresponding to the grandchild node corresponding to the first navigation item of the vertical navigation bar corresponding to the clicked navigation item, and, the first navigation items in the vertical navigation bar and the horizontal navigation bar corresponding to the clicked navigation item have a preset click style; obtaining the navigation bar corresponding to the clicked navigation item.
[0085] In the embodiment of the present invention, use 、 and Labels generate vertical and horizontal navigation bars, use Lua language and child nodes of the node tree to generate the corresponding target links in the labels, and implement the selection effect of the navigation bar, such as image transformation, font bolding, etc. In an illustrative embodiment of the present invention, the generated navigation bar corresponding to the set navigation item can be as shown in Figure 4 As shown, such as Figure 4 As shown, the first navigation item of the vertical navigation bar is network settings, and the first navigation item of the corresponding horizontal navigation bar is local area network settings.
[0086] In the embodiment of the present invention, since the vertical navigation bar can merge and classify various functions of the router, and the function division of each area is clear, the overall layout is in good order, clean and clear.
[0087] In the embodiment of the present invention, when the web page request level belongs to the set navigation item, that is, advanced setup, the associated navigation bar will be generated, which can reduce resource consumption.
[0088] S400, execute the htm page generation code in the htm file corresponding to the clicked navigation item to generate the htm page corresponding to the clicked navigation item; obtain the web page corresponding to the clicked navigation item.
[0089] In the embodiment of the present invention, the generation method of the htm page corresponding to the clicked navigation item is basically the same as the generation method of the htm page corresponding to the home page.
[0090] Further, S400 may specifically include:
[0091] S30, if the clicked navigation item is not the set navigation item, execute S31, if the clicked navigation item is the set navigation item, execute S33.
[0092] S31, traverse all HTML elements in the htm page generation code of the htm file corresponding to the clicked navigation item. For any HTML element traversed, if the HTML element has a set language identifier, obtain the corresponding text from the preset Chinese-English character library according to the identifier value corresponding to the set language identifier, and replace the text or placeholder text of the HTML element; obtain the htm file with the text or placeholder text replaced as the intermediate htm file; execute S32.
[0093] S32, use the Lua language to obtain the configuration information corresponding to the clicked navigation item, and use JavaScript code to replace the elements to be replaced in the intermediate htm file with the configuration information, so as to display various parameter information of the router in a block structure, and obtain the htm page corresponding to the clicked navigation item.
[0094] S33. Traverse all HTML elements in the generated code of the htm page corresponding to the first navigation item in the horizontal navigation bar corresponding to the vertically clicked navigation item. For any traversed HTML element, if the HTML element has a set language identifier, obtain the corresponding text from the preset Chinese-English font library according to the identifier value corresponding to the set language identifier, and replace the text or placeholder text of the HTML element; obtain the htm file with the text or placeholder text replaced as the intermediate htm file; execute S34.
[0095] S34. Use the Lua language to obtain the configuration information corresponding to the first navigation item in the horizontal navigation bar corresponding to the first navigation item in the vertical navigation bar corresponding to the clicked navigation item, and use JavaScript code to replace the elements to be replaced in the intermediate htm file in S33 with the configuration information corresponding to the first navigation item in the horizontal navigation bar corresponding to the first navigation item in the vertical navigation bar corresponding to the clicked navigation item, thereby realizing the display of various parameter information of the router in a block structure, and obtaining the htm page corresponding to the clicked navigation item.
[0096] In the embodiment of the present invention, when the page is reloaded, the above process of generating the htm page can be executed again through the window.onload = function() function, achieving the effect of dynamically displaying router information. Through the above operations, various information of the router can be quickly loaded and displayed to the user, effectively reducing the waiting time of the user. In addition, in the embodiment of the present invention, use A method for efficiently and concisely displaying information by combining elements with CSS makes the page data clear, the interface beautiful, and the layout regular, which can improve the user's visual experience.
[0097] Further, in the embodiment of the present invention, if any navigation item is clicked on the vertical navigation bar corresponding to the set navigation item, a horizontal navigation bar corresponding to the navigation item and an htm page corresponding to the first navigation item in the corresponding horizontal navigation bar will be generated.
[0098] Further, the method for generating the web page of the router provided by the embodiment of the present invention further includes the following steps:
[0099] In response to detecting that the user enters content in the displayed htm page, the entered content is loaded into the form.
[0100] In the embodiment of the present invention, the content entered by the user in the web page can be passed through html's <form>Submit the form.
[0101] Check the content in the form. If the check result indicates that the content in the form meets the preset requirements, submit the form to the Lua control function.
[0102] In the embodiment of the present invention, the doCheck() function can be used to check the content input by the user. If there is an error, that is, it does not meet the preset requirements, the form will not be submitted. The user only needs to configure once to control many parameters of the router, and the operation logic is simple.
[0103] In the embodiment of the present invention, the form action attribute uses the function luci.dispatcher.build_url() to replace the url with the path of the Lua control function in the controller, and the submission method uses post to submit to the Lua function in the path.
[0104] Use the Lua control function to process the received form to update the parameters of the router and return the update result.
[0105] In the embodiment of the present invention, the Lua function accepts data through luci.http.formvalue() and then performs further operations to modify and control various configurations and functions of the router.
[0106] Based on the same inventive concept, the embodiment of the present invention provides a web page generation device for a router. The web server of the router is a uHTTPd web server. The device includes:
[0107] A web page index tree generation module for generating a corresponding web page index tree based on the web page addresses of all web pages of the router.
[0108] A home page generation module for generating a web page corresponding to the home page of the router based on the web page index tree; wherein, the web page corresponding to the home page includes the htm page corresponding to the home page and the home page navigation bar at the top of the web page, and the home page navigation bar includes a plurality of navigation items.
[0109] A web page generation module for generating a web page corresponding to the clicked navigation item based on the web page index tree in response to detecting that any navigation item in the home page navigation bar is clicked. The web page corresponding to the clicked navigation item includes the htm page corresponding to the clicked navigation item and the home page navigation bar.
[0110] This device can be used to execute Figure 1 the method shown in the embodiment shown, and therefore, for the functions that can be achieved by each functional module of this device, reference can be made to Figure 1 The description of the illustrated embodiments will not be elaborated further.
[0111] An embodiment of the present invention further provides an electronic device, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein, the memory stores instructions executable by the at least one processor, and the instructions are configured to execute the method of the embodiment of the present invention.
[0112] An embodiment of the present invention further provides a computer-readable storage medium storing computer-executable instructions for executing the method of the embodiment of the present invention.
[0113] It should be understood that various forms of the processes shown above can be used, steps can be reordered, added, or deleted. For example, the steps described in the present invention can be executed in parallel, sequentially, or in a different order, as long as the desired results of the technical solutions disclosed in the present invention can be achieved, and no limitation is made herein.
[0114] The above specific embodiments do not constitute a limitation on the protection scope of the present invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention shall be included within the protection scope of the present invention.< / form>
Claims
1. A method for generating a web page of a router, characterized in that: The web server of the router is a uHTTPd web server, and the method comprises the following steps: Based on the web page addresses of all web pages of the router, a corresponding web page index tree is generated; Generate a web page corresponding to the homepage of the router based on the webpage index tree; wherein the web page corresponding to the homepage includes an htm page corresponding to the homepage and a homepage navigation bar located at the top of the web page, and the homepage navigation bar includes multiple navigation items; In response to detecting that any navigation item of the homepage navigation bar is clicked, a web page corresponding to the clicked navigation item is generated based on the webpage index tree, and the web page corresponding to the clicked navigation item includes an htm page corresponding to the clicked navigation item and the homepage navigation bar.
2. The method according to claim 1, characterized in that The web page addresses of all web pages based on the router generate a corresponding web page index tree, specifically including: Create a webpage index file in the controller file under the MVC architecture of the Luci framework, wherein the webpage index file stores multiple entry() function codes, each entry() function code is used to realize the generation of a corresponding webpage index from a corresponding webpage; For any web page of the router, obtain the corresponding entry() function code from the web page index file to generate the corresponding web page index; Based on the web page indexes corresponding to all web pages, a corresponding web page index tree is generated using a tree creation function.
3. The method according to claim 1, characterized in that The generating of a web page corresponding to the homepage of the router based on the webpage index tree specifically includes: Get the home page URL of the router entered by the user; According to the obtained homepage URL, jump to the Luci file of the uHTTPd web server; Execute the run function in the Luci file to execute the httpdispatch function in the scheduler script file, thereby obtaining the htm file corresponding to the network URL according to the entry() function in the index homepage file in the Luci file; the htm file includes the navigation bar generation code and the htm page generation code; Execute the navigation bar generation code in the htm file corresponding to the homepage URL to generate the homepage navigation bar; Execute the htm page generation code in the htm file corresponding to the homepage URL to generate the htm page corresponding to the homepage; and obtain the web page corresponding to the homepage.
4. The method according to claim 3, characterized in that The executing of the navigation bar generation code in the htm file corresponding to the homepage URL to generate the homepage navigation bar specifically includes: S10, in the set header hypertext markup language file, using <% %> to introduce Lua language, for determining the hierarchical structure of web pages in the web page index tree; S11, based on the determined hierarchical structure of the web page, using the node generation function in the scheduling function in the Lua language to generate a corresponding node tree; setting the child node counter i=1; S12, if i≤n, execute S13, otherwise, exit the current control program and obtain the homepage navigation bar; n is the number of child nodes in the node tree; S13, if the node name corresponding to the i-th child node is home page, use Label, Tags and The tag generates a navigation item with a preset click style corresponding to the child node at the top of the web page corresponding to the homepage. If the node name corresponding to the i-th child node is not the homepage, use Label, Tags and The tag generates a navigation item without a preset click style corresponding to the i-th child node at the top of the web page corresponding to the homepage; i=i+1 is set, and S12 is executed.
5. The method according to claim 3, characterized in that: The htm page generation code includes Label, In the label The tag may include a set language identifier and a corresponding identifier value, and the style of the HTML element of the htm page generation code is determined based on the cascading style sheet; The step of executing the htm page generation code in the htm file corresponding to the homepage URL to generate the htm page corresponding to the homepage specifically includes: Traverse all HTML elements in the htm page generation code in the htm file corresponding to the homepage URL, and for any HTML element traversed, if the HTML element has a set language identifier, obtain corresponding text from a preset Chinese and English font library according to an identifier value corresponding to the set language identifier to replace the text or placeholder text of the HTML element; obtain the htm file with the replaced text or placeholder text as the intermediate htm file; The configuration information corresponding to the homepage URL is obtained by using Lua language, and the elements to be replaced in the intermediate htm file are replaced with the configuration information by using JavaScript code, thereby realizing the display of various parameter information of the router in a block structure and obtaining the htm page corresponding to the homepage.
6. The method according to claim 1, characterized in that In response to detecting that any navigation item of the homepage navigation bar is clicked, generating a web page corresponding to the clicked navigation item based on the webpage index tree specifically includes: Jump to the Luci file of the uHTTPd web server according to the clicked navigation item; Execute the run function in the Luci file to execute the httpdispatch function in the scheduler script file, so as to obtain the htm file corresponding to the clicked navigation item according to the entry() function in the index homepage file in the Luci file; the htm file includes a navigation bar generation code and an htm page generation code; wherein, if the clicked navigation item is a set navigation item, the navigation bar generation code corresponding to the clicked navigation item is used to generate a homepage navigation bar in the homepage navigation bar generation area of the web page corresponding to the clicked navigation item and to generate a navigation bar associated with the set navigation item in the corresponding web page, wherein the navigation bar associated with the set navigation item includes a vertical navigation bar and a horizontal navigation bar, wherein the vertical navigation bar is used to display vertical navigation items corresponding to multiple general categories corresponding to the grandchild nodes corresponding to the set navigation item, and the horizontal navigation bar is used to display the navigation items corresponding to the grandchild nodes corresponding to any navigation item in the vertical navigation bar; if the clicked navigation item is not a set navigation item, the navigation bar generation code corresponding to the clicked navigation item is used to generate a homepage navigation bar in the homepage navigation bar generation area of the web page corresponding to the clicked navigation item; Execute the navigation bar generation code in the htm file corresponding to the clicked navigation item to generate the corresponding navigation bar; Execute the htm page generation code in the htm file corresponding to the clicked navigation item to generate the htm page corresponding to the clicked navigation item; and obtain the web page corresponding to the clicked navigation item.
7. The method according to claim 6, characterized in that Execute the navigation bar generation code in the htm file corresponding to the clicked navigation item to generate the corresponding navigation bar, including: S20, in the set header hypertext markup language file, using <% %> to introduce Lua language, for determining the hierarchical structure of the web pages in the web page index tree; S21, based on the determined hierarchical structure of the web page, using the node generation function in the scheduling function in the Lua language to generate a corresponding node tree; S22, if the clicked navigation item is not a set navigation item, generating a homepage navigation bar in a homepage navigation bar generating area of a web page corresponding to the clicked navigation item based on the node tree; if the clicked navigation item is a set navigation item, generating a homepage navigation bar in a homepage navigation bar generating area of a web page corresponding to the clicked navigation item based on the node tree and generating a vertical navigation bar and a horizontal navigation bar corresponding to the set navigation item in the web page corresponding to the clicked navigation item; Among them, S22 specifically includes: S2201, set the child node counter i=1, and execute S2202; S2202, if i≤n, execute S2203, otherwise, exit the current control program and obtain the navigation bar corresponding to the clicked navigation item; n is the number of child nodes in the node tree; S2203: If the node name corresponding to the i-th child node is the name of the web page corresponding to the clicked navigation item, use Label, Tags and The tag generates a navigation item with a preset click style corresponding to the i-th child node at the top of the web page corresponding to the clicked navigation item. If the node name corresponding to the i-th child node is not the web page name corresponding to the clicked navigation item, use Label, Tags and The tag generates a navigation item without a preset click style corresponding to the i-th child node at the top of the web page corresponding to the clicked navigation item; i=i+1 is set, and S2202 is executed; S23 specifically includes: S2301, set the child node counter j=1, and execute S2302; S2302, if j≤n, execute S2303, otherwise, obtain the homepage navigation bar corresponding to the clicked navigation item, and execute S2304; n is the number of child nodes in the node tree; S2303: If the node name corresponding to the jth child node is the name of the web page corresponding to the clicked navigation item, use Label, Tags and The tag generates a navigation item with a preset click style corresponding to the i-th child node at the top of the web page corresponding to the clicked navigation item. If the node name corresponding to the j-th child node is not the web page name corresponding to the clicked navigation item, use Label, Tags and The tag generates a navigation item without a preset click style corresponding to the i-th child node at the top of the web page corresponding to the clicked navigation item; sets j=j+1, and executes S2302; S2304, use Label, Tags and The tag generates a vertical navigation bar and a horizontal navigation bar with a preset click style corresponding to the clicked navigation item on a web page corresponding to the clicked navigation item; wherein the horizontal navigation bar corresponding to the clicked navigation item is a navigation item corresponding to a grandchild node corresponding to the first navigation item in the vertical navigation bar corresponding to the clicked navigation item, and the first navigation item in the vertical navigation bar and the horizontal navigation bar corresponding to the clicked navigation item have a preset click style; and the navigation bar corresponding to the clicked navigation item is obtained.
8. The method according to claim 6, characterized in that The htm page generation code includes Label, In the label The tag may include a set language identifier and a corresponding identifier value, and the style of the HTML element of the htm page generation code is determined based on the cascading style sheet; The execution of the htm page generation code in the htm file corresponding to the clicked navigation item to generate the htm page corresponding to the clicked navigation item specifically includes: S30, if the clicked navigation item is not a setting navigation item, execute S31; if the clicked navigation item is a setting navigation item, execute S33; S31, traversing all HTML elements in the htm page generation code in the htm file corresponding to the clicked navigation item, for any traversed HTML element, if the HTML element has a set language identifier, then according to the identifier value corresponding to the set language identifier, obtaining the corresponding text from the preset Chinese and English character library to replace the text or placeholder text of the HTML element; obtaining the htm file with the replaced text or placeholder text as the intermediate htm file; executing S32; S32, using Lua language to obtain configuration information corresponding to the clicked navigation item, and using JavaScript code to replace the elements to be replaced in the intermediate htm file with the configuration information, thereby realizing the display of various parameter information of the router in a block structure, and obtaining the htm page corresponding to the clicked navigation item; S33, traversing all HTML elements in the htm page generation code corresponding to the first navigation item in the horizontal guide bar corresponding to the first navigation item in the vertical navigation bar corresponding to the clicked navigation item, for any traversed HTML element, if the HTML element has a set language identifier, then according to the identifier value corresponding to the set language identifier, obtain the corresponding text from the preset Chinese and English character library to replace the text or placeholder text of the HTML element; obtain the htm file with the replaced text or placeholder text as the intermediate htm file; execute S34; S34, using Lua language to obtain the configuration information corresponding to the first navigation item in the horizontal guide bar corresponding to the first navigation item in the vertical navigation bar corresponding to the clicked navigation item, and using JavaScript code to replace the elements that need to be replaced in the intermediate htm file in S33 with the configuration information corresponding to the first navigation item in the horizontal guide bar corresponding to the first navigation item in the vertical navigation bar corresponding to the clicked navigation item, thereby realizing the display of various parameter information of the router in a block structure, and obtaining the htm page corresponding to the clicked navigation item.
9. The method according to claim 1, characterized in that: The following steps are also included: In response to detecting that the user enters content in the displayed htm page, loading the input content into the form; Checking the content in the form, and if the check result is a result indicating that the content in the form meets the preset requirements, submitting the form to the Lua control function; The received form is processed using the Lua control function to update the parameters of the router and return the updated result.
10. A web page generating device for a router, characterized in that: The web server of the router is a uHTTPd web server, and the device comprises: A web page index tree generation module is used to generate a corresponding web page index tree based on the web page addresses of all web pages of the router; A homepage generation module, used to generate a web page corresponding to the homepage of the router based on the webpage index tree; wherein the web page corresponding to the homepage includes an htm page corresponding to the homepage and a homepage navigation bar located at the top of the web page, and the homepage navigation bar includes multiple navigation items; The web page generation module is used to generate a web page corresponding to the clicked navigation item based on the web page index tree in response to detecting that any navigation item of the home page navigation bar is clicked, wherein the web page corresponding to the clicked navigation item includes the htm page corresponding to the clicked navigation item and the home page navigation bar.