Page development method and terminal equipment

Abstract

The embodiment of the invention discloses a page development method and terminal equipment, belongs to the technical field of computers, and is used for improving the page development efficiency. The method is applied to terminal equipment and comprises the steps that a table introduction instruction input by a user is obtained, the table introduction instruction indicates introduction of a table component in a page file, and the table component comprises multiple to-be-configured items; in response to the table introduction instruction, obtaining a configuration parameter set for the table component, and configuring the plurality of to-be-configured items by using the configuration parameter set, the configuration parameter set comprising configuration parameters corresponding to each to-be-configured item; and generating a page file containing the table component after parameter configuration.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, and particularly to a page development method and a terminal device. Background Art

[0002] Table pages are widely used in many fields. Presenting data in tabular form on the front-end page is conducive to users obtaining, filtering, sorting, and statistically analyzing more intuitively, laying a foundation for business analysis and decision-making. Therefore, during project development, the user interface (UI) components used to display tabular data have a very high usage frequency. Among them, the UI component encapsulates the code that completes its respective functions into an independent part, and finally completes the elements for displaying the user interface.

[0003] However, common UI components for displaying tabular data require front-end developers to write code one by one for the fields, styles, etc. of each column of data, which leads to a large amount of redundant front-end code in the project. In addition, since the coding styles of front-end developers may not be unified, once the style of the table page is changed, a large amount of code needs to be checked and modified one by one, resulting in high maintenance costs. Therefore, the page development efficiency is low. Summary of the Invention

[0004] The embodiments of the present application provide a page development method and a terminal device, which are used to avoid redundant front-end code and improve page development efficiency. The technical solution is as follows:

[0005] In a first aspect, a page development method is provided. The method is applied to a terminal device and includes: obtaining a table introduction instruction input by a user, where the table introduction instruction indicates introducing a table component into a page file, and the table component includes a plurality of items to be configured; in response to the table introduction instruction, obtaining a set of configuration parameters for the table component, and using the set of configuration parameters to configure the plurality of items to be configured, where the set of configuration parameters includes configuration parameters corresponding to each item to be configured; generating a page file including the table component after parameter configuration.

[0006] As can be seen from the above, since the table component includes a plurality of items to be configured, during page development, it is not necessary for technicians to write a large amount of front-end code. Instead, the terminal device obtains the set of configuration parameters and configures the plurality of items to be configured according to the set of configuration parameters. The table component after parameter configuration can directly render and display a preview page including the table component. Thus, redundant front-end code is avoided, and the page development efficiency is improved.

[0007] In a possible implementation, the page file is rendered to display a preview page including a table component; in response to a drag operation on at least one header name, the display order of at least one header name in the preview page is adjusted.

[0008] As can be seen from the above, the preview page can respond to a drag operation on at least one header name and adjust the display position of at least one header name according to the arranged order of the dragged header names, enriching the functions of the table component.

[0009] In a possible implementation, in response to an operation of moving the cursor pointer to a target cell in the table component, a preset prompt message corresponding to the target cell is displayed; the prompt message is related to the target cell.

[0010] As can be seen from the above, the preview page can respond to a hovering operation and display custom prompt data, enriching the functions of the table component, making the content displayed on the preview page clearer, and improving the user experience.

[0011] In a possible implementation, the configuration parameter set includes column attribute parameters, and the column attribute parameters are used to indicate the attributes of columns in the table component; the attributes of columns include header names.

[0012] As can be seen from the above, the configuration parameter set includes column attribute parameters, and by configuring the column attribute parameters to the corresponding items to be configured in the table component, it is possible to avoid writing front-end code column by column in front-end page development. By configuring the corresponding items to be configured for column attributes, the development of the table page is completed, thereby improving the development efficiency of the front-end page.

[0013] In a possible implementation, the configuration parameter set includes operation column parameters, and the operation column parameters are used to indicate the styles or functions of operation elements in the operation column of the table component; the operation elements are used to operate on the corresponding rows in the table page.

[0014] As can be seen from the above, since the operation elements are used to indicate operations on the table data of the corresponding rows in the table page, the configuration parameter set including operation column parameters can enrich the functions of the table page more, meet different business requirements, and improve the user experience.

[0015] In a possible implementation, the operation column parameters further include permission information; the permission information is used to indicate the users who are authorized to use the operation elements.

[0016] As can be seen from the above, including permission information in the operation column parameters can make the operation column elements in the preview page corresponding to the table component be displayed to authorized users, and the operation elements are not displayed to users without permission, so as to meet different business scenarios and user usage requirements, thereby improving the efficiency of page development.

[0017] In a possible implementation, the configuration parameter set includes paging parameters; the paging parameters are used to indicate the paging situation of the table component.

[0018] As can be seen from the above, when the configuration parameter set includes paging parameters, for scenarios with a large amount of table data, paging can more clearly display the table data, facilitating user query and operation, and enriching the functions of the table component.

[0019] In a possible implementation, the configuration parameter set includes toolbar parameters; the toolbar parameters are used to indicate the styles or functions of the tool elements in the toolbar of the table component; the tool elements are used to operate on the rows and / or columns in the table component.

[0020] As can be seen from the above, since the tool elements are used to operate on the table data, by configuring the toolbar parameters to the corresponding items to be configured in the table component, users can operate on the table data through the tool elements, enriching the functions of the table component, improving the interactivity of the table component, and thus improving the efficiency of page development.

