Vue-based form data extraction method, apparatus and device, and storage medium

Abstract

The invention relates to the technical field of information and the technical field of forms, and discloses a Vue-based form data extraction method, device and equipment and a storage medium, and the method comprises the following steps: displaying a plurality of layout components and a plurality of form components on a display area; selecting a specified layout component as a target layout component, and selecting a specified form component as a target form component; combining the target layout component and the target form component to generate a customized form, and creating a database table corresponding to the customized form; acquiring a data field in the database table, establishing a mapping relationship between the target form component and the data field, and storing the mapping relationship; and issuing a customized form on the target platform, obtaining an operation instruction of the customized form, and when the operation instruction is a submission instruction, extracting form data of the target form component in the data field according to the mapping relationship. The method is beneficial to improving the extraction efficiency of the form data.

Description

Technical Field

[0001] The present invention relates to the fields of information technology and form technology, and in particular to a Vue-based form data extraction method, device, equipment and storage medium. Background Art

[0002] Form data provides a systematic and standardized way to capture information, ensuring its accuracy and consistency. Form data can be used to efficiently process and analyze large amounts of information, improving its quality and usability.

[0003] However, the existing form data extraction process is cumbersome and is not conducive to improving the efficiency of form data extraction. The reason is that the existing technology mainly uses manual extraction to extract form data, which consumes a lot of human resources and time resources, increases the extraction time of form data, and is easily affected by manual intervention, so it is not conducive to improving the efficiency of form data extraction. Summary of the invention

[0004] The present invention provides a Vue-based form data extraction method, device, computer equipment and storage medium to solve the technical problem that the existing form data extraction process is cumbersome and is not conducive to improving the extraction efficiency of form data.

[0005] In the first aspect, a form data extraction method based on Vue is provided, including: Obtaining a page file, and creating a visualization page according to the page file; Obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and display the multiple layout components and multiple form components on the display area; Get the layout component specified by the user from multiple layout components, select the specified layout component as the target layout component, get the form component specified by the user from multiple form components, and select the specified form component as the target form component; Combine the target layout component and the target form component to generate a customized form, and create a database table corresponding to the customized form; Acquire the data fields in the database table, establish a mapping relationship between the target form component and the data fields, and save the mapping relationship; Connect to the target platform, publish the customized form on the target platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship.

[0006] Further, the obtaining of the display area on the visualization page, obtaining multiple layout components and multiple form components in the Vue component, and displaying the multiple layout components and multiple form components on the display area include: Obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and divide the display area into a first area and a second area; A plurality of layout components are displayed on the first area, and a plurality of form components are displayed on the second area.

[0007] Further, the obtaining of a layout component specified by a user from a plurality of layout components, selecting the specified layout component as a target layout component, obtaining of a form component specified by a user from a plurality of form components, and selecting the specified form component as a target form component include: Obtain a first specified instruction, obtain a layout component specified by a user from multiple layout components according to the first specified instruction, and select the specified layout component as a target layout component; Obtain a second designated instruction, obtain the form component designated by the user from multiple form components according to the second designated instruction, and select the designated form component as the target form component.

[0008] Furthermore, the target layout component and the target form component are combined to generate a customized form, and a database table corresponding to the customized form is created, including: When the target layout component is an elastic container, the target form component is placed in the elastic container, and the elastic container in which the target form component is placed is selected as the custom form; Access a database management system, and create a database table corresponding to the customized form in the database management system.

[0009] Furthermore, the acquiring of the data fields in the database table, establishing a mapping relationship between the target form component and the data fields, and saving the mapping relationship includes: Acquire the data fields in the database table, and establish a mapping relationship between the target form component and the data fields; A save instruction is obtained, the save instruction is executed, and the mapping relationship is saved in a preset file.

[0010] Further, the connecting to the target platform, publishing the customized form on the target platform, obtaining the operation instruction of the customized form, and when the operation instruction is a submit instruction, extracting the form data of the target form component in the data field according to the mapping relationship, includes: Selecting an e-government platform or a government service platform as a target platform, connecting to the target platform, publishing the customized form on the target platform, and obtaining operation instructions for the customized form; When the operation instruction is a submit instruction, the filling time and status identifier of the custom form are obtained. When the filling time reaches the target time and the status identifier is a normal identifier, the form data of the target form component is extracted in the data field according to the mapping relationship.

