Front-end page creating method and device, equipment, storage medium and program product

Abstract

The invention provides a front-end page creating method which can be applied to the technical field of software development and artificial intelligence. The front-end page creating method comprises the steps that target component configuration information matched with different types of fields in a page description file is determined, and the target component configuration information comprises target table component configuration information, target display configuration information, target desensitization configuration information and target risk prompt configuration information; generating a page description file based on the configuration information of each target component and functional requirements defined in the project development requirement document; and converting the page description file into a corresponding visual component through a low-code parsing rendering engine, and generating a target display page. The invention further provides a front-end page creating device and equipment, a storage medium and a program product.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of software development and artificial intelligence, and more particularly to a front-end page creation method, device, equipment, storage medium and program product. BACKGROUND

[0002] With the development of software technology and the continuous deepening of information system construction, the amount of information deposited in business scenarios is rapidly increasing, and various information needs to have a clear chart framework to classify and display related content, so as to help relevant personnel quickly grasp key information.

[0003] The output of the front-end page inevitably needs front-end engineers to complete coding, layout, adaptation and other work content. If each type of customer demand goes through the complete process from demand raising, user interface design, interaction design to coding implementation, the cost of front-end development will be too high. At the same time, due to the differentiated needs of user interface design and interaction design, detailed analysis is required before entering the code writing stage, which not only prolongs the development cycle, but also reduces the overall test efficiency. In addition, some unreasonable user interface and interaction design will increase the user operation cost and reduce the user experience.

[0004] Therefore, how to effectively reduce the cost of front-end development through standardized design and realize the standardization and unity of page style has become a key problem to be solved in the current industry. SUMMARY

[0005] In view of the above problems, the present application provides a front-end page creation method, device, equipment, storage medium and program product which can reduce development cost and realize style unity.

[0006] According to a first aspect of the present application, a front-end page creation method is provided, comprising: determining target component configuration information of each type of field in a page description file, wherein the target component configuration information includes target table component configuration information, target display configuration information, target desensitization configuration information and target risk prompt configuration information; generating a page description file based on the target component configuration information and the functional requirements defined in the project development requirement document; and converting the page description file into corresponding visual components through a low-code parsing rendering engine to generate a target display page.

[0007] According to an embodiment of this application, determining the target table component configuration information includes: parsing the table data and splitting it into header data for displaying column identifiers and body data for storing specific content; in response to the header data containing column identifiers of monetary units, splitting and formatting the table column data corresponding to the column identifiers into thousands separators; in response to the table column data corresponding to the column identifiers having more than a preset threshold for displaying more than a certain number of digits, performing unit conversion; and setting a floating component for the cell to display the unprocessed raw cell data when the mouse hovers over it.

[0008] According to an embodiment of this application, determining the target display configuration information includes: setting a user permission flag, which records the user's access permissions to the page module; hiding the page module in response to the user permission flag indicating no access permission; setting a data availability flag, which indicates whether the target module has obtained valid data by calling a preset data interface; and setting the navigation bar to an unavailable state in response to the data availability flag indicating unavailable state, wherein the unavailable state means that it cannot respond to the user's operation.

[0009] According to an embodiment of this application, before hiding the page module in response to a user permission mark indicating no access permission, determining the target display configuration information further includes: obtaining a user role permission file, wherein the user role permission file is used to record the access permissions of different page modules corresponding to different user roles; and hiding the page module in response to the current user role not having access permission to the page module.

[0010] According to an embodiment of this application, determining the target desensitization configuration information includes: obtaining the data sensitivity marker and data sensitivity level of the data to be displayed, wherein the sensitive data marker is used to distinguish between sensitive data and non-sensitive data, and the data sensitivity level is used to identify the sensitivity level of the data; determining the corresponding desensitization strategy based on predefined mapping rules, according to the data sensitivity marker and data sensitivity level; and performing desensitization processing on the data to be displayed according to the desensitization strategy.

[0011] According to an embodiment of this application, determining the target risk warning configuration information includes: setting data risk levels, wherein each data risk level is assigned a different color mark; and rendering the data of the corresponding data risk level with color based on the assigned color mark.

[0012] According to an embodiment of the present application, the generating the target display page by converting the page description file into corresponding visual components through the low-code parsing and rendering engine includes: performing syntax checking on the page description file through the low-code parsing and rendering engine; in response to the syntax checking passing, extracting component description data contained in the page description file; performing feature matching on the extracted component description data and a preset visual component library to determine corresponding visual components; and dynamically generating corresponding front-end component instances according to the visual components and rendering the target display page.

[0013] A second aspect of the present application provides a front-end page creation apparatus, including: a page description file definition module configured to determine target component configuration information respectively adapted to different types of fields in a page description file, wherein the target component configuration information includes target table component configuration information, target display configuration information, target desensitization configuration information, and target risk prompt configuration information; a page description file generation module configured to generate a page description file based on the target component configuration information and functional requirements defined in a project development requirement document; and a page rendering module configured to convert the page description file into corresponding visual components through a low-code parsing and rendering engine to generate a target display page.

