A front-end page display method and device, a storage medium and an electronic device

Abstract

The application discloses a front-end page display method and device, a storage medium and an electronic device. The method comprises the following steps: obtaining a first page code corresponding to a first target page to be displayed, wherein the first target page comprises a target component, the first page code comprises a target style identifier, and the target style identifier is used for identifying a style code corresponding to the target component; obtaining the first style code identified by the target style identifier, wherein the first style code is used for indicating a component style of the target component; and displaying the first target page according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code. Through the application, the technical problem of low development efficiency of page styles caused by the need to process the style codes of front-end pages one by one in the related art is solved.

Description

TECHNICAL FIELD

[0001] The present application relates to the computer field, in particular to a front-end page display method and device, a storage medium and an electronic device. BACKGROUND

[0002] When developing a front-end application, the page style of the front-end application is changed very frequently, and basically covers every iteration of design requirements. When developing different front-end pages, the developer needs to write style code conforming to the UI (User Interface) standard in each front-end page. In addition, if the UI style is suddenly revised, the developer needs to modify the style code on each front-end page, which has the risk of missing modification.

[0003] It can be seen that the front-end page display method in the related art has the technical problem of low development efficiency of page style due to the need to process the style code of each front-end page. SUMMARY

[0004] The embodiments of the present application provide a front-end page display method and device, a storage medium and an electronic device to at least solve the technical problem of low development efficiency of page style due to the need to process the style code of each front-end page in the related art.

[0005] According to an aspect of an embodiment of the present application, a front-end page display method is provided, including: obtaining first page code corresponding to a first target page to be displayed, wherein the first target page contains a target component, the first page code contains a target style identifier, and the target style identifier is used to identify style code corresponding to the target component; obtaining first style code identified by the target style identifier, wherein the first style code is used to indicate a component style of the target component; and displaying the first target page according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code.

[0006] In an example embodiment, the obtaining of the first style code identified by the target style identifier includes: sending a first request message to a first server, wherein the first server is a server storing style code, and the first request message is used to request style code identified by the target style identifier; and receiving a first response message returned by the first server in response to the first request message, wherein the first response message carries the first style code.

[0007] In an example embodiment, the obtaining the first style code identified by the target style identifier comprises: obtaining a style code matching the target style identifier from a plurality of pre-stored style codes, to obtain the first style code.

[0008] In an example embodiment, after the obtaining the style code matching the target style identifier from the plurality of pre-stored style codes, the method further comprises: in a case where an effective time of the first style code is greater than or equal to a target time threshold, sending a second request message to a second server, wherein the second server is a server storing style codes, and the second request message is used to request the style code identified by the target style identifier; receiving a second response message returned by the second server in response to the second request message, wherein the second response message carries a second style code; and updating the first style code to the second style code to obtain an updated first style code.

[0009] In an example embodiment, after the displaying the first target page according to the first page code and the first style code, the method further comprises: obtaining a second page code corresponding to a second target page to be displayed, wherein the second target page contains the target component, and the second page code contains the target style identifier; and displaying the second target page according to the second page code and the first style code, wherein the target component is displayed in the second target page according to the component style indicated by the first style code.

[0010] In an example embodiment, before the obtaining the first page code corresponding to the first target page to be displayed, the method further comprises: marking a target component region where the target component is located on a target visual graph displayed in a page graph configuration interface, wherein the page graph configuration interface is an interface for configuring a visual graph of a page, and the target visual graph is used to describe page elements contained in the first target page; adding the target style identifier on the component region, wherein the target style identifier contains display parameters of the target component; and saving the configured target visual graph, wherein the first page code is written according to the target visual graph.

[0011] In an example embodiment, after the first target page is displayed according to the first page code and the first style code, the method further comprises: obtaining a third page code corresponding to a third target page to be displayed, wherein the target component is contained in the third target page, and the third page code contains the target style identifier; obtaining a third style code identified by the target style identifier, wherein the third style code is used to indicate a component style of the target component after updating; and displaying the third target page according to the third page code and the third style code, wherein the target component is displayed in the third target page according to the component style indicated by the third style code.

[0012] According to another aspect of the embodiments of the present application, a display device of a front-end page is also provided, comprising: a first obtaining unit, configured to obtain a first page code corresponding to a first target page to be displayed, wherein the first target page contains a target component, the first page code contains a target style identifier, and the target style identifier is used to identify a style code corresponding to the target component; a second obtaining unit, configured to obtain a first style code identified by the target style identifier, wherein the first style code is used to indicate a component style of the target component; and a first display unit, configured to display the first target page according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code.

[0013] In an example embodiment, the second obtaining unit comprises: a sending module, configured to send a first request message to a first server, wherein the first server is a server storing style codes, and the first request message is used to request a style code identified by the target style identifier; and a receiving module, configured to receive a first response message returned by the first server in response to the first request message, wherein the first response message carries the first style code.

[0014] In an example embodiment, the second obtaining unit comprises: an obtaining module, configured to obtain a style code matching the target style identifier from a plurality of pre-stored style codes, to obtain the first style code.

[0015] In an example embodiment, the apparatus further comprises: a sending unit configured to, after obtaining the style code matching the target style identifier from the plurality of pre-stored style codes, send a second request message to a second server in a case where the effective time of the first style code is greater than or equal to a target time threshold, wherein the second server is a server storing style codes, and the second request message is used to request the style code identified by the target style identifier; a receiving unit configured to receive a second response message returned by the second server in response to the second request message, wherein the second response message carries a second style code; and an updating unit configured to update the first style code to the second style code to obtain an updated first style code.

[0016] In an example embodiment, the apparatus further comprises: a third obtaining unit configured to, after displaying the first target page according to the first page code and the first style code, obtain a second page code corresponding to a second target page to be displayed, wherein the second target page contains the target component, and the second page code contains the target style identifier; and a second displaying unit configured to display the second target page according to the second page code and the first style code, wherein the target component is displayed in the second target page according to the component style indicated by the first style code.