[0021] In a possible implementation, the column attribute parameters further include the field type, column width, alignment method, or sorting method of the column.

[0022] In a possible implementation, obtain the configuration parameter set of the table component sent by the server; the server is used to provide the required backend data for the preview page.

[0023] As can be seen from the above, all the configuration item parameter sets corresponding to multiple configuration items can be returned by the backend server, greatly reducing the amount of front-end code written in front-end page development. Moreover, it can also reduce the frequency of project deployment and update, thereby improving the efficiency of page development and maintenance.

[0024] In a possible implementation, the data type of the table data corresponding to the table component includes any one of text, link, rich text, or picture.

[0025] As can be seen from the above, the table component supports displaying multiple data types, greatly enriching the functions of the table component, enabling the table component to meet different business scenarios, and thus improving the efficiency of page development.

[0026] In a second aspect, a page development device is provided. In the embodiments of the present application, the functional modules of the page development device can be divided according to the method provided in the first aspect above. For example, each functional module can be divided corresponding to each function, or two or more functions can be inherited in one processing module. Exemplarily, in the embodiments of the present application, the page development device can be divided into an acquisition module, a configuration module, and a generation module according to functions. The possible technical solutions and beneficial effects described for each of the above-divided functional modules can refer to the technical solutions provided in the first aspect above or its corresponding possible implementation manners, and will not be elaborated here.

[0027] In a third aspect, embodiments of the present application provide a terminal device, which includes a display screen, a processor, and a memory; the display screen is used to display a preview page; computer instructions are stored in the memory, and the computer instructions are loaded and executed by the processor to enable the terminal device to implement the page development method as described in the first aspect above.

[0028] In a fourth aspect, embodiments of the present application provide a computer-readable storage medium, in which at least one computer program is stored, and the computer program is loaded and executed by the processor to implement the page development method as described in the first aspect above.

[0029] In a fifth aspect, embodiments of the present application provide a computer program product or a computer program, the computer program product or the computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the terminal device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions to enable the terminal device to execute the page development method provided in various optional implementation manners of the first aspect above.

[0030] For the specific descriptions of the third aspect to the fifth aspect and their various implementation manners in the embodiments of the present application, reference can be made to the detailed descriptions in the first aspect and its various implementation manners; and for the beneficial effects of the third aspect to the fifth aspect and their various implementation manners, reference can be made to the beneficial effect analysis in the first aspect and its various implementation manners, which will not be elaborated here.

[0031] These aspects or other aspects of the embodiments of the present application will be more clearly understood in the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 FIG. 1 shows a schematic diagram of a page development system 100 provided by an embodiment of the present application;

[0033] Figure 2 FIG. 2 shows a schematic diagram of the hardware structure of a terminal device 110 provided by an embodiment of the present application;

[0034] Figure 3Shows a schematic diagram of the process of a page development method provided by an embodiment of the present application;

[0035] Figure 4 Shows a schematic diagram of a front-end preview page 300 provided by an embodiment of the present application;

[0036] Figure 5 Shows a schematic diagram of a front-end preview page 300 in which the data type of a table data includes pictures provided by an embodiment of the present application;

[0037] Figure 6 Shows a schematic diagram of a front-end preview page 300 in which the data type of a table data includes labels provided by an embodiment of the present application;

[0038] Figure 7 Shows a schematic diagram of another front-end preview page 300 provided by an embodiment of the present application;

[0039] Figure 8 Shows a schematic diagram of yet another front-end preview page 300 provided by an embodiment of the present application;

[0040] Figure 9 Shows a schematic diagram of still another front-end preview page 300 provided by an embodiment of the present application;

[0041] Figure 10 Shows an updated schematic diagram of dragging and sorting of table header names provided by an embodiment of the present application;

[0042] Figure 11 Shows a schematic diagram of displaying prompt information provided by an embodiment of the present application;

[0043] Figure 12 Shows a schematic diagram of the structure of a page development device 400 provided by an embodiment of the present application. Detailed implementation

[0044] Next, the technical solutions in the embodiments of the present application will be described with reference to the accompanying drawings in the embodiments of the present application. Among them, in the description of the present application, unless otherwise specified, " / " means that the objects associated before and after are in an "or" relationship. For example, A / B may represent A or B; "and / or" in the present application is only a description of the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B may represent: A exists alone, A and B exist simultaneously, and B exists alone. These three situations, where A and B can be singular or plural. Also, in the description of the present application, unless otherwise specified, "a plurality of" means two or more than two. "At least one (item)" or its similar expression below refers to any combination of these items, including any combination of a single item (item) or multiple items (items). For example, at least one (item) of a, b, or c may represent: a, b, c, a - b, a - c, b - c, or a - b - c, where a, b, and c can be single or multiple. Additionally, for the convenience of clearly describing the technical solutions in the embodiments of the present application, in the embodiments of the present application, words such as "first" and "second" are used to distinguish the same items or similar items with basically the same functions and roles.

[0045] Those skilled in the art can understand that words such as "first" and "second" do not limit the quantity and execution order, and the words "first" and "second" do not necessarily limit that they are different. At the same time, in some embodiments of the present application, words such as "exemplary" or "for example" are used to represent examples, illustrations, or explanations. Any embodiment or design solution described as "exemplary" or "for example" in the embodiments of the present application should not be construed as being more preferred or having more advantages than other embodiments or design solutions. Exactly speaking, using words such as "exemplary" or "for example" aims to present relevant concepts in a specific way for easy understanding.