[0011] Further, in the connecting target platform, the customized form is published on the target platform, and an operation instruction of the customized form is obtained. When the operation instruction is a submit instruction, after the form data of the target form component is extracted in the data field according to the mapping relationship, the form data extraction method includes: Read the business addresses in each of the form data, count the business addresses on the same street, obtain the number of the business addresses on the same street, select the number of the business addresses on the same street as the number of businesses on the same street, use a preset chart component to draw a bar chart corresponding to the number of businesses, create a first display window, and display the bar chart corresponding to the number of businesses through the first display window.

[0012] In the second aspect, a form data extraction device based on Vue is provided, comprising: A first acquisition module is used to acquire a page file and create a visualization page according to the page file; A display module is used to obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and display the multiple layout components and multiple form components on the display area; The second acquisition module is used to acquire a layout component specified by a user from a plurality of layout components, select the specified layout component as a target layout component, acquire a form component specified by a user from a plurality of form components, and select the specified form component as a target form component; A creation module is used to combine the target layout component and the target form component to generate a customized form and create a database table corresponding to the customized form; A saving module, used for acquiring the data fields in the database table, establishing a mapping relationship between the target form component and the data fields, and saving the mapping relationship; The extraction module is used to connect to the target platform, publish the customized form on the target platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship.

[0013] In a third aspect, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned form data extraction method when executing the computer program.

[0014] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned form data extraction method are implemented.

[0015] The present application provides a form data extraction method, device, computer equipment and storage medium based on Vue, which obtain a page file, create a visual page according to the page file; obtain a display area on the visual page, obtain multiple layout components and multiple form components in a Vue component, and display the multiple layout components and multiple form components on the display area; obtain a layout component specified by a user from multiple layout components, select the specified layout component as a target layout component, obtain a form component specified by a user from multiple form components, and select the specified form component as a target form component; combine the target layout component and the target form component to generate a customized form, and create a database table corresponding to the customized form; obtain the data field in the database table, and establish a mapping relationship between the target form component and the data field. Save the mapping relationship; connect to the target platform, publish the customized form on the target platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship. The beneficial effects are in two aspects. On the one hand, connect to the business platform, send the customized form to the business platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship. Since manual extraction is not required, the extraction time of the form data is reduced, which is conducive to improving the extraction efficiency of the form data. On the other hand, since the automatic extraction of form data will not be affected by manual intervention, it is conducive to improving the reliability of the extracted form data. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative labor.

[0017] Figure 1 is a schematic diagram of an application environment of a form data extraction method in one embodiment of the present invention; Figure 2 A schematic diagram of a flow chart of a form data extraction method provided by an embodiment of the present invention; Figure 3 yes Figure 2 A schematic flow chart of a specific implementation of step S23; Figure 4 yes Figure 2 A schematic flow chart of a specific implementation of step S25; Figure 5 yes Figure 2 A schematic flow chart of a specific implementation of step S26; Figure 6 is a structural schematic diagram of a form data extraction device in one embodiment of the present invention; Figure 7 It is a structural diagram of a computer device in one embodiment of the present invention. DETAILED DESCRIPTION

[0018] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0019] See also Figure 1 , Figure 1 is a schematic diagram of an application environment of a form data extraction method according to an embodiment of the present invention. The form data extraction method provided by the embodiment of the present invention can be applied in the following situations: Figure 1 In an application environment, a client communicates with a server through a network.

[0020] The server obtains the page file through the client, and creates a visualization page according to the page file; Obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and display the multiple layout components and multiple form components on the display area; Get the layout component specified by the user from multiple layout components, select the specified layout component as the target layout component, get the form component specified by the user from multiple form components, and select the specified form component as the target form component; Combine the target layout component and the target form component to generate a customized form, and create a database table corresponding to the customized form; Acquire the data fields in the database table, establish a mapping relationship between the target form component and the data fields, and save the mapping relationship; Connect to the target platform, publish the customized form on the target platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship.