[0017] In an example embodiment, the apparatus further comprises: a marking unit configured to, before obtaining the first page code corresponding to the first target page to be displayed, mark a target component region where the target component is located on a target visual graph displayed in a page graph configuration interface, wherein the page graph configuration interface is an interface for configuring a visual graph of a page, and the target visual graph is used to describe page elements contained in the first target page; an adding unit configured to add the target style identifier on the component region, wherein the target style identifier contains display parameters of the target component; and a saving unit configured to save the configured target visual graph, wherein the first page code is written according to the target visual graph.

[0018] In an example embodiment, the apparatus further comprises: a fourth obtaining unit, configured to obtain third page code corresponding to a third target page to be displayed after the first target page is displayed according to the first page code and the first style code, wherein the target component is contained in the third target page, and the target style identifier is contained in the third page code; a fifth obtaining unit, configured to obtain third style code identified by the target style identifier, wherein the third style code is used to indicate the component style of the target component after updating; and a third displaying unit, configured to display the third target page according to the third page code and the third style code, wherein the target component is displayed in the third target page according to the component style indicated by the third style code.

[0019] According to another aspect of the embodiments of the present application, a computer readable storage medium is provided, and the computer readable storage medium stores a computer program. The computer program is configured to execute the display method of the front-end page when running.

[0020] According to another aspect of the embodiments of the present application, an electronic device is provided, which comprises a memory, a processor, and a computer program stored in the memory and capable of running on the processor. The processor executes the display method of the front-end page by using the computer program.

[0021] In the embodiments of the present application, the front-end page style is uniformly managed. The first page code corresponding to the first target page to be displayed is obtained, wherein the target component is contained in the first target page, and the target style identifier is contained in the first page code. The first style code identified by the target style identifier is obtained, wherein the first style code is used to indicate the component style of the target component. The first target page is displayed according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code. Since the front-end page style is uniformly managed, the style code of the component in the page is identified by the style identifier in the page code. When the page style is processed, all the pages referencing the style code can be completed by modifying the style code, which can achieve the purpose of reducing the processing operation of the page style code, and improve the development efficiency of the page style. Thus, the technical problem of low development efficiency of the page style caused by processing the style code of the front-end page one by one in the related art is solved. BRIEF DESCRIPTION OF DRAWINGS

[0022] The accompanying drawings, which are incorporated herein and form part of the specification, illustrate the embodiments of the present application and, together with the description, explain the principles of the present application.

[0023] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the accompanying drawings needed to be used in the embodiments or prior art description will be briefly introduced as follows. Obviously, for those of ordinary skill in the art, the other drawings can be obtained based on these drawings without any creative effort.

[0024] Figure 1 FIG. 1 is a schematic diagram of a hardware environment of an optional front-end page display method according to an embodiment of the present application;

[0025] Figure 2 FIG. 2 is a flowchart of an optional front-end page display method according to an embodiment of the present application;

[0026] Figure 3 FIG. 3 is a schematic diagram of an optional front-end page display method according to an embodiment of the present application;

[0027] Figure 4 FIG. 4 is a flowchart of another optional front-end page display method according to an embodiment of the present application;

[0028] Figure 5 FIG. 5 is a structural block diagram of an optional front-end page display device according to an embodiment of the present application;

[0029] Figure 6 FIG. 6 is a structural block diagram of an optional electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0030] In order to make the personnel in the technical field better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described in the embodiments of the present application in combination with the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present application, but not all the embodiments. Based on the embodiments in the present application, all the other embodiments obtained by those of ordinary skill in the art without any creative effort should belong to the scope of protection of the present application.

[0031] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily describe a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0032] According to an aspect of the embodiments of the present application, a front-end page display method is provided. Optionally, in the present embodiment, the above-mentioned front-end page display method can be applied in the hardware environment composed of the terminal 102 and the server 104 as shown in the figure. Figure 1 As shown in the figure, the server 104 is connected with the terminal 102 through the network, which can be used to provide services (such as application services, etc.) for the terminal or the client installed on the terminal, and a database can be set on the server or independently of the server, which is used to provide data storage services for the server 104. Figure 1 As shown in the figure, the server 104 is connected with the terminal 102 through the network, which can be used to provide services (such as application services, etc.) for the terminal or the client installed on the terminal, and a database can be set on the server or independently of the server, which is used to provide data storage services for the server 104.

[0033] The above-mentioned network can include but is not limited to at least one of the following: wired network, wireless network. The above-mentioned wired network can include but is not limited to at least one of the following: wide area network, metropolitan area network, local area network, and the above-mentioned wireless network can include but is not limited to at least one of the following: WIFI (Wireless Fidelity), Bluetooth. The terminal 102 can not be limited to PC, mobile phone, tablet computer, etc.

[0034] The front-end page display method of the embodiments of the present application can be executed by the server 104, or by the terminal 102, or by the server 104 and the terminal 102 together. Wherein, the terminal 102 executing the front-end page display method of the embodiments of the present application can also be executed by the client installed thereon.

[0035] Taking the terminal 102 executing the front-end page display method in the present embodiment as an example, Figure 2 is a flow diagram of an optional front-end page display method according to the embodiments of the present application, as shown in the figure, the flow of the method can include the following steps: Figure 2

[0036] ​In step S202, a first page code corresponding to a first target page to be displayed is acquired, wherein the first target page contains a target component, and the first page code contains a target style identifier, and the target style identifier is used to identify a style code corresponding to the target component.

[0037] The display method of the front-end page in this embodiment can be applied to a scenario of displaying a page style designed by front-end development on a terminal device (i.e., the aforementioned terminal 102). When developing a front-end application, the page style is frequently changed, and basically covers every requirement iteration. However, in fact, a large part of the page style content of multiple different front-end pages is repeated. For example, the performance of an article title in the user interfaces of an article list page, an article detail page, a collection list page, and the like is consistent, and the style content therein is also the same. However, the developer needs to repeatedly write the same style code multiple times when developing different pages.