[0046] In addition, the device architecture and business scenarios described in the embodiments of the present application are for more clearly illustrating the technical solutions in the embodiments of the present application, and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those of ordinary skill in the art know that with the evolution of the device architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of the present application are equally applicable to similar technical problems.

[0047] First, an exemplary introduction to the application scenarios of the embodiments of the present application will be given.

[0048] Vue 3 is the latest version of the Vue JavaScript front - end framework, which brings many important improvements and new features. With the release of Vue 3, many popular UI component libraries and tools have successively launched versions for Vue 3. During the development of the front - end table page, the Element Plus UI component library is usually used. Among them, the Element Plus UI component library is a UI component library based on the Vue 3 front - end framework. During the development of the front - end table page, the UI components for displaying table data in the Element Plus UI component library are usually used. Front - end technicians use the encapsulated table components in the Element Plus UI component library to develop page files through front - end development devices. The page file can be stored on the server and configured with a web address. Customers can access this web address through the browser on the client side and view the corresponding front - end page of the page file rendered in the browser. Among them, the front - end development device and the client device where the client is located can be different terminal devices or the same terminal device.

[0049] An embodiment of the present application provides a page development method, which is applied to a terminal device. The terminal device obtains a table introduction instruction input by the user. Among them, the terminal device is used for front - end page development; the user includes front - end technicians; the table introduction instruction indicates to introduce a table component in the page file, and the table component includes a plurality of items to be configured. The terminal device responds to the table introduction instruction, obtains a set of configuration parameters for the table component, and configures the plurality of items to be configured by using the set of configuration parameters. The set of configuration parameters includes the configuration parameters corresponding to each item to be configured. The terminal device generates a page file containing the table component after parameter configuration. The above - mentioned method configures the plurality of items to be configured of the table component through the set of configuration parameters, generates a page file containing the table component after parameter configuration, and renders the page file after parameter configuration, and can display a preview page including the table component, thereby realizing the development of the table page. It avoids the phenomenon of code redundancy caused by front - end technicians writing a large amount of front - end code during the page development process. It reduces the cost of front - end page development and maintenance, and thus improves the efficiency of page development.

[0050] Secondly, an exemplary introduction to the system architecture of the embodiment of the present application is given.

[0051] Figure 1 The figure shows a schematic diagram of a page development system 100 provided by an embodiment of the present application. As Figure 1 shown, the page development system 100 includes a terminal device 110 and a server 120; at the same time, the terminal device 110 and the server 120 are connected to each other through a network.

[0052] Among them, the terminal device 110 includes a display screen, and specifically may include electronic devices with communication capabilities such as mobile phones, smart watches, tablet computers, foldable electronic devices, desktop computers, laptop computers, handheld computers, notebooks, Ultra-Mobile Personal Computers (UMPCs), netbooks, and Personal Digital Assistants (PDAs). The embodiments of the present application do not impose special restrictions on the specific type of the terminal device 110.

[0053] Moreover, the operating systems installed on the terminal device 110 include but are not limited to or other operating systems. The present application does not limit the specific type of the terminal device 110 or the type of the operating system when an operating system is installed. Those skilled in the art can determine the type of the terminal device 110 and the installed operating system according to actual needs, and these designs do not exceed the protection scope of the embodiments of the present application.

[0054] The terminal device 110 is used to obtain a table reference instruction input by the user. Among them, the table introduction instruction instructs to introduce a table component in a page file, and the table component includes multiple items to be configured. The terminal device 110 is used to, in response to the table introduction instruction, obtain a set of configuration parameters for the table component, and use the set of configuration parameters to configure multiple items to be configured of the table component. Among them, the set of configuration parameters includes the configuration parameters corresponding to each item to be configured. The terminal device 110 is used to generate a page file containing the table component after parameter configuration, and a preview page of the table component can be displayed through the display screen of the terminal device 110.

[0055] Among them, the server 120 may be a standard general server, and specifically may be a blade server, a high-density server, a rack server, or a high-performance server, etc. The server 120 is used to provide the backend data required for the preview page.

[0056] Taking the terminal device 110 as a laptop computer as an example, Figure 2 shows a schematic hardware structure diagram of a terminal device 110 provided by an embodiment of the present application. As Figure 2 shown, the terminal device 110 includes a display screen 210, a processor 220, and a memory 230. The display screen 210, the processor 220, and the memory 230 are connected through a bus 240. It should be understood that the present application does not limit the number of the processor 220 and the memory 230 in the terminal device 100.

[0057] Among them, the display screen 210 is used to display the preview page of the table component.

[0058] The processor 220 may specifically be a central processing unit (CPU) or a graphics processing unit (GPU). The processor 220 is configured to obtain a table introduction instruction input by a user. Among them, the table introduction instruction instructs to introduce a table component into a page file, and the table component includes a plurality of items to be configured. The processor 220 is configured to, in response to the table introduction instruction, obtain a set of configuration parameters for the table component, and configure the plurality of items to be configured of the table component by using the set of configuration parameters. Among them, the set of configuration parameters includes the configuration parameters corresponding to each item to be configured. The processor 220 is configured to generate a page file including the table component after parameter configuration.

[0059] The memory 230 is configured to store instructions executable by the processor. Among them, the memory 230 may be a storage space where data is not lost when power is off, and specifically may be a non-volatile random access memory (NVRAM), an electrically erasable programmable read-only memory (EEPROM), etc.

