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

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

Info

Publication number
CN110442816A
CN110442816A CN201910628540.7A CN201910628540A CN110442816A CN 110442816 A CN110442816 A CN 110442816A CN 201910628540 A CN201910628540 A CN 201910628540A CN 110442816 A CN110442816 A CN 110442816A
Authority
CN
China
Prior art keywords
data
view
model
webpage
web
Prior art date
Legal status (The legal status 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 status listed.)
Granted
Application number
CN201910628540.7A
Other languages
English (en)
Other versions
CN110442816B (zh
Inventor
全力
孙雨
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
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 Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Priority to CN201910628540.7A priority Critical patent/CN110442816B/zh
Priority to PCT/CN2019/117348 priority patent/WO2021008030A1/zh
Publication of CN110442816A publication Critical patent/CN110442816A/zh
Application granted granted Critical
Publication of CN110442816B publication Critical patent/CN110442816B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

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

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

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

Description

网页表单配置方法、装置及计算机可读存储介质
技术领域
本发明涉及大数据技术领域,尤其涉及一种基于知识内容和用户行为协同的网页表单配置方法、装置及计算机可读存储介质。
背景技术
表单网页是一个网站和访问者开展互动的窗口,一个网页表单可以将用户输入的数据,发送到服务器进行处理,特别是经常被用在联系表单-用户输入信息然后发送到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 (10)

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

Priority Applications (2)

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

Applications Claiming Priority (1)

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

Publications (2)

Publication Number Publication Date
CN110442816A true CN110442816A (zh) 2019-11-12
CN110442816B CN110442816B (zh) 2024-01-30

Family

ID=68430389

Family Applications (1)

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

Country Status (2)

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

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111078220A (zh) * 2019-12-19 2020-04-28 浪潮云信息技术有限公司 一种前端状态变更管理的实现方法及系统
CN111222070A (zh) * 2019-12-30 2020-06-02 深圳市五谷网络科技有限公司 数据处理方法、装置、设备及存储介质
CN111680026A (zh) * 2020-05-11 2020-09-18 中国空气动力研究与发展中心 一种基于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框架封装表格控件的方法、装置、设备和介质
CN112711414A (zh) * 2020-12-28 2021-04-27 山东浪潮通软信息科技有限公司 一种表单界面适配展现方法、装置及存储介质
CN114138425A (zh) * 2022-02-07 2022-03-04 广州市玄武无线科技股份有限公司 一种基于公式生成表单的方法及装置
CN114185528A (zh) * 2021-12-20 2022-03-15 四川启睿克科技有限公司 一种自定义表单控件间配置执行的方法
CN114428771A (zh) * 2021-12-29 2022-05-03 北京明易达科技股份有限公司 基于表单设计的通用数据库模型生成方法、装置和设备

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112862323A (zh) * 2021-02-18 2021-05-28 泰华智慧产业集团股份有限公司 智慧城市评价指标展示方法及装置
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 深圳前海微众银行股份有限公司 一种业务交互图生成方法、装置、设备及存储介质
CN115826950B (zh) * 2022-11-24 2023-09-12 内蒙古欣荣惠信息技术有限公司 在线表单页面开发应用系统及数据处理方法
CN117193755A (zh) * 2023-03-22 2023-12-08 山东浪潮爱购云链信息科技有限公司 一种基于动态表单生成的代码复用方法、系统及存储介质
CN116501318B (zh) * 2023-06-27 2023-11-28 蘑菇车联信息科技有限公司 表单创建方法、装置、电子设备及计算机可读存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105760440A (zh) * 2016-02-02 2016-07-13 广州市科南软件有限公司 在线表单设计器的实现方法及其系统
CN105809375A (zh) * 2016-05-19 2016-07-27 四川物联亿达科技有限公司 一种扩展表单设计集成方法
CN106776800A (zh) * 2016-11-22 2017-05-31 山东中创软件工程股份有限公司 AngularJS框架的页面生成方法、装置及系统

Family Cites Families (5)

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

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105760440A (zh) * 2016-02-02 2016-07-13 广州市科南软件有限公司 在线表单设计器的实现方法及其系统
CN105809375A (zh) * 2016-05-19 2016-07-27 四川物联亿达科技有限公司 一种扩展表单设计集成方法
CN106776800A (zh) * 2016-11-22 2017-05-31 山东中创软件工程股份有限公司 AngularJS框架的页面生成方法、装置及系统

Cited By (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111078220B (zh) * 2019-12-19 2023-04-21 浪潮云信息技术股份公司 一种前端状态变更管理的实现方法及系统
CN111078220A (zh) * 2019-12-19 2020-04-28 浪潮云信息技术有限公司 一种前端状态变更管理的实现方法及系统
CN111222070A (zh) * 2019-12-30 2020-06-02 深圳市五谷网络科技有限公司 数据处理方法、装置、设备及存储介质
CN111222070B (zh) * 2019-12-30 2023-07-21 深圳市五谷网络科技有限公司 数据处理方法、装置、设备及存储介质
CN111680026A (zh) * 2020-05-11 2020-09-18 中国空气动力研究与发展中心 一种基于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框架封装表格控件的方法、装置、设备和介质
CN112711414A (zh) * 2020-12-28 2021-04-27 山东浪潮通软信息科技有限公司 一种表单界面适配展现方法、装置及存储介质
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 北京明易达科技股份有限公司 基于表单设计的通用数据库模型生成方法、装置和设备
CN114138425A (zh) * 2022-02-07 2022-03-04 广州市玄武无线科技股份有限公司 一种基于公式生成表单的方法及装置

Also Published As

Publication number Publication date
WO2021008030A1 (zh) 2021-01-21
CN110442816B (zh) 2024-01-30

Similar Documents

Publication Publication Date Title
CN110442816A (zh) 网页表单配置方法、装置及计算机可读存储介质
US11182535B2 (en) Configuring a page for drag and drop arrangement of content artifacts in a page development tool
CN100421375C (zh) 数据共享系统及方法
CN109902220B (zh) 网页信息获取方法、装置和计算机可读存储介质
US7614052B2 (en) System and method for developing and deploying computer applications over a network
WO2019072201A1 (zh) 网页内容提取方法以及终端设备
CN107577509A (zh) 一种加载应用界面的方法、终端及计算机可读存储介质
CN109522018A (zh) 页面处理方法、装置及存储介质
CN103019538A (zh) 一种在终端中实现应用界面的方法和系统
CN103092936A (zh) 一种物联网动态页面实时信息采集方法
CN109976840A (zh) 一种基于前后台分离平台下实现多语言自动适配的方法及系统
CN109814858A (zh) 基于Vue架构的WEB前端通用UI组件库
CN108874464A (zh) 中间件自动扫描装配方法、装置及存储介质
CN114996619A (zh) 一种页面显示的方法、装置、计算机设备及存储介质
CN103559097B (zh) 一种浏览器中进程间通信的方法、装置和浏览器
Wei et al. Partial loading of XMI models
CN103853717B (zh) 网络爬虫系统
US8938491B1 (en) System and method for secure binding of client calls and server functions
CN111158777B (zh) 组件调用方法、装置及计算机可读存储介质
US20050197157A1 (en) System enabling easy application development on mobile devices
CN101441628A (zh) 基于桌面应用程序的智能客户端网站系统
KR101228877B1 (ko) 웹 디자인을 이용한 동적 웹 사이트 개발 장치 및 방법
EP3852032A1 (en) Machine first approach for identifying accessibility, non-compliances, remediation techniques and fixing at run-time
CN107077484B (zh) 生成应用的网络浏览器视图
CN103246962A (zh) 企业综合信息管理系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant