CN110704759A - Implementation method of breadcrumb navigation component, breadcrumb navigation display method and device - Google Patents
Implementation method of breadcrumb navigation component, breadcrumb navigation display method and device Download PDFInfo
- Publication number
- CN110704759A CN110704759A CN201910919151.XA CN201910919151A CN110704759A CN 110704759 A CN110704759 A CN 110704759A CN 201910919151 A CN201910919151 A CN 201910919151A CN 110704759 A CN110704759 A CN 110704759A
- Authority
- CN
- China
- Prior art keywords
- breadcrumb
- displayed
- navigation
- node
- breadcrumbs
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/954—Navigation, e.g. using categorised browsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9558—Details of hyperlinks; Management of linked annotations
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Radar, Positioning & Navigation (AREA)
- Remote Sensing (AREA)
- Navigation (AREA)
Abstract
The embodiment of the invention relates to the technical field of Internet, and provides a method for realizing a breadcrumbs navigation component, a breadcrumbs navigation display method and a related device, wherein the method comprises the following steps: obtaining breadcrumb data and a separator, wherein the breadcrumb data comprises at least one breadcrumb element, and each breadcrumb element comprises attribute information; sequentially traversing each breadcrumb element, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element; if the breadcrumb element is not the last element in the breadcrumb data, a separator is added after the element node corresponding to the breadcrumb element. The embodiment of the invention can improve the code reuse degree of the breadcrumb navigation and reduce the code redundancy caused by low code reuse degree of the breadcrumb navigation.
Description
Technical Field
The embodiment of the invention relates to the technical field of internet, in particular to a realization method of a breadcrumbs navigation component, a display method of breadcrumbs navigation and a related device.
Background
Along with the development of information technology, the complexity of a website system is larger and larger, the hierarchy of a page is deeper and deeper, and in order to make the website structure clearer, a visitor can jump among different hierarchies conveniently, the user experience is increased, and the breadcrumb navigation is generally used.
The role of breadcrumb navigation is to tell visitors where they are currently on the web site and how to return. There are three main types of breadcrumb navigation currently available: (1) this type of breadcrumb navigation may well point to the hierarchy of the current page and the entire site based on the location of the breadcrumb navigation. (2) This type of breadcrumb navigation may well indicate other attributes or categories of products within the current page based on the breadcrumb navigation of the attributes. (3) Based on the path-based breadcrumb navigation, this type of breadcrumb navigation may display links to web pages visited by visitors before reaching the pages.
However, since each breadcrumb navigation has corresponding development code, the reusability of the codes corresponding to the breadcrumb navigations is extremely low, and the codes are greatly redundant.
Disclosure of Invention
In view of the above, an object of the embodiments of the present invention is to provide an implementation method of a breadcrumbs navigation component, a display method of breadcrumbs navigation and a related device, which can improve the code reusability of breadcrumbs navigation and reduce code redundancy caused by low code reusability of breadcrumbs navigation.
In order to achieve the above purpose, the embodiments of the present application employ the following technical solutions:
in a first aspect, an embodiment of the present invention provides an implementation method of a breadcrumbs navigation module, which is applied to an electronic device, and the method includes: obtaining breadcrumb data and a separator, wherein the breadcrumb data comprises at least one breadcrumb element, and each breadcrumb element comprises attribute information; sequentially traversing each breadcrumb element, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element; if the breadcrumb element is not the last element in the breadcrumb data, a separator is added after the element node corresponding to the breadcrumb element.
In a second aspect, an embodiment of the present invention provides a display method for breadcrumbs navigation, which is applied to an electronic device, where a contact frame exists on the electronic device, and the contact frame includes a breadcrumbs navigation component obtained by using the implementation method for breadcrumbs navigation component described in the foregoing embodiment, where the method includes: receiving breadcrumb data to be displayed and a preset separator; analyzing the breadcrumb data to be displayed by using a breadcrumb navigation component to obtain a node of an element to be displayed corresponding to each breadcrumb element to be displayed in the breadcrumb data to be displayed; displaying the element nodes to be displayed by using a act frame; and if the node of the element to be displayed is not the last element in the breadcrumb data to be displayed, displaying the preset separator by using the act frame.
In a third aspect, an embodiment of the present invention provides an apparatus for implementing a breadcrumbs navigation module, which is applied to an electronic device, and the apparatus includes an obtaining module and a processing module, where the obtaining module is configured to obtain breadcrumbs data and a separator, the breadcrumbs data includes at least one breadcrumbs element, and each breadcrumbs element includes attribute information; the processing module is used for: sequentially traversing each breadcrumb element, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element; and means for adding a delimiter after the element node corresponding to the breadcrumb element if the breadcrumb element is not the last element in the breadcrumb data.
In a fourth aspect, an embodiment of the present invention provides a display apparatus for breadcrumbs navigation, which is applied to an electronic device, wherein a contact frame exists on the electronic device, the contact frame includes a breadcrumbs navigation component obtained by using the implementation method of the breadcrumbs navigation component in the foregoing embodiment, the apparatus includes a receiving module, an analyzing module, and a display module, wherein the receiving module is configured to receive breadcrumbs data to be displayed and a preset separator; the analysis module is used for analyzing the breadcrumb data to be displayed by using the breadcrumb navigation component to obtain an element node to be displayed corresponding to each breadcrumb element to be displayed in the breadcrumb data to be displayed; the display module is used for displaying the element nodes to be displayed by utilizing the act frame; and if the node of the element to be displayed is not the last element in the breadcrumb data to be displayed, displaying the preset separator by using the act frame.
In a fifth aspect, an embodiment of the present invention provides an electronic device, where the electronic device includes: one or more processors; a memory for storing one or more programs which, when executed by the one or more processors, cause the one or more processors to implement a method of implementing a breadcrumbs navigation assembly as described in the previous embodiments and/or a method of displaying breadcrumbs navigation as described in the previous embodiments.
In a sixth aspect, embodiments of the present invention provide a computer-readable storage medium, on which a computer program is stored, the computer program, when being executed by a processor, implementing the method for implementing the breadcrumbs navigation assembly as described in the foregoing embodiments and/or the method for displaying the breadcrumbs navigation as described in the foregoing embodiments.
Compared with the prior art, the embodiment of the invention provides an implementation method of a breadcrumbs navigation component, a display method of the breadcrumbs navigation component and a related device, wherein a plurality of different breadcrumbs navigations can utilize the breadcrumbs navigation component to display corresponding breadcrumbs navigation on a page, and therefore, the different breadcrumbs navigation components can reuse the implementation codes of the breadcrumbs navigation component, so that the code reusability of the breadcrumbs navigation component can be improved, and the code redundancy caused by the low code reusability of the breadcrumbs navigation component is reduced.
In order to make the aforementioned objects, features and advantages of the present application more comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
Fig. 1 shows a block schematic diagram of an electronic device provided by an embodiment of the present invention.
FIG. 2 illustrates a flow diagram of an implementation method of the breadcrumb navigation component provided by an embodiment of the invention.
FIG. 3 illustrates a flow diagram of an implementation of another breadcrumb navigation component provided by an embodiment of the invention.
Fig. 4 is a flowchart illustrating a display method of breadcrumb navigation provided by an embodiment of the invention.
Fig. 5 is a flowchart illustrating another display method of breadcrumb navigation according to an embodiment of the present invention.
FIG. 6 is a block diagram of an apparatus for implementing the breadcrumb navigation module according to an embodiment of the invention.
Fig. 7 is a block diagram of a display device for breadcrumb navigation provided by an embodiment of the invention.
Icon: 10-an electronic device; 11-a memory; 12-a communication interface; 13-a processor; 14-a bus; 100-implementation of a breadcrumb navigation component; 110-an obtaining module; 120-a processing module; 200-display of breadcrumb navigation; 210-a receiving module; 220-a resolution module; 230-display module.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
In the description of the present invention, it should be noted that if the terms "upper", "lower", "inside", "outside", etc. indicate an orientation or a positional relationship based on that shown in the drawings or that the product of the present invention is used as it is, this is only for convenience of description and simplification of the description, and it does not indicate or imply that the device or the element referred to must have a specific orientation, be constructed in a specific orientation, and be operated, and thus should not be construed as limiting the present invention.
Furthermore, the appearances of the terms "first," "second," and the like, if any, are used solely to distinguish one from another and are not to be construed as indicating or implying relative importance.
It should be noted that the features of the embodiments of the present invention may be combined with each other without conflict.
In order to solve the problem of the great redundancy of the codes due to the low reusability among the codes corresponding to the multiple breadcrumb navigations, the embodiment of the invention realizes the breadcrumb navigation component, and the multiple breadcrumb navigations can reuse the codes of the breadcrumb navigation component, thereby reducing the redundancy of the codes, which is described in detail below.
Referring to fig. 1, fig. 1 is a block diagram illustrating an electronic device 10 that may implement a method for implementing a breadcrumb navigation module and/or a method for displaying breadcrumb navigation according to an embodiment of the present invention.
The electronic device 10 may be a general purpose computer or a special purpose computer, both of which may be used to implement the method of implementing the breadcrumb navigation component and/or the method of displaying the breadcrumb navigation provided by the embodiments of the invention. Although only one computer is illustrated in the present application, in practical applications, the electronic device 10 implementing the method for implementing the breadcrumbs navigation component and the method for displaying the breadcrumbs navigation component provided by the embodiment of the present invention may be the same or may be two independent electronic devices 10.
The electronic device 10 includes a memory 11, a communication interface 12, a processor 13, and a bus 14. The memory 11, the communication interface 12, and the processor 13 are connected by a bus 14.
The memory 11 is used for storing a program, for example, an implementation apparatus of a breadcrumbs navigation module and/or a display apparatus of breadcrumbs navigation provided by the embodiment of the invention, and may also be used for storing an execution instruction, and the processor 13 executes the program after receiving the execution instruction to implement the implementation method of the breadcrumbs navigation module and/or the display method of breadcrumbs navigation disclosed in the above embodiment.
The Memory 11 may include a high-speed Random Access Memory (RAM) and may also include a non-volatile Memory (non-volatile Memory), such as at least one disk Memory. Alternatively, the memory 11 may be a storage device built in the processor 13, or may be a storage device independent of the processor 13.
The communication connection with other external devices is realized through at least one communication interface 12 (which may be wired or wireless).
The bus 14 may be an ISA bus, PCI bus, EISA bus, or the like. Only one bi-directional arrow is shown in fig. 1, but this does not indicate only one bus or one type of bus.
The processor 13 may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware or instructions in the form of software in the processor 13. The Processor 13 may be a general-purpose Processor, and includes a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components.
Based on the above description of the electronic device 10, the embodiment of the invention first describes an implementation method of the breadcrumbs navigation module, and the method is applied to the electronic device 10. Referring to fig. 2, fig. 2 is a flowchart illustrating a method for implementing a breadcrumb navigation module according to an embodiment of the present invention, the method including the following steps:
step S101, obtaining the breadcrumb data and the delimiters, wherein the breadcrumb data comprises at least one breadcrumb element, and each breadcrumb element comprises attribute information.
In this embodiment, the breadcrumb data comprises information that needs to be displayed in the breadcrumb navigation, which typically comprises a plurality of levels, each level displaying different information, the information between the levels being separated by separators. For example, breadcrumb navigates to:data resource directory level one/Data resources catalog level two (water supply)/Standard watch (Water supply)Data item (tap water user registration information), the breadcrumb navigation comprises 4 levels, with information between levels separated by a separator "/". The separator may have a default symbol, such as "/", and when the user does not specify the separator, the default symbol is used as the separator, but the user may also use other symbols as the separator according to the needs of the actual scene, such as "->”、“>"and the like.
In this embodiment, each level corresponds to a breadcrumb element in the breadcrumb data, and the breadcrumb elements are organized in a predetermined format to form the breadcrumb data. The breadcrumb element includes attribute information including, but not limited to, display information, jump link information, remark information, and the like. For example, the breadcrumb data is as follows:
wherein linkInfo is breadcrumb data comprising 4 breadcrumb elements, each breadcrumb element being enclosed by "{ }". The 1 st to 3 rd breadcrumb elements include display information (i.e., information corresponding to label) and jump link information (i.e., address information corresponding to Uniform Resource Locator url).
And S102, traversing each breadcrumb element in sequence, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element.
In this embodiment, one breadcrumb element corresponds to one element node, the element node is generated by organizing attribute information of the breadcrumb element according to a preset format required for display, and the breadcrumb navigation module displays the corresponding breadcrumb element according to the element node.
In step S103, if the breadcrumb element is not the last element in the breadcrumb data, a separator is added after the element node corresponding to the breadcrumb element.
In this embodiment, since the delimiters need to be displayed between levels in the breadcrumb navigation, if the breadcrumb element is not the last element, i.e., if the current breadcrumb element is located in the middle level in the breadcrumb navigation, the delimiters need to be displayed after the current breadcrumb element, otherwise, if the current breadcrumb element is located in the last level in the breadcrumb navigation, the delimiters need not be displayed again.
According to the implementation method of the breadcrumbs navigation assembly provided by the embodiment of the invention, as the display implementation process of the breadcrumbs navigation is encapsulated, the breadcrumbs navigation assembly is generated, so that when the breadcrumbs navigation is required to be displayed, a user only needs to input the breadcrumbs data required to be displayed to the breadcrumbs navigation assembly and call the breadcrumbs navigation assembly through the display frame to realize the display of the breadcrumbs navigation, and as different breadcrumbs navigation can be realized through the breadcrumbs navigation assembly, only one code of the breadcrumbs navigation assembly is needed, so that the redundancy of the codes corresponding to a plurality of breadcrumbs navigation can be reduced.
Since the attribute information of each breadcrumbs element is different and is also displayed differently in the breadcrumbs navigation, and therefore, the element nodes generated according to the attribute information of the breadcrumbs element may also be different, as a specific implementation manner, an embodiment of the present invention provides another implementation method of the breadcrumbs navigation component on the basis of fig. 2, please refer to fig. 3, where step S102 specifically includes the following sub-steps:
and a substep S1021, if the attribute information of the breadcrumbs element further includes the jump link information, generating a first node corresponding to the breadcrumbs element according to the display information and the jump link information.
In this embodiment, when the jump link information is display information of a breadcrumb element clicked on the breadcrumb navigation, the jump address information is, for example, the breadcrumb element is:
{
label: 'data resource directory one level',
url:'app/path1',
},
when "data resource directory level one" is clicked on the breadcrumb navigation, the "app/path 1" web address of the current web site is jumped to.
In this embodiment, the first node is an element node corresponding to a breadcrumb element whose attribute information includes the jump link information, that is, display information of the breadcrumb element corresponding to the first node displayed by the breadcrumb navigation can be clicked to enter a page of the jump link information included in the first node. The first node typically corresponds to a breadcrumb element corresponding to a level other than the last level displayed in the breadcrumb navigation.
In the sub-step S1022, if the attribute information of the breadcrumbs element does not include the jump link information, a second node corresponding to the breadcrumbs element is generated according to the display information.
In this embodiment, the second node is an element node corresponding to a breadcrumb element whose attribute information does not include jump link information. The second node typically corresponds to a breadcrumb element corresponding to the last level displayed in the breadcrumb navigation.
According to the implementation method of the breadcrumbs navigation component provided by the embodiment of the invention, the last level displayed in the breadcrumbs navigation is distinguished from the processing of other levels, and the same processing steps in other levels are extracted and packaged, so that the implementation code of the breadcrumbs navigation component is simpler and has stronger universality.
In this embodiment, as a specific implementation manner, the breadcrumbs navigation component may be implemented based on a contact framework, where the contact framework is a User Interface (UI) framework based on JavaScript and is focused on creating a front-end rich WEB application. Of course, the breadcrumbs navigation component may also be implemented based on other WEB application frameworks, for example, Vue framework, and the specific WEB application framework on which the breadcrumbs navigation component is based in the embodiment of the present invention is not limited.
The following section of code presents a specific implementation of the breadcrumb navigation component based on the exact framework.
It should be noted that those skilled in the art can adapt other WEB application frameworks by rewriting the code without any creative effort. Therefore, methods of implementing the breadcrumb navigation component based on other WEB application frameworks are also within the scope of embodiments of the invention.
Based on the implementation method of the breadcrumbs navigation module provided by any of the embodiments, an embodiment of the present invention further provides a display method for displaying breadcrumbs navigation by using the breadcrumbs navigation module obtained by any of the embodiments, please refer to fig. 4, and fig. 4 shows a flowchart of the display method for breadcrumbs navigation provided by an embodiment of the present invention, where the display method includes the following steps:
in step S201, the breadcrumb data to be displayed and the preset delimiter are received.
In this embodiment, the format of the breadcrumb data to be displayed needs to be organized according to the same preset format as that in step S101, and the preset separator may be a symbol designated by the user according to the scene needs, or may be a default symbol.
Step S202, the breadcrumbs data to be displayed is analyzed by the breadcrumbs navigation component, and an element node to be displayed corresponding to each breadcrumbs element to be displayed in the breadcrumbs data to be displayed is obtained.
And step S203, displaying the nodes of the elements to be displayed by using the act frame.
And step S204, if the element node to be displayed is not the last element in the breadcrumb data to be displayed, displaying a preset separator by using a act frame.
When the user displays the breadcrumb navigation by using the display method of the embodiment, for different breadcrumb navigations, the display of different breadcrumb navigations can be realized only by introducing corresponding breadcrumb data to be displayed and preset separators which are organized according to a preset format when the breadcrumb navigation component is called by using the contact frame.
Referring to fig. 5, step S203 further includes the following sub-steps:
and step S2031, if the element node to be displayed is the first node, displaying the display information and the skip link information in the first node by using a act frame.
In this embodiment, the skip link information may be displayed in a floating window form, for example, when a mouse stays within an information area corresponding to the first node in the breadcrumbs navigation, the skip link information is displayed, or an underline form may be displayed under the information corresponding to the first node in the breadcrumbs navigation, which shows that the skip link information is displayed.
And a substep S2032, if the element node to be displayed is a second node, displaying the display information in the second node by using the act frame.
In order to perform the corresponding steps in the above-described embodiments and various possible implementations, an implementation of an implementation apparatus of a breadcrumbs navigation module is given below. Referring to fig. 6, fig. 6 is a block diagram illustrating an implementation apparatus 100 for a breadcrumb navigation module according to an embodiment of the invention. It should be noted that the basic principle and the generated technical effect of the implementation apparatus 100 of the breadcrumbs navigation module provided in the present embodiment are the same as those of the above-mentioned embodiment, and for the sake of brief description, no mention is made in this embodiment, and reference may be made to the corresponding contents in the above-mentioned embodiment. The device 100 for implementing the breadcrumbs navigation module is applied to the electronic device 10, and comprises at least one software functional module which can be stored in the memory 11 in fig. 1 in the form of software or firmware (firmware), and when the processor 13 in fig. 1 executes the software functional module in the memory 11 after receiving the execution instruction, the implementation method of the breadcrumbs navigation module disclosed in the above embodiment is implemented. The implementation device 100 of the breadcrumb navigation component comprises an acquisition module 110 and a processing module 120.
The obtaining module 110 is configured to obtain the breadcrumb data and the delimiters, where the breadcrumb data includes at least one breadcrumb element, and each breadcrumb element includes attribute information.
A processing module 120 configured to: sequentially traversing each breadcrumb element, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element; if the breadcrumb element is not the last element in the breadcrumb data, a separator is added after the element node corresponding to the breadcrumb element.
Optionally, the processing module 120 is specifically configured to: if the attribute information of the breadcrumb element also comprises jump link information, generating a first node corresponding to the breadcrumb element according to the display information and the jump link information; and if the attribute information of the breadcrumb element does not comprise the jump link information, generating a second node corresponding to the breadcrumb element according to the display information.
The embodiment of the invention also provides an implementation mode of the display device for the breadcrumb navigation. Referring to fig. 7, fig. 7 is a block diagram illustrating a display device 200 for breadcrumb navigation according to an embodiment of the invention. It should be noted that the basic principle and the generated technical effect of the display device 200 for breadcrumbs navigation provided by the present embodiment are the same as those of the above embodiments, and for the sake of brief description, no mention is made in this embodiment, and reference may be made to the corresponding contents in the above embodiments. The display device 200 for breadcrumbs navigation is applied to the electronic equipment 10, and a contact framework exists on the electronic equipment 10, wherein the contact framework comprises the breadcrumbs navigation component obtained by using the implementation method of the breadcrumbs navigation component in any one of the previous embodiments. The display device 200 for breadcrumb navigation comprises at least one software functional module which can be stored in the memory 11 in the form of software or firmware (firmware) in fig. 1, and when the processor 13 in fig. 1 executes the software functional module in the memory 11 after receiving an execution instruction, the display method for breadcrumb navigation disclosed in the above embodiment is implemented. The display device 200 for breadcrumb navigation comprises at least one software functional module which can be stored in the memory 11 in the form of software or firmware (firmware) and is executed in the memory 11 when the processor 13 in fig. 1 receives an execution instruction, so that the implementation method of the breadcrumb navigation assembly disclosed by the above embodiment is realized. The display device 200 for breadcrumb navigation includes a receiving module 210, a parsing module 220 and a display module 230.
The receiving module 210 is configured to receive the breadcrumb data to be displayed and the preset delimiter.
The parsing module 220 is configured to parse the to-be-displayed breadcrumb data by using the breadcrumb navigation component to obtain to-be-displayed element nodes corresponding to each to-be-displayed breadcrumb element in the to-be-displayed breadcrumb data.
A display module 230 for: displaying the element nodes to be displayed by using a act frame; and if the node of the element to be displayed is not the last element in the breadcrumb data to be displayed, displaying the preset separator by using the act frame.
Embodiments of the present invention provide a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by the processor 13, implements the implementation method of the breadcrumb navigation assembly according to any one of the preceding embodiments, and/or the display method of the breadcrumb navigation according to the preceding embodiments.
In summary, an embodiment of the present invention provides an implementation method of a breadcrumbs navigation module, a display method of breadcrumbs navigation and a related apparatus, where the implementation method of the breadcrumbs navigation module includes: obtaining breadcrumb data and a separator, wherein the breadcrumb data comprises at least one breadcrumb element, and each breadcrumb element comprises attribute information; sequentially traversing each breadcrumb element, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element; if the breadcrumb element is not the last element in the breadcrumb data, a separator is added after the element node corresponding to the breadcrumb element. The display method of the breadcrumb navigation comprises the following steps: receiving breadcrumb data to be displayed and a preset separator; analyzing the breadcrumb data to be displayed by using a breadcrumb navigation component to obtain a node of an element to be displayed corresponding to each breadcrumb element to be displayed in the breadcrumb data to be displayed; displaying the element nodes to be displayed by using a act frame; and if the node of the element to be displayed is not the last element in the breadcrumb data to be displayed, displaying the preset separator by using the act frame. Compared with the prior art, the multiple different breadcrumbs navigation can display the corresponding breadcrumbs navigation on the page by utilizing the breadcrumbs navigation component, and therefore the multiple different breadcrumbs navigation can reuse the implementation code of the breadcrumbs navigation component, so that the code reuse degree of the breadcrumbs navigation can be improved, and the code redundancy caused by the low code reuse degree of the breadcrumbs navigation is reduced.
The above description is only for the specific embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims.
Claims (10)
1. A method for implementing a breadcrumb navigation module is applied to an electronic device, and comprises the following steps:
obtaining breadcrumb data and a separator, wherein the breadcrumb data comprises at least one breadcrumb element, and each breadcrumb element comprises attribute information;
sequentially traversing each breadcrumb element, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element;
if the breadcrumb element is not the last element in the breadcrumb data, adding the separator after the element node corresponding to the breadcrumb element.
2. The method of claim 1, wherein the element nodes comprise a first node and a second node, the attribute information comprises at least display information, and the step of generating the element node corresponding to each breadcrumb element in the breadcrumb navigation module based on the attribute information of the breadcrumb element comprises:
if the attribute information of the breadcrumb element also comprises jump link information, generating a first node corresponding to the breadcrumb element according to the display information and the jump link information;
and if the attribute information of the breadcrumb element does not comprise the jump link information, generating a second node corresponding to the breadcrumb element according to the display information.
3. The method of any of claims 1-2, wherein the breadcrumb navigation component is implemented based on a react framework.
4. A display method of breadcrumbs navigation, applied to an electronic device, wherein a contact framework exists on the electronic device, the contact framework comprises a breadcrumbs navigation component obtained by using the implementation method of the breadcrumbs navigation component of any one of claims 1-2, and the method comprises:
receiving breadcrumb data to be displayed and a preset separator;
analyzing the to-be-displayed breadcrumb data by using the breadcrumb navigation component to obtain to-be-displayed element nodes corresponding to each to-be-displayed breadcrumb element in the to-be-displayed breadcrumb data;
displaying the element nodes to be displayed by utilizing the act frame;
and if the element node to be displayed is not the last element in the breadcrumb data to be displayed, displaying the preset separator by using the act frame.
5. The breadcrumb navigational display method of claim 4 wherein said to-be-displayed element nodes comprise a first node and a second node, said first node comprising display information and jump link information of said to-be-displayed element nodes, said second node comprising display information of said to-be-displayed element nodes, said step of displaying said to-be-displayed element nodes using said act frame comprising:
if the element node to be displayed is the first node, displaying display information and skip link information in the first node by using the act frame;
and if the element node to be displayed is the second node, displaying the display information in the second node by using the act frame.
6. An apparatus for implementing a breadcrumbs navigation module, which is applied to an electronic device, the apparatus comprising:
the system comprises an acquisition module, a processing module and a processing module, wherein the acquisition module is used for acquiring the breadcrumb data and separators, the breadcrumb data comprises at least one breadcrumb element, and each breadcrumb element comprises attribute information;
a processing module to:
sequentially traversing each breadcrumb element, and generating an element node corresponding to the breadcrumb element in the breadcrumb navigation component according to the attribute information of each breadcrumb element;
if the breadcrumb element is not the last element in the breadcrumb data, adding the separator after the element node corresponding to the breadcrumb element.
7. The apparatus of claim 6, wherein the element nodes comprise a first node and a second node, wherein the attribute information comprises at least display information, and wherein the processing module is configured to:
if the attribute information of the breadcrumb element also comprises jump link information, generating a first node corresponding to the breadcrumb element according to the display information and the jump link information;
and if the attribute information of the breadcrumb element does not comprise the jump link information, generating a second node corresponding to the breadcrumb element according to the display information.
8. A display device for breadcrumbs navigation, applied to an electronic device, wherein a contact framework exists on the electronic device, the contact framework comprises a breadcrumbs navigation module obtained by using the implementation method of the breadcrumbs navigation module of any one of claims 1-2, the device comprises:
the receiving module is used for receiving the breadcrumb data to be displayed and the preset separator;
the analysis module is used for analyzing the breadcrumb data to be displayed by using the breadcrumb navigation component to obtain an element node to be displayed corresponding to each breadcrumb element to be displayed in the breadcrumb data to be displayed;
a display module to:
displaying the element nodes to be displayed by utilizing the act frame;
and if the element node to be displayed is not the last element in the breadcrumb data to be displayed, displaying the preset separator by using the act frame.
9. An electronic device, characterized in that the electronic device comprises:
one or more processors;
a memory for storing one or more programs which, when executed by the one or more processors, cause the one or more processors to implement a method of implementing the breadcrumb navigation assembly according to any one of claims 1 to 3 and/or a method of displaying breadcrumb navigation according to any one of claims 4 to 5.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, implements a method of implementing a breadcrumb navigation module according to any one of claims 1 to 3 and/or a method of displaying breadcrumb navigation according to any one of claims 4 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910919151.XA CN110704759A (en) | 2019-09-26 | 2019-09-26 | Implementation method of breadcrumb navigation component, breadcrumb navigation display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910919151.XA CN110704759A (en) | 2019-09-26 | 2019-09-26 | Implementation method of breadcrumb navigation component, breadcrumb navigation display method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110704759A true CN110704759A (en) | 2020-01-17 |
Family
ID=69197341
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910919151.XA Pending CN110704759A (en) | 2019-09-26 | 2019-09-26 | Implementation method of breadcrumb navigation component, breadcrumb navigation display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110704759A (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030018665A1 (en) * | 2001-07-11 | 2003-01-23 | International Business Machines Corporation | Method and system for dynamic web page breadcrumbing using javascript |
| CN103699438A (en) * | 2013-12-23 | 2014-04-02 | 乐视网信息技术（北京）股份有限公司 | Rapid switching method and device based on breadcrumb navigation |
| CN106815303A (en) * | 2016-12-14 | 2017-06-09 | 明博教育科技股份有限公司 | A kind of crumbs navigation implementation method and system based on XML configurations and label |
-
2019
- 2019-09-26 CN CN201910919151.XA patent/CN110704759A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030018665A1 (en) * | 2001-07-11 | 2003-01-23 | International Business Machines Corporation | Method and system for dynamic web page breadcrumbing using javascript |
| CN103699438A (en) * | 2013-12-23 | 2014-04-02 | 乐视网信息技术（北京）股份有限公司 | Rapid switching method and device based on breadcrumb navigation |
| CN106815303A (en) * | 2016-12-14 | 2017-06-09 | 明博教育科技股份有限公司 | A kind of crumbs navigation implementation method and system based on XML configurations and label |
Non-Patent Citations (1)
| Title |
|---|
| CRPER: "React 16.x折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件", 《HTTPS://BLOG.CSDN.NET/CRPER/ARTICLE/DETAILS/85106978》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106991154B (en) | Webpage rendering method and device, terminal and server | |
| CN109597617B (en) | Method and device for quickly generating service page based on template | |
| CN103942225B (en) | A kind of resource transfer method, client and the system of mixed type applications client | |
| US7870482B2 (en) | Web browser extension for simplified utilization of web services | |
| CN109684607B (en) | JSON data analysis method and device, computer equipment and storage medium | |
| CN109558128A (en) | Json data analysis method, device and computer readable storage medium | |
| US10002117B1 (en) | Translating annotation tags into suggested markup | |
| US11403078B2 (en) | Interface layout interference detection | |
| CN112559934A (en) | Page popup display method and device | |
| CN114077430A (en) | Interface generation method and device, electronic equipment and storage medium | |
| CN113536174A (en) | Interface loading method, device and equipment | |
| CN104899203B (en) | Webpage generation method and device and terminal equipment | |
| CN110020343B (en) | Method and device for determining webpage coding format | |
| CN115268904A (en) | User interface design file generation method, device, equipment and medium | |
| CN113392346A (en) | Path processing method and device for resource file, electronic equipment and storage medium | |
| CN115809056B (en) | Component multiplexing implementation method and device, terminal equipment and readable storage medium | |
| CN113761871A (en) | Rich text rendering method and device, electronic equipment and storage medium | |
| CN110704759A (en) | Implementation method of breadcrumb navigation component, breadcrumb navigation display method and device | |
| CN116860286A (en) | Page dynamic update method, device, electronic equipment and computer readable medium | |
| CN111783010A (en) | Webpage blank page monitoring method, device, terminal and storage medium | |
| US11443098B1 (en) | Federated recursive user interface element rendering | |
| CN111027281B (en) | Word segmentation method, device, equipment and storage medium | |
| Mao et al. | Developing Cross-platform Mobile and Web Apps | |
| CN112052368B (en) | Method, system, storage medium and electronic device for automatically extracting list data | |
| CN111125605B (en) | Page element acquisition method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20200117 |