[0060] It should be noted that the system architecture and application scenarios described in the embodiments of the present application are for more clearly illustrating the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those of ordinary skill in the art may know that with the evolution of the system architecture and the emergence of new business scenarios, the technical solutions provided by the embodiments of the present application are equally applicable to similar technical problems.

[0061] For ease of understanding, the following provides an exemplary introduction to the page development method provided in the present application in conjunction with the accompanying drawings. The page development method is executed by Figure 1 the terminal device 110 shown in.

[0062] Figure 3 FIG. shows a schematic flow chart of a page development method provided in an embodiment of the present application. The page development method is executed by a development device (terminal device), and includes the following steps:

[0063] S101, the terminal device obtains a table introduction instruction input by a user.

[0064] Among them, the table introduction instruction instructs to introduce a table component into a page file, and the table component includes a plurality of items to be configured. The terminal device is used for front-end page development; the user includes front-end technical personnel.

[0065] The method provided by the embodiments of this application can be applied to the Vue 3 version of the JavaScript front-end framework. A typical Vue 3 project usually includes the directory src / , the public directory public / , the project configuration file package.json, and the configuration file babel.config.js. Among them, the directory src / is used to store the main source code directory of the project; the public directory public / is used to store static resources that do not need to be built, such as icons or hyper text markup language (HTML); the project configuration file package.json is used to define information such as the dependencies and scripts of the current project. Dependencies usually refer to external resources required during the operation or development of the current project, such as specific software libraries, frameworks, etc. Scripts usually refer to executable programs written in a scripting language to complete specific tasks of the project. The configuration file babel.config.js is used to convert the syntax of the new version of the JavaScript language and be compatible with different versions of browsers.

[0066] Exemplarily, the terminal device obtains a creation instruction and creates a new first Vue 3 project. The terminal device obtains a table introduction instruction input by the user through the first Vue 3 project and references the table component.

[0067] Among them, the Vue scaffolding tool (command line interface, CLI) is usually used to create a new Vue 3 project. Specifically, the terminal device obtains the vue create my-project-name command and starts an interactive project creation process to create the first Vue 3 project.

[0068] For example, the table component can be introduced in the main.js file of the first Vue 3 project, and the code snippet is as follows:

[0069] import qwTable fron‘@\components / qwTable / qwTable’;

[0070] app.components(‘qwTable’,qwTable);

[0071] Among them, the above code means to place the table component qwTable in the "components" folder. The "components" folder is mainly used to store Vue components. "qwTable" represents the name of the table component.

[0072] S102, the terminal device responds to the table introduction instruction, obtains the configuration parameter set for the table component, and configures multiple items to be configured by using the configuration parameter set.

[0073] Among them, the configuration parameter set includes the configuration parameters corresponding to each item to be configured.

[0074] Exemplarily, the terminal device can obtain the configuration parameter set input by the user. Specifically, the user can create a reference in the table component, so that the user can directly access the table instance in the first Vue3 project instance.

[0075] For example, the terminal device can obtain the following code snippet input by the user to obtain the configuration parameter set for the table component.

[0076]

[0077] Among them, in Vue.js, "ref" is a special attribute used to register reference information for components. table refers to the attributes of all items to be configured passed to the table component, and "table" in double quotes is the specific configuration parameter set input to the items to be configured of the table component.

[0078] Optionally, during the process of the user inputting the configuration parameter set to the table component, the user can configure the table component according to business requirements. Specifically, it can include sorting callback methods, the total amount of data in the table component, or attributes of the unique identifier data selected by the checkbox, etc.

[0079] In a possible implementation manner, the terminal device obtains the configuration parameter set of the table component sent by the server. Among them, the server is used to provide the required backend data for the preview page.

[0080] As can be seen from the above, the table component includes multiple items to be configured. That is to say, each element in the table component is a configuration item. Therefore, all the configuration item parameter sets corresponding to the multiple configuration items can be returned by the backend server, greatly reducing the amount of front-end code written in front-end page development. Moreover, it can also reduce the frequency of project deployment and update, thereby improving the efficiency of page development and maintenance.

[0081] In a possible implementation manner, the configuration parameter set includes column attribute parameters, and the column attribute parameters are used to indicate the attributes of columns in the table component; the attributes of columns include the header names.

[0082] Exemplarily, the table component includes a set of header data in a specific scenario. The set of header data includes multiple header names. The header names included in the header parameters are the header names in the set of header data.

[0083] For example, column attribute parameters can be stored in the array Columns. Taking the table header names including "Name", "Coding Type", and "Coding" as an example, the table header attribute parameters can include the following configuration code snippets:

[0084]

[0085] Among them, title corresponds to the table header name of the current column, and field corresponds to the field of the column where the table header of the current column is located. "title: 'Coding', field: 'code1'" means that the table header name is Coding, and the field type of the column where the table header is located is code1.

[0086] Optionally, the column attribute parameters also include the field type of the column, column width, alignment method, or sorting method.

[0087] For example, taking the table header name including "Coding Type" as an example, the table header attribute parameters can also include the following configuration code snippets:

[0088]