[0021] In the scheme implemented by the above-mentioned form data extraction method, device, equipment and medium, the beneficial effects are in two aspects. On the one hand, the business platform is connected, the customized form is sent to the business platform, and the operation instruction of the customized form is obtained. When the operation instruction is a submit instruction, the form data of the target form component is extracted in the data field according to the mapping relationship. Since manual extraction is not required, the extraction time of the form data is reduced, which is conducive to improving the extraction efficiency of the form data. On the other hand, since the form data is automatically extracted, it will not be affected by human intervention, which is conducive to improving the reliability of the extracted form data.

[0022] The device running the client is referred to as a client device.

[0023] The device running the server is referred to as the server device.

[0024] Among them, client devices include but are not limited to smartphones, personal computers, Internet of Vehicles terminals, tablets and portable wearable devices.

[0025] The server device may be implemented by an independent server or a server cluster composed of multiple servers. The present invention is described in detail below through specific embodiments. Figure 2 , Figure 2 A flow chart of a form data extraction method provided in an embodiment of the present invention includes the following steps: S21, obtaining a page file, and creating a visualization page according to the page file; Among them, a visual page refers to a web page interface that uses visual elements such as graphics, images, and animations to present complex data, information, or knowledge in an intuitive and easy-to-understand way.

[0026] S22, obtaining a display area on the visualization page, obtaining multiple layout components and multiple form components in the Vue component, and displaying the multiple layout components and multiple form components on the display area; Among them, Vue component is a basic building block in the Vue.js framework. Vue component allows developers to split complex user interfaces into a series of independent, reusable and easy-to-manage parts. Each Vue component encapsulates its own template, script and style, thus achieving modularization of functions and clear separation of code.

[0027] Among them, the Vue.js framework is a progressive JavaScript framework for building user interfaces. A JavaScript framework is a collection of tools designed to simplify JavaScript programming.

[0028] The obtaining of the display area on the visualization page, obtaining multiple layout components and multiple form components in the Vue component, and displaying the multiple layout components and multiple form components on the display area include: Obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and divide the display area into a first area and a second area; A plurality of layout components are displayed on the first area, and a plurality of form components are displayed on the second area.

[0029] The first area and the second area are different areas.

[0030] Among them, multiple layout components and multiple form components in the Vue component are obtained. Because multiple layout components and multiple form components can be reused multiple times, code duplication is reduced and development efficiency and code maintainability are improved.

[0031] Among them, the multiple layout components include elastic containers and dividing lines.

[0032] Among them, multiple form components include paragraph input box, line break input box, number input box, multiple selection box, radio button, text box, drop-down selector, time selection box, and sliding input bar.

[0033] S23, obtaining a layout component specified by a user from among multiple layout components, selecting the specified layout component as a target layout component, obtaining a form component specified by a user from among multiple form components, and selecting the specified form component as a target form component; Among them, selecting a specified layout component as a target layout component and selecting a specified form component as a target form component can meet the personalized needs of users and help improve user satisfaction.

[0034] S24, combining the target layout component and the target form component to generate a customized form, and creating a database table corresponding to the customized form; Wherein, a database table corresponding to the customized form is created, and the database table can store the content of the customized form, thereby ensuring the integrity, consistency and security of the customized form. In addition, the database table can not only help the system quickly retrieve and process the information input by the user, but also promote the analysis of the form data, thereby improving the efficiency of decision-making.

[0035] The step of combining the target layout component and the target form component to generate a customized form and creating a database table corresponding to the customized form includes: When the target layout component is an elastic container, the target form component is placed in the elastic container, and the elastic container in which the target form component is placed is selected as the custom form; Access a database management system, and create a database table corresponding to the customized form in the database management system.

[0036] Exemplarily, when the target layout component is an elastic container, placing the target form component in the elastic container, and selecting the elastic container in which the target form component is placed as the custom form includes: When the target layout component is an elastic container, business data is obtained, the business type in the business data is read, the form structure corresponding to the business type is obtained, the target form component is placed in the elastic container according to the form structure, and the elastic container in which the target form component is placed is selected as the custom form.