[0014] A third aspect of the present application provides an electronic device, including: one or more processors; a memory configured to store one or more computer programs, wherein the one or more processors execute the one or more computer programs to implement the steps of the method.

[0015] A fourth aspect of the present application further provides a computer-readable storage medium having stored thereon a computer program or instructions, wherein the computer program or instructions are executed by a processor to implement the steps of the method.

[0016] A fifth aspect of the present application further provides a computer program product including a computer program or instructions, wherein the computer program or instructions are executed by a processor to implement the steps of the method. BRIEF DESCRIPTION OF DRAWINGS

[0017] The above content of the present application and other purposes, features and advantages will be more apparent through the following description of embodiments of the present application with reference to the accompanying drawings, in which:

[0018] Figure 1 An application scenario diagram of a front-end page creation method, apparatus, device, storage medium and program product according to an embodiment of the present application is schematically shown;

[0019] Figure 2 A flowchart of a front-end page creation method according to an embodiment of the present application is schematically shown;

[0020] Figure 3A flowchart of determining target table component configuration information of a method according to an embodiment of the present application is schematically shown;

[0021] Figure 4 A flowchart of determining target display configuration information of a method according to an embodiment of the present application is schematically shown;

[0022] Figure 5 A flowchart of determining target desensitization configuration information of a method according to an embodiment of the present application is schematically shown;

[0023] Figure 6 A flowchart of a whole front-end page creation method according to an embodiment of the present application is schematically shown;

[0024] Figure 7 A structural block diagram of a front-end page creation apparatus according to an embodiment of the present application is schematically shown; and

[0025] Figure 8 A block diagram of an electronic device suitable for implementing a front-end page creation method according to an embodiment of the present application is schematically shown. DETAILED DESCRIPTION

[0026] Hereinafter, embodiments of the present application will be described with reference to the accompanying drawings. It should be understood, however, that the description which follows is merely illustrative and is not intended to limit the scope of the present application. In the following detailed description of embodiments of the present application, numerous specific details are set forth in order to provide a thorough understanding of the present application. However, it will be apparent to one skilled in the art that one or more embodiments of the present application can be practiced without these specific details. In other instances, well-known structures and functions have not been described in detail in order to avoid obscuring aspects of the present application.

[0027] The terms used herein are merely used to describe specific embodiments and are not intended to limit the present application. The terms "include", "comprise", and the like used herein indicate the presence of the described features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0028] All terms used herein (including technical and scientific terms) have meanings that are commonly understood by one of ordinary skill in the art unless otherwise defined. It should be noted that the terms used herein should be interpreted as having meanings that are consistent with the context of the specification, and should not be interpreted in an idealized or overly formal manner.

[0029] In the case of using expressions similar to "at least one of A, B, and C", etc., it generally should be interpreted to include any of them, to include combinations, to include overlaps, and the like. For example, "at least one of A, B, and C" should be interpreted to include any of A, B, C, A and B, A and C, B and C, and A and B and C, etc.

[0030] It should be noted that the front page creation method, apparatus, device, storage medium and program product determined by the embodiments of the present application can be used in the field of software development and artificial intelligence technology, and can also be applied to the field of financial technology or any field other than the field of financial technology. The application field of the front page creation method, apparatus, device, storage medium and program product of the present application is not limited.

[0031] The embodiments of the present application provide a front page creation method. By using a front page creation mode of configuring a page description file to replace traditional complex front-end coding operations, page style uniformity and automatic generation can be realized, greatly shortening the detailed analysis of page requirements and the coding process in the traditional front-end development process. Most of the requirement modules can be completed through simple configuration, improving the development efficiency.

[0032] Figure 1 An application scenario diagram of the front page creation method, apparatus, device, storage medium and program product according to the embodiments of the present application is schematically shown.

[0033] As shown in Figure 1 The application scenario 100 according to the embodiments can include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 can include various connection types, such as wired, wireless communication links, or optical fiber cables, etc.

[0034] The user can use the first terminal device 101, the second terminal device 102, and the third terminal device 103 to interact with the server 105 through the network 104 to receive or send messages, etc. Various communication client applications can be installed on the first terminal device 101, the second terminal device 102, and the third terminal device 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0035] The first terminal device 101, the second terminal device 102, and the third terminal device 103 can be various electronic devices with a display screen and supporting web browsing, including but not limited to a smart phone, a tablet computer, a laptop computer, a desktop computer, and the like.

[0036] The server 105 can be a server providing various services, for example, a background management server supporting a website browsed by a user using the first terminal device 101, the second terminal device 102, and the third terminal device 103 (only as an example). The background management server can perform analysis and the like on received user requests and the like, and feed back a processing result (for example, a webpage, information, or data, or the like, obtained or generated according to a user request) to a terminal device.