[0089] Among them, "field: 'htmlText'," means that the field type of the column where the table header is located is 'htmlText'; "align: 'left'," means that the alignment method of the current column is left alignment; "width: 260," means that the width of the current column is 260; "sortable: 'custom'" means that the sorting method of the current column is the custom method "custom". Among them, the sorting method can be any one of the bubble sort method, quick sort method, or insertion sort method. The terminal device can obtain the above table header attribute parameters, pass the table header attribute parameters into the table component, and use the table header attribute parameters to configure the corresponding items to be configured in the table component. The terminal device renders the configured table component through the browser and displays the preview page through the display screen. Figure 4 Shows a schematic diagram of a front-end preview page 300 provided by an embodiment of the present application. As Figure 4 shown, the front-end preview page 300 includes table headers, and the table header names are "Name", "Coding Type", and "Coding" respectively. From the above parameters, it can be seen that the alignment methods of the table header names are all left alignment.

[0090] As can be seen from the above, the user can add different parameters in the Columns array according to business requirements, including whether to display the current column by default, not expecting to be hidden and controlled, the content to be displayed in the current column, the main color, and the click event callback, etc. The above configuration information is only an example and can be added or deleted according to the actual application scenario, and does not constitute a specific limitation.

[0091] In a possible implementation, the data type of the table data corresponding to the table component includes any one of text, link, rich text, or picture.

[0092] Exemplarily, the header property parameter further includes the data type of the table data corresponding to the table component.

[0093] For example, if the header property parameter includes html, html indicates that the content of the current column is parsed through v-html provided by vue and displayed in the form of rich text, and the return value value is the rich text code to be displayed in the current column of the custom input. If the header property parameter includes tag, tag indicates that the current column is displayed in the form of a label, the corresponding return value value is the label content, and type is the label theme color. If the header property parameter includes svgICon, svgICon indicates that the current column is displayed in the format of an icon plus text, combines the icon component el-icon provided by the component library element plus with the text, the name of the built-in icon library, and value is the corresponding text. If the header property parameter includes img, img indicates that the current column is displayed in the form of a picture through the picture component el-image provided by the component library elementplus, and locates the picture path through the uniform resource locator (url). Figure 5 Shows a schematic diagram of a front-end preview page 300 in which the data type of a table data provided by an embodiment of the present application includes a picture, as Figure 5 shown. In Figure 5 (a) of, the front-end preview page 300 includes a table header, and the table header names are "Name", "Coding Type", "Coding", and "Background Picture" respectively. During the process that a customer accesses the front-end preview page 300 through the client, when the customer clicks on the table data "Picture 1" for preview, as Figure 5 (b) of shows, Picture 1 is displayed on the client.

[0094] For another example, Figure 6 Shows a schematic diagram of a front-end preview page 300 in which the data type of a table data provided by an embodiment of the present application includes a label. As Figure 6 shown, the front-end preview page 300 includes a table header, and the table header names are "Name", "Type", "Belonging Application", and "Belonging Label" respectively. In the case where the number of labels in the table data corresponding to the table header name "Belonging Label" is greater than 3, when the table component receives this type of data, it will first convert the string corresponding to tag into an array, and if it exceeds 3, it will be truncated, and display the number of the remaining labels, and click on the number to display the remaining labels.

[0095] Optionally, the terminal device obtains the table data sent by the server.

[0096] In a possible implementation, the set of configuration parameters includes operation column parameters, which are used to indicate the style or function of operation elements in the operation column of the table component; the operation elements are used to operate on the corresponding rows in the table page.

[0097] Among them, the operation elements include buttons or checkboxes.

[0098] Exemplarily, the operation column is a column for performing specific operations on each row of data in the table, and specifically may include edit, delete, view details buttons, etc. or checkboxes. The operation column can enrich the functions of the table page. Therefore, including the operation column parameters in the set of configuration parameters can meet different business requirements. The table component includes an operation column configuration item, which can improve the utilization rate of the table component in different development scenarios.

[0099] For example, the operation column parameters in the set of configuration parameters can be stored in the set operation. Taking the operation element name including "Edit" as an example, the operation column parameters may include the following configuration code snippet:

[0100]

[0101]

[0102] Among them, "show: true," is used to control the display of the operation column. If it is false, it means not to display the operation column. "width: '210'," means the width of the operation column is 210. "title: 'Edit'" means the name of the operation element. "type: 'primary'," means the type information of the operation element is primary. The terminal device can obtain the above operation column parameters, pass the operation column parameters into the table component, and use the operation column parameters to configure the corresponding items to be configured in the table component. The terminal device renders the configured table component through the browser and displays the preview page through the display screen. Combining the above header attribute parameters, Figure 7 shows a schematic diagram of another front-end preview page 300 provided by an embodiment of the present application. As Figure 7 shown, the front-end preview page 300 includes a table, and the table includes a header and an operation column. The header names are "Name", "Coding Type", and "Coding" respectively. The operation column is before the "Name" column and includes an edit button for performing an edit operation on the corresponding data in each row.

[0103] Optionally, the operation column parameters further include permission information; the permission information is used to indicate the users who are authorized to use the operation elements.

[0104] It should be noted that the above operation column elements are only examples and do not constitute specific limitations. Related technical personnel can add different numbers and types of operation elements (such as check boxes, etc.) in combination with the actual application scenarios, increasing the flexibility and richness of page development.

[0105] As can be seen from the above, including permission information in the operation column parameters can enable the operation column elements in the preview page corresponding to the table component to be displayed to users with permissions, while hiding the operation elements from users without permissions, so as to meet different business scenarios and user usage requirements, thereby improving the efficiency of page development.

[0106] In another possible implementation manner, if the operation column parameters include multiple operation elements, the terminal device traverses the multiple operation elements and renders and displays the multiple operation elements.

