Data display method and device, electronic equipment and computer readable storage medium
Through the shared target data model, data sharing and consistency of form filling and detailed display interfaces is achieved, which solves the problems of data redundancy and updates in the existing technology, and improves development efficiency and system scalability.
Patent Information
- Application Number
- CN202411410913.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-10
- Publication Date
- 2025-02-07
AI Technical Summary
In the prior art, different data models are usually used in form filling and detailed display, resulting in the same data needing repeated storage, resulting in the problem of data redundancy and out-of-synchronization.
By defining a shared target data model, rendering the form filling interface and the detailed display interface, realizing data sharing and consistency, and avoiding data redundancy.
Maintain data consistency in form filling and detailed display interfaces, reduce data redundancy, improve development efficiency, and facilitate system expansion and maintenance.
Smart Images
Figure CN119396315A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of front-end development technology, and in particular, relates to a data display method, device, electronic device and computer-readable storage medium. Background Art
[0002] Form filling refers to the process of users entering information on electronic or paper forms, usually used to collect data or obtain user input, such as registration, surveys, applications, etc. Detailed display means that after data is submitted or queried, the system displays the submitted or retrieved detailed information to the user, usually including a summary, detailed description or analysis of the data, to help users view and confirm their information or obtain more relevant content.
[0003] In related technologies, form filling and detail display usually use different data models, which means that the same data needs to be stored repeatedly for different models, which can easily lead to problems such as data redundancy and asynchronous updates. Summary of the invention
[0004] The present application aims to solve at least one of the technical problems existing in the related art. To this end, the present application proposes a data display method, device, electronic device and computer-readable storage medium, which realizes data sharing between the first interface (form filling interface) and the second interface (details display interface), maintains data consistency and reduces data redundancy.
[0005] In a first aspect, the present application provides a data display method, the method comprising:
[0006] Obtain input information of each form component in the first interface; the first interface includes the form component obtained by rendering each field in the target data model;
[0007] Use the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component;
[0008] In response to obtaining a trigger operation on the viewing control, a second interface is displayed; the second interface includes a display component obtained by rendering the field value of each field in the target data model.
[0009] According to the data display method of the present application, the input information of each form component in the first interface is obtained; the first interface includes the form components obtained after rendering each field in the target data model; the input information of each form component is used as the field value of the field in the target data model that has a two-way binding relationship with the form component; in response to obtaining a trigger operation on the view control, the second interface is displayed; the second interface includes the display component obtained after rendering the field value of each field in the target data model. In the above process, a common target data model is defined to render the first interface (corresponding to form filling) and the second interface (corresponding to detail display), thereby realizing data sharing between the first interface and the second interface, maintaining consistency of data between the first interface and the second interface, avoiding repeated definition and maintenance of data, and reducing data redundancy.
[0010] In addition, due to the sharing of target data modules, repetitive code writing and debugging work can be reduced, thereby improving development efficiency; and due to the modular design of the target data model, new data fields can be easily added or existing fields can be modified to achieve system expansion and maintenance.
[0011] According to an embodiment of the present application, before using the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component, the method further includes:
[0012] Create a two-way binding relationship between the fields in the target data model and the corresponding form components in the first interface.
[0013] According to an embodiment of the present application, before obtaining input information of each form component in the first interface, the method further includes:
[0014] In response to obtaining a trigger operation on the reporting control, displaying the first interface;
[0015] The first interface is obtained based on the following method:
[0016] Acquire a target data model; the target data model includes at least one field and definition information of each field;
[0017] According to the field type of each field, determine the form component corresponding to each field;
[0018] The form components corresponding to the fields in the target data model are rendered on the first interface.
[0019] According to an embodiment of the present application, in response to obtaining a triggering operation on a viewing control, displaying a second interface includes:
[0020] In response to obtaining a triggering operation on a view control, traversing each field in a target data model;
[0021] For the currently traversed field, insert the corresponding field value into the currently traversed field through the interpolation expression;
[0022] The display component corresponding to the field value of the currently traversed field is rendered in the second interface.
[0023] According to an embodiment of the present application, the display component corresponding to the field value of the currently traversed field is rendered in the second interface, including:
[0024] According to the display mode of the currently traversed field, a display component of the field value of the field is determined and rendered on the second interface.
[0025] According to an embodiment of the present application, the input information of each form component is used as the field value of the field in the target data model that has a two-way binding relationship with the form component, including:
[0026] In response to a submission operation of input information of each form component in the first interface, the input information of each form component is used as a field value of a field in a target data model that has a two-way binding relationship with the form component;
[0027] The field value of each field in the target data model is stored in the database;
[0028] Before inserting the field value of each field into the target data model through the interpolation expression, the method further includes:
[0029] Get the field values of each field in the target data model from the database.
[0030] According to an embodiment of the present application, after obtaining input information of each form component in the first interface, the method further includes:
[0031] Verify the input information of each form component according to the verification rule information of the field that has a two-way binding relationship with each form component;
[0032] In the case where the verification fails, a first prompt message is output; the first prompt message is used to indicate that the verification of the form component fails.
[0033] In a second aspect, the present application provides a data display device, the device comprising:
[0034] A first processing module is used to obtain input information of each form component in a first interface; the first interface includes a form component obtained by rendering each field in a target data model;
[0035] The second processing module is used to use the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component;
[0036] The third processing module is used to display a second interface in response to obtaining a trigger operation on the viewing control; the second interface includes a display component obtained by rendering the field value of each field in the target data model.
[0037] According to the data display device of the present application, the input information of each form component in the first interface is obtained; the first interface includes the form components obtained after rendering each field in the target data model; the input information of each form component is used as the field value of the field in the target data model that has a two-way binding relationship with the form component; in response to obtaining a trigger operation on the view control, the second interface is displayed; the second interface includes the display components obtained after rendering the field values of each field in the target data model. In the above process, a common target data model is defined to render the first interface (corresponding to form filling) and the second interface (corresponding to detail display), thereby realizing data sharing between the first interface and the second interface, maintaining consistency of data between the first interface and the second interface, avoiding repeated definition and maintenance of data, and reducing data redundancy.
[0038] In addition, due to the sharing of target data modules, repetitive code writing and debugging work can be reduced, thereby improving development efficiency; and due to the modular design of the target data model, new data fields can be easily added or existing fields can be modified to achieve system expansion and maintenance.
[0039] In a third aspect, the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the data display method provided in the first aspect described above is implemented.
[0040] In a fourth aspect, the present application provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the data display method provided in the first aspect above.
[0041] In a fifth aspect, the present application provides a chip, comprising a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the data display method provided in the first aspect.
[0042] In a sixth aspect, the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the data display method provided in the first aspect above.
[0043] The above one or more technical solutions in the embodiments of the present application have at least one of the following technical effects:
[0044] The input information of each form component in the first interface is obtained; the first interface includes the form components obtained by rendering each field in the target data model; the input information of each form component is used as the field value of the field in the target data model that has a two-way binding relationship with the form component; in response to obtaining a trigger operation on the view control, the second interface is displayed; the second interface includes the display component obtained by rendering the field value of each field in the target data model. In the above process, a common target data model is defined to render the first interface (corresponding to form filling) and the second interface (corresponding to detail display), thereby realizing data sharing between the first interface and the second interface, maintaining the consistency of data in the first interface and the second interface, avoiding repeated definition and maintenance of data, and reducing data redundancy.
[0045] In addition, due to the sharing of the target data module, repeated code writing and debugging work can be reduced, and development efficiency can be improved; and due to the modular design of the target data model, new data fields can be easily added or existing fields can be modified to achieve system expansion and maintenance. Additional aspects and advantages of the present application will be partially given in the following description, and partially will become obvious from the following description, or will be learned through the practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS
[0046] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the description of the embodiments in conjunction with the following drawings, in which:
[0047] Figure 1 This is one of the flow charts of the data display method provided in the embodiment of the present application;
[0048] Figure 2 is a schematic diagram of the first interface provided in an embodiment of the present application;
[0049] Figure 3 is an interface schematic diagram of the second interface provided in an embodiment of the present application;
[0050] Figure 4 This is the second flow chart of the data display method provided in the embodiment of the present application;
[0051] Figure 5 is a structural schematic diagram of a data display device provided in an embodiment of the present application;
[0052] Figure 6 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0053] The following will be combined with the drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.
[0054] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.
[0055] In related technologies, form filling and detail display usually use different data models, which has the following problems:
[0056] 1. Data redundancy problem: The same data needs to be stored repeatedly in different models, resulting in data redundancy.
[0057] 2. Difficulty in maintaining data consistency: Since data is stored in a decentralized manner, when data in one location changes, data in multiple locations need to be updated simultaneously, which increases the difficulty of data maintenance and easily leads to data inconsistency problems.
[0058] 3. Poor user experience: For users, they need to switch between different interfaces or systems when filling out forms and viewing details, which is cumbersome and not conducive to improving user experience.
[0059] 4. Insufficient system scalability and flexibility: As business needs change, traditional form filling and detail display systems are difficult to adapt to new needs and lack sufficient scalability and flexibility.
[0060] To solve the above problems, the present application provides a data display method, a data display device, an electronic device and a readable storage medium.
[0061] The data display method, data display device, electronic device and readable storage medium provided in the embodiments of the present application are described in detail below with reference to the accompanying drawings through specific embodiments and their application scenarios.
[0062] The data display method may be applied to a terminal, and may be specifically executed by hardware or software in the terminal.
[0063] The data display method provided in the embodiment of the present application may be executed by an electronic device or a functional module or functional entity in the electronic device that can implement the data display method. The electronic devices mentioned in the embodiment of the present application include but are not limited to mobile phones, tablet computers, computers, cameras, and wearable devices. The data display method provided in the embodiment of the present application is described below using an electronic device as an example of the execution subject.
[0064] like Figure 1 As shown, the data display method includes: step 110, step 120 and step 130.
[0065] Step 110: Obtain input information of each form component in the first interface; the first interface includes form components obtained after rendering each field in the target data model.
[0066] The first interface of the embodiment of the present application is also called a "form filling interface". The first interface includes at least one tab, each tab has a corresponding form component, and the form component belongs to the Element UI component.
[0067] A form component is an interface element in a user interface used to collect and submit information. It is designed to collect user input information or interact with the user. Form components include but are not limited to:
[0068] Text box Input( <el-input>): Used to enter a single line of text.
[0069] Radio button Select( <el-select>): Allows the user to select one option from a set of options.
[0070] Checkbox( <el-checkbox>): Allows the user to select multiple options from a set of options.
[0071] Cascader (el-cascader): used to display and select hierarchical data, allowing users to select from multiple levels of options, such as country, province and city.
[0072] DatePicker <el-date-picker>): Used to select a date.
[0073] Form componentForm( <el-form>): Used to organize form items and submit form data.
[0074] The form component is obtained by rendering the fields in the target data model and is used to help users enter and submit data.
[0075] The target data model is a data model defined by relational database technology and can be developed through the Vue.js framework. The target data model includes definition information of each field. The field definition information includes the field type, unique identifier, label name, association relationship (corresponding to the dictionary of the field, such as the first or multi-level selection items corresponding to the drop-down selector and cascade selector), dictionary identifier, remarks, data validation rules (defining the validation logic of the data to ensure the integrity and accuracy of the reported data) and display methods (such as key-value pairs, graphs, tables, etc.), etc., to achieve data sharing and dynamic association between form filling and detail display.
[0076] The target data model can be created based on the actual business scenario. For example, when the business scenario is enterprise registration, the fields of the target data model may include property registration status, enterprise name, initiation time, whether it is equity investment, whether it is entrusted supervision, registered address and detailed address, etc.
[0077] Each field has a corresponding field type, which refers to the format and category of data input. Field types can be cascade selection (CASCADER), text input (INPUT), date (DATE), drop-down selection (SELECT), etc.
[0078] Table 1 is a schematic diagram of a table of a target data model created in a certain business scenario provided in an embodiment of the present application, where each row of data in the table corresponds to a field.
[0079]
[0080]
[0081] In actual development, a data structure can be defined for each field. The data structure includes the field type (such as CASCADER, INPUT, DATE, SELECT, etc.), unique identifier (such as registration, enterpriseName, etc.), label name (such as "property registration status", "company name", etc.) and remark information (such as "cascade selector", "text input box", etc.). This data structure is an array, and each element in the array is an object.
[0082] Among them, the drop-down selector and cascade selector need to define the dictionary items in advance and make corresponding relationships. At the same time, the data type, maximum length, and whether it is required for each field must be determined.
[0083] The user can interact with each form component and input information according to the label name and prompt information (which may be format requirements) of each form component.
[0084] like Figure 2 As shown, the embodiment of the present application provides an interface schematic diagram of the first interface, which includes multiple labels, namely "property registration status", "company name", "launch time", "whether to invest overseas in equity", "whether to entrust supervision", "registered address" and "detailed address", each label has a corresponding form component, the form component of "property registration status" is a cascade selector, and the user's input information for the "property registration status" is "acquisition of non-state-owned enterprises / participation in non-state-owned enterprise capital increase (listing)"; the form component of "company name" is an input box, and the user's input information for the "company name" is "XXX Limited Liability Company"; the form component of "launch time" is a date, and the user enters the information for the "launch time" The input information of "time" is "2024-04-01"; the form component of "whether to invest overseas with equity" is a drop-down selector (two options: yes and no), and the user's input information for "whether to invest overseas with equity" is "no"; the form component of "whether it is entrusted supervision" is a drop-down selector (two options: yes and no), and the user's input information for "whether it is entrusted supervision" is "no"; the form component of "registered address" is a cascade selector, and the user's input information for "registered address" is "China / Guangdong Province / Guangzhou City / Zengcheng District"; the form component of "detailed address" is an input box, and the user's input information for "detailed address" is "xxx Street xx Road xxx No.", and "*" indicates required items.
[0085] Step 120: Use the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component.
[0086] There is a one-to-one bidirectional binding relationship between the form components of the first interface and the fields in the target data model in the embodiment of the present application. The v-model instruction can be used to create a bidirectional binding relationship between the fields in the target data model and the corresponding form components in the first interface.
[0087] Based on this two-way binding relationship, the user's input information for the form component in the form will be synchronized as the field value of the field in the target data model that has a two-way binding relationship with the form component.
[0088] In addition, changes to fields in the target data model will be automatically synchronized to the form component to achieve real-time data verification and feedback.
[0089] Step 130: In response to obtaining a trigger operation on the viewing control, a second interface is displayed; the second interface includes a display component obtained by rendering the field value of each field in the target data model.
[0090] In addition to rendering a first interface including a form component based on the target data model, the embodiment of the present application also renders a second interface including a presentation component based on the target data model.
[0091] Specifically, after detecting a trigger operation on a preset viewing control, a second interface is displayed. The routing parameter carried by the viewing control is see. The second interface is displayed based on the routing parameter see. The second interface belongs to the "details display interface". The second interface includes a display component obtained by rendering the field values of each field.
[0092] Display components are components used in user interface (UI) design to display information rather than directly input data. These components are usually used to present static or dynamic content and help users understand data or interface content. Display components include:
[0093] Table( <el-table>Table component, used to display and manipulate table data.
[0094] Descriptions( <el-descriptions>) describes a list component used to display detailed information.
[0095] Tag( <el-tag>)Tag component, used to display tag information.
[0096] Tooltip( <el-tooltip>) Prompt components are used to display floating prompt information. These components help improve the user experience, make the interface clearer and more intuitive, and effectively convey information.
[0097] The display component is determined according to the display method set by the user. By default, el-descriptions is used to display the names and values of each item, el-table is used to display tables, and ECharts is used to display line charts, bar charts, scatter charts, pie charts, etc.
[0098] like Figure 3 As shown, an embodiment of the present application provides a schematic diagram of a second interface, which includes multiple labels, each label has a corresponding display component, among which the display component of "property registration status" is "acquisition of non-state-owned enterprises / participation in capital increase of non-state-owned enterprises (listing)"; the display component of "company name" is "XXX Limited Liability Company"; the display component of "initiation time" is "2024-04-01"; the display component of "whether to invest overseas in equity" is "no"; the display component of "whether it is entrusted supervision" is "no"; the display component of "registered address" is "China / Guangdong Province / Guangzhou City / Zengcheng District"; the display component of "detailed address" is "No. xxx, xx Road, xxx Street".
[0099] The embodiment of the present application obtains input information of each form component in a first interface; the first interface includes form components obtained by rendering each field in a target data model; the input information of each form component is used as the field value of a field in the target data model that has a two-way binding relationship with the form component; in response to obtaining a trigger operation on a view control, a second interface is displayed; the second interface includes a display component obtained by rendering the field value of each field in the target data model. In the above process, a common target data model is defined to render the first interface (corresponding to form filling) and the second interface (corresponding to detail display), thereby achieving data sharing between the first interface and the second interface, maintaining consistency of data between the first interface and the second interface, avoiding repeated definition and maintenance of data, and reducing data redundancy.
[0100] In addition, due to the sharing of target data modules, repetitive code writing and debugging work can be reduced, thereby improving development efficiency; and due to the modular design of the target data model, new data fields can be easily added or existing fields can be modified to achieve system expansion and maintenance.
[0101] In some embodiments, before using the input information of each form component as the field value of a field in a target data model that has a two-way binding relationship with the form component, the method further includes:
[0102] Create a two-way binding relationship between the fields in the target data model and the corresponding form components in the first interface.
[0103] To avoid repeated definition and maintenance of data, the embodiment of the present application creates a two-way binding relationship between the fields in the target data model and the corresponding form components in the first interface. The v-model instruction can be used to create a two-way binding relationship between the fields in the target data model and the corresponding form components in the first interface.
[0104] Based on this two-way binding relationship, the user's input information for the form component in the form will be synchronized as the field value of the field in the target data model that has a two-way binding relationship with the form component.
[0105] In some embodiments, before obtaining input information of each form component in the first interface, the method further includes:
[0106] In response to obtaining a trigger operation on the reporting control, displaying the first interface;
[0107] The first interface is obtained based on the following method:
[0108] Acquire a target data model; the target data model includes at least one field and definition information of each field;
[0109] According to the type of each field, determine the type of form component corresponding to each field;
[0110] According to the type of the form component, the form component corresponding to each field in the target data model is rendered on the first interface.
[0111] Before obtaining the input information of each form component in the first interface, the embodiment of the present application needs to display the first interface. The first interface can be displayed after the trigger operation of the filling control is obtained. The routing parameter carried by the filling control is edit, and the first interface can be displayed based on the routing parameter edit. Since the first interface is obtained by rendering according to the target data model, one rendering can be used multiple times. Therefore, the first interface can be pre-generated. After obtaining the trigger operation of the filling control, the pre-generated first interface can be directly displayed.
[0112] The first interface can be obtained based on the following method:
[0113] Acquire a target data model; the target data model includes at least one field and definition information of each field;
[0114] According to the field type of each field, determine the form component corresponding to each field;
[0115] The form components corresponding to the fields in the target data model are rendered on the first interface.
[0116] The embodiment of the present application can traverse each field in the target data model in sequence, and can use the v-for instruction to traverse each field in the target data model. The type of the form component corresponding to the field can be determined according to the type of the field, and the form components corresponding to each field in the target data model can be rendered on the first interface according to the type of the form component.
[0117] Specifically, if the field type is CASCADER, an el-cascader component is rendered and the corresponding option data is passed in; if the field type is INPUT, an el-input component is rendered; if the field type is DATE, an el-date-picker component is rendered and the corresponding date type is set; if the field type is SELECT, an el-select component is rendered and the corresponding drop-down option data is passed in.
[0118] In some embodiments, in response to obtaining a triggering operation on a viewing control, displaying a second interface includes:
[0119] In response to obtaining a triggering operation on a view control, traversing each field in a target data model;
[0120] For the currently traversed field, insert the corresponding field value into the currently traversed field through the interpolation expression;
[0121] The display component corresponding to the field value of the currently traversed field is rendered in the second interface.
[0122] Interpolation Expression is a way to dynamically insert variable values into strings or templates. It is mainly used to embed the results of variables or expressions into strings when generating dynamic content. Its core function is to embed dynamic values into static text. Interpolation expressions can be represented by "{{}}".
[0123] For the target data model, the definition of each field is static text, and the field value of each field is a dynamic value. Therefore, when traversing the fields in the target data model, the corresponding field value can be inserted into the currently traversed field through the interpolation expression, and the display component corresponding to the field value of the currently traversed field can be rendered in the second interface.
[0124] When the user switches from the first interface to the second interface, the second interface will automatically display the input information filled in the target data model without the need to repeatedly request or process data.
[0125] In some embodiments, rendering a display component corresponding to the field value of the currently traversed field in the second interface includes:
[0126] According to the display mode of the currently traversed field, a display component of the field value of the field is determined and rendered on the second interface.
[0127] The embodiment of the present application provides a variety of display methods, including tables, charts, lists, etc. Users can choose a suitable display method according to their needs. The system will determine the display component of the field value of the field according to the user's selection and the definition in the data model, and then dynamically generate the corresponding second interface (details display interface). At the same time, the system also supports functions such as data query and screening, which is convenient for users to conduct in-depth analysis and utilization of data.
[0128] In some embodiments, the input information of each form component is used as the field value of a field in a target data model that has a two-way binding relationship with the form component, including:
[0129] In response to a submission operation of input information of each form component in the first interface, the input information of each form component is used as a field value of a field in a target data model that has a two-way binding relationship with the form component;
[0130] The field values of each field in the target data model are stored in the database.
[0131] Before inserting the field value of each field into the target data model through the interpolation expression, the method further includes:
[0132] Get the field values of each field in the target data model from the database.
[0133] After the user fills in the input information of each form component in the first interface, the input information of each form component will be submitted. After detecting the submission operation, the system will use the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component, and store the field value of each field in the target data model in the database. When displaying the details later, the field value of each field can be directly obtained from the database.
[0134] In some embodiments, after obtaining input information of each form component in the first interface, the method further includes:
[0135] Verify the input information of each form component according to the verification rule information of the field that has a two-way binding relationship with each form component;
[0136] In the case where the verification fails, a first prompt message is output; the first prompt message is used to indicate that the verification of the form component fails.
[0137] The embodiment of the present application supports verification of output information. After the user enters the input information, the system will perform real-time verification on the input information of each form component based on the verification rule information of the fields that have a two-way binding relationship with each form component to ensure the accuracy and completeness of the data.
[0138] In the case where the verification fails, a first prompt message is output; the first prompt message is used to indicate that the verification of the form component fails, and the user can re-fill in the input information of the form component according to the first prompt message.
[0139] like Figure 4 As shown, the embodiment of the present application provides a second flowchart of another data display method, including the following steps 401 to 410:
[0140] Step 401, creating a target data model; the target data model includes at least one field and definition information of each field;
[0141] Step 402, in response to obtaining a trigger operation on a report control, displaying a first interface; the first interface includes a form component obtained by rendering each field in a target data model;
[0142] Step 403, creating a two-way binding relationship between the fields in the target data model and the corresponding form components in the first interface;
[0143] Step 404, obtaining input information of each form component in the first interface;
[0144] Step 405, verifying the input information of each form component;
[0145] Step 406, in response to the submission operation of the input information of each form component in the first interface, the input information of each form component is used as the field value of the field in the target data model that has a two-way binding relationship with the form component;
[0146] Step 407, storing the field value of each field in the target data model in the database;
[0147] Step 408, in response to obtaining the triggering operation on the view control, obtaining the field value of each field in the target data model from the database;
[0148] Step 409, rendering the display component corresponding to the field value of each field in the second interface;
[0149] Step 410, display the second interface.
[0150] The detailed implementation process of the above steps 401 to 410 is shown in the above embodiments and will not be described again here.
[0151] The data display method provided in the embodiment of the present application can be executed by a data display device. In the embodiment of the present application, the data display device provided in the embodiment of the present application is described by taking the data display method executed by the data display device as an example.
[0152] The embodiment of the present application also provides a data display device.
[0153] like Figure 5 As shown, the data display device includes: a first processing module 510, a second processing module 520 and a third processing module 530.
[0154] The first processing module 510 is used to obtain input information of each form component in the first interface; the first interface includes the form component obtained after rendering each field in the target data model;
[0155] The second processing module 520 is used to use the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component;
[0156] The third processing module 530 is used to display a second interface in response to obtaining a trigger operation on the viewing control; the second interface includes a display component obtained by rendering the field value of each field in the target data model.
[0157] According to the data display device provided by the embodiment of the present application, the input information of each form component in the first interface is obtained; the first interface includes the form components obtained after rendering each field in the target data model; the input information of each form component is used as the field value of the field in the target data model that has a two-way binding relationship with the form component; in response to obtaining a trigger operation on the view control, the second interface is displayed; the second interface includes the display component obtained after rendering the field value of each field in the target data model. In the above process, a common target data model is defined to render the first interface (corresponding to form filling) and the second interface (corresponding to detail display), thereby realizing data sharing between the first interface and the second interface, maintaining consistency of data between the first interface and the second interface, avoiding repeated definition and maintenance of data, and reducing data redundancy.
[0158] In addition, due to the sharing of target data modules, repetitive code writing and debugging work can be reduced, thereby improving development efficiency; and due to the modular design of the target data model, new data fields can be easily added or existing fields can be modified to achieve system expansion and maintenance.
[0159] In some embodiments, the data display device further includes:
[0160] The fourth processing module is used to create a two-way binding relationship between the fields in the target data model and the corresponding form components in the first interface.
[0161] In some embodiments, the first processing module is further used to display the first interface in response to obtaining a trigger operation on the reporting control;
[0162] The first interface is obtained based on the following method:
[0163] Obtain a target data model; the target data model includes at least one field and definition information of each field;
[0164] According to the field type of each field, determine the form component corresponding to each field;
[0165] The form components corresponding to each field in the target data model are rendered on the first interface.
[0166] In some embodiments, the third processing module is specifically configured to
[0167] In response to obtaining a triggering operation on a view control, traversing each field in a target data model;
[0168] For the currently traversed field, insert the corresponding field value into the currently traversed field through the interpolation expression;
[0169] In the second interface, the display component corresponding to the field value of the currently traversed field is rendered.
[0170] In some embodiments, the third processing module is further configured to:
[0171] According to the display mode of the currently traversed field, a display component of the field value of the field is determined and rendered on the second interface.
[0172] In some embodiments, the second processing module is further used to: in response to a submission operation of input information of each form component in the first interface, use the input information of each form component as a field value of a field in a target data model that has a two-way binding relationship with the form component;
[0173] Store the field values of each field in the target data model in the database;
[0174] The third processing module is also specifically used to obtain the field value of each field in the target data model from the database.
[0175] In some embodiments, the data display device further includes:
[0176] The fifth processing module is used for:
[0177] Verify the input information of each form component according to the verification rule information of the field that has a two-way binding relationship with each form component;
[0178] When the verification fails, a first prompt message is output; the first prompt message is used to indicate that the verification of the form component fails.
[0179] The data display device in the embodiment of the present application can be an electronic device, or a component in the electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal, or other devices other than a terminal. Exemplarily, the electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, a car electronic device, a mobile Internet device (Mobile Internet Device, MID), an augmented reality (augmented reality, AR) / virtual reality (virtualreality, VR) device, a robot, a wearable device, an ultra-mobile personal computer (ultra-mobile personal computer, UMPC), a netbook or a personal digital assistant (personal digital assistant, PDA), etc., and can also be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (personalcomputer, PC), a television (television, TV), a teller machine or a self-service machine, etc., and the embodiment of the present application is not specifically limited.
[0180] The data display device in the embodiment of the present application may be a device having an operating system. The operating system may be a Microsoft (Windows) operating system, an Android (Android) operating system, an IOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.
[0181] The data display device provided in the embodiment of the present application can achieve Figures 1 to 4 To avoid repetition, the various processes implemented by the method embodiment are not described here.
[0182] In some embodiments, Figure 6 As shown, an embodiment of the present application also provides an electronic device 600, including a processor 601, a memory 602, and a computer program stored in the memory 602 and executable on the processor 601. When the program is executed by the processor 601, each process of the above-mentioned data display method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be described here.
[0183] It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic devices and non-mobile electronic devices mentioned above.
[0184] An embodiment of the present application also provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the various processes of the above-mentioned data display method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.
[0185] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.
[0186] An embodiment of the present application also provides a computer program product, including a computer program, which implements the above-mentioned data display method when executed by a processor.
[0187] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory ROM, a random access memory RAM, a magnetic disk or an optical disk.
[0188] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned data display method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.
[0189] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.
[0190] It should be noted that, in this article, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved. For example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.
[0191] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the relevant technology, can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present application.
[0192] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.
[0193] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "illustrative embodiments", "example", "specific example", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described can be combined in any one or more embodiments or examples in a suitable manner.
[0194] Although the embodiments of the present application have been shown and described, those skilled in the art will appreciate that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present application, and that the scope of the present application is defined by the claims and their equivalents.
Claims
1. A data display method, characterized in that: include: Acquire input information of each form component in the first interface; the first interface includes form components obtained by rendering each field in the target data model; Use the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component; In response to obtaining a trigger operation on a viewing control, a second interface is displayed; the second interface includes a display component obtained by rendering the field value of each field in the target data model.
2. The data display method according to claim 1, characterized in that: Before using the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component, the method further includes: Create a two-way binding relationship between the fields in the target data model and the corresponding form components in the first interface.
3. The data display method according to claim 1, characterized in that: Before obtaining the input information of each form component in the first interface, the method further includes: In response to obtaining a trigger operation on the reporting control, displaying the first interface; The first interface is obtained based on the following method: Acquire a target data model; the target data model includes at least one field and definition information of each field; According to the field type of each field, determine the form component corresponding to each field; The form components corresponding to the fields in the target data model are rendered on the first interface.
4. The data display method according to claim 1, characterized in that: The displaying of the second interface in response to obtaining a triggering operation on the viewing control includes: In response to obtaining a triggering operation on a view control, traversing each field in a target data model; For the currently traversed field, insert the corresponding field value into the currently traversed field through an interpolation expression; In the second interface, a display component corresponding to the field value of the currently traversed field is rendered.
5. The data display method according to claim 4, characterized in that: The rendering of the display component corresponding to the field value of the currently traversed field in the second interface includes: According to the display mode of the currently traversed field, a display component of the field value of the field is determined and rendered on the second interface.
6. The data display method according to claim 4, characterized in that: The step of using the input information of each form component as the field value of a field in a target data model that has a two-way binding relationship with the form component includes: In response to a submission operation of input information of each form component in the first interface, the input information of each form component is used as a field value of a field in a target data model that has a two-way binding relationship with the form component; Storing the field value of each field in the target data model in a database; Before inserting the field value of each field into the target data model through the interpolation expression, the method further includes: The field value of each field in the target data model is obtained from the database.
7. The data display method according to any one of claims 1 to 6, characterized in that: After obtaining the input information of each form component in the first interface, the method further includes: Verifying the input information of each form component according to the verification rule information of the field that has a two-way binding relationship with each form component; In the case where the verification fails, a first prompt message is output; the first prompt message is used to indicate that the verification of the form component fails.
8. A data display device, characterized in that: A first processing module is used to obtain input information of each form component in a first interface; the first interface includes a form component obtained by rendering each field in a target data model; A second processing module is used to use the input information of each form component as the field value of the field in the target data model that has a two-way binding relationship with the form component; The third processing module is used to display a second interface in response to obtaining a trigger operation on the viewing control; the second interface includes a display component obtained by rendering the field value of each field in the target data model.
9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the data display method according to any one of claims 1 to 7 is implemented.
10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the data display method according to any one of claims 1 to 7 is implemented.