[0037] Among them, customized forms can optimize the user experience. Users can customize the layout, style and interaction methods of the form according to personal preferences and business processes, making information entry more convenient and efficient, reducing operational complexity and time costs.

[0038] Among them, a flexible container refers to a container that can flexibly arrange and resize its child elements.

[0039] S25, obtaining the data fields in the database table, establishing a mapping relationship between the target form component and the data fields, and saving the mapping relationship; S26, connecting to the target platform, publishing the customized form on the target platform, obtaining the operation instruction of the customized form, and when the operation instruction is a submit instruction, extracting the form data of the target form component in the data field according to the mapping relationship.

[0040] Among them, connecting to the target platform and publishing the customized form on the target platform can accurately meet the needs and improve the quality and efficiency of data collection.

[0041] Among them, by extracting the form data in the target form component, the accuracy and completeness of the form data can be ensured.

[0042] Wherein, in the connecting target platform, publishing the customized form on the target platform, obtaining the operation instruction of the customized form, when the operation instruction is a submit instruction, extracting the form data of the target form component in the data field according to the mapping relationship, the form data extraction method includes: Read the business addresses in each of the form data, count the business addresses on the same street, obtain the number of the business addresses on the same street, select the number of the business addresses on the same street as the number of businesses on the same street, use a preset chart component to draw a bar chart corresponding to the number of businesses, create a first display window, and display the bar chart corresponding to the number of businesses through the first display window.

[0043] Reading the enterprise address in each of the form data, counting the enterprise addresses on the same street to obtain the number of the enterprise addresses on the same street, selecting the number of the enterprise addresses on the same street as the number of enterprises on the same street, using a preset chart component to draw a bar chart corresponding to the number of enterprises, creating a first display window, and displaying the bar chart corresponding to the number of enterprises through the first display window, including: Read each business address in the form data, obtain the street identifier in each business address in the form data, count the business addresses on the same street according to the street identifier, obtain the number of business addresses on the same street, select the number of business addresses on the same street as the number of businesses on the same street, use a preset chart component to draw a bar chart corresponding to the number of businesses, create a first display window, and display the bar chart corresponding to the number of businesses through the first display window.

[0044] For the sake of illustration, an example is given below: For example, there are multiple form data, and the company addresses in the multiple form data are A1, A2, A3, B1, B2, and B3 respectively; Extract the street signs of A1, A2, A3, B1, B2, B3; When the street signs of A1, A2, and A3 are the same, it is determined that A1, A2, and A3 are on the same street. Therefore, the number of the business addresses on the same street is 3, and 3 is the number of businesses on the same street. The preset chart component is used to draw a bar chart corresponding to 3.

[0045] When the street signs of A1, A2, A3, B1, B2, and B3 are the same, it is determined that A1, A2, A3, B1, B2, and B3 are on the same street. Therefore, the number of business addresses on the same street is 6, and 6 is the number of businesses on the same street. Use the preset chart component to draw a bar chart corresponding to 6.

[0046] Among them, the number of enterprise addresses on the same street is selected as the number of enterprises on the same street, and a preset chart component is used to draw a bar chart corresponding to the number of enterprises, and a first display window is created. Through the first display window, the bar chart corresponding to the number of enterprises is displayed. In this way, the government can understand the number of enterprises on the same street, which is conducive to the government's rational planning of resource allocation, providing corresponding infrastructure construction and public services to meet the actual needs of enterprises and promote the balanced development of the regional economy.

[0047] Exemplarily, the business address in each form data is read, the business addresses on the same street are counted to obtain the number of the business addresses on the same street, the number of the business addresses on the same street is selected as the number of businesses on the same street, a bar chart corresponding to the number of businesses is drawn using a preset chart component, a first display window is created, and after the bar chart corresponding to the number of businesses is displayed through the first display window, the method further includes: Read the enterprise floor area in each of the form data, add up the enterprise floor area in each of the form data to obtain the total enterprise floor area, use a preset chart component to draw a bar chart corresponding to the total enterprise floor area, create a second display window, and display the bar chart corresponding to the total enterprise floor area through the second display window.

[0048] The first display window and the second display window are different display windows.

[0049] Among them, the total area of ​​the enterprises in each form data is added together to obtain the total area of ​​the enterprises. The total area of ​​the enterprises is helpful for the government to evaluate the regional economic vitality and provide accurate guidance for the formulation of investment promotion, industrial upgrading and economic development strategies. In addition, the bar chart corresponding to the total area of ​​the enterprises is displayed, making the total area of ​​the enterprises more intuitive and easy to understand.

[0050] In the embodiment of the present invention, the beneficial effects lie in two aspects. On the one hand, the business platform is connected, the customized form is sent to the business platform, and the operation instruction of the customized form is obtained. When the operation instruction is a submit instruction, the form data of the target form component is extracted in the data field according to the mapping relationship. Since manual extraction is not required, the extraction time of the form data is reduced, which is conducive to improving the extraction efficiency of the form data. On the other hand, since the form data is automatically extracted, it will not be affected by manual intervention, which is conducive to improving the reliability of the extracted form data.

[0051] See also Figure 3 , Figure 3 yes Figure 2 A specific implementation flow diagram of step S23 is described in detail as follows: S31, obtaining a first specified instruction, obtaining a layout component specified by a user from multiple layout components according to the first specified instruction, and selecting the specified layout component as a target layout component; S32, obtaining a second designated instruction, obtaining a form component designated by a user from a plurality of form components according to the second designated instruction, and selecting the designated form component as a target form component.

[0052] In the embodiment of the present invention, a specified layout component is selected as a target layout component, and a specified form component is selected as a target form component, so that the personalized needs of users can be met, thereby improving the user's satisfaction.

[0053] See also Figure 4 , Figure 4 yes Figure 2 A specific implementation flow diagram of step S25 is described in detail as follows: S41, obtaining the data fields in the database table, and establishing a mapping relationship between the target form component and the data fields; S42, obtaining a save instruction, executing the save instruction, and using a preset file to save the mapping relationship.

[0054] In an embodiment of the present invention, a save instruction is obtained, the save instruction is executed, and a preset file is used to save the mapping relationship. This allows the mapping relationship to be saved for a long time, thereby automatically storing the form data of the target form component, reducing the need for manual intervention and improving work efficiency and accuracy.

[0055] See also Figure 5 , Figure 5 yes Figure 2 A specific implementation flow diagram of step S26 is described in detail as follows: S51, selecting an e-government platform or a government service platform as a target platform, connecting to the target platform, publishing the customized form on the target platform, and obtaining an operation instruction for the customized form; Among them, the e-government platform or government service platform is an important tool for the government to transfer its management and service functions to the Internet using modern computer and network technology. The e-government platform or government service platform has multiple functions such as information release and inquiry, online services, and interactive communication. The e-government platform or government service platform not only improves the government's administrative efficiency and public service quality, but also promotes the transparency and openness of government information.

[0056] S52, when the operation instruction is a submit instruction, obtain the filling time and status identifier of the customized form, and when the filling time reaches the target time and the status identifier is a normal identifier, extract the form data of the target form component in the data field according to the mapping relationship.

[0057] The target time for filling in the form reaches the target time, which ensures that the form content can be fully and carefully understood, and the required form data can be filled in accurately, reducing errors and omissions caused by hasty filling in, improving the filling quality of the form data in the target form component, and significantly improving the accuracy and completeness of the form data. Preferably, the target time is 2 minutes.

[0058] The status mark is a normal mark, which can ensure that the form data complies with the established standards and specifications and avoid the situation where the form data has format errors, which is conducive to realizing the automatic processing of the form data, thereby improving the processing efficiency of the form data.

[0059] In an embodiment of the present invention, when the operation instruction is a submit instruction, the filling time and status identifier of the customized form are obtained. When the filling time reaches the target time and the status identifier is a normal identifier, the form data of the target form component is extracted in the data field according to the mapping relationship. Since manual extraction is not required, the extraction time of the form data is reduced, which is beneficial to improving the extraction efficiency of the form data.

[0060] See also Figure 6 , Figure 6 : is a structural diagram of a form data extraction device in one embodiment of the present invention. Figure 6 As shown, the form data extraction device includes a first acquisition module 101, a display module 102, a second acquisition module 103, a creation module 104, a storage module 105, and an extraction module 106. The detailed description of each functional module is as follows: A first acquisition module 101 is used to acquire a page file and create a visualization page according to the page file; The display module 102 is used to obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and display the multiple layout components and multiple form components on the display area; The second acquisition module 103 is used to acquire a layout component specified by a user from a plurality of layout components, select the specified layout component as a target layout component, acquire a form component specified by a user from a plurality of form components, and select the specified form component as a target form component; A creation module 104, used to combine the target layout component and the target form component to generate a customized form, and create a database table corresponding to the customized form; A saving module 105 is used to obtain the data fields in the database table, establish a mapping relationship between the target form component and the data fields, and save the mapping relationship; The extraction module 106 is used to connect to the target platform, publish the customized form on the target platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship.

[0061] In the embodiment of the present invention, the beneficial effects lie in two aspects. On the one hand, the business platform is connected, the customized form is sent to the business platform, and the operation instruction of the customized form is obtained. When the operation instruction is a submit instruction, the form data of the target form component is extracted in the data field according to the mapping relationship. Since manual extraction is not required, the extraction time of the form data is reduced, which is conducive to improving the extraction efficiency of the form data. On the other hand, since the form data is automatically extracted, it will not be affected by manual intervention, which is conducive to improving the reliability of the extracted form data.

[0062] The specific definition of the form data extraction device can be found in the definition of the form data extraction method above, which will not be repeated here.

[0063] Each module in the above-mentioned form data extraction device can be implemented in whole or in part by software, hardware or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute the operations corresponding to each module above.

[0064] See also Figure 7 , Figure 7 1 is another structural diagram of a computer device in one embodiment of the present invention. In one embodiment, a computer device is provided. The computer device is a server device or a client device. The internal structure diagram thereof can be as shown in FIG. Figure 7 As shown. The computer device includes a processor, a memory, a network interface, a display screen and an input device connected via a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external device. When the computer program is executed by the processor, the functions or steps of a form data extraction method based on Vue can be implemented.

[0065] In one embodiment, a computer device is provided, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor.

[0066] It should be noted that the above functions or steps that can be implemented by the computer-readable storage medium or computer device can refer to the relevant description of the aforementioned method embodiment. In order to avoid repetition, they will not be described one by one here.

[0067] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a graphics processing unit (GPU), and a network processor (NP); it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, and discrete hardware components.

[0068] The above description and the accompanying drawings sufficiently illustrate the embodiments of the present disclosure to enable those skilled in the art to practice them. In this article, each embodiment may focus on the differences from other embodiments, and the same or similar parts between the embodiments may refer to each other. For the methods and products disclosed in the embodiments, if they correspond to the method part disclosed in the embodiments, then the relevant parts can refer to the description of the method part.

[0069] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software may depend on the specific application and design constraints of the technical solution. Technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the embodiments of the present disclosure. Technicians can clearly understand that for the convenience and simplicity of description, the specific working process of the above-described system, device and unit can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0070] The flowchart and block diagram in the accompanying drawings show the possible architecture, function and operation of the system, method and computer program product according to the embodiment of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of the code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. In some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, which can depend on the functions involved. In the description corresponding to the flowchart and the block diagram in the accompanying drawings, the operations or steps corresponding to different boxes can also occur in a different order from the order disclosed in the description, and sometimes there is no specific order between different operations or steps. For example, two consecutive operations or steps can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, which can depend on the functions involved. Each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented by a dedicated hardware-based system that performs the specified functions or actions, or may be implemented by a combination of dedicated hardware and computer instructions.

Claims

1. A form data extraction method based on Vue, characterized in that: include: Obtaining a page file, and creating a visualization page according to the page file; Obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and display the multiple layout components and multiple form components on the display area; Get the layout component specified by the user from multiple layout components, select the specified layout component as the target layout component, get the form component specified by the user from multiple form components, and select the specified form component as the target form component; Combine the target layout component and the target form component to generate a customized form, and create a database table corresponding to the customized form; Acquire the data fields in the database table, establish a mapping relationship between the target form component and the data fields, and save the mapping relationship; Connect to the target platform, publish the customized form on the target platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship.

2. The form data extraction method according to claim 1, characterized in that: The obtaining of the display area on the visualization page, obtaining a plurality of layout components and a plurality of form components in the Vue component, and displaying the plurality of layout components and the plurality of form components on the display area include: Obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and divide the display area into a first area and a second area; A plurality of layout components are displayed on the first area, and a plurality of form components are displayed on the second area.

3. The form data extraction method according to claim 1, characterized in that: The method of obtaining a layout component specified by a user from among multiple layout components, selecting the specified layout component as a target layout component, obtaining a form component specified by a user from among multiple form components, and selecting the specified form component as a target form component includes: Obtain a first specified instruction, obtain a layout component specified by a user from multiple layout components according to the first specified instruction, and select the specified layout component as a target layout component; Obtain a second designated instruction, obtain the form component designated by the user from multiple form components according to the second designated instruction, and select the designated form component as the target form component.

4. The form data extraction method according to claim 1, characterized in that: The step of combining the target layout component and the target form component to generate a customized form and creating a database table corresponding to the customized form includes: When the target layout component is an elastic container, the target form component is placed in the elastic container, and the elastic container in which the target form component is placed is selected as the custom form; Access a database management system, and create a database table corresponding to the customized form in the database management system.

5. The form data extraction method according to claim 1, characterized in that: The acquiring of the data fields in the database table, establishing a mapping relationship between the target form component and the data fields, and saving the mapping relationship includes: Acquire the data fields in the database table, and establish a mapping relationship between the target form component and the data fields; A save instruction is obtained, the save instruction is executed, and the mapping relationship is saved in a preset file.

6. The form data extraction method according to claim 1, characterized in that: The connecting to the target platform, publishing the customized form on the target platform, obtaining the operation instruction of the customized form, and when the operation instruction is a submit instruction, extracting the form data of the target form component in the data field according to the mapping relationship, includes: Selecting an e-government platform or a government service platform as a target platform, connecting to the target platform, publishing the customized form on the target platform, and obtaining operation instructions for the customized form; When the operation instruction is a submit instruction, the filling time and status identifier of the custom form are obtained. When the filling time reaches the target time and the status identifier is a normal identifier, the form data of the target form component is extracted in the data field according to the mapping relationship.

7. The form data extraction method according to claim 1, characterized in that: In the connecting target platform, the customized form is published on the target platform, and an operation instruction of the customized form is obtained. When the operation instruction is a submit instruction, after the form data of the target form component is extracted in the data field according to the mapping relationship, the form data extraction method includes: Read the business addresses in each of the form data, count the business addresses on the same street, obtain the number of the business addresses on the same street, select the number of the business addresses on the same street as the number of businesses on the same street, use a preset chart component to draw a bar chart corresponding to the number of businesses, create a first display window, and display the bar chart corresponding to the number of businesses through the first display window.

8. A form data extraction device based on Vue, characterized in that: include: A first acquisition module is used to acquire a page file and create a visualization page according to the page file; A display module is used to obtain a display area on the visualization page, obtain multiple layout components and multiple form components in the Vue component, and display the multiple layout components and multiple form components on the display area; The second acquisition module is used to acquire a layout component specified by a user from a plurality of layout components, select the specified layout component as a target layout component, acquire a form component specified by a user from a plurality of form components, and select the specified form component as a target form component; A creation module is used to combine the target layout component and the target form component to generate a customized form and create a database table corresponding to the customized form; A saving module, used for acquiring the data fields in the database table, establishing a mapping relationship between the target form component and the data fields, and saving the mapping relationship; The extraction module is used to connect to the target platform, publish the customized form on the target platform, obtain the operation instruction of the customized form, and when the operation instruction is a submit instruction, extract the form data of the target form component in the data field according to the mapping relationship.

9. A computer 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 computer program, the steps of the form data extraction method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the form data extraction method according to any one of claims 1 to 7 are implemented.

Images