[0107] Exemplarily, if the number of operation elements exceeds 3, when the terminal device renders the multiple operation elements, the redundant operation elements exceeding 3 are stored under "More", making the preview page more concise.

[0108] In one possible implementation manner, the configuration parameter set includes toolbar parameters; the toolbar parameters are used to indicate the styles or functions of the tool elements in the toolbar of the table component; the tool elements are used to operate on the rows and / or columns in the table component.

[0109] Exemplarily, the toolbar includes tool elements for operating on the table data in the preview page, which can specifically be new creation, export, or batch deletion, etc.

[0110] For example, the toolbar parameters in the configuration parameter set can be stored in the set custom. Taking the tool element name including "Export" as an example, the toolbar parameters can include the following configuration code snippets:

[0111]

[0112] Among them, "name:'Export'," indicates that the name of the tool element is Export; "type" indicates the type of the tool element; click is the method triggered when the tool element is clicked.

[0113] The terminal device can obtain the above toolbar parameters, pass the toolbar parameters into the table component, and use the toolbar parameters to configure the corresponding items to be configured in the table component. The terminal device renders the configured table component through the browser and displays the preview page through the display screen. Combining the above header attribute parameters and operation column parameters, taking the operation column element as a check box as an example, Figure 8 shows a schematic diagram of another front-end preview page 300 provided by an embodiment of the present application. As Figure 8As shown in the figure, the front-end preview page 300 includes a table, which includes a table header, an operation column, and a top toolbar. The names of the table header are "Name", "Coding Type", and "Coding" respectively. The operation column is before the "Name" column, and the operation element it includes is a checkbox, which is used to perform selection operations on the data corresponding to each row. The tool elements included in the top toolbar are the "Export" button, which is located on the right side of the top toolbar. A hint field of "The number of selected data is" can also be included on the left side of the top toolbar to facilitate users to operate on the data in the table.

[0114] Optionally, the toolbar parameters further include permission information; the permission information includes the identification information of the users who have the right to use the tool elements. Thus, the tool elements are hidden from users who do not have the permission to use the toolbar.

[0115] In a possible implementation manner, the configuration parameter set includes paging parameters; the paging parameters are used to indicate the paging situation of the table component.

[0116] Among them, the paging parameters include the number of data in each page, the page number type, or the page length.

[0117] Exemplarily, the paging component el-pagination provided by the component library element plus can be used within the table component. The display and hiding of paging are controlled by the show defined in the paging component. Through the methods of clicking on paging and changing the page provided by el-pagination itself, combined with the two-way binding data and click callback encapsulated by the table component, the effect of switching data by clicking on paging is achieved.

[0118] S103. The terminal device generates a page file containing the table component after parameter configuration.

[0119] Exemplarily, the terminal device obtains multiple configuration parameter sets, passes the multiple configuration parameter sets into the table component, and the table component processes the multiple configuration parameter sets and configures them into multiple items to be configured of the table component, generating a page file containing the table component after parameter configuration. The terminal device renders the page file through a browser and displays a preview page of the table component on the display screen.

[0120] For example, according to business requirements, the user determines that the configuration parameter set is the following code snippet:

[0121]

[0122]

[0123] Among them, "isTopFrame: true" means to display the top toolbar. "showIndex: true" means to display the serial number. "showCheckBox: false" means to display the checkbox. "expand: false" means not to display the detailed data. "loading: false" means not to display the loading effect. "isHiddenAllcheck: false" means not to hide the all-selection. "rowKey: 'id'" means the expansion is represented by id. "expandAll: false" means not to expand by default. "size: 'default'" means the size of the table is the default size. "tools:" represents the toolbar parameters. "columns: []" represents the table header property parameters. "operation:" represents the operation column parameters. Paging represents the paging configuration item. show: true / false is used to control whether to display paging. The above parameters can use boolean data types to control whether to display the elements or attributes corresponding to the current parameters. It can flexibly configure the table component to meet more business scenarios.

[0124] The terminal device obtains the above configuration parameter set, passes multiple configuration parameter sets into the table component, and configures them into multiple items to be configured of the table component. The terminal device renders the table component with the parameter configuration through the browser and displays the preview page of the table component. Combining the above S102, taking the tool elements included in the "tools:" toolbar parameters as the export; the table header names included in the "columns: []" table header property parameters are Region, Unit, and Machine Room; the operation elements included in the "operation:" operation column parameters are checkboxes as an example, Figure 9 shows a schematic diagram of another front-end preview page 300 provided by the embodiment of the present application. As Figure 9 shown, the front-end preview page 300 includes a table, and the table includes a table header, an operation column, a top toolbar, and bottom paging. The table header names are "Region", "Unit", and "Machine Room" respectively. The operation column is before the "Region" column, and the operation elements included are checkboxes for performing selection operations on the data corresponding to each row. The tool elements included in the top toolbar are the "Export" button, which is located on the right side of the top toolbar. The left side of the top toolbar may also include a prompt field "The number of selected data is" to facilitate users to operate on the data in the table. The bottom of the table includes paging, the number of table pages is 4, and the current table page is the first page. For a large amount of table data, paging can more clearly display the table data, facilitating users to query and operate.

[0125] It should be noted that the names, positions, quantities, or styles of the above operation columns, toolbars, and pagination are only examples. In specific business scenarios, there are different manifestations for their names, positions, quantities, or styles, all of which do not exceed the scope of description of the embodiments of this application.

[0126] In a possible implementation manner, the client's client device obtains a page file, renders the page file, and displays a preview page including a table component; the client's client device responds to a drag operation on at least one table header name and adjusts the display order of at least one table header name in the preview page.

[0127] Among them, the terminal device for front-end development and the client's client device can be different terminal devices or the same terminal device.

[0128] Exemplarily, a function button is added to the operation column. The terminal device receives an operation instruction to click the function button and displays all the table header names of the table. The user updates the position of at least one table header name through a drag operation. When the preview page detects a change in the position of the table header name, it is passed into the table component. The table component records the sorting of all the current table header names and updates the display position of the table header name.

[0129] For example, combining the table header names included in the above table header attribute parameters as "Name", "Coding Type", and "Coding", and the operation element included in the operation column parameter is the "Sort" button. Figure 10 Shows an update schematic diagram of the drag-and-drop sorting of table header names provided by the embodiments of this application, as Figure 10 shown. As Figure 10 shown in (a) in it, in the front-end preview page 300, there is a table. The table includes a table header, and the table header names are "Name", "Coding Type", and "Coding" respectively. The operation column is before the "Name" column, and the operation element included is the "Sort" button. The user clicks the "Sort" button, and a drop-down table is displayed in the preview page. All the table header names are displayed in the drop-down table. The user selects "Coding Type" for a drag operation. As Figure 10 shown in (b) in it, the user drags "Coding Type" after "Coding". The terminal device responds to the drag operation through the preview page and displays the display positions of the updated table header names according to the updated display order in the drop-down table.

[0130] Optionally, the table in the preview page also supports single-column drag-and-drop sorting, single-column moving up / down, controlling single-column display / hiding, or dragging to control the column width.

[0131] In a possible implementation manner, the terminal device displays a preset prompt message corresponding to the target cell in response to an operation of moving the cursor pointer to the target cell in the table component. The prompt message is related to the target cell.

[0132] Exemplarily, the preset prompt message for the column that needs to be displayed in a floating manner is displayed by using the tooltip component el-tooltip provided by the component library element plus. The prompt message includes the complete data hidden in the target cell. When the cursor pointer is placed on the data corresponding to the target column, the preview page displays the prompt data in response to the floating operation.

[0133] For example, the preset prompt message is the backbone optical cable details, and the target cell is the cell in the column where the computer room is located. Figure 11 Shows a schematic diagram of displaying a prompt message provided by an embodiment of the present application. As Figure 11 shown, the front-end preview page 300 includes a table, and the table includes a table header, an operation column, a top toolbar, and bottom pagination. The table header names are "Region", "Unit", and "Computer Room" respectively. The operation column is before the "Region" column. The tool elements included in the top toolbar are the "Export" button, which is located on the right side of the top toolbar. The left side of the top toolbar may also include a prompt field "The number of selected data is" to facilitate the user to operate on the data in the table. The bottom of the table includes pagination. Among them, the cell in the column where the "Computer Room" is located is the target cell where the prompt message needs to be displayed in a floating manner. When the cursor pointer moves to the position where the target cell "Computer Room 01" is located, the terminal device displays the prompt data "Backbone Optical Cable 01-A" in response to the operation of moving the cursor pointer to the target cell in the table component.

[0134] As can be seen from the above, the preview page can display the preset prompt message in response to the operation of moving the cursor pointer to the target cell in the table component, enriching the functions of the table component, making the content displayed on the preview page clearer, and improving the user experience.

[0135] In summary, the embodiment of the present application provides a page development method for avoiding front-end code redundancy and improving page development efficiency. This method is applied to a terminal device, and the terminal device obtains a table introduction instruction input by a user. Among them, the terminal device is used for front-end page development; the user includes front-end technicians; the table introduction instruction indicates to introduce a table component in a page file, and the table component includes multiple items to be configured. The terminal device responds to the table introduction instruction, obtains a set of configuration parameters for the table component, and configures the multiple items to be configured by using the set of configuration parameters. The set of configuration parameters includes configuration parameters corresponding to each item to be configured. The terminal device generates a page file containing the table component after parameter configuration. The above method configures multiple items to be configured of the table component through a set of configuration parameters, and renders the configured table component to display a preview page including the table component, thereby realizing the development of the table page. It effectively reduces the phenomenon of code redundancy caused by front-end technicians writing a large amount of front-end code during the page development process. Since the amount of front-end code is reduced, the cost of front-end page development and maintenance is also reduced. Therefore, the above method can improve the efficiency of page development.

[0136] The above mainly introduces the solution of the embodiment of the present application from the perspective of the method. It can be understood that in order for the page development device to implement the above functions, it includes at least one of the corresponding hardware structures and software modules for executing each function. Those skilled in the art should easily realize that, in combination with the units and algorithm steps of each example described in the embodiments disclosed herein, the embodiments of the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a certain function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the embodiments of the present application.

[0137] The embodiment of the present application can divide the page development device into functional units according to the above method examples. For example, each functional unit can be divided corresponding to each function, or two or more functions can be integrated into one processing unit. The above integrated unit can be implemented in the form of hardware or in the form of a software functional unit. It should be noted that the division of units in the embodiment of the present application is illustrative, only a logical function division, and there may be other division methods in actual implementation.

[0138] Exemplarily, Figure 12 shows a schematic diagram of the structure of a page development device 400 provided by the embodiment of the present application. As Figure 12 shown, the page development device can be applied to a terminal device, and the page development device 400 includes:

[0139] An acquisition module 410 is configured to acquire a table introduction instruction input by a user. The table introduction instruction indicates introducing a table component into a page file, and the table component includes a plurality of items to be configured.

[0140] A configuration module 420 is configured to, in response to the table introduction instruction, acquire a set of configuration parameters for the table component, and configure the plurality of items to be configured by using the set of configuration parameters. The set of configuration parameters includes configuration parameters corresponding to each item to be configured.

[0141] A generation module 430 is configured to generate a page file including the table component after parameter configuration.

[0142] In a possible implementation manner, the page development device 400 further includes a rendering module, configured to render the page file to display a preview page including the table component; and in response to a drag operation on at least one table header name, adjust the display order of at least one table header name in the preview page.

[0143] The rendering module is further configured to, in response to an operation of moving a cursor pointer to a target cell in the table component, display preset prompt information corresponding to the target cell; the prompt information is related to the target cell.

[0144] In a possible implementation manner, the acquisition module 410 is further configured to acquire a set of configuration parameters of the table component sent by a server; the server is configured to provide backend data required for the preview page.

[0145] Optionally, the above page development device 400 can be applied to Figure 1 the terminal device 110 shown in the figure.

[0146] For the specific description of the above optional manner, reference can be made to the foregoing method embodiments, which will not be elaborated herein. In addition, the explanations and beneficial effects descriptions of any of the above page development devices 400 can refer to the above Figure 3 corresponding method embodiments and will not be elaborated.

[0147] An embodiment of the present application further provides a table component, which includes a plurality of items to be configured; when the plurality of items to be configured of the table component are introduced with the corresponding configuration parameters in the set of configuration parameters, the table component is rendered to display a preview page including the table component.

[0148] The embodiments of the present application also provide a computer program product containing instructions. When the instructions run on a computer, the computer is enabled to execute any one of the page development methods in the above embodiments. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the embodiments of the present application are generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from a website, a computer, a server, or a data center to another website, computer, server, or data center in a wired manner (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or a wireless manner (such as infrared, wireless, microwave, etc.). The computer-readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server or a data center that includes one or more media integrated therein. The available medium may be a magnetic medium (such as a floppy disk, a hard disk, a magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as an SSD), etc.

[0149] It should be noted that the devices for storing computer instructions or computer programs provided in the embodiments of the present application, such as but not limited to, the above-mentioned memory, computer-readable storage medium, and communication chip, etc., are all non-transitory. Those skilled in the art should be able to realize that in the above one or more examples, the functions described in the embodiments of the present application can be implemented by hardware, software, firmware, or any combination thereof. When implemented using software, these functions may be stored in a computer-readable storage medium or transmitted as one or more instructions or codes on a computer-readable storage medium. The computer-readable storage medium includes a computer storage medium and a communication medium, where the communication medium includes any medium that facilitates the transmission of a computer program from one place to another. The storage medium may be any available medium that can be accessed by a general-purpose or special-purpose computer.

[0150] The above are only alternative embodiments of the present application and are not intended to limit the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application shall be included within the protection scope of the present application.

Claims

1. A page development method, characterized in that, Applied to a terminal device, the method includes: Obtain a table introduction instruction input by a user, where the table introduction instruction indicates introducing a table component in a page file, and the table component includes a plurality of items to be configured; In response to the table introduction instruction, obtain a set of configuration parameters for the table component, and use the set of configuration parameters to configure the plurality of items to be configured, where the set of configuration parameters includes configuration parameters corresponding to each item to be configured; Generate a page file including the table component after parameter configuration.

2. The method according to claim 1, wherein The method further includes: Render the page file to display a preview page including the table component; In response to a drag operation on at least one table header name, adjust the display order of the at least one table header name in the preview page.

3. The method according to claim 2, characterized in that, The method further includes: In response to an operation of moving a cursor pointer to a target cell in the table component, display preset prompt information corresponding to the target cell; the prompt information is related to the target cell.

4. The method according to any one of claims 1 to 3, characterized in that, The set of configuration parameters includes column attribute parameters, and the column attribute parameters are used to indicate the attributes of columns in the table component; the attributes of the columns include table header names.

5. The method according to any one of claims 1-4, characterized in that, The set of configuration parameters includes operation column parameters, and the operation column parameters are used to indicate the styles or functions of operation elements in the operation column of the table component; the operation elements are used to operate on corresponding rows in the table page.

6. The method according to any one of claims 1-5, characterized in that, The set of configuration parameters includes paging parameters; the paging parameters are used to indicate the paging situation of the table component.

7. The method according to any one of claims 1-6, characterized in that, The set of configuration parameters includes toolbar parameters; the toolbar parameters are used to indicate the styles or functions of tool elements in the toolbar of the table component; the tool elements are used to operate on rows and / or columns in the table component.

8. The method according to claim 4, wherein The column attribute parameters further include the field type, column width, alignment method, or sorting method of the column.

9. The method according to any one of claims 1-8, characterized in that The obtaining of the set of configuration parameters for the table component includes: Obtain the set of configuration parameters of the table component sent by a server; the server is used to provide the required backend data for the preview page.

10. A terminal device, characterized in that, The terminal device includes: a display screen, a processor, and a memory for storing instructions executable by the processor; The display screen is used to display the preview page; the processor is configured to execute the instructions, so that the terminal device executes the page development method according to any one of claims 1-9.

Images