[0038] Optionally, in this embodiment, the repeated code can be reduced, the development efficiency can be improved, and the maintainability of the code can be improved by uniformly managing the page style. The page style described above can be a style of a component in a front-end page displayed on a corresponding front-end page, for example, a title style, a text font style, and the like, which can be implemented by a style code. The front-end page described above can be a display page on various terminals, for example, a content recommendation page, a commodity detail page, and the like on a mobile phone, a computer, a tablet, and the like, which are not limited herein in this embodiment.

[0039] In this embodiment, the user can trigger the display of the front-end page by operating an application on the terminal device or other manners. After detecting the triggering operation for displaying the front-end page, the terminal device can perform a display process of the front-end page in response to the detected triggering operation. The triggering operation can include, but is not limited to, at least one of the following: a touch operation, for example, a click operation, a double-click operation, a long-press operation, a sliding operation, and the like; a voice input operation, and the received input voice can contain a keyword for triggering the display of the front-end page; or other types of triggering operations. The front-end page described above can be a page displayed on the display screen of the terminal device, for example, a first target page.

[0040] In response to the detected triggering operation, the terminal device can acquire, from a corresponding background server, a first page code corresponding to a first target page to be displayed. Here, the first target page can be an article list page, an article detail page, a collection list page, and the like to be displayed, and the first page code can be a page code corresponding to the first target page written based on HTML (Hyper Text Markup Language) or other languages.

[0041] The target component can be a component (e.g., a main article title, a sub-article title, etc.) displayed in the first target page, and a component style of the target component can be defined by a style code corresponding to the target component. The component style describes a display manner of the target component in the first target page, and can include at least one of the following: a font size, a font color value, a font, for example, the component style of the main article title can be a font size of 14px, a font color value of #000000, bold, and italic. The first page code can include a target style identifier, and the target style identifier can identify the style code corresponding to the target component.

[0042] For example, after a user clicks a "music recommendation" button on a mobile terminal, the mobile terminal updates a currently displayed page to a music recommendation page (an example of the first target page). In response to the detected click operation, the mobile terminal can send a display request of the music recommendation page to a background server, and pull a page code corresponding to the music recommendation page from the background. The page code can include a style identifier of a page main title of the music recommendation page.

[0043] In step S204, the first style code identified by the target style identifier is obtained, where the first style code is used to indicate the component style of the target component.

[0044] In this embodiment, in order to display the target component according to the component style corresponding to the target component, the terminal device can obtain the first style code identified by the target style identifier, where the first style code is used to indicate the component style of the target component.

[0045] There can be various ways for the terminal device to obtain the style code identified by the target style identifier, which can include at least one of the following: local acquisition, and acquisition from other devices. For example, the terminal device can pre-acquire a style code data packet (i.e., acquire multiple style codes) from a style code server, and save it locally in the terminal device. The terminal device can use the target code identifier to match the first style code from the multiple style codes saved locally. For another example, the terminal device can send a style code acquisition request to the style code server, where the request can carry the target style identifier. In response to the received style code acquisition request, the server finds the first style code matching the target style identifier from a style code database, and returns it to the terminal device. The terminal device can receive the first style code returned by the style code server in response to the style code acquisition request.

[0046] It should be noted that the style code server and the aforementioned background server can be the same server or different servers; the style code server can be a server that stores the component style of each component; if the terminal device does not find the style code matched with the target style identifier from the plurality of locally saved style codes, the terminal device can obtain the style code matched with the target style identifier from the style code server. In addition, the terminal device can also obtain the style code matched with the target style identifier from other devices (for example, other terminal devices, smart home devices, etc.). This is not limited in the embodiment.

[0047] It should be further noted that since the style code of the component style of the component in the page is represented by the style identifier in the page code, even if the UI style is suddenly updated, the developer does not need to go back to each page to modify the style, avoiding the risk of omission and improving the maintainability of the page.

[0048] For example, after obtaining the style identifier of the page title of the music recommendation page, the mobile terminal can obtain the style code matched with the style identifier of the page title from the style code server.

[0049] In step S206, the first target page is displayed according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code.

[0050] In the embodiment, after obtaining the first page code and the first style code, the terminal device can display the first target page according to the first page code and the first style code. The display mode of the page resource of the first target page can be determined by the first page code, for example, the display position, the arrangement mode, etc. The component style of the target component can be determined according to the first style code, and the first target page is displayed on the display terminal according to the display mode of the page resource and the component style of the target component.

[0051] It should be noted that the target component can be one or more components, and the component styles of different components can be the same or different, and different component styles can be identified by different component identifiers; the page resource of the first target page can be obtained at the same time as the first page code, or can be obtained after the first page code, or can be obtained in other actual ways, which are not limited in the embodiment.

[0052] For example, after obtaining the page code of the music recommendation page and the style code of the component style of each component of the music recommendation page, the music recommendation page can be displayed on the mobile terminal according to the page code and the style code of the component style of each component.

[0053] The first page code corresponding to the first target page to be displayed is obtained through the steps S202 to S206, the target component is contained in the first target page, the target style identifier is contained in the first page code, the target style identifier is used to identify the style code corresponding to the target component, the first style code identified by the target style identifier is obtained, the first style code is used to indicate the component style of the target component, and the first target page is displayed according to the first page code and the first style code. The target component is displayed in the first target page according to the component style indicated by the first style code, the technical problem of low development efficiency of page styles caused by the need to process the style codes of front-end pages one by one in the related art display method of the front-end page is solved, and the development efficiency of the page styles is improved.

[0054] In an example embodiment, obtaining the first style code identified by the target style identifier comprises:

[0055] S11, sending a first request message to a first server, wherein the first server is a server storing style codes, and the first request message is used to request the style code identified by the target style identifier;

[0056] S12, receiving a first response message returned by the first server in response to the first request message, wherein the first response message carries the first style code.

[0057] In this embodiment, the style code of the component style of the target component can be obtained from the style code server, that is, the first server. The terminal device can send a first request message (that is, the aforementioned component code acquisition request) to the first server. The first server can store the style code corresponding to the target component or store the style code corresponding to each component in a plurality of components, and the plurality of components can contain the target component.

[0058] After receiving the first request message sent by the terminal device, the first server can find the style code identified by the target style identifier (that is, the style code matching the target style identifier) from the stored style code, obtain the first style code, and return the first response message carrying the first style code to the terminal device in response to the first request message. The terminal device can receive the first response message returned by the first server and extract the first style code from the first response message.

[0059] Through this embodiment, by obtaining the style code identified by the style identifier from the server side, the occupation of the storage resources of the terminal device can be reduced, and the accuracy of the display of the component style in the front-end page (avoiding the case that the style code has been updated but not synchronized to the terminal device) is improved.

[0060] In an example embodiment, the first style code matching the target style identifier is obtained from a plurality of pre-stored style codes, including:

[0061] S21, obtaining, from a plurality of pre-stored style codes, a style code matching the target style identifier, to obtain the first style code.

[0062] In the embodiment, the style code of the component style of the target component can be obtained from the locally stored style code. The terminal device can use the target style identifier to search from the plurality of pre-stored style codes, find a style code matching the target style identifier from the plurality of style codes, and obtain the first style code.

[0063] Optionally, when searching for the style code from the plurality of pre-stored style codes, the terminal device can first determine whether the plurality of style codes are expired, i.e., whether the validity period is exceeded. If the plurality of style codes are expired, the terminal device can obtain an updated style code data packet, i.e., an updated plurality of style codes, from a style code server (or a first server), and use the target style identifier to search for a style code matching the target style identifier from the updated plurality of style codes.

[0064] It should be noted that the validity period can be a period of time starting from the time when the style code takes effect, or a period of time starting from the time when the terminal device obtains the style code. If the target component includes a plurality of components, the style identifier corresponding to each component can be determined first, at least one style identifier corresponding to the plurality of components (each style identifier can correspond to at least one component) can be determined, and then the style code corresponding to each style identifier can be obtained respectively. For the plurality of style identifiers, the style code corresponding to each style identifier can be obtained through a plurality of parallel threads respectively.

[0065] Through the embodiment, the style code matching the current style identifier is obtained from the pre-stored style code, which can improve the efficiency of obtaining the style code, shorten the time required for displaying the front-end page, and improve the timeliness of displaying the front-end page.

[0066] In an example embodiment, after obtaining the style code matching the target style identifier from the plurality of pre-stored style codes, the method further includes:

[0067] S31, in a case where the effective time of the first style code is greater than or equal to a target time threshold, sending a second request message to a second server, wherein the second server is a server storing the style code, and the second request message is used to request the style code identified by the target style identifier;

[0068] S32, receiving a second response message returned by the second server in response to the second request message, wherein the second response message carries a second style code;

[0069] S33, updating the first style code to the second style code to obtain an updated first style code.

[0070] In this embodiment, for the locally stored style code, the effective time of the style code can be monitored. The effective time can be the time from the time when the style code starts to take effect (which can be represented by a time stamp) to the current time (which can be represented by a system time), or the time from the time when the terminal device obtains the style code (which can be represented by a time stamp) to the current time.

[0071] If the effective time of the first style code reaches the target time threshold, it can be considered that the first style code has expired, and the terminal device can send a second request message to the second server, wherein the second request message can carry a target style identifier to request to obtain the latest style code identified by the target style identifier. The second server here can be a server (for example, the aforementioned style code server) that stores the style code, which can be the same server as the first server or a different server.

[0072] After receiving the second request message, the second server can find the style code identified by the target style identifier from the stored style code to obtain a second style code (which can be the same as or different from the first style code), and return a second response message carrying the second style code to the terminal in response to the second request message. The terminal device can receive the second response message returned by the second server, and extract the second style code from the second response message, update the first style code using the second style code to obtain an updated first style code. Thereafter, the target component in the front-end page containing the target component can be displayed according to the updated first style code.

[0073] It should be noted that the terminal device can update multiple style codes simultaneously in the form of data packets. If the effective time of the style code data packet is greater than or equal to the target time threshold, a second request message can be sent to the second server, the second request message being used to request to obtain the latest style code data packet, and the second response message received from the second server can carry an updated style code data packet, and the original style code data packet can be deleted. In addition, if the second response message carries an updated style code, the style code data packet can be updated using the style code carried in the second response message to obtain an updated style code data packet.

[0074] It should be further explained that if the first style code is not updated (which can be based on the version number of the style code), the second server can carry indication information indicating that the style code is not updated in the second response message returned to the terminal device. Based on the above indication information, the terminal device can also reset the effective time of the first style code. This is not limited in the embodiment.

[0075] Through the embodiment, the latest style code is pulled from the server side based on the effective time of the style code, which can improve the accuracy of the component style display in the front-end page.

[0076] In one example embodiment, after displaying the first target page according to the first page code and the first style code, the above method further comprises:

[0077] S41, obtaining a second page code corresponding to a second target page to be displayed, wherein the second target page contains a target component, and the second page code contains a target style identifier;

[0078] S42, displaying the second target page according to the second page code and the first style code, wherein the target component is displayed in the second target page according to the component style indicated by the first style code.

[0079] In the embodiment, after displaying the first target page on the terminal device, the user can display the second target page by operating the terminal device. The second target page can be the refreshed first target page or other page different from the first target page. In order to display the second target page, the terminal device can obtain the second page code corresponding to the second target page in a manner similar to the foregoing. The second target page can also contain a target component (for example, a text title), and the component style of the target component can be identified by a target style identifier in the second page code.

[0080] The terminal device can match the style code matched with the target style identifier in a manner similar to the foregoing to obtain the first style code, and display the second target page using the second page code and the first style code, which has been described and will not be repeated here.

[0081] Through the embodiment, the same component in different pages can use the same style code through the style identifier in the page code, and the style code only needs to be written once. When displayed on different pages, the corresponding style code is directly called, which can improve the development efficiency.

[0082] In one example embodiment, before obtaining the first page code corresponding to the first target page to be displayed, the above method further comprises:

[0083] S51, mark a target component region where the target component is located on a target visual graph displayed in a page graph configuration interface, wherein the page graph configuration interface is an interface for configuring a visual graph of a page, and the target visual graph is used to describe page elements contained in the first target page;

[0084] S52, add a target style identifier on the component region, wherein the target style identifier contains display parameters of the target component;

[0085] S53, save the configured target visual graph, wherein the first page code is written according to the target visual graph.

[0086] In the embodiment, before the first page code is obtained, a visual graph corresponding to the first target page can be configured through the page graph configuration interface to obtain a target visual graph, and the first page code is written according to the target visual graph.

[0087] A UI designer (or other related personnel) can design a set of UI specifications of component styles and mark standards of each specification, for example, a text main title is marked as: font size 14px, font color #000000, bold, and italic. A front-end development engineer (or other related personnel) can maintain a unified style file, design a style identifier of the style according to the UI specification, which can be a style class name, the style identifier can contain a component name and display parameters of the component. For example, the style class name of the text main title can be designed as main-title: font size: xxx, font color: xxx, bold, and italic.

[0088] A page graph configuration interface on a design tool (for example, a design program on a terminal device of the UI designer) of the UI designer can display a target visual graph of the first target page, and the UI designer can configure the target visual graph. The design tool can mark a target component region where a target component is located on the target visual graph in response to a detected configuration operation, for example, the target component is a text main title, and the target component region is an A region in the target visual graph.

[0089] The UI designer can also add a target style identifier on the target component region, wherein the target style identifier can contain a component name of the target component and display parameters of the target component. For example, the UI designer can mark a style in the specification when designing the visual graph, mark a title style as a text main title main-title, or main-title: font size: 14px, font color: #000000, bold, and italic.

[0090] In addition, the UI designer can also configure other page elements in the first target page in addition to the component, and perform a save operation by clicking a save button or the like, triggering saving of the configured target visual graph. In response to the detected save operation, the design tool can save the configured target visual graph. When the front-end development engineer (or other relevant personnel) develops the first target page according to the configured target visual graph, the front-end development engineer only needs to add the target style identifier in the first page code.

[0091] For example, when the front-end development engineer develops a page according to a visual graph, the front-end development engineer only needs to mark the corresponding HTML tag as a class name maintained in the standard, for example, mark the class name of an HTML tag of a text main title as main-title. Once the UI style is revised, the front-end development engineer only needs to modify the standard code in the style file, and the modification takes effect globally.

[0092] By the embodiment, by configuring a visual graph of a page in a page configuration interface, marking a component region in the visual graph, and adding a style identifier, the convenience of visual graph configuration of the page can be improved, and the efficiency of writing style code based on the visual graph can be improved.

[0093] In one example embodiment, after the first target page is displayed according to the first page code and the first style code, the method further includes:

[0094] S61, obtaining third page code corresponding to a third target page to be displayed, wherein the third target page includes a target component, and the third page code includes a target style identifier;

[0095] S62, obtaining third style code identified by the target style identifier, wherein the third style code is used to indicate a component style of the target component after updating;

[0096] S63, displaying the third target page according to the third page code and the third style code, wherein the target component is displayed in the third target page according to the component style indicated by the third style code.

[0097] In the embodiment, after the first target page is displayed on the terminal device, the user can display a third target page by operating the terminal device. The third target page can be a refreshed first target page or another page different from the first target page. In order to display the third target page, the terminal device can obtain third page code corresponding to the third target page in a manner similar to the foregoing. The third target page can also include a target component (for example, a text main title), and the component style of the target component can be identified by a target style identifier in the third page code.

[0098] The terminal device can match the style code with the target style identifier in a manner similar to the foregoing. Since the style code matching the target style identifier in the style code server has been updated, at this time, the style code identified by the target style identifier is the third style code, and thus the terminal device acquires the third style code. After acquiring the third page code and the third style code, the terminal device can display the third target page using the third page code and the third style code, which has been described and will not be repeated here.

[0099] Through the embodiment, the same component in different pages can use the same style code through the style identifier in the page code, the style code needs to be written only once, and when the style code is modified, the modification can take effect globally, thereby improving the development efficiency.

[0100] The display method of the front-end page in the embodiments of the present application will be explained and described below in combination with optional examples. In the optional examples, the front-end page is a display page on a browser.

[0101] If the developer separately writes the style code conforming to the UI performance in each page or copies the same style code in other pages and applies the same to the target page, the following problems can exist: there are many repeated codes in the application, which increases the application size and affects the performance; the repeated writing of the style code affects the development efficiency; and the maintainability is poor, and the style modification needs to be traced back to separate modification in each page.

[0102] The optional examples provide a scheme for uniformly maintaining and managing the style of the front-end page, through which the common style code is uniformly agreed upon and is globally available once written, thereby reducing the code size, improving the development efficiency, and reducing the maintenance cost.

[0103] In combination with Figure 3 and Figure 4 , the flow of the display method of the front-end page in the optional examples can include the following steps:

[0104] In step S402, the style code conforming to the standard is written according to the design specification.

[0105] The UI designer can design a set of specifications and mark the UI standard of each specification, for example, the UI standard corresponding to the text main title, the text subtitle, the price, and the like, which is applicable to all components that can be abstracted into a standard. The front-end development engineer writes the style code conforming to the standard according to the formulated standard.

[0106] In step S404, the style code is defined as the class name of the HTML tag.

[0107] The front-end development engineer can define the style code as the class name of the HTML tag and correspond to the standard formulated in step S402 one by one.

[0108] In step S406, the components meeting the standard are marked in the visual diagram.

[0109] When designing the visual diagram, the UI designer can mark the components meeting the standard in the page with the style within the specification.

[0110] In step S408, the page is developed according to the visual diagram.

[0111] The front-end development engineer develops the front-end page according to the visual diagram, and names the components meeting the standard HTML tag as the class name defined in step S404.

[0112] In step S410, the style code is introduced into the page file for use.

[0113] The style code written by the front-end development engineer is uniformly managed in the style module, and any page that wants to use the standard only needs to introduce the file of the style code into the page file. All the components meeting the standard in the front-end page are affected by the written style code. If the UI style is revised, the style code can be modified.

[0114] Through the optional example, by agreeing on the UI standard, globally managing the page style code, the repeated code can be reduced, the application size can be reduced, and the running performance can be improved. The style code meeting the standard only needs to be written once, the development efficiency is improved, and when the demand changes, only one code needs to be changed, and the global effect is high in maintainability.

[0115] It should be noted that, for each of the method embodiments described above, in order to simply describe, it is expressed as a series of action combinations, but those skilled in the art should know that the present application is not limited by the order of the described actions, because according to the present application, certain steps can be performed in other order or simultaneously. Secondly, those skilled in the art should know that the embodiments described in the specification all belong to preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0116] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be realized by means of software on a general hardware platform required, and of course can also be realized by hardware, but in many cases the former is a better embodiment. Based on such understanding, the technical solutions of the present application can be embodied in the form of a software product in essence or in the form of a part of the prior art that makes a contribution, and the computer software product is stored in a storage medium (such as a ROM (Read-Only Memory), a RAM (Random Access Memory), a magnetic disc, or an optical disc), and includes a plurality of instructions for causing an end device (which can be a mobile phone, a computer, a server, or a network device) to execute the method described in each embodiment of the present application.

[0117] According to another aspect of the embodiments of the present application, a front-end page display device for implementing the above-mentioned front-end page display method is also provided. Figure 5 is a structural block diagram of an optional front-end page display device according to the embodiments of the present application, as shown in the figure, the device can include: Figure 5

[0118] The first acquisition unit 502 is configured to acquire first page code corresponding to a first target page to be displayed, wherein the first target page includes a target component, the first page code includes a target style identifier, and the target style identifier is used to identify style code corresponding to the target component.

[0119] The second acquisition unit 504 is connected with the first acquisition unit 502 and is configured to acquire first style code identified by the target style identifier, wherein the first style code is used to indicate a component style of the target component.

[0120] The first display unit 506 is connected with the second acquisition unit 504 and is configured to display the first target page according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code.

[0121] It should be noted that the first acquisition unit 502 in this embodiment can be used to execute the above-mentioned step S202, the second acquisition unit 504 in this embodiment can be used to execute the above-mentioned step S204, and the first display unit 506 in this embodiment can be used to execute the above-mentioned step S206.

[0122] ​The first page code corresponding to the first target page to be displayed is acquired through the module, the first target page includes a target component, the first page code includes a target style identifier, and the target style identifier is used to identify a style code corresponding to the target component. The first style code identified by the target style identifier is acquired, and the first style code is used to indicate a component style of the target component. The first target page is displayed according to the first page code and the first style code, the target component is displayed in the first target page according to the component style indicated by the first style code, the technical problem of low development efficiency of page styles caused by the need to process the style codes of the front-end pages one by one in the related art is solved, and the development efficiency of the page styles is improved.

[0123] In an example embodiment, the second obtaining unit comprises:

[0124] The sending module is configured to send a first request message to a first server, the first server being a server storing style codes, and the first request message being used to request a style code identified by the target style identifier;

[0125] The receiving module is configured to receive a first response message returned by the first server in response to the first request message, and the first response message carries the first style code.

[0126] In an example embodiment, the second obtaining unit comprises:

[0127] The obtaining module is configured to obtain, from a plurality of pre-stored style codes, a style code matching the target style identifier to obtain the first style code.

[0128] In an example embodiment, the apparatus further comprises:

[0129] The sending unit is configured to, after obtaining, from a plurality of pre-stored style codes, a style code matching the target style identifier, send a second request message to a second server in a case where an effective time of the first style code is greater than or equal to a target time threshold, the second server being a server storing style codes, and the second request message being used to request a style code identified by the target style identifier.

[0130] The receiving unit is configured to receive a second response message returned by the second server in response to the second request message, and the second response message carries a second style code.

[0131] The updating unit is configured to update the first style code to the second style code to obtain an updated first style code.

[0132] In an example embodiment, the apparatus further comprises:

[0133] The third obtaining unit is configured to obtain second page code corresponding to a second target page to be displayed after the first target page is displayed according to the first page code and the first style code, wherein the target component is contained in the second target page, and the target style identifier is contained in the second page code.

[0134] The second display unit is configured to display the second target page according to the second page code and the first style code, wherein the target component is displayed in the second target page according to the component style indicated by the first style code.

[0135] In an example embodiment, the apparatus further includes:

[0136] The marking unit is configured to mark a target component region in which the target component is located on a target visual graph displayed in a page graph configuration interface before obtaining the first page code corresponding to the first target page to be displayed, wherein the page graph configuration interface is an interface for configuring a visual graph of a page, and the target visual graph is used to describe page elements contained in the first target page.

[0137] The adding unit is configured to add the target style identifier on the component region, wherein the target style identifier contains display parameters of the target component.

[0138] The saving unit is configured to save the configured target visual graph, wherein the first page code is written according to the target visual graph.

[0139] In an example embodiment, the apparatus further includes:

[0140] The fourth obtaining unit is configured to obtain third page code corresponding to a third target page to be displayed after the first target page is displayed according to the first page code and the first style code, wherein the target component is contained in the third target page, and the target style identifier is contained in the third page code.

[0141] The fifth obtaining unit is configured to obtain third style code indicated by the target style identifier, wherein the third style code is used to indicate an updated component style of the target component.

[0142] The third display unit is configured to display the third target page according to the third page code and the third style code, wherein the target component is displayed in the third target page according to the component style indicated by the third style code.

[0143] It should be noted that the above modules have the same examples and application scenarios as the corresponding steps, but are not limited to the content disclosed in the above embodiments. It should be noted that the above modules as part of the apparatus can run in, for example, Figure 1The hardware environment shown can be implemented by software or hardware, and the hardware environment includes a network environment.

[0144] According to another aspect of the embodiments of the present application, a storage medium is further provided. Optionally, in the embodiments, the storage medium can be used to store program codes for implementing any of the front-end page display methods described above.

[0145] Optionally, in the embodiments, the storage medium can be located on at least one of the network devices in the network shown in the embodiments.

[0146] Optionally, in the embodiments, the storage medium is configured to store program codes for implementing the following steps:

[0147] S1, obtaining first page codes corresponding to a first target page to be displayed, wherein the first target page contains a target component, the first page codes contain a target style identifier, and the target style identifier is used to identify style codes corresponding to the target component;

[0148] S2, obtaining first style codes identified by the target style identifier, wherein the first style codes are used to indicate component styles of the target component;

[0149] S3, displaying the first target page according to the first page codes and the first style codes, wherein the target component is displayed in the first target page according to the component styles indicated by the first style codes.

[0150] Optionally, specific examples in the embodiments can refer to the examples described in the above embodiments, and the embodiments will not be described here.

[0151] Optionally, in the embodiments, the storage medium can include, but is not limited to, a U disk, a ROM, a RAM, a mobile hard disk, a magnetic disk or an optical disk, and various media that can store program codes.

[0152] According to another aspect of the embodiments of the present application, an electronic device for implementing the front-end page display method described above is further provided. The electronic device can be a server, a terminal, or a combination thereof.

[0153] Figure 6 is a structural block diagram of an optional electronic device according to the embodiments of the present application, as shown in Figure 6 includes a processor 602, a communication interface 604, a memory 606 and a communication bus 608, wherein the processor 602, the communication interface 604 and the memory 606 complete mutual communication through the communication bus 608, wherein,

[0154] the memory 606 is used to store computer programs;

[0155] The processor 602 is configured to implement the following steps when executing the computer program stored in the memory 606:

[0156] S1, obtaining first page code corresponding to a first target page to be displayed, wherein the first target page comprises a target component, the first page code comprises a target style identifier, and the target style identifier is used to identify style code corresponding to the target component;

[0157] S2, obtaining first style code identified by the target style identifier, wherein the first style code is used to indicate a component style of the target component;

[0158] S3, displaying the first target page according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code.

[0159] Optionally, the communication bus can be a PCI (Peripheral Component Interconnect) bus, an EISA (Extended Industry Standard Architecture) bus, or the like. The communication bus can be divided into an address bus, a data bus, a control bus, and the like. For the convenience of representation, Figure 6 In the figure, only one thick line is used to represent the communication bus, but it does not mean that there is only one bus or only one type of bus. The communication interface is used for communication between the electronic device and other devices.

[0160] The memory can include a RAM and can also include a non-volatile memory, for example, at least one disk memory. Optionally, the memory can also be at least one storage device located away from the aforementioned processor.

[0161] As an example, the aforementioned memory 606 can include, but is not limited to, the first obtaining unit 502, the second obtaining unit 504, and the first display unit 506 in the display device of the front-end page. In addition, other module units in the display device of the front-end page can also be included, but not limited to, which will not be described in detail in this example.

[0162] The processor can be a general processor, which can include but is not limited to: a CPU (Central Processing Unit), a NP (Network Processor), etc.; and can also be a DSP (Digital Signal Processing), an ASIC (Application Specific Integrated Circuit), an FPGA (Field-Programmable Gate Array) or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component.

[0163] Optionally, the specific examples in the embodiments can refer to the examples described in the above embodiments, and the embodiments will not be described here.

[0164] Those skilled in the art can understand that, Figure 6 The structure shown is only schematic, and the device implementing the display method of the front page can be a terminal device, which can be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, a palm computer, a Mobile Internet Device (MID), a PAD, etc. Figure 6 It does not limit the structure of the electronic device. For example, the electronic device can further include more or less components (such as a network interface, a display device, etc.) than Figure 6 shown, or have a different configuration from Figure 6 shown.

[0165] Those skilled in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing the hardware related to the terminal device by a program, and the program can be stored in a computer readable storage medium, which can include: a flash disk, a ROM, a RAM, a magnetic disk or an optical disk, etc.

[0166] The serial number of the above embodiments of the present application is only for description, not representing the advantages and disadvantages of the embodiments.

[0167] The integrated units in the above embodiments, if implemented in the form of software function units and sold or used as independent products, can be stored in the above computer-readable storage medium. Based on such understanding, the technical solutions of the present application, essentially or in other words, the part that contributes to the prior art or the whole or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, and includes a number of instructions to make one or more computer devices (which can be personal computers, servers or network devices, etc.) execute all or part of the steps of the methods described in the various embodiments of the present application.

[0168] In the above embodiments of the present application, the description of each embodiment has its own focus, and the parts not described in detail in a certain embodiment can be referred to the relevant description of other embodiments.

[0169] In the several embodiments provided in the present application, it should be understood that the disclosed client can be implemented by other means. Among them, the above-mentioned device embodiments are only schematic, for example, the division of the units is only a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the shown or discussed mutual units can be indirect coupling or communication connection through some interface, unit or module, and can be electrical or other forms.

[0170] The units described as separate components can or can not be physically separated, and the components shown as units can or can not be physical units, that is, they can be located in one place or distributed on a plurality of network units. Part or all of the units can be selected according to actual needs to achieve the purpose of the scheme provided in the embodiments.

[0171] In addition, the functional units in each embodiment of the present application can be integrated in one processing unit, or each unit can exist physically, or at least two units can be integrated in one unit. The above integrated unit can be realized in the form of hardware or in the form of software function unit.

[0172] The above is only the preferred embodiment of the present application, and it should be pointed out that for those skilled in the art, without departing from the principle of the present application, a number of improvements and refinements can be made, which should be regarded as the protection scope of the present application.

Claims

1. A method of displaying a front page, characterized by, The method comprises: obtaining first page code corresponding to a first target page to be displayed, wherein the first target page comprises a target component, the first page code comprises a target style identifier, and the target style identifier is used to identify style code corresponding to the target component; in a case where no style code matching the target style identifier is found in a plurality of locally stored style codes, obtaining style code matching the target style identifier from a style code server; obtaining first style code identified by the target style identifier, wherein the first style code is used to indicate a component style of the target component; displaying the first target page according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code; the obtaining of the first style code identified by the target style identifier comprises: obtaining, from a plurality of pre-stored style codes, style code matching the target style identifier to obtain the first style code; after the obtaining of the style code matching the target style identifier from the plurality of pre-stored style codes, the method further comprises: in a case where an effective time of the first style code is greater than or equal to a target time threshold, sending a second request message to a second server, wherein the second server is a server storing style code, and the second request message is used to request style code identified by the target style identifier; receiving a second response message returned by the second server in response to the second request message, wherein the second response message carries second style code; updating the first style code to the second style code to obtain updated first style code; in a case where the first style code is not updated, the second response message further carries indication information, the indication information is used to indicate that the first style code is not updated, and a terminal device is configured to reset an effective time of the first style code based on the indication information, the effective time being a time from a time when the terminal device obtains the style code to a current time; the obtaining of the first style code identified by the target style identifier comprises: sending a first request message to a first server, wherein the first server is a server storing style code, and the first request message is used to request style code identified by the target style identifier; receiving a first response message returned by the first server in response to the first request message, wherein the first response message carries the first style code.

2. The method of claim 1, wherein, after the displaying of the first target page according to the first page code and the first style code, the method further comprises: obtaining second page code corresponding to a second target page to be displayed, wherein the second target page comprises the target component, and the second page code comprises the target style identifier. display the second target page according to the second page code and the first style code, wherein the target component is displayed in the second target page according to the component style indicated by the first style code.

3. The method of claim 1, wherein, Before the first page code corresponding to the first target page to be displayed is acquired, the method further comprises: marking a target component region where the target component is located on a target visual diagram displayed in a page diagram configuration interface, wherein the page diagram configuration interface is an interface for configuring a visual diagram of a page, and the target visual diagram is used to describe page elements contained in the first target page; adding the target style identifier to the component region, wherein the target style identifier contains display parameters of the target component; saving the configured target visual diagram, wherein the first page code is written according to the target visual diagram.

4. The method according to any one of claims 1 to 3, characterized in that, After the first target page is displayed according to the first page code and the first style code, the method further comprises: acquiring third page code corresponding to a third target page to be displayed, wherein the third target page contains the target component, and the third page code contains the target style identifier; acquiring third style code identified by the target style identifier, wherein the third style code is used to indicate an updated component style of the target component; displaying the third target page according to the third page code and the third style code, wherein the target component is displayed in the third target page according to the component style indicated by the third style code.

5. A display device of a front end page, characterized by comprising: comprise: a first acquiring unit, configured to acquire first page code corresponding to a first target page to be displayed, wherein the first target page contains a target component, the first page code contains a target style identifier, and the target style identifier is used to identify style code corresponding to the target component; and in a case where no style code matching the target style identifier is found in a plurality of locally saved style codes, the style code server is used to acquire style code matching the target style identifier; a second acquiring unit, configured to acquire first style code identified by the target style identifier, wherein the first style code is used to indicate a component style of the target component; a first displaying unit, configured to display the first target page according to the first page code and the first style code, wherein the target component is displayed in the first target page according to the component style indicated by the first style code; the second acquiring unit comprises an acquiring module, configured to acquire style code matching the target style identifier from a plurality of pre-stored style codes to obtain first style code; The display device of the front-end page further includes: a sending unit configured to, after obtaining a style code matching the target style identifier from the pre-stored plurality of style codes, send a second request message to a second server in a case where the effective time of the first style code is greater than or equal to a target time threshold, the second server being a server storing the style codes, and the second request message being used to request the style code identified by the target style identifier; a receiving unit configured to receive a second response message returned by the second server in response to the second request message, the second response message carrying a second style code; and an updating unit configured to update the first style code to the second style code to obtain an updated first style code; wherein, in a case where the first style code is not updated, the second response message further carries indication information, the indication information being used to indicate that the first style code is not updated, and the terminal device is configured to reset the effective time of the first style code based on the indication information, the effective time being a time from a time when the terminal device obtains the style code to a current time. The second obtaining unit includes: a sending module configured to send a first request message to a first server, the first server being a server storing the style codes, and the first request message being used to request the style code identified by the target style identifier; and a receiving module configured to receive a first response message returned by the first server in response to the first request message, the first response message carrying the first style code.

6. A computer readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, and the program, when executed, performs the method of any one of claims 1 to 4. 7.An electronic device comprising a memory and a processor, the electronic device characterized by, The memory stores a computer program, and the processor is configured to execute the method of any one of claims 1 to 4 by using the computer program.

Images