[0037] It should be noted that the front-end page creation method provided by the embodiments of the present application can generally be executed by the server 105. Correspondingly, the front-end page creation apparatus provided by the embodiments of the present application can generally be arranged in the server 105. The front-end page creation method provided by the embodiments of the present application can also be executed by a server or a server cluster different from the server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or the server 105. Correspondingly, the front-end page creation apparatus provided by the embodiments of the present application can also be arranged in a server or a server cluster different from the server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or the server 105.

[0038] It should be understood that the number of terminal devices, networks, and servers in Figure 1 is only illustrative. According to the implementation needs, there can be any number of terminal devices, networks, and servers.

[0039] The front-end page creation method according to the embodiments of the present application will be described in detail below based on the scenario described in Figure 1 . Figures 2-6

[0040] Figure 2 An illustrative flowchart of the front-end page creation method according to the embodiments of the present application is shown.

[0041] As shown in Figure 2 , the front-end page creation method 200 of this embodiment includes operations S210-S230, which can be executed by the server 105.

[0042] In operation S210, the target component configuration information adapted for each type of field in the page description file is determined.

[0043] ​In the embodiments of the present application, the target component configuration information is a standardized description specification of the front-end component in the page description file, which is used to define the specific manifestation and functional logic of the component in the page. The configuration specification explicitly defines the layout position, visual style, behavior logic and association relationship with other components of the component in the page through structured fields (such as component type, attribute parameter, style definition, data binding rule, event interaction logic, etc.), ensuring that the developer can accurately describe the functional requirements and display effect of each front-end component in a declarative manner.

[0044] In the embodiments of the present application, the target component configuration information can include target table component configuration information, target display configuration information, target desensitization configuration information, and target risk prompt configuration information.

[0045] In operation S220, the page description file is generated based on the target component configuration information and the functional requirements defined in the project development requirement document.

[0046] In the embodiments of the present application, after obtaining the project development requirement document written by the product side or the business side according to their own business requirements, the page description file for the project development requirement document can be configured according to the standard format of each target component configuration information based on the functional requirements defined in the document.

[0047] Exemplarily, the page description file can be a JSON (JavaScript Object Notation, JavaScript Object Notation) format file. This format defines the attributes, layout and interaction logic of the front-end component through structured key-value pairs. Specifically, the developer can organize the type, style parameter, position information, data binding relationship and other key elements of the component in the form of standardized key-value pairs, and serialize these configuration information into a JSON file for storage.

[0048] It should be noted that the number of page description files is not fixed, and the specific number and size can be planned and reasonably configured according to the project development requirement document. For example, the developer can flexibly adjust the number of generated page description files according to the complexity of the actual business scenario, the granularity division of the functional module, and the page reuse requirements and other key factors.

[0049] Exemplarily, for the project development requirement document, the format and content can be standardized according to the preset rules (i.e. rules for standardizing paragraphs, sentences and keywords) to generate a standardized requirement document. For the standardized requirement document, each paragraph corresponds to a front-end component. Then, the domain-specific language is used for parsing to generate the corresponding page description file.

[0050] In operation S230, the page description file is converted into corresponding visual components by the low-code parsing rendering engine to generate the target display page.

[0051] In the embodiments of the present application, after the page description file is generated, the page description file is converted into corresponding visual components by the low-code parsing rendering engine to generate the target display page. Specifically, the low-code parsing rendering engine can perform syntax checking on the page description file. The syntax checking is used to determine whether the page description file meets the syntax requirements of the specified file format. For example, when the page description file is a JSON format file, it is determined whether the page description file meets the JSON format syntax requirements. When the syntax checking is passed, the component description data contained in the page description file is extracted. The extracted component description data is matched with the preset visual component library to determine the corresponding visual component. According to the visual component, the corresponding front-end component instance is dynamically generated and the target display page is rendered.

[0052] The embodiments of the present application convert the complex front-end code that needs to be written manually in the traditional development process into a structured and declarative page description file, so that the business requirements can be structured and expressed in a standardized configuration format. Then, the corresponding front-end page is generated according to the configuration information, thereby the development efficiency can be greatly improved, and the uniformity of the front-end page style and the consistency of the user experience are ensured.

[0053] Figure 3 A flowchart of determining target table component configuration information according to the method of the embodiments of the present application is schematically shown;

[0054] As shown in Figure 3 This embodiment is one of the embodiments of the target component configuration information in operation S210, including operation S310~operation S340.

[0055] In operation S310, the table data is parsed and split into table header data for displaying column identifiers and table body data for storing specific content.

[0056] In the embodiments of the present application, the table data required to be displayed by the table component usually includes a structured field set obtained from a backend interface and a corresponding row-column mapping relationship. For the table data, the structured field set is split into two parts, the table header data for displaying column identifiers and the table body data for storing specific content. Through the split, the static structure definition and dynamic data content of the table can be clearly separated.

[0057] In operation S320, in response to the table header data containing column identifiers of monetary units, the table column data corresponding to the column identifiers is split and formatted by thousandths.

