WO2021008030A1 - 网页表单配置方法、装置及计算机可读存储介质 - Google Patents

网页表单配置方法、装置及计算机可读存储介质 Download PDF

Info

Publication number
WO2021008030A1
WO2021008030A1 PCT/CN2019/117348 CN2019117348W WO2021008030A1 WO 2021008030 A1 WO2021008030 A1 WO 2021008030A1 CN 2019117348 W CN2019117348 W CN 2019117348W WO 2021008030 A1 WO2021008030 A1 WO 2021008030A1
Authority
WO
WIPO (PCT)
Prior art keywords
data
view
web
model
document object
Prior art date
Application number
PCT/CN2019/117348
Other languages
English (en)
French (fr)
Inventor
全力
孙雨
Original Assignee
平安科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 平安科技（深圳）有限公司 filed Critical 平安科技（深圳）有限公司
Publication of WO2021008030A1 publication Critical patent/WO2021008030A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Definitions

  • This application relates to the field of big data technology, and in particular to a method, device and computer-readable storage medium for configuring a web page form based on the collaboration of knowledge content and user behavior.
  • a form webpage is a window for a website to interact with visitors.
  • a web form can send the data entered by the user to the server for processing, and is especially often used in the contact form-the user enters the information and then sends it to the Email.
  • Internet users operate check boxes, radio buttons, or text fields to fill in forms on web pages, web forms are in the form of files or databases.
  • the present application provides a method, device and computer readable storage medium for configuring a web form, the main purpose of which is to provide users with an efficient web form configuration method when the user is making a web form.
  • a web form configuration method provided by this application includes:
  • the target form set is expanded through the angularjs framework to obtain the data synchronization code in the target form set, and the common fields of the target form set are established according to the data synchronization code, and a data table is established for the common fields, Stored in the database;
  • the form parameters are analyzed through the preset model-view-view model, and the corresponding webpage form and the corresponding form element are presented on the webpage.
  • the extension processing includes:
  • the document object model data and web page view data in the target form set are synchronized to obtain data synchronization code.
  • using the two-way data binding feature of the angularjs framework to synchronize the document object model data and web page view data in the target form set includes:
  • the dirty data checking mechanism is used to detect the data in the document object model
  • the copy snapshot method is used to detect the changed data in the document object model
  • the corresponding data in the web page view is updated by calling the apply function.
  • said generating the instruction by establishing a data module includes:
  • the HTML module in the angularjs framework is parsed into the document object model through a browser, and the angularjs framework is used to traverse the document object model to generate instructions for custom tags, where the data module is an HTML module in the angularjs framework.
  • the parsing of the form parameters through a preset model-view-view model and presenting the corresponding webpage form and corresponding form elements on the webpage includes:
  • the fnm class is preset, and the form parameters are input into the fnm class, where the fnm class is used for standard coding uniformity;
  • the back-end data drive is used to transfer the data of the form parameters from logic processing to data processing;
  • the index.jsp page is loaded, the np-app command is searched, and the command in the index.jsp page is obtained According to the binding relationship, the initialized form parameter data is obtained from the web server, so that the corresponding web form and corresponding form elements are presented on the web page.
  • this application also provides a web form configuration device, which includes a memory and a processor.
  • the memory stores a web form configuration program that can run on the processor.
  • the configuration program is executed by the processor, the following steps are implemented:
  • the target form set is expanded through the angularjs framework to obtain the data synchronization code in the target form set, and the common fields of the target form set are established according to the data synchronization code, and a data table is established for the common fields, Stored in the database;
  • the form parameters are analyzed through the preset model-view-view model, and the corresponding webpage form and the corresponding form element are presented on the webpage.
  • the extension processing includes:
  • the document object model data and web page view data in the target form set are synchronized to obtain data synchronization code.
  • using the two-way data binding feature of the angularjs framework to synchronize the document object model data and web page view data in the target form set includes:
  • the dirty data checking mechanism is used to detect the data in the document object model
  • the copy snapshot method is used to detect the changed data in the document object model
  • the corresponding data in the web page view is updated by calling the apply function.
  • said generating the instruction by establishing a data module includes:
  • the HTML module in the angularjs framework is parsed into the document object model through a browser, and the angularjs framework is used to traverse the document object model to generate instructions for custom tags, where the data module is an HTML module in the angularjs framework.
  • the present application also provides a computer-readable storage medium having a web form configuration program stored on the computer-readable storage medium, and the web form configuration program can be executed by one or more processors, To implement the steps of the web form configuration method as described above.
  • the web form configuration method, device and computer-readable storage medium proposed in this application combine to obtain form parameters obtained by preprocessing the form set displayed on the webpage when the user is making the web form, and use the preset
  • the set model-view-view model parses the form parameters, and presents the corresponding web form and corresponding form elements on the web page, thereby providing users with an efficient method of web form configuration.
  • FIG. 1 is a schematic flowchart of a web form configuration method provided by an embodiment of the application
  • FIG. 2 is a schematic diagram of the internal structure of a web form configuration device provided by an embodiment of the application.
  • Fig. 3 is a schematic diagram of modules of a web form configuration program in a web form configuration device provided by an embodiment of the application.
  • This application provides a web form configuration method.
  • FIG. 1 it is a schematic flowchart of a web form configuration method provided by an embodiment of this application.
  • the method can be executed by a device, and the device can be implemented by software and/or hardware.
  • the web form configuration method includes:
  • Forms are mainly used for data collection in web pages.
  • a form has three basic components: form tags, form fields, and form buttons.
  • the form tag contains the URL of the CGI program used to process the form data and the method for submitting the data to the server.
  • the form fields include text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, single selection boxes, drop-down selection boxes, file upload boxes, etc.
  • the form buttons include a submit button, a reset button, and a general button, which are used to transmit data to the CGI script on the web server or cancel input.
  • the form button can be used to control other processing tasks that have defined processing scripts.
  • the login interface is a simple form.
  • the login interface is compiled from source code and contains form tags.
  • the user name and password in the login interface are form fields, and the login or registration click button is the form button .
  • the preferred embodiment of the present application obtains the forms from a web page to form a form set.
  • HTML+CSS+JavaScript (js for short) technology is used to compile and integrate the webpage source code of the form set, and the selected compiler is Sublime.
  • the HTML refers to hypertext markup language, which is mainly used for compiling static web pages.
  • the CSS refers to adjusting the style of the compiled static webpage, and is mainly used to beautify the webpage.
  • the JS is a literal scripting language, which is a dynamic type, weak type, prototype-based language with built-in support types, and is mainly used for dynamic display of static web pages so that the static web pages have interactive functions.
  • this application uses the following means to perform code analysis processing on the form set to obtain the target form set: organize the data in the HTML part of the source code of the form set, and put the same data contained in the same In the file, other different data are respectively placed in different files, and the different data includes: character strings, labels, field names, etc.
  • the data processing operations in the CSS and JS parts are the same as the data processing operations in the HTML, so a file set containing HTML, CSS and JS is obtained, and the file set of HTML, CSS and JS is performed Recompile the combination to obtain the target form set and store it in the local cache.
  • the target form set is expanded through the angularjs framework to obtain the data synchronization code in the target form set, and the public fields of the target form set are established according to the data synchronization codes, and data is established for the common fields Table, stored in the database.
  • the angularjs framework is a js framework, which is mainly used to extend HTML tags in an application program to implement dynamic content on a web page.
  • the core content of angularjs includes: two-way data binding, templating, model-view-view model (Model-View-ViewModel, MVVM for short) development mode, injection mechanism and instructions.
  • this application synchronizes the document object model data and web page view data in the target form set through the feature of angularjs two-way data binding, reducing the writing of a large amount of data synchronization code, and establishes common fields according to the synchronization code, and compares all
  • the public fields establish a data table and store it in a database.
  • the database used in this application is a MySQL database, and the document object model is referred to as DOM.
  • the public fields refer to data with the same attributes.
  • form 1 contains data with attributes such as date and time, and other forms also contain data with attributes such as time and date. Therefore, the date and time here are regarded as public Field.
  • the two-way data binding of angularjs mainly includes: digest cycle and dirty-checking (dirty data check).
  • the dirty-checking includes watch, digest, and apply.
  • the digest cycle is used to check whether the web page view data has changed so as to update the corresponding data in the document object model.
  • the dirty data check is used to detect the data in the DOM, use a copy snapshot method to detect the changed data in the DOM, and update the corresponding data in the web page view by calling the apply function.
  • the user When the user binds some data to the web interface, the user will insert a watch into the watch queue.
  • the watch refers to the data that can detect changes in the web view it monitors.
  • the Angular interpreter When our template is loaded, the Angular interpreter will look for each directive (instruction) and generate each required watch;
  • digest loop When the browser receives an event that can be processed by the angular context, the digest loop is triggered. This loop consists of two smaller loops combined, one for processing the evalAsync queue and the other for the watch queue. In essence, digest will traverse our watch,
  • the digest will ask whether the attributes and values of the watch have changed, until all the watch queues have been checked. When there is a watch change, it will be triggered again in a loop until all the watches are gone. Change, so as to ensure that all web views will not change anymore. Among them, if the loop exceeds 10 times, then it will throw an exception. In order to prevent an infinite loop, when the digest loop ends, the DOM data will be updated accordingly;
  • the data module generates an instruction, uses the instruction to create a custom label for the public field, and uses the injection mechanism of the angularjs framework to configure form parameters for the public field.
  • the data module refers to an HTML module in the angularjs framework.
  • the HTML module will be parsed into the DOM by the browser, the DOM will become the input of the angularjs compiler, and the angularjs framework will traverse the DOM to generate the directive (instruction) of the custom tag, where all the instructions are responsible for setting up data binding for the view.
  • angularjs provides a large number of services to provide a specific function. In angularjs, the required service is requested in the controller as a parameter, so angularjs can detect that the corresponding service is provided to the developer.
  • the injection mechanism is used to allow developers to request required dependencies instead of looking for them.
  • the generated instructions are used to customize tags for the public fields in the local cache, and form parameters are configured for the public fields in the local cache by requesting required services and the performance of the injection mechanism.
  • the instruction is a tag on a DOM element, and the instruction tells the HTML compiler (Scompile) of angularjs to attach a behavior to the DOM element, and this behavior can change the DOM element or the DOM The child elements of the element.
  • the angularjs has its own set of built-in instructions, such as ngBind, ngModel, ngCLass and so on. At the same time angularjs also provides a custom label mechanism.
  • custom instruction tags When the angularjs application is up, it will load the DOM tree first, then match the custom instructions, and use the directive function to add custom instruction tags.
  • custom instruction tags need to be called, the HTML Just add a custom instruction name to the element.
  • custom instruction tags and encapsulated controls are as follows:
  • Date control Dates are often used in management information systems. Usually, in order to make the format uniform and convenient for input, the date control is selected. The date control is provided in the framework. The developer directly calls the initDatetimepicker method, and then the date label in the view layer Set the class attribute to "datetimepicker form-control".
  • Statistical graphs Three commonly used statistical graphs are provided: line graphs, bar graphs, and radar graphs. The corresponding custom labels are ⁇ line>, ⁇ Bar>, and ⁇ Radar> respectively.
  • Drop-down box same as the date control, directly call initOption to call and initialize the data of the drop-down box, and add the corresponding class attribute number in the select tag of the view layer.
  • the model-view-view model is referred to as the MVVM model.
  • the model refers to the data access layer, which is responsible for business logic and data encapsulation.
  • the View layer refers to the web interface and is only responsible for the display of the web interface.
  • the view model (ViewModel) encapsulates the processed data on the Model layer, defines the logic of the display layer, and informs the View layer to update the web page interface, that is, it is responsible for the interaction between the Model and the view.
  • the analysis of the form parameters is the design idea of the MVVM mode.
  • the design idea of the view is: standard coding is unified, the fnm class is preset, and the configured form parameters are put into the fnm class.
  • the model design idea is the back-end data-driven development idea.
  • data is easier to manage than business logic. Therefore, the complexity of the design is transferred from logic processing to data processing, where the display of the page is determined by the data to be displayed, rather than the page determining what data to display.
  • the page display can change accordingly .
  • user needs change only need to modify the data model, without the need to modify the entire page and business logic.
  • the idea of the view model design is: the user sends an http connection from the browser to the server, loads the index.jsp page, loads the angular, waits for the page to be loaded, performs the search np-app instruction, defines the boundary of the template, traverses the template, and finds The instructions and binding relationships in the page, register the listener, perform DOM operations, and obtain initialized data from the server.
  • the system will start up, convert the model into a view, and present the corresponding web form and the corresponding form on the web page element.
  • the invention also provides a webpage form configuration device.
  • FIG. 2 it is a schematic diagram of the internal structure of a web form configuration device provided by an embodiment of this application.
  • the web form configuration apparatus 1 may be a PC (Personal Computer, personal computer), or a terminal device such as a smart phone, a tablet computer, or a portable computer, or a server.
  • the webpage form configuration device 1 at least includes a memory 11, a processor 12, a communication bus 13, and a network interface 14.
  • the memory 11 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), magnetic memory, magnetic disk, optical disk, etc.
  • the memory 11 may be an internal storage unit of the web form configuration device 1 in some embodiments, such as a hard disk of the web form configuration device 1.
  • the memory 11 may also be an external storage device of the web form configuration device 1, for example, a plug-in hard disk, a smart media card (SMC), and a secure digital (Secure Digital Digital, SD) card, flash card (Flash Card), etc.
  • the memory 11 may also include both an internal storage unit of the web form configuration apparatus 1 and an external storage device.
  • the memory 11 can be used not only to store application software and various data installed in the web form configuration device 1, such as the code of the web form configuration program 01, etc., but also to temporarily store data that has been output or will be output.
  • the processor 12 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip, and is used to run the program code or processing stored in the memory 11 Data, such as executing web form configuration program 01, etc.
  • CPU central processing unit
  • controller microcontroller
  • microprocessor or other data processing chip
  • the communication bus 13 is used to realize the connection and communication between these components.
  • the network interface 14 may optionally include a standard wired interface and a wireless interface (such as a WI-FI interface), and is usually used to establish a communication connection between the device 1 and other electronic devices.
  • the device 1 may also include a user interface.
  • the user interface may include a display (Display) and an input unit such as a keyboard (Keyboard).
  • the optional user interface may also include a standard wired interface and a wireless interface.
  • the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode, organic light emitting diode) touch device, etc.
  • the display can also be appropriately called a display screen or a display unit, which is used to display the information processed in the web form configuration device 1 and to display a visualized user interface.
  • Figure 2 only shows the web form configuration device 1 with components 11-14 and the web form configuration program 01.
  • the structure shown in Figure 1 does not constitute a limitation on the web form configuration device 1 It may include fewer or more components than shown, or a combination of some components, or a different component arrangement.
  • the web form configuration program 01 is stored in the memory 11; the processor 12 implements the following steps when executing the web form configuration program 01 stored in the memory 11:
  • Step 1 Obtain the form set displayed on the webpage on the browser, and perform code analysis processing on the form set to obtain the target form set.
  • Forms are mainly used for data collection in web pages.
  • a form has three basic components: form tags, form fields, and form buttons.
  • the form tag contains the URL of the CGI program used to process the form data and the method for submitting the data to the server.
  • the form fields include text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, single selection boxes, drop-down selection boxes, file upload boxes, etc.
  • the form buttons include a submit button, a reset button, and a general button, which are used to transmit data to the CGI script on the web server or cancel input.
  • the form button can be used to control other processing tasks that have defined processing scripts.
  • the login interface is a simple form.
  • the login interface is compiled from source code and contains form tags.
  • the user name and password in the login interface are form fields, and the login or registration click button is the form button .
  • the preferred embodiment of the present application obtains the forms from a web page to form a form set.
  • HTML+CSS+JavaScript (js for short) technology is used to compile and integrate the webpage source code of the form set, and the selected compiler is Sublime.
  • the HTML refers to hypertext markup language, which is mainly used for compiling static web pages.
  • the CSS refers to adjusting the style of the compiled static webpage, and is mainly used to beautify the webpage.
  • the JS is a literal scripting language, which is a dynamic type, weak type, prototype-based language with built-in support types, and is mainly used for dynamic display of static web pages so that the static web pages have interactive functions.
  • this application uses the following means to perform code analysis processing on the form set to obtain the target form set: organize the data in the HTML part of the source code of the form set, and put the same data contained in the same In the file, other different data are respectively placed in different files, and the different data includes: character strings, labels, field names, etc.
  • the data processing operations in the CSS and JS parts are the same as the data processing operations in the HTML, so a file set containing HTML, CSS and JS is obtained, and the file set of HTML, CSS and JS is performed Recompile the combination to obtain the target form set and store it in the local cache.
  • Step 2 Expand the target form set through the angularjs framework to obtain the data synchronization code in the target form set, establish the public field of the target form set according to the data synchronization code, and establish the common field
  • the data table is stored in the database.
  • the angularjs framework is a js framework, which is mainly used to extend HTML tags in an application program to implement dynamic content on a web page.
  • the core content of angularjs includes: two-way data binding, templating, model-view-view model (Model-View-ViewModel, MVVM for short) development mode, injection mechanism and instructions.
  • this application synchronizes the document object model data and web page view data in the target form set through the feature of angularjs two-way data binding, reducing the writing of a large amount of data synchronization code, and establishes common fields according to the synchronization code, and compares all
  • the public fields establish a data table and store it in a database.
  • the database used in this application is a MySQL database, and the document object model is referred to as DOM.
  • the public fields refer to data with the same attributes.
  • form 1 contains data with attributes such as date and time, and other forms also contain data with attributes such as time and date. Therefore, the date and time here are regarded as public Field.
  • the two-way data binding of angularjs mainly includes: digest cycle and dirty-checking (dirty data check).
  • the dirty-checking includes watch, digest, and apply.
  • the digest cycle is used to check whether the web page view data has changed so as to update the corresponding data in the document object model.
  • the dirty data check is used to detect the data in the DOM, use a copy snapshot method to detect the changed data in the DOM, and update the corresponding data in the web page view by calling the apply function.
  • the user When the user binds some data to the web interface, the user will insert a watch into the watch queue.
  • the watch refers to the data that can detect changes in the web view it monitors.
  • the Angular interpreter When our template is loaded, the Angular interpreter will look for each directive (instruction) and generate each required watch;
  • digest loop When the browser receives an event that can be processed by the angular context, the digest loop is triggered. This loop consists of two smaller loops combined, one for processing the evalAsync queue and the other for the watch queue. In essence, digest will traverse our watch,
  • the digest will ask whether the attributes and values of the watch have changed, until all the watch queues have been checked. When there is a watch change, it will be triggered again in a loop until all the watches are gone. Change, so as to ensure that all web views will not change anymore. Among them, if the loop exceeds 10 times, then it will throw an exception. In order to prevent an infinite loop, when the digest loop ends, the DOM data will be updated accordingly;
  • Step 3 The data module generates instructions, uses the instructions to create custom labels for the public fields, and uses the injection mechanism of the angularjs framework to configure form parameters for the public fields.
  • the data module refers to an HTML module in the angularjs framework.
  • the HTML module will be parsed into the DOM by the browser, the DOM will become the input of the angularjs compiler, and the angularjs framework will traverse the DOM to generate the directive (instruction) of the custom tag, where all the instructions are responsible for setting up data binding for the view.
  • angularjs provides a large number of services to provide a specific function. In angularjs, the required service is requested in the controller as a parameter, so angularjs can detect that the corresponding service is provided to the developer.
  • the injection mechanism is used to allow developers to request required dependencies instead of looking for them.
  • the generated instructions are used to customize tags for the public fields in the local cache, and form parameters are configured for the public fields in the local cache by requesting the required services and the performance of the injection mechanism.
  • the instruction is a tag on a DOM element, and the instruction tells the HTML compiler (Scompile) of angularjs to attach a behavior to the DOM element, and this behavior can change the DOM element or the DOM The child elements of the element.
  • the angularjs has its own set of built-in instructions, such as ngBind, ngModel, ngCLass and so on. At the same time angularjs also provides a custom label mechanism.
  • custom instruction tags When the angularjs application is up, it will load the DOM tree first, then match the custom instructions, and use the directive function to add custom instruction tags.
  • custom instruction tags need to be called, the HTML Just add a custom instruction name to the element.
  • custom instruction tags and encapsulated controls are as follows:
  • Date control Dates are often used in management information systems. Usually, in order to make the format uniform and convenient for input, the date control is selected. The date control is provided in the framework. The developer directly calls the initDatetimepicker method, and then the date label in the view layer Set the class attribute to "datetimepicker form-control".
  • Statistical graphs Three commonly used statistical graphs are provided: line graphs, bar graphs, and radar graphs. The corresponding custom labels are ⁇ line>, ⁇ Bar>, and ⁇ Radar> respectively.
  • Drop-down box same as the date control, directly call initOption to call and initialize the data of the drop-down box, and add the corresponding class attribute number in the select tag of the view layer.
  • Step 4 Analyze the form parameters through the preset model-view-view model, and present the corresponding webpage form and the corresponding form element on the webpage.
  • the model-view-view model is referred to as the MVVM model.
  • the model refers to the data access layer, which is responsible for business logic and data encapsulation.
  • the View layer refers to the web interface and is only responsible for the display of the web interface.
  • the view model (ViewModel) encapsulates the processed data on the Model layer, defines the logic of the display layer, and informs the View layer to update the web page interface, that is, it is responsible for the interaction between the Model and the view.
  • the analysis of the form parameters is the design idea of the MVVM mode.
  • the design idea of the view is: standard coding is unified, the fnm class is preset, and the configured form parameters are put into the fnm class.
  • the model design idea is the back-end data-driven development idea.
  • data is easier to manage than business logic. Therefore, the complexity of the design is transferred from logic processing to data processing, where the display of the page is determined by the data to be displayed, rather than the page determining what data to display.
  • the page display can change accordingly .
  • user needs change only need to modify the data model, without the need to modify the entire page and business logic.
  • the idea of the view model design is: the user sends an http connection from the browser to the server, loads the index.jsp page, loads the angular, waits for the page to be loaded, performs the search np-app instruction, defines the boundary of the template, traverses the template, and finds The instructions and binding relationships in the page, register the listener, perform DOM operations, and obtain initialized data from the server.
  • the system will start up, convert the model into a view, and present the corresponding web form and the corresponding form on the web page element.
  • the web form configuration program may also be divided into one or more modules, and the one or more modules are stored in the memory 11 and are executed by one or more processors (in this embodiment, The processor 12) is executed to complete the application.
  • the module referred to in this application refers to a series of computer program instruction segments capable of completing specific functions, and is used to describe the execution process of the web form configuration program in the web form configuration device.
  • FIG. 3 a schematic diagram of the program modules of the web form configuration program in an embodiment of the web form configuration apparatus of this application.
  • the web form configuration program can be divided into a code analysis module 10 and a field
  • the establishment module 20, the parameter configuration module 30, and the parameter analysis module 40 are exemplary:
  • the code analysis module 10 is used to obtain a form set displayed on a webpage on a browser, and perform code analysis processing on the form set to obtain a target form set.
  • the field establishing module 20 is used to expand the target form set through the angularjs framework to obtain the data synchronization code in the target form set, and establish the common fields of the target form set according to the data synchronization code, A data table is created for the public fields and stored in the database.
  • the parameter configuration module 30 is used to establish a data module generation instruction, use the instruction to create a custom label for the public field, and use the injection mechanism of the angularjs framework to configure form parameters for the public field.
  • the parameter analysis module 40 is configured to analyze the form parameters through a preset model-view-view model, and present corresponding webpage forms and corresponding form elements on the webpage.
  • an embodiment of the present application also proposes a computer-readable storage medium, the computer-readable storage medium stores a web form configuration program, and the web form configuration program can be executed by one or more processors to achieve the following operating:
  • the target form set is expanded through the angularjs framework to obtain the data synchronization code in the target form set, and the common fields of the target form set are established according to the data synchronization code, and a data table is established for the common fields, Stored in the database;
  • the form parameters are analyzed through the preset model-view-view model, and the corresponding webpage form and the corresponding form element are presented on the webpage.

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

一种网页表单配置方法，涉及一种大数据技术，包括：获取显示在浏览器上的网页的表单集，对所述表单集进行代码解析处理，得到目标表单集（S1）；通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集的数据同步代码，根据所述数据同步代码建立公共字段，对所述公共字段建立数据表，存入数据库中（S2）；通过建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架注入机制对所述公共字段配置表单参数（S3）；利用预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单和对应的表单元素（S4）。所述方法实现了网页表单的高效配置，还提出一种网页表单配置装置以及一种计算机可读存储介质。

Description

网页表单配置方法、装置及计算机可读存储介质
本申请要求于2019年07月12日提交中国专利局、申请号为201910628540.7、发明名称为“网页表单配置方法、装置及计算机可读存储介质”的中国专利申请的优先权，其全部内容通过引用结合在申请中。
技术领域
本申请涉及大数据技术领域，尤其涉及一种基于知识内容和用户行为协同的网页表单配置方法、装置及计算机可读存储介质。
背景技术
表单网页是一个网站和访问者开展互动的窗口，一个网页表单可以将用户输入的数据，发送到服务器进行处理，特别是经常被用在联系表单-用户输入信息然后发送到Email中。因为互联网的用户会操作复选框、单选按钮或文本字段来填写网页上的表格，所以网页窗体的形式类似文件或数据库。在目前一个业务系统中，会有大量的表单页面，传统会以一个表单一个页面的方式进行开发，这样不仅开发效率低，并且后期维护困难，并且业务人员不能对表单进行修改。
发明内容
本申请提供一种网页表单配置方法、装置及计算机可读存储介质，其主要目的在于当用户在网页表单制作时，给用户提供一种高效的网页表单配置方法。
为实现上述目的，本申请提供的一种网页表单配置方法，包括：
获取显示在浏览器网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集；
通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中；
建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数；
通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
可选地，所述扩展处理，包括：
利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，得到数据同步代码。
可选地，所述利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，包括：
通过对浏览器的循环监听事件添加digest循环事件检查所述网页视图中 数据是否发生变化从而更新所述文档对象模型中对应的数据；
利用脏数据检查机制对所述文档对象模型中数据进行检测，采用复制快照方法检测出所述文档对象模型中变化的数据，并通过调用apply函数对所述网页视图中对应的数据进行更新。
可选地，所述通过建立数据模块生成指令，包括：
通过浏览器将angularjs框架中的HTML模块解析到文档对象模型中，并利用angularjs框架遍历所述文档对象模型生成自定义标签的指令，其中，所述数据模块为angularjs框架中的HTML模块。
可选地，所述通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素，包括：
在所述模型-视图-视图模型中，预设fnm类，将所述表单参数输入至所述fnm类中，其中，所述fnm类用于规范编码统一；
在所述模型-视图-视图模型中，采用后端数据驱动将所述表单参数的数据由逻辑处理转移到数据处理中；
在所述模型-视图-视图模型中，当用户从所述浏览器向网页服务器发送一次http连接时，加载index.jsp页面，进行查找np－app指令，得到所述index.jsp页面中的指令和绑定关系，从所述网页服务器获得初始化的表单参数的数据，从而在网页上呈现出相应的网页表单以及对应的表单元素。
此外，为实现上述目的，本申请还提供一种网页表单配置装置，该装置包括存储器和处理器，所述存储器中存储有可在所述处理器上运行的网页表单配置程序，所述网页表单配置程序被所述处理器执行时实现如下步骤：
获取显示在浏览器网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集；
通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中；
建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数；
通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
可选地，所述扩展处理，包括：
利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，得到数据同步代码。
可选地，所述利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，包括：
通过对浏览器的循环监听事件添加digest循环事件检查所述网页视图中数据是否发生变化从而更新所述文档对象模型中对应的数据；
利用脏数据检查机制对所述文档对象模型中数据进行检测，采用复制快照方法检测出所述文档对象模型中变化的数据，并通过调用apply函数对所述 网页视图中对应的数据进行更新。
可选地，所述通过建立数据模块生成指令，包括：
通过浏览器将angularjs框架中的HTML模块解析到文档对象模型中，并利用angularjs框架遍历所述文档对象模型生成自定义标签的指令，其中，所述数据模块为angularjs框架中的HTML模块。
此外，为实现上述目的，本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有网页表单配置程序，所述网页表单配置程序可被一个或者多个处理器执行，以实现如上所述的网页表单配置方法的步骤。
本申请提出的网页表单配置方法、装置及计算机可读存储介质，在用户进行网页表单制作时，结合获取显示在浏览器上的网页上的表单集进行预处理操作得到的表单参数，并利用预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素，从而可以给用户提供一种高效的网页表单配置的方法。
附图说明
图1为本申请一实施例提供的网页表单配置方法的流程示意图；
图2为本申请一实施例提供的网页表单配置装置的内部结构示意图；
图3为本申请一实施例提供的网页表单配置装置中网页表单配置程序的模块示意图。
本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本申请提供一种网页表单配置方法。参照图1所示，为本申请一实施例提供的网页表单配置方法的流程示意图。该方法可以由一个装置执行，该装置可以由软件和/或硬件实现。
在本实施例中，网页表单配置方法包括：
S1、获取显示在浏览器上的网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集。
表单主要用于网页中数据采集。通常，一个表单有三个基本组成部分：表单标签、表单域以及表单按钮。所述表单标签包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。所述表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。所述表单按钮包括提交按钮、复位按钮和一般按钮，用于将数据传送到网页服务器上的CGI脚本或者取消输入，同时可以用表单按钮来控制其他定义了处理脚本的处理工作。比如在登陆一个系统时的登录界面就是一个简单的表单，其中登录界面通过源代码进行编译，包含了表单标签，登录界面中的用 户名、密码等为表单域，登录或注册点击按钮为表单按钮。
本申请较佳实施例从网页上获取所述表单组成表单集。
优选地，本申请较佳实施例中利用HTML+CSS+JavaScript(简称js)技术对所述表单集的网页源代码进行编译整合，选用的编译器为Sublime。所述HTML指的是超文本标记语言，主要用于静态网页的编译。所述CSS指的是对编译的静态网页进行样式的调整，主要用于美化网页。所述JS是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，主要用于对静态网页进行动态展示，让所述静态网页具有交互功能。
进一步地，本申请通过下述手段对所述表单集进行代码解析处理，得到目标表单集：对所述表单集的源代码的HTML部分中的数据进行整理，将含有的相同数据进行放在同一文件中，将其他不同的数据分别放置在不同文件中，所述不同数据包含：字符串、标签、字段名等。同理，对CSS以及JS部分中的数据处理与所述HTML中的数据处理操作相同，于是，得到了含有HTML、CSS以及JS的文件集，并对所述HTML、CSS以及JS的文件集进行重新编译组合，得到所述目标表单集，并存入本地缓存中。
S2、通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中。
本申请较佳实施例中，所述angularjs框架是一个js框架，主要用于扩展应用程序中的HTML标签，实现网页上的动态内容。所述angularjs核心内容包含：数据双向绑定、模板化、模型-视图-视图模型(Model-View-ViewModel，简称MVVM)开发模式、注入机制以及指令。进一步地，本申请通过angularjs双向数据绑定的特性，同步目标表单集中的文档对象模型数据和网页视图数据，减少了大量数据同步代码的编写，并根据所述同步代码建立公共字段，并对所述公共字段建立数据表，存入数据库中，优选地，本申请采用的数据库为MySQL数据库，其中文档对象模型简称DOM。所述公共字段指的是含有相同属性的数据，例如表单1中含有日期、时间等属性的数据，其它表单中也含有时间、日期等属性的数据，于是，此处的日期、时间就作为公共字段。优选地，所述angularjs的数据双向绑定主要包含：digest循环以及dirty-checking(脏数据检查)，所述dirty-checking包括watch，digest，和apply。所述digest循环用于检查所述网页视图数据是否发生变化从而更新所述文档对象模型中对应的数据。所述脏数据检查用于对所述DOM中数据进行检测，并采用复制快照方法检测出所述DOM中变化的数据，通过调用apply函数对所述网页视图中对应的数据进行更新。
具体的所述数据双向绑定，同步目标表单集中的文档对象模型数据和网页视图数据的实施步骤如下所示：
a.对浏览器的循环监听事件添加digest循环事件，所述浏览器会一直监听页面上的事件，当用户点击一个按钮，触发操作之后，回调函数会执行，随后所述用户就可以进行任何DOM操作，等回调+函数执行完成，浏览器就会 相应更新DOM数据；
b.当用户绑定某些数据到网页界面上时所述用户就会往watch队列里插入一条watch。所述watch指的是可以检测它监视的网页视图里变化的数据。当我们的模版加载完毕时，Angular解释器会寻找每个directive(指令)，生成每个需要的watch；
c.当浏览器接收到可以被angular context处理的事件时，digest循环就会触发，这个循环包括了两个更小的循环组合起来的，一个是处理evalAsync队列，另一个是watch队列。其本质上就是digest会遍历我们的watch，
d.所述digest会问所述watch有没有属性和值发生变化了，直到所有的watch队列全部都检查过，其中，当有watch改变了，那就要循环从新触发，直到所有的watch都没有变化，这样才能保证所有的网页视图都已经不会再变化了。其中如果循环超过10次的话，那么它将抛出一个异常，为了防止无限循环，当digest循环结束时，DOM数据得到相应的变化更新；
e.通过apply事件确定是否要进入到angular context实践中，调用了就进入，不调用就不用进入，当我们使用ng-click指令的时候，angular在时间触发的时候回自动封装到一个apply调用，比如我们写一个ng-model＝‘data’，当敲入一个a时，时间会调用apply(“data＝a”)。
S3、数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数。
本申请较佳实施例中，所述数据模块指的是在angularjs框架中的HTML模块。所述HTML模块将会被浏览器解析到DOM中，所述DOM会成为angularjs编译器的输入，angularjs框架将会遍历所述DOM来生成自定义标签的directive(指令)，其中，所有的指令都负责针对视图来设置数据绑定。进一步地，angularjs中提供了大量的服务来提供某个特定的功能，angularjs中通过在控制器中请求所需要的服务作为参数，于是，angularjs就可以侦测到相应的服务提供给开发人员。所述注入机制用于允许开发人员可以请求需要的依赖，而不是去寻找它们。本申请较佳实施例中，利用所述生成的指令将本地缓存中的公共字段自定义标签并通过请求需要的服务以及注入机制的性能将本地缓存中的公共字段配置表单参数。优选地，在angularjs中，指令是一个DOM元素上的标签，所述指令告诉angularjs的HTML编译器(Scompile)去附加一个行为到这个DOM元素上去，这个行为可以改变所述DOM元素或者所述DOM元素的子元素。其中，所述angularjs有一套自己内置的指令，如ngBind，ngModel，ngCLass等等。同时angularjs也提供了自定义标签机制。详细的，当angularjs应用程序起来之后，会先去加载DOM树，再去匹配自定义的指令，利用directive函数来添加自定义的指令标签，其中，当需要调用自定义的指令标签时，在HTML元素上添加自定义指令名即可。具体的，常用的自定义指令标签和封装好的控件如下所示：
A.日期控件：管理信息系统中常常用到日期，通常为了格式统一可方便输入者操作，都会选择日期控件，框架中提供了日期控件，开发人员直接调 用initDatetimepicker方法，然后在视图层的日期标签中将class属性设置为“datetimepicker form－control”。
B.统计图：提供了三种常用的统计图：折线图，柱状图，雷达图，分别对应相应的自定义标签为<line>，<Bar>，<Radar>。
C.下拉框：同日期控件，直接调用initOption来对下拉框进行数据调用和初始化，在视图层select标签中添加相应的class属性数。
D.带分页功能的表格控件：调用“regNgpagingDirective(app.‘grpager’)”方法，在相应的div中设置class属性为grpager。
S4、通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
所述模型-视图-视图模型简称MVVM模型。所述模型(Model)指数据访问层，用于负责业务逻辑和数据封装。所述视图(View)层指网页界面，只负责网页界面的显示。所述视图模型(ViewModel)将所述Model层上处理好的数据进行封装，并定义了显示层的逻辑，通知View层进行网页界面的更新，即负责Model与视图的交互。进一步地，本申请较佳实施例中，所述对所述表单参数进行解析即MVVM模式的设计思想。所述视图的设计思想为：规范编码统一，预设fnm类，将所述配置的表单参数放入所述fnm类中。所述模型设计的思想为后端数据驱动开发思想。详细的：对于业务逻辑，数据比业务逻辑更容易进行管理。所以将设计的复杂度由逻辑处理转移到数据处理中，其中，页面的显示由所要显示的数据来决定，而不是页面来决定显示什么数据，当数据需求发生变化时，页面显示可随之变化，当用户需求发生变化时，只需要修改数据模型即可，而不需要修改整个页面和业务逻辑。所述视图模型设计的思想为：用户从浏览器向服务器发送一次http连接，加载index.jsp页面，加载angular，等待页面加载完成，进行查找np－app指令，定义模板的边界，遍历模板，查找页面中的指令和绑定关系，注册监听器、执行DOM操作、从服务器获得初始化的数据，系统将会启动起来，并将模型转换成视图，在网页上呈现出相应的网页表单以及对应的表单元素。
发明还提供一种网页表单配置装置。参照图2所示，为本申请一实施例提供的网页表单配置装置的内部结构示意图。
在本实施例中，所述网页表单配置装置1可以是PC(Personal Computer，个人电脑)，或者是智能手机、平板电脑、便携计算机等终端设备，也可以是一种服务器等。该网页表单配置装置1至少包括存储器11、处理器12，通信总线13，以及网络接口14。
其中，存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、磁性存储器、磁盘、光盘等。存储器11在一些实施例中可以是网页表单配置装置1的内部存储单元，例如该网页表单配置装置1的硬盘。存储器11在另一些实施例中也可以是网页表单配置装置1的外部存储设备，例如网页表单配 置装置1上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，存储器11还可以既包括网页表单配置装置1的内部存储单元也包括外部存储设备。存储器11不仅可以用于存储安装于网页表单配置装置1的应用软件及各类数据，例如网页表单配置程序01的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。
处理器12在一些实施例中可以是一中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器或其他数据处理芯片，用于运行存储器11中存储的程序代码或处理数据，例如执行网页表单配置程序01等。
通信总线13用于实现这些组件之间的连接通信。
网络接口14可选的可以包括标准的有线接口、无线接口(如WI-FI接口)，通常用于在该装置1与其他电子设备之间建立通信连接。
可选地，该装置1还可以包括用户接口，用户接口可以包括显示器(Display)、输入单元比如键盘(Keyboard)，可选的用户接口还可以包括标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在网页表单配置装置1中处理的信息以及用于显示可视化的用户界面。
图2仅示出了具有组件11-14以及网页表单配置程序01的网页表单配置装置1，本领域技术人员可以理解的是，图1示出的结构并不构成对网页表单配置装置1的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。
在图2所示的装置1实施例中，存储器11中存储有网页表单配置程序01；处理器12执行存储器11中存储的网页表单配置程序01时实现如下步骤：
步骤一、获取显示在浏览器上的网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集。
表单主要用于网页中数据采集。通常，一个表单有三个基本组成部分：表单标签、表单域以及表单按钮。所述表单标签包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。所述表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。所述表单按钮包括提交按钮、复位按钮和一般按钮，用于将数据传送到网页服务器上的CGI脚本或者取消输入，同时可以用表单按钮来控制其他定义了处理脚本的处理工作。比如在登陆一个系统时的登录界面就是一个简单的表单，其中登录界面通过源代码进行编译，包含了表单标签，登录界面中的用户名、密码等为表单域，登录或注册点击按钮为表单按钮。
本申请较佳实施例从网页上获取所述表单组成表单集。
优选地，本申请较佳实施例中利用HTML+CSS+JavaScript(简称js)技术对所述表单集的网页源代码进行编译整合，选用的编译器为Sublime。所述 HTML指的是超文本标记语言，主要用于静态网页的编译。所述CSS指的是对编译的静态网页进行样式的调整，主要用于美化网页。所述JS是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，主要用于对静态网页进行动态展示，让所述静态网页具有交互功能。
进一步地，本申请通过下述手段对所述表单集进行代码解析处理，得到目标表单集：对所述表单集的源代码的HTML部分中的数据进行整理，将含有的相同数据进行放在同一文件中，将其他不同的数据分别放置在不同文件中，所述不同数据包含：字符串、标签、字段名等。同理，对CSS以及JS部分中的数据处理与所述HTML中的数据处理操作相同，于是，得到了含有HTML、CSS以及JS的文件集，并对所述HTML、CSS以及JS的文件集进行重新编译组合，得到所述目标表单集，并存入本地缓存中。
步骤二、通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中。
本申请较佳实施例中，所述angularjs框架是一个js框架，主要用于扩展应用程序中的HTML标签，实现网页上的动态内容。所述angularjs核心内容包含：数据双向绑定、模板化、模型-视图-视图模型(Model-View-ViewModel，简称MVVM)开发模式、注入机制以及指令。进一步地，本申请通过angularjs双向数据绑定的特性，同步目标表单集中的文档对象模型数据和网页视图数据，减少了大量数据同步代码的编写，并根据所述同步代码建立公共字段，并对所述公共字段建立数据表，存入数据库中，优选地，本申请采用的数据库为MySQL数据库，其中文档对象模型简称DOM。所述公共字段指的是含有相同属性的数据，例如表单1中含有日期、时间等属性的数据，其它表单中也含有时间、日期等属性的数据，于是，此处的日期、时间就作为公共字段。优选地，所述angularjs的数据双向绑定主要包含：digest循环以及dirty-checking(脏数据检查)，所述dirty-checking包括watch，digest，和apply。所述digest循环用于检查所述网页视图数据是否发生变化从而更新所述文档对象模型中对应的数据。所述脏数据检查用于对所述DOM中数据进行检测，并采用复制快照方法检测出所述DOM中变化的数据，通过调用apply函数对所述网页视图中对应的数据进行更新。
具体的所述数据双向绑定，同步目标表单集中的文档对象模型数据和网页视图数据的实施步骤如下所示：
a.对所述浏览器的循环监听事件添加digest循环事件，所述浏览器会一直监听页面上的事件，当用户点击一个按钮，触发操作之后，回调函数会执行，随后所述用户就可以进行任何DOM操作，等回调+函数执行完成，浏览器就会相应更新DOM数据；
b.当用户绑定某些数据到网页界面上时所述用户就会往watch队列里插入一条watch。所述watch指的是可以检测它监视的网页视图里变化的数据。当我们的模版加载完毕时，Angular解释器会寻找每个directive(指令)，生成 每个需要的watch；
c.当浏览器接收到可以被angular context处理的事件时，digest循环就会触发，这个循环包括了两个更小的循环组合起来的，一个是处理evalAsync队列，另一个是watch队列。其本质上就是digest会遍历我们的watch，
d.所述digest会问所述watch有没有属性和值发生变化了，直到所有的watch队列全部都检查过，其中，当有watch改变了，那就要循环从新触发，直到所有的watch都没有变化，这样才能保证所有的网页视图都已经不会再变化了。其中如果循环超过10次的话，那么它将抛出一个异常，为了防止无限循环，当digest循环结束时，DOM数据得到相应的变化更新；
e.通过apply事件确定是否要进入到angular context实践中，调用了就进入，不调用就不用进入，当我们使用ng-click指令的时候，angular在时间触发的时候回自动封装到一个apply调用，比如我们写一个ng-model＝‘data’，当敲入一个a时，时间会调用apply(“data＝a”)。
步骤三、数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数。
本申请较佳实施例中，所述数据模块指的是在angularjs框架中的HTML模块。所述HTML模块将会被浏览器解析到DOM中，所述DOM会成为angularjs编译器的输入，angularjs框架将会遍历所述DOM来生成自定义标签的directive(指令)，其中，所有的指令都负责针对视图来设置数据绑定。进一步地，angularjs中提供了大量的服务来提供某个特定的功能，angularjs中通过在控制器中请求所需要的服务作为参数，于是，angularjs就可以侦测到相应的服务提供给开发人员。所述注入机制用于允许开发人员可以请求需要的依赖，而不是去寻找它们。本申请较佳实施例中，利用所述生成的指令将本地缓存中的公共字段自定义标签并通过请求需要的服务以及注入机制的性能将本地缓存中的公共字段配置表单参数。优选地，在angularjs中，指令是一个DOM元素上的标签，所述指令告诉angularjs的HTML编译器(Scompile)去附加一个行为到这个DOM元素上去，这个行为可以改变所述DOM元素或者所述DOM元素的子元素。其中，所述angularjs有一套自己内置的指令，如ngBind，ngModel，ngCLass等等。同时angularjs也提供了自定义标签机制。详细的，当angularjs应用程序起来之后，会先去加载DOM树，再去匹配自定义的指令，利用directive函数来添加自定义的指令标签，其中，当需要调用自定义的指令标签时，在HTML元素上添加自定义指令名即可。具体的，常用的自定义指令标签和封装好的控件如下所示：
A.日期控件：管理信息系统中常常用到日期，通常为了格式统一可方便输入者操作，都会选择日期控件，框架中提供了日期控件，开发人员直接调用initDatetimepicker方法，然后在视图层的日期标签中将class属性设置为“datetimepicker form－control”。
B.统计图：提供了三种常用的统计图：折线图，柱状图，雷达图，分别对应相应的自定义标签为<line>，<Bar>，<Radar>。
C.下拉框：同日期控件，直接调用initOption来对下拉框进行数据调用和初始化，在视图层select标签中添加相应的class属性数。
D.带分页功能的表格控件：调用“regNgpagingDirective(app.‘grpager’)”方法，在相应的div中设置class属性为grpager。
步骤四、通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
所述模型-视图-视图模型简称MVVM模型。所述模型(Model)指数据访问层，用于负责业务逻辑和数据封装。所述视图(View)层指网页界面，只负责网页界面的显示。所述视图模型(ViewModel)将所述Model层上处理好的数据进行封装，并定义了显示层的逻辑，通知View层进行网页界面的更新，即负责Model与视图的交互。进一步地，本申请较佳实施例中，所述对所述表单参数进行解析即MVVM模式的设计思想。所述视图的设计思想为：规范编码统一，预设fnm类，将所述配置的表单参数放入所述fnm类中。所述模型设计的思想为后端数据驱动开发思想。详细的：对于业务逻辑，数据比业务逻辑更容易进行管理。所以将设计的复杂度由逻辑处理转移到数据处理中，其中，页面的显示由所要显示的数据来决定，而不是页面来决定显示什么数据，当数据需求发生变化时，页面显示可随之变化，当用户需求发生变化时，只需要修改数据模型即可，而不需要修改整个页面和业务逻辑。所述视图模型设计的思想为：用户从浏览器向服务器发送一次http连接，加载index.jsp页面，加载angular，等待页面加载完成，进行查找np－app指令，定义模板的边界，遍历模板，查找页面中的指令和绑定关系，注册监听器、执行DOM操作、从服务器获得初始化的数据，系统将会启动起来，并将模型转换成视图，在网页上呈现出相应的网页表单以及对应的表单元素。
可选地，在其他实施例中，网页表单配置程序还可以被分割为一个或者多个模块，一个或者多个模块被存储于存储器11中，并由一个或多个处理器(本实施例为处理器12)所执行以完成本申请，本申请所称的模块是指能够完成特定功能的一系列计算机程序指令段，用于描述网页表单配置程序在网页表单配置装置中的执行过程。
例如，参照图3所示，为本申请网页表单配置装置一实施例中的网页表单配置程序的程序模块示意图，该实施例中，所述网页表单配置程序可以被分割为代码解析模块10、字段建立模块20、参数配置模块30以及参数解析模块40，示例性地：
所述代码解析模块10用于：获取显示在浏览器上的网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集。
所述用字段建立模块20用于：通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中。
所述参数配置模块30用于：建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数。
所述参数解析模块40用于：通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
上述代码解析模块10、字段建立模块20、参数配置模块30以及参数解析模块40等程序模块被执行时所实现的功能或操作步骤与上述实施例大体相同，在此不再赘述。
此外，本申请实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有网页表单配置程序，所述网页表单配置程序可被一个或多个处理器执行，以实现如下操作：
获取显示在浏览器网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集；
通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中；
建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数；
通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
本申请计算机可读存储介质具体实施方式与上述网页表单配置装置和方法各实施例基本相同，在此不作累述。
需要说明的是，上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。并且本文中的术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是 利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (20)

  1. 一种网页表单配置方法，其特征在于，所述方法包括：
    获取显示在浏览器网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集；
    通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中；
    建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数；
    通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
  2. 如权利要求1所述的网页表单配置方法，其特征在于，所述扩展处理，包括：
    利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，得到所述数据同步代码。
  3. 如权利要求2所述的网页表单配置方法，其特征在于，所述angularjs的数据双向绑定包含digest循环以及脏数据检查，所述digest循环用于检查所述网页视图数据是否发生变化从而更新所述文档对象模型中对应的数据，所述脏数据检查用于对所述文档对象模型中数据进行检测。
  4. 如权利要求3所述的网页表单配置方法，其特征在于，所述利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，包括：
    通过对浏览器的循环监听事件添加digest循环事件检查所述网页视图中数据是否发生变化从而更新所述文档对象模型中对应的数据；
    利用脏数据检查机制对所述文档对象模型中数据进行检测，采用复制快照方法检测出所述文档对象模型中变化的数据，并通过调用apply函数对所述网页视图中对应的数据进行更新。
  5. 如权利要求1所述的网页表单配置方法，其特征在于，所述通过建立数据模块生成指令，包括：
    通过浏览器将angularjs框架中的HTML模块解析到文档对象模型中，并利用angularjs框架遍历所述文档对象模型生成自定义标签的指令，其中，所述数据模块为angularjs框架中的HTML模块。
  6. 如权利要求1至5中任意一项所述的网页表单配置方法，其特征在于，所述通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素，包括：
    在所述模型-视图-视图模型中，预设fnm类，将所述表单参数输入至所述fnm类中，其中，所述fnm类用于规范编码统一；
    在所述模型-视图-视图模型中，采用后端数据驱动将所述表单参数的数据由逻辑处理转移到数据处理中；
    在所述模型-视图-视图模型中，当用户从所述浏览器向网页服务器发送一次http连接时，加载index.jsp页面，进行查找np－app指令，得到所述index.jsp页面中的指令和绑定关系，从所述网页服务器获得初始化的表单参数的数据，从而在网页上呈现出相应的网页表单以及对应的表单元素。
  7. 如权利要求2所述的网页表单配置方法，其特征在于，所述对所述表单集进行代码解析处理，得到目标表单集包括：
    对所述表单集的源代码的HTML部分中的数据进行整理，将含有的相同数据进行放在同一文件中，将其他不同的数据分别放置在不同文件中，所述不同数据包含字符串、标签、字段名，对所述HTML的文件集进行重新编译组合，得到所述目标表单集。
  8. 一种网页表单配置装置，其特征在于，所述装置包括存储器和处理器，所述存储器上存储有可在所述处理器上运行的网页表单配置程序，所述网页表单配置程序被所述处理器执行时实现如下步骤：
    获取显示在浏览器网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集；
    通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中；
    建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数；
    通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
  9. 如权利要求8所述的网页表单配置装置，其特征在于，所述扩展处理，包括：
    利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，得到所述数据同步代码。
  10. 如权利要求9所述的网页表单配置装置，其特征在于，所述angularjs的数据双向绑定包含digest循环以及脏数据检查，所述digest循环用于检查所述网页视图数据是否发生变化从而更新所述文档对象模型中对应的数据，所述脏数据检查用于对所述文档对象模型中数据进行检测。
  11. 如权利要求10所述的网页表单配置装置，其特征在于，所述利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，包括：
    通过对浏览器的循环监听事件添加digest循环事件检查所述网页视图中数据是否发生变化从而更新所述文档对象模型中对应的数据；
    利用脏数据检查机制对所述文档对象模型中数据进行检测，采用复制快照方法检测出所述文档对象模型中变化的数据，并通过调用apply函数对所述 网页视图中对应的数据进行更新。
  12. 如权利要求8所述的网页表单配置装置，其特征在于，所述通过建立数据模块生成指令，包括：
    通过浏览器将angularjs框架中的HTML模块解析到文档对象模型中，并利用angularjs框架遍历所述文档对象模型生成自定义标签的指令，其中，所述数据模块为angularjs框架中的HTML模块。
  13. 如权利要求8至12中任意一项所述的网页表单配置装置，其特征在于，所述通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素，包括：
    在所述模型-视图-视图模型中，预设fnm类，将所述表单参数输入至所述fnm类中，其中，所述fnm类用于规范编码统一；
    在所述模型-视图-视图模型中，采用后端数据驱动将所述表单参数的数据由逻辑处理转移到数据处理中；
    在所述模型-视图-视图模型中，当用户从所述浏览器向网页服务器发送一次http连接时，加载index.jsp页面，进行查找np－app指令，得到所述index.jsp页面中的指令和绑定关系，从所述网页服务器获得初始化的表单参数的数据，从而在网页上呈现出相应的网页表单以及对应的表单元素。
  14. 如权利要求9所述的网页表单配置装置，其特征在于，所述对所述表单集进行代码解析处理，得到目标表单集包括：
    对所述表单集的源代码的HTML部分中的数据进行整理，将含有的相同数据进行放在同一文件中，将其他不同的数据分别放置在不同文件中，所述不同数据包含字符串、标签、字段名，对所述HTML的文件集进行重新编译组合，得到所述目标表单集。
  15. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有网页表单配置程序，所述网页表单配置程序可被一个或者多个处理器执行，以实现如下所述的网页表单配置方法的步骤：
    获取显示在浏览器网页上的表单集，对所述表单集进行代码解析处理，得到目标表单集；
    通过angularjs框架对所述目标表单集进行扩展处理，得到所述目标表单集中的数据同步代码，根据所述数据同步代码建立所述目标表单集的公共字段，并对所述公共字段建立数据表，存入数据库中；
    建立数据模块生成指令，利用所述指令对所述公共字段建立自定义标签，并利用所述angularjs框架的注入机制对所述公共字段配置表单参数；
    通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素。
  16. 如权利要求15所述的计算机可读存储介质，其特征在于，所述扩展处理，包括：
    利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，得到所述数据同步代码。
  17. 如权利要求16所述的计算机可读存储介质，其特征在于，所述angularjs的数据双向绑定包含digest循环以及脏数据检查，所述digest循环用于检查所述网页视图数据是否发生变化从而更新所述文档对象模型中对应的数据，所述脏数据检查用于对所述文档对象模型中数据进行检测。
  18. 如权利要求17所述的计算机可读存储介质，其特征在于，所述利用所述angularjs框架的数据双向绑定特性，同步所述目标表单集中的文档对象模型数据和网页视图数据，包括：
    通过对浏览器的循环监听事件添加digest循环事件检查所述网页视图中数据是否发生变化从而更新所述文档对象模型中对应的数据；
    利用脏数据检查机制对所述文档对象模型中数据进行检测，采用复制快照方法检测出所述文档对象模型中变化的数据，并通过调用apply函数对所述网页视图中对应的数据进行更新。
  19. 如权利要求15所述的计算机可读存储介质，其特征在于，所述通过建立数据模块生成指令，包括：
    通过浏览器将angularjs框架中的HTML模块解析到文档对象模型中，并利用angularjs框架遍历所述文档对象模型生成自定义标签的指令，其中，所述数据模块为angularjs框架中的HTML模块。
  20. 如权利要求15至19中任意一项所述的计算机可读存储介质，其特征在于，所述通过预设的模型-视图-视图模型对所述表单参数进行解析，在网页上呈现出相应的网页表单以及对应的表单元素，包括：
    在所述模型-视图-视图模型中，预设fnm类，将所述表单参数输入至所述fnm类中，其中，所述fnm类用于规范编码统一；
    在所述模型-视图-视图模型中，采用后端数据驱动将所述表单参数的数据由逻辑处理转移到数据处理中；
    在所述模型-视图-视图模型中，当用户从所述浏览器向网页服务器发送一次http连接时，加载index.jsp页面，进行查找np－app指令，得到所述index.jsp页面中的指令和绑定关系，从所述网页服务器获得初始化的表单参数的数据，从而在网页上呈现出相应的网页表单以及对应的表单元素。
PCT/CN2019/117348 2019-07-12 2019-11-12 网页表单配置方法、装置及计算机可读存储介质 WO2021008030A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910628540.7 2019-07-12
CN201910628540.7A CN110442816B (zh) 2019-07-12 2019-07-12 网页表单配置方法、装置及计算机可读存储介质

Publications (1)

Publication Number Publication Date
WO2021008030A1 true WO2021008030A1 (zh) 2021-01-21

Family

ID=68430389

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/117348 WO2021008030A1 (zh) 2019-07-12 2019-11-12 网页表单配置方法、装置及计算机可读存储介质

Country Status (2)

Country Link
CN (1) CN110442816B (zh)
WO (1) WO2021008030A1 (zh)

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112862323A (zh) * 2021-02-18 2021-05-28 泰华智慧产业集团股份有限公司 智慧城市评价指标展示方法及装置
CN113297831A (zh) * 2021-06-03 2021-08-24 通号智慧城市研究设计院有限公司 一种Excel生成可校验报表网页的方法和系统
CN113468185A (zh) * 2021-07-21 2021-10-01 山谷网安科技股份有限公司 一种移动端智能表单的快速自动化生成方法
CN113505326A (zh) * 2021-07-08 2021-10-15 傲普(上海)新能源有限公司 一种基于http协议族的动态编码数据传输控制方法
CN113641678A (zh) * 2021-08-25 2021-11-12 杭州每刻科技有限公司 一种基于多维表单的动态服务配置方法和系统
CN113704614A (zh) * 2021-08-30 2021-11-26 康键信息技术（深圳）有限公司 基于用户画像的页面生成方法、装置、设备及介质
CN114185528A (zh) * 2021-12-20 2022-03-15 四川启睿克科技有限公司 一种自定义表单控件间配置执行的方法
CN114218052A (zh) * 2021-11-11 2022-03-22 深圳前海微众银行股份有限公司 一种业务交互图生成方法、装置、设备及存储介质
CN114327463A (zh) * 2021-12-31 2022-04-12 浙江吉利控股集团有限公司 网页表单自动生成方法、装置、介质、设备及程序产品
CN114428771A (zh) * 2021-12-29 2022-05-03 北京明易达科技股份有限公司 基于表单设计的通用数据库模型生成方法、装置和设备
CN114661279A (zh) * 2022-04-11 2022-06-24 平安资产管理有限责任公司 提取页面组件源码方法、系统和计算机设备
CN115826950A (zh) * 2022-11-24 2023-03-21 内蒙古欣荣惠信息技术有限公司 在线表单页面开发应用系统及数据处理方法
CN116501318A (zh) * 2023-06-27 2023-07-28 蘑菇车联信息科技有限公司 表单创建方法、装置、电子设备及计算机可读存储介质
CN117193755A (zh) * 2023-03-22 2023-12-08 山东浪潮爱购云链信息科技有限公司 一种基于动态表单生成的代码复用方法、系统及存储介质

Families Citing this family (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111078220B (zh) * 2019-12-19 2023-04-21 浪潮云信息技术股份公司 一种前端状态变更管理的实现方法及系统
CN111222070B (zh) * 2019-12-30 2023-07-21 深圳市五谷网络科技有限公司 数据处理方法、装置、设备及存储介质
CN111680026B (zh) * 2020-05-11 2022-07-08 中国空气动力研究与发展中心 一种基于mvvm模式的气动数据分析方法
CN111782213A (zh) * 2020-06-30 2020-10-16 贵州北斗领航科技有限责任公司 基于dom的动态控制页面生成系统
CN112068839A (zh) * 2020-07-03 2020-12-11 合肥森亿智能科技有限公司 基于JavaScript的自动计算变量方法、系统以及终端
CN112068829A (zh) * 2020-07-31 2020-12-11 广东飞企互联科技股份有限公司 单文本输入控件的生成方法、装置、系统、设备以及介质
CN112162749A (zh) * 2020-08-20 2021-01-01 福建升腾资讯有限公司 一种基于Angular框架封装表格控件的方法、装置、设备和介质
CN112711414B (zh) * 2020-12-28 2022-10-11 浪潮通用软件有限公司 一种表单界面适配展现方法、装置及存储介质
CN114357959A (zh) * 2021-12-17 2022-04-15 深圳市金证前海金融科技有限公司 表单编辑方法、装置、设备及存储介质
CN114138425B (zh) * 2022-02-07 2022-06-10 广州市玄武无线科技股份有限公司 一种基于公式生成表单的方法及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105760440A (zh) * 2016-02-02 2016-07-13 广州市科南软件有限公司 在线表单设计器的实现方法及其系统
CN106933571A (zh) * 2017-02-16 2017-07-07 广州视源电子科技股份有限公司 白板文档存储方法及系统
CN107807913A (zh) * 2017-11-16 2018-03-16 金航数码科技有限责任公司 一种基于web的电子表单设计系统及方法
CN107832350A (zh) * 2017-10-20 2018-03-23 金蝶软件（中国）有限公司 一种web数据双向绑定的方法、装置、终端及存储介质
US20180157627A1 (en) * 2016-12-06 2018-06-07 Bank Of America Corporation Tool for providing actionable functionality on a website
CN109933571A (zh) * 2019-01-23 2019-06-25 平安科技（深圳）有限公司 数据库设计文档生成方法、装置及计算机可读存储介质

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105809375A (zh) * 2016-05-19 2016-07-27 四川物联亿达科技有限公司 一种扩展表单设计集成方法
CN106776800B (zh) * 2016-11-22 2020-09-11 山东中创软件工程股份有限公司 AngularJS框架的页面生成方法、装置及系统

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105760440A (zh) * 2016-02-02 2016-07-13 广州市科南软件有限公司 在线表单设计器的实现方法及其系统
US20180157627A1 (en) * 2016-12-06 2018-06-07 Bank Of America Corporation Tool for providing actionable functionality on a website
CN106933571A (zh) * 2017-02-16 2017-07-07 广州视源电子科技股份有限公司 白板文档存储方法及系统
CN107832350A (zh) * 2017-10-20 2018-03-23 金蝶软件（中国）有限公司 一种web数据双向绑定的方法、装置、终端及存储介质
CN107807913A (zh) * 2017-11-16 2018-03-16 金航数码科技有限责任公司 一种基于web的电子表单设计系统及方法
CN109933571A (zh) * 2019-01-23 2019-06-25 平安科技（深圳）有限公司 数据库设计文档生成方法、装置及计算机可读存储介质

Cited By (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112862323A (zh) * 2021-02-18 2021-05-28 泰华智慧产业集团股份有限公司 智慧城市评价指标展示方法及装置
CN113297831A (zh) * 2021-06-03 2021-08-24 通号智慧城市研究设计院有限公司 一种Excel生成可校验报表网页的方法和系统
CN113297831B (zh) * 2021-06-03 2024-06-04 通号智慧城市研究设计院有限公司 一种Excel生成可校验报表网页的方法和系统
CN113505326A (zh) * 2021-07-08 2021-10-15 傲普(上海)新能源有限公司 一种基于http协议族的动态编码数据传输控制方法
CN113505326B (zh) * 2021-07-08 2023-04-25 傲普(上海)新能源有限公司 一种基于http协议族的动态编码数据传输控制方法
CN113468185A (zh) * 2021-07-21 2021-10-01 山谷网安科技股份有限公司 一种移动端智能表单的快速自动化生成方法
CN113641678A (zh) * 2021-08-25 2021-11-12 杭州每刻科技有限公司 一种基于多维表单的动态服务配置方法和系统
CN113704614A (zh) * 2021-08-30 2021-11-26 康键信息技术（深圳）有限公司 基于用户画像的页面生成方法、装置、设备及介质
CN114218052B (zh) * 2021-11-11 2023-08-29 深圳前海微众银行股份有限公司 一种业务交互图生成方法、装置、设备及存储介质
CN114218052A (zh) * 2021-11-11 2022-03-22 深圳前海微众银行股份有限公司 一种业务交互图生成方法、装置、设备及存储介质
CN114185528A (zh) * 2021-12-20 2022-03-15 四川启睿克科技有限公司 一种自定义表单控件间配置执行的方法
CN114185528B (zh) * 2021-12-20 2024-04-12 四川启睿克科技有限公司 一种自定义表单控件间配置执行的方法
CN114428771A (zh) * 2021-12-29 2022-05-03 北京明易达科技股份有限公司 基于表单设计的通用数据库模型生成方法、装置和设备
CN114428771B (zh) * 2021-12-29 2023-09-15 北京明易达科技股份有限公司 基于表单设计的通用数据库模型生成方法、装置和设备
CN114327463A (zh) * 2021-12-31 2022-04-12 浙江吉利控股集团有限公司 网页表单自动生成方法、装置、介质、设备及程序产品
CN114661279A (zh) * 2022-04-11 2022-06-24 平安资产管理有限责任公司 提取页面组件源码方法、系统和计算机设备
CN115826950B (zh) * 2022-11-24 2023-09-12 内蒙古欣荣惠信息技术有限公司 在线表单页面开发应用系统及数据处理方法
CN115826950A (zh) * 2022-11-24 2023-03-21 内蒙古欣荣惠信息技术有限公司 在线表单页面开发应用系统及数据处理方法
CN117193755A (zh) * 2023-03-22 2023-12-08 山东浪潮爱购云链信息科技有限公司 一种基于动态表单生成的代码复用方法、系统及存储介质
CN116501318B (zh) * 2023-06-27 2023-11-28 蘑菇车联信息科技有限公司 表单创建方法、装置、电子设备及计算机可读存储介质
CN116501318A (zh) * 2023-06-27 2023-07-28 蘑菇车联信息科技有限公司 表单创建方法、装置、电子设备及计算机可读存储介质

Also Published As

Publication number Publication date
CN110442816A (zh) 2019-11-12
CN110442816B (zh) 2024-01-30

Similar Documents

Publication Publication Date Title
WO2021008030A1 (zh) 网页表单配置方法、装置及计算机可读存储介质
US11561846B2 (en) API notebook tool
US11366676B2 (en) Embedded user assistance for software applications
JP7316349B2 (ja) カスタマイズ可能な企業自動化テストフレームワーク
CN100421375C (zh) 数据共享系统及方法
Ceri et al. Model-driven development of context-aware web applications
KR101099272B1 (ko) 외부 프로그램 테마를 사용하는 웹페이지 렌더링을 위한 테마 적용 방법
JP5439190B2 (ja) Ｉｔ向けサーバベースのウェブアプリケーションを作成するための方法およびシステム
US8527860B1 (en) System and method for exposing the dynamic web server-side
US9645989B2 (en) Techniques to generate custom electronic forms using custom content
WO2019072201A1 (zh) 网页内容提取方法以及终端设备
US11822870B2 (en) Customizable user interface layouts
US20050076294A1 (en) Method and apparatus for supporting layout management in a web presentation architecture
US10417317B2 (en) Web page profiler
US20210232755A1 (en) Machine first approach for identifying accessibility, non-compliances, remediation techniques and fixing at run-time
CN117193728A (zh) 软件即服务平台的开发方法及装置
US8938491B1 (en) System and method for secure binding of client calls and server functions
CN111158777B (zh) 组件调用方法、装置及计算机可读存储介质
US20030182458A1 (en) Generating a decoupled presentation layer in an application
US11113359B1 (en) Method and system for navigation control
US20050076329A1 (en) Method and apparatus for supporting configuration of a web application in a web presentation architecture
Cosmina et al. Spring Web with AJAX
Berdie et al. A case-study about a web business application implemented in different SAP UI technologies
Verzani gWidgetsWWW: Creating Interactive Web Pages within R
Motti et al. Automatic Evaluation of Accessibility in RIA

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19937477

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19937477

Country of ref document: EP

Kind code of ref document: A1