[0058] In the embodiments of the present application, for the table header data, it is detected whether the column identifier contains an amount unit (such as a currency symbol or an amount-related suffix, for example, “Yuan” or “ten thousand Yuan”), to identify whether the column is an amount type field. If it is detected that the column identifier is an amount type field, the table column data is subjected to the thousandth place split formatting, to ensure the accurate display and logical consistency of the amount data.

[0059] In operation S330, in response to the number of bits of the table column data corresponding to the column identifier exceeding the preset display bit threshold, unit conversion is performed.

[0060] In the embodiments of the present application, the display bit threshold can be set for the cells in the table, i.e., how many characters can be displayed in the cell. If the number of bits of the table column data exceeds the preset display bit threshold, unit conversion is automatically performed, for example, conversion of ten thousand Yuan to one hundred million Yuan.

[0061] In operation S340, a hovering component of the cell is set, and the raw cell data that has not been processed is displayed when the mouse hovers.

[0062] In the embodiments of the present application, the hovering component of the cell is set, and when the mouse is placed on the corresponding cell, the raw complete data of the cell that has not been subjected to unit conversion or thousandth place split is displayed, so that the data can be compared and displayed with the processed data.

[0063] Optionally, when the amount of data in the table is too large, the number of table rows displayed per page can be set, and the table data is paginated based on this, to realize batch display and browsing of the data.

[0064] Optionally, in the embodiments of the present application, the merging rules of the table can be preset (for example, the values of the table row merging span or the table column merging span are set), and for the adjacent cells in the table whose contents are the same, these continuous repeated cells can be merged into a larger cell according to the preset merging rules, so as to reduce the display of redundant information and improve the readability and visual simplicity of the table.

[0065] Optionally, in the embodiments of the present application, the zero value deletion flag can be set for the table component, wherein the zero value deletion flag is used to indicate whether to delete the table row whose field values are all zero or have no data. For example, if the value of the zero value deletion flag is set to yes, each row of data in the table body data is filtered, and if all the field values of the row are 0 or have no data, the row of data is deleted, to help the user remove invalid data information.

[0066] The embodiments of the present application solve the problems of high redundancy, low browsing efficiency, and non-uniform data format when the traditional table displays repeated data, by processing the table data, and significantly improve the data browsing and analysis efficiency of the user.

[0067] Figure 4 A flowchart of determining target display configuration information is shown according to an embodiment of the present application;

[0068] As Figure 4 shown, this embodiment is one of the embodiments of the target component configuration information in operation S210, including operation S410~operation S440.

[0069] In operation S410, a user permission mark is set, which is used to record the access permission of the user to the page module.

[0070] In operation S420, the page module is hidden in response to the user permission mark being no access permission.

[0071] In an embodiment of the present application, the user permission mark is set to limit the access, operation and use permission of different users to various sensitive data. For a certain front-end component, if the user does not have the corresponding user permission mark, the component will be directly hidden.

[0072] For the same page, the data range that can be browsed by different user roles is also different. In an embodiment of the present application, for each user role, a user role permission file can be set, which is used to record the access permission of different user roles to different page modules. The user role permission file is obtained, and the page module is hidden when the current user role has no access permission to the page module. Exemplarily, the user role permission file can be configured as a structured JSON file, and each user role permission can be configured as a permission set or a single permission item.

[0073] Exemplarily, for a user, both user role permission and user permission can be set, and a permission merging and conflict processing mechanism can be adopted: taking the user role permission as the basis and taking the user permission as the supplement. That is, the permission set predefined by the role to which the user belongs is loaded first, and then the special permission configured for the user alone is superimposed to form the complete user permission. If there is a permission conflict (for example, the user role permission is configured to be hidden, but the user permission is configured to be displayed), the principle of "user permission taking precedence over role permission" will be followed.

[0074] In operation S430, a data available mark is set.

[0075] In an embodiment of the present application, the data available mark is set, which is used to indicate whether the target module has obtained valid data by calling a preset data interface.

[0076] In operation S440, the navigation bar is set to be in an unavailable state in response to the data available mark being unavailable.

[0077] In the embodiments of the present application, the corresponding target module can be jumped to by clicking the corresponding name of the navigation bar. When the data available mark is unavailable (i.e. no valid data is obtained by calling the preset data interface), the navigation bar is set to an unavailable state, and the unavailable state cannot respond to the operation of the user. That is, when the target module corresponding to the navigation bar has no data, the navigation bar is grayed out and the click event is not bound to prompt the user that the module has no data, thereby optimizing the user experience.

[0078] Exemplarily, in the embodiments of the present application, the precise display and hiding control of the target module corresponding to the navigation bar can be realized in a double-factor form through the user permission mark and the data available mark. The embodiments of the present application synchronously detect the data available mark and the user permission mark of the current user, and only when the two marks satisfy the preset condition (for example, the user has access permission and the target module obtains valid data by calling the preset data interface) at the same time, the corresponding target module can be rendered and displayed in the navigation bar; otherwise, if any mark fails to pass the verification, the target module corresponding to the navigation bar will be hidden.

[0079] The embodiments of the present application ensure that the user can only access the data and functions related to his / her duties by setting the user permission and the user role permission, thereby avoiding that the sensitive information is viewed or operated by irrelevant personnel.

[0080] Figure 5 A flowchart of determining target desensitization configuration information according to the method of the embodiments of the present application is schematically shown;

[0081] As shown in Figure 5 This embodiment is one of the embodiments of the target component configuration information in operation S210, and includes operation S510 to operation S530.

[0082] In operation S510, the data sensitive mark and the data sensitive level of the to-be-displayed data are obtained.

[0083] In the embodiments of the present application, the sensitive data mark is used to distinguish sensitive data and non-sensitive data, and the data sensitive level is used to identify the sensitive degree of the data.

[0084] In operation S520, the corresponding desensitization strategy is determined according to the data sensitive mark and the data sensitive level based on the predefined mapping rule.

[0085] In operation S530, the desensitization processing is performed on the to-be-displayed data according to the desensitization strategy.

[0086] In the embodiments of the present application, the differential desensitization strategy is executed according to the data sensitive mark and the data sensitive level.

[0087] Exemplarily, a data sensitivity level threshold value can be set, by which the processing manner of data desensitization is determined. The data sensitivity level threshold value can be set in a phased manner, for example, a first data sensitivity level threshold value and a second data sensitivity level threshold value. The higher the level of the data sensitivity level threshold value, the more stringent the data desensitization strategy adopted. For example, for the following business data:

[0088] Name: the data sensitivity mark is "yes", and the data sensitivity level is 1;

[0089] Height: the data sensitivity mark is "no", and the data sensitivity level is 0;

[0090] Certificate number: the data sensitivity mark is "yes", and the data sensitivity level is 5;

[0091] Mobile phone number: the data sensitivity mark is "yes", and the data sensitivity level is 2.

[0092] The first data sensitivity level threshold value is set to 2, and the second data sensitivity level threshold value is set to 5.

[0093] For the name, the data sensitivity level is less than the first data sensitivity level threshold value, and no desensitization strategy can be adopted. The height is non-sensitive data, and no desensitization strategy can be adopted. The data sensitivity level of the certificate number is greater than or equal to the second data sensitivity level threshold value, and full data desensitization processing can be performed, that is, all original data are hidden by masking. The data sensitivity level of the mobile phone number is less than or equal to the first data sensitivity level threshold value, and a half desensitization strategy can be adopted, for example, only part of the digits can be displayed by masking.

[0094] Optionally, in the embodiment of the present application, a data risk level can be set, wherein different color marks are assigned to each data risk level; and the data of the corresponding data risk level is color rendered based on the assigned color mark. The data risk level is used to evaluate the potential risk degree of the data.

[0095] For example, when the data risk level is 0 or there is no field, the data is normally displayed; when the data risk level is 1, the data is marked yellow; and when the data risk level is 2, the corresponding data is marked red. According to the different colors, the user can intuitively understand the risk of the data.

[0096] The embodiment of the present application sets differential desensitization strategies through data sensitivity marks and data sensitivity levels. Instead of applying the same intensity desensitization rules to all types, sources or use scenarios of data without distinction, the differential desensitization intensity strategies can be dynamically matched according to the sensitivity of the data itself. For core and highly sensitive data, a strict desensitization manner is adopted to reduce the risk of sensitive information flowing out. For relatively low sensitive data, the desensitization degree is appropriately relaxed to fully exploit the value of the data.

[0097] For example, the method according to the embodiments of this application can realize the creation of a customer information view page, which includes at least a customer overview page and a customer details page. The page description file can define the presentation form, interactive behavior, and data binding rules of components on the page. Component types that can be configured in the page description file include, but are not limited to, tabs, sub-tabs, navigation bars, time selection boxes, dropdown lists, tables, etc. It can also specify the interface address, request parameters, and loading strategy for module data, such as lazy loading, which requests data from the backend only when the component first enters the visible area or when the user interaction trigger condition is met. This reduces the time spent rendering the first screen and reduces unnecessary network overhead, thereby reducing user waiting time and improving user experience. In the embodiments of this application, the functionality and appearance of the customer information view page can be quickly expanded or adjusted simply by configuring the page description file, which can improve development efficiency, simplify the development process, reduce development costs, and shorten the detailed analysis and coding process of page requirements in the development process. Most requirement modules can be completed with simple configuration, solving the problem of time-consuming and laborious page development.

[0098] Figure 6 The diagram illustrates the overall flowchart of a front-end page creation method according to an embodiment of this application;

[0099] like Figure 6 As shown, the front-end page creation method 600 of this embodiment includes operations S610 to S690.

[0100] When operating S610, page description files are generated based on the configuration information of each target component and the functional requirements defined in the project development requirements document.

[0101] When operating the S620, the fields in the page description file are parsed through the low-code parsing rendering engine.

[0102] When operating the S630, user permission information is configured, specifically by setting user permission tags. These tags record a user's access permissions to page modules. The user permission tags can be configured in the page description file.

[0103] When operating the S640, configure the user role and permission file. The user role and permission file is used to record the access permissions of different page modules corresponding to different user roles.

[0104] When operating the S650, modules corresponding to user-visible pages are generated based on the page description file, user permission information, and user role permission file.

[0105] At operation S660, corresponding navigation module data information is acquired through the background interface. It should be noted that the navigation module is only illustrative, and components that need to display data can all be configured to acquire data information from the background interface.

[0106] At operation S670, valid data is acquired by calling the background interface, the navigation bar is not grayed out, and the click event is bound.

[0107] At operation S680, valid data is not acquired by calling the background interface, the navigation bar is grayed out, and the click event is unbound.

[0108] At operation S690, specific module information and a dynamic interaction framework are generated, and the navigation bar name can be clicked to jump to the corresponding module of the page.

[0109] Based on the above front-end page creation method, the application further provides a front-end page creation device. The following will be described in detail Figure 7 The device.

[0110] Figure 7 The structure block diagram of the front-end page creation device according to the embodiment of the application is schematically shown.

[0111] As Figure 7 shown, the front-end page creation device 700 of the embodiment includes a page description file definition module 710, a page description file generation module 720, and a page rendering module 730.

[0112] The page description file definition module 710 is configured to determine the target component configuration information adapted for each type of field in the page description file, wherein the target component configuration information includes target table component configuration information, target display configuration information, target desensitization configuration information, and target risk prompt configuration information. In an embodiment, the page description file definition module 710 can be configured to perform operation S210 described above, and details are not repeated here.

[0113] The page description file generation module 720 is configured to generate a page description file based on each target component configuration information and the functional requirements defined in the project development requirement document. In an embodiment, the page description file generation module 720 can be configured to perform operation S220 described above, and details are not repeated here.

[0114] The page rendering module 730 is configured to convert the page description file into corresponding visual components through a low-code parsing rendering engine to generate a target display page. In an embodiment, the page rendering module 730 can be configured to perform operation S230 described above, and details are not repeated here.

[0115] According to an embodiment of the present application, the page description file definition module 710 can include: a target table component configuration information submodule, a target display configuration information submodule, a target desensitization configuration information submodule, and a target risk prompt configuration information submodule.

[0116] The target table component configuration information submodule is configured to parse table data and split the table data into table header data for displaying column identifiers and table body data for storing specific content; in response to the table header data containing column identifiers of monetary units, perform centile split formatting on table column data corresponding to the column identifiers; in response to the number of bits of the table column data corresponding to the column identifiers exceeding a preset display bit threshold, perform unit conversion; set a floating component of a single cell to display unprocessed raw cell data when the mouse hovers over.

[0117] The target display configuration information submodule is configured to set a user permission marker, which is used to record the access permission of a user to a page module; in response to the user permission marker being no access permission, hide the page module; set a data available marker, which is used to indicate whether the target module has obtained valid data by calling a preset data interface; in response to the data available marker being unavailable, set the navigation bar to an unavailable state, wherein the unavailable state means that the navigation bar cannot respond to user operations.

[0118] According to an embodiment of the present application, the target display configuration information submodule can include a user role permission display submodule.

[0119] The user role permission display submodule is configured to obtain a user role permission file, wherein the user role permission file is used to record the access permission of different user roles to different page modules; in response to the current user role having no access permission to a page module, hide the page module.

[0120] The target desensitization configuration information submodule is configured to obtain a data sensitivity marker and a data sensitivity level of to-be-displayed data, wherein the data sensitivity marker is used to distinguish sensitive data and non-sensitive data, and the data sensitivity level is used to identify the sensitivity of data; based on a predefined mapping rule, determine a corresponding desensitization strategy according to the data sensitivity marker and the data sensitivity level; and perform desensitization processing on the to-be-displayed data according to the desensitization strategy.

[0121] The target risk prompt configuration information submodule is configured to set a data risk level, wherein each data risk level is assigned a different color marker; and perform color rendering on data of the corresponding data risk level based on the assigned color marker.

[0122] According to an embodiment of the present application, the apparatus 700 can further include a target display page generation submodule.

[0123] The target display page generation submodule is configured to perform syntax checking on the page description file by a low-code parsing rendering engine; in response to the syntax checking passing, extract component description data contained in the page description file; perform feature matching on the extracted component description data and a preset visual component library to determine corresponding visual components; and according to the visual components, dynamically generate corresponding front-end component instances and render the target display page.

[0124] According to embodiments of the present application, the device 700 can replace the traditional complex coding operation with a front-end page creation mode configured by a page description file, and can realize page style unification and automatic generation, greatly shortening the detailed analysis of page requirements and the coding process in the traditional front-end development process. Most of the requirement modules can be completed through simple configuration, improving the development efficiency.

[0125] According to embodiments of the present application, any one or more of the page description file defining module 710, the page description file generating module 720 and the page rendering module 730 can be combined in one module, or any one of them can be split into multiple modules. Alternatively, at least part of the function of one or more of these modules can be combined with at least part of the function of other modules, and implemented in one module. According to embodiments of the present application, at least one of the page description file defining module 710, the page description file generating module 720 and the page rendering module 730 can be at least partially implemented as a hardware circuit, such as a field programmable gate array (FPGA), a programmable logic array (PLA), a system on chip, a system on board, a system on package, an application specific integrated circuit (ASIC), or any other reasonable way of integrating or packaging a circuit, etc. hardware or firmware, or any one of software, hardware and firmware or any appropriate combination of several of them. Alternatively, at least one of the page description file defining module 710, the page description file generating module 720 and the page rendering module 730 can be at least partially implemented as a computer program module which can perform corresponding functions when it is run.

[0126] Figure 8 The block diagram schematically shows an electronic device suitable for implementing the front-end page creation method according to embodiments of the present application.

[0127] As Figure 8As shown, the electronic device 800 according to an embodiment of the present application includes a processor 801 which can perform various appropriate actions and processes according to a program stored in a read only memory (ROM) 802 or a program loaded from a storage section 808 into a random access memory (RAM) 803. The processor 801 can include, for example, a general purpose microprocessor (e.g., a CPU), an instruction set processor, and / or a related chipset, and / or a special purpose microprocessor (e.g., an application specific integrated circuit (ASIC)), and so on. The processor 801 can also include an on-board memory for cache use. The processor 801 can include a single processing unit or multiple processing units for executing different actions of the method processes according to embodiments of the present application.

[0128] In the RAM 803, various programs and data required for the operation of the electronic device 800 are stored. The processor 801, the ROM 802, and the RAM 803 are connected to each other via a bus 804. The processor 801 performs various operations of the method processes according to embodiments of the present application by executing the programs in the ROM 802 and / or the RAM 803. Note that the programs can also be stored in one or more memories other than the ROM 802 and the RAM 803. The processor 801 can also perform various operations of the method processes according to embodiments of the present application by executing the programs stored in the one or more memories.

[0129] According to embodiments of the present application, the electronic device 800 can also include an input / output (I / O) interface 805 which is also connected to the bus 804. The electronic device 800 can also include one or more of the following components connected to the input / output (I / O) interface 805: an input section 806 including a keyboard, a mouse, etc.; an output section 807 including a display such as a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN card, a modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to the input / output (I / O) interface 805 as necessary. A removable medium 811 such as a magnetic disk, a magneto-optical disk, a semiconductor memory, etc. is attached to the drive 810 as necessary, so that a computer program read out therefrom is installed in the storage section 808 as necessary.

[0130] The application further provides a computer readable storage medium, which can be included in the device / apparatus / system described in the above embodiments, or can exist independently without being assembled into the device / apparatus / system. The computer readable storage medium carries one or more programs, which, when executed, implement the method according to the embodiments of the application.

[0131] According to the embodiments of the application, the computer readable storage medium can be a non-volatile computer readable storage medium, which can include, but is not limited to, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any appropriate combination thereof. In this application, a computer readable storage medium can be any tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. For example, according to the embodiments of the application, the computer readable storage medium can include the ROM 802 and / or the RAM 803 described above, and / or one or more memory other than the ROM 802 and the RAM 803.

[0132] The embodiments of the application also include a computer program product, which includes a computer program containing program codes for executing the method shown in the flow chart. When the computer program product is run in a computer system, the program codes are used to make the computer system implement the front page creation method provided by the embodiments of the application.

[0133] The above functions defined in the system / apparatus of the embodiments of the application are performed when the computer program is executed by the processor 801. According to the embodiments of the application, the system, apparatus, module, unit, etc. described above can be implemented by computer program modules.

[0134] In one embodiment, the computer program can rely on a tangible storage medium such as an optical storage device, a magnetic storage device, etc. In another embodiment, the computer program can also be transmitted, distributed, and downloaded in the form of a signal on a network medium, and be downloaded and installed through the communication part 809, and / or installed from the detachable medium 811. The program codes contained in the computer program can be transmitted by any appropriate network medium, including but not limited to wireless, wired, etc., or any appropriate combination thereof.

[0135] In such embodiments, the computer program can be downloaded and installed from the network via the communication section 809, and / or installed from the removable media 811. When the computer program is executed by the processor 801, the above-described functions defined in the system of the embodiments of the present application are executed. According to the embodiments of the present application, the system, the apparatus, the device, the module, the unit, and the like described above can be realized by the computer program modules.

[0136] According to the embodiments of the present application, the program code for executing the computer program provided by the embodiments of the present application can be written in any combination of one or more programming languages, and specifically, these computer programs can be implemented using high-level procedural and / or object-oriented programming language, and / or assembly / machine language. The programming language includes, but is not limited to, such as Java, C++, python, "C" language, or similar programming language. The program code can be executed entirely on the user computing device, partially on the user device, partially on a remote computing device, or entirely on a remote computing device or server. In the case involving a remote computing device, the remote computing device can be connected to the user computing device through any kind of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (for example, connected to the Internet through an Internet service provider).

[0137] The flowcharts and block diagrams in the drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present application. In this regard, each block in the flowcharts or block diagrams can represent a module, a program segment, or a portion of code, which contains one or more executable instructions for implementing the specified logical functions. It should also be noted that in some alternative implementations, the functions noted in the blocks can occur in a different order than that shown in the figures. For example, two blocks noted in succession can actually be executed substantially concurrently, or they can sometimes be executed in reverse order, depending on the functionality involved. It should also be noted that each block in the flowcharts or block diagrams, and combinations of blocks in the flowcharts or block diagrams, can be implemented by dedicated hardware-based systems that perform the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0138] Those skilled in the art can understand that the features described in various embodiments of the present application can be combined and / or integrated in various combinations, even if such combinations are not explicitly described in the present application. In particular, the features described in various embodiments of the present application can be combined and / or integrated in various combinations without departing from the spirit and teachings of the present application. All such combinations and / or integrations are within the scope of the present application.

Claims

1. A method for creating a front-end page, characterized in that, The method includes: Determine the target component configuration information that is adapted to different types of fields in the page description file, wherein the target component configuration information includes target table component configuration information, target display configuration information, target de-identification configuration information, and target risk warning configuration information; Based on the configuration information of each target component and the functional requirements defined in the project development requirements document, a page description file is generated; The page description file is converted into corresponding visual components by a low-code parsing rendering engine to generate the target display page.

2. The method according to claim 1, characterized in that, Determining the configuration information of the target table component includes: The table data is parsed and split into header data for displaying column identifiers and body data for storing the actual content. In response to the column identifier containing monetary units in the header data, the table column data corresponding to the column identifier is formatted by splitting it into thousands separators; In response to the fact that the number of digits in the table column data corresponding to the column identifier exceeds a preset display digit threshold, a unit conversion is performed; Set a floating component for the cell to display the raw, unprocessed cell data when the mouse hovers over it.

3. The method according to claim 1, characterized in that, Determining the target display configuration information includes: Set a user permission flag, which is used to record the user's access permissions to page modules; In response to the user's permission being marked as having no access, the page module is hidden; Set a data availability flag, which is used to indicate whether the target module has obtained valid data by calling a preset data interface; In response to the data availability being marked as unavailable, the navigation bar is set to an unavailable state, wherein the unavailable state means that it cannot respond to user operations.

4. The method according to claim 3, characterized in that, Before hiding the page module in response to the user permission flag indicating no access, determining the target display configuration information further includes: Obtain the user role permission file, wherein the user role permission file is used to record the access permissions of different page modules corresponding to different user roles; The page module is hidden in response to the current user role not having access to it.

5. The method according to claim 1, characterized in that, Determining the target de-identification configuration information includes: Obtain the data sensitivity marker and data sensitivity level of the data to be displayed, wherein the data sensitivity marker is used to distinguish between sensitive data and non-sensitive data, and the data sensitivity level is used to identify the degree of sensitivity of the data; Based on predefined mapping rules, a corresponding desensitization strategy is determined according to the data sensitivity marker and the data sensitivity level; The data to be displayed is de-identified according to the described de-identification strategy.

6. The method according to claim 1, characterized in that, The target risk warning configuration information includes: Set data risk levels, where each data risk level is assigned a different color label; Based on the assigned color markers, data of the corresponding data risk level is rendered using color rendering.

7. The method according to claim 1, characterized in that, The step of converting the page description file into corresponding visual components using a low-code parsing rendering engine to generate the target display page includes: The low-code parsing rendering engine performs syntax validation on the page description file. In response to passing the syntax check, extract the component description data contained in the page description file; The extracted component description data is matched with a preset visualization component library to determine the corresponding visualization component; Based on the visualization component, the corresponding front-end component instance is dynamically generated and rendered to generate the target display page.

8. A front-end page creation device, characterized in that, The device includes: The page description file definition module is used to determine the target component configuration information that each type of field in the page description file is adapted to. The target component configuration information includes target table component configuration information, target display configuration information, target de-identification configuration information, and target risk warning configuration information. The page description file generation module is used to generate page description files based on the configuration information of each target component and the functional requirements defined in the project development requirements document; and The page rendering module is used to convert the page description file into corresponding visual components through a low-code parsing rendering engine, and generate the target display page.

9. An electronic device, comprising: One or more processors; Memory, used to store one or more computer programs. The characteristic feature is that the one or more processors execute the one or more computer programs to implement the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program or instructions stored thereon, characterized in that, When the computer program or instructions are executed by a processor, they implement the steps of the method according to any one of claims 1 to 7.

11. A computer program product, comprising a computer program or instructions, characterized in that, When the computer program or instructions are executed by a processor, they implement the steps of the method according to any one of claims 1 to 7.

Images