CN115080046A - 一种页面设计中多组件抽象关联融合方法和装置 - Google Patents

一种页面设计中多组件抽象关联融合方法和装置 Download PDF

Info

Publication number
CN115080046A
CN115080046A CN202210980794.7A CN202210980794A CN115080046A CN 115080046 A CN115080046 A CN 115080046A CN 202210980794 A CN202210980794 A CN 202210980794A CN 115080046 A CN115080046 A CN 115080046A
Authority
CN
China
Prior art keywords
component
fusion
abstract
library
components
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
CN202210980794.7A
Other languages
English (en)
Other versions
CN115080046B (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.)
Zhejiang Lab
Original Assignee
Zhejiang Lab
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 Zhejiang Lab filed Critical Zhejiang Lab
Priority to CN202210980794.7A priority Critical patent/CN115080046B/zh
Publication of CN115080046A publication Critical patent/CN115080046A/zh
Application granted granted Critical
Publication of CN115080046B publication Critical patent/CN115080046B/zh
Priority to US18/360,794 priority patent/US20240061993A1/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/30—Semantic analysis
    • G06F40/35—Discourse or dialogue representation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • G—PHYSICS
    • G10—MUSICAL INSTRUMENTS; ACOUSTICS
    • G10L—SPEECH ANALYSIS TECHNIQUES OR SPEECH SYNTHESIS; SPEECH RECOGNITION; SPEECH OR VOICE PROCESSING TECHNIQUES; SPEECH OR AUDIO CODING OR DECODING
    • G10L15/00—Speech recognition
    • G10L15/22—Procedures used during a speech recognition process, e.g. man-machine dialogue
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/20—Natural language analysis
    • G06F40/279—Recognition of textual entities
    • G—PHYSICS
    • G10—MUSICAL INSTRUMENTS; ACOUSTICS
    • G10L—SPEECH ANALYSIS TECHNIQUES OR SPEECH SYNTHESIS; SPEECH RECOGNITION; SPEECH OR VOICE PROCESSING TECHNIQUES; SPEECH OR AUDIO CODING OR DECODING
    • G10L15/00—Speech recognition
    • G10L15/22—Procedures used during a speech recognition process, e.g. man-machine dialogue
    • G10L2015/223—Execution procedure of a spoken command

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • Artificial Intelligence (AREA)
  • General Health & Medical Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Acoustics & Sound (AREA)
  • Multimedia (AREA)
  • Computing Systems (AREA)
  • Document Processing Apparatus (AREA)
  • Machine Translation (AREA)

Abstract

本发明公开了一种页面设计中多组件抽象关联融合方法和装置，包括以下步骤：步骤S1：构建需求，经语音识别方法对所述构建需求进行解析，得到自然语言文本；步骤S2：通过预定义组件库、规则库和关系库构建抽象模型，所述抽象模型进行组件融合得到融合组件的JSON结构；步骤S3：利用渲染函数将所述融合组件的JSON结构转义为虚拟DOM，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果；步骤S4：创建真实DOM结构，并插入到真实DOM节点上，进而实现融合组件在视图上的显示。本发明通过劫持数据在组件间流转，对组件绑定数据可进行自动关联，自动为融合组件配置属性与事件监听，提高前端项目代码重用率，减化应用开发难度，有效提高前端开发的效率。

Description

一种页面设计中多组件抽象关联融合方法和装置
技术领域
本发明涉及一种互联网技术领域，尤其涉及发明一种页面设计中多组件抽象关联融合方法和装置。
背景技术
伴随着互联网应用的增多以及功能需求的增加，前端工作量和复杂度日益剧增。传统的前端开发模式是针对某个特定的需求定制化开发，当需求变更需要重构业务逻辑代码，即使有需求变更相似，可以抽象视图层对页面样式进行有效的复用，但开发人员仍然需要手动处理页面逻辑，数据传递，路由跳转等问题。因此，在页面设计中，自动处理页面逻辑仍然是一个待解决问题。
目前发明里页面自动构建主要使用的是组件构建，根据目标页面构建参数，确定组件层级布局关系等，最后集成到同一页面中，进一步实现页面的自动化构建。
现有技术中对组件化构建方式以下几种问题，一是在组件获取方式上大多数是使用了结构化模板，开发人员需基于现有规则配置构建参数；二是，组件集合只能处理层级、布局与样式， 或针对特有业务集成部分组件，而没能将多组件数据流转，事件响应等做抽象关联；三是在挂载方面，需要自行处理挂载。或返回一个单一的代码文件，或返回的是一个页面结构，需要二次解析。
综上，本发明提出一种页面设计中多组件抽象关联融合方法和装置，通过语音输入获取原始页面构建需求；通过数据劫持有效解决多组件融合不能处理页 面逻辑，数据传递的问题；最后基于映射关系自动完成构建组件渲染挂载。
发明内容
本发明为了解决上述技术问题，提供一种页面设计中多组件抽象关联融合方法和装置。
本发明采用的技术方案如下：
一种页面设计中多组件抽象关联融合方法，包括以下步骤：
步骤S1：根据交互式语音输入获取前端页面构建需求，经语音识别方法对所述构建需求进行解析，得到自然语言文本；
步骤S2：通过预定义组件库、规则库和关系库构建抽象模型，所述抽象模型进行组件融合得到融合组件的JSON结构；
步骤S3：利用渲染函数将所述融合组件的JSON结构转义为虚拟DOM，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果；
步骤S4：在挂载阶段将所述融合组件绘制结果创建真实DOM结构，并插入到真实DOM节点上，进而实现融合组件在视图上的显示。
进一步地，所述步骤S1中所述构建需求是页面的自然语言描述，包括所需组件、属性与事件、数据关系流转和/或样式逻辑；所述构建需求通过问答的模式获取，用户通过语音或自然语言输入，输入后的语音或自然语言经语音识别算法提取出构建需求，得到表单组件、视图组件、导航组件和/或指定类型组件。
进一步地，所述步骤S2具体包括以下子步骤：
步骤S21：预定义组件库，所述组件库包括视图组件、表单组件、基础组件、导航组件和/或定制组件，所述组件库用于将所述自然语言文本中的组件名映射出视图层的组件；
步骤S22：预定义规则库，所述规则库包括数据层逻辑，所述数据层逻辑分为固有规则和基于所述构建需求建立的规则；
步骤S23：预定义关系库，所述关系库用于对所述自然语言文本中的组件间关系进行关联绑定，为组件注册事件触发回调；
步骤S24：利用所述组件库对所述自然语言文本中进行实体抽取，当匹配发现所述自然语言文本中出现组件库实体，则所述组件库实体被解析为对应的组件；
步骤S25：根据所述构建需求为组件绑定值添加处理规则，利用所述步骤S24解析的组件结果，在所述规则库中匹配并劫持所述组件绑定值后初始化；
步骤S26：根据所述组件库暴露出的绑定值以及所述规则库中已完成的数据初始化操作，将组件与规则的依赖关系通过映射收集起来，通过注册事件回调的方式，为组件提供数据逻辑处理，实现数据在多组件之间的流转关联；
步骤S27：将步骤S24-步骤S26处理的单组件关系进行整合，利用预设好的JSON结构来表示融合后的组件关系，得到融合组件的JSON结构表示。
进一步地，所述步骤S22中所述固有规则包括属性、样式、层级解析、数据劫持和/或上下文处理。
进一步地，所述步骤S25中所述初始化包括为组件的绑定值添加默认值、添加所述构建需求中定义的处理规则、添加处理组件的层级关系和/或添加处理绑定值上下文关系，为数据在组件间流转及构建组建间关联提供依据。
进一步地，所述步骤S3具体包括以下子步骤：
步骤S31：根据所述规则库中预定义的虚拟dom模板，将所述融合组件的JSON结构转化为虚拟DOM结构；
步骤S32：从所述融合组件的JSON结构中获取组件绑定值、样式和/或事件回调，为所述虚拟DOM结构自动填充属性与事件，得到抽象语法树；
步骤S33：利用渲染函数将所述抽象语法树向外暴露，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果。
进一步地，所述步骤S4具体包括以下子步骤：
步骤S41：根据所述构建需求获取融合组件需要插入到页面的位置；
步骤S42：根据所述规则库中预定义方法，使用浏览器内置的DOM操作应用程序接口，完成将融合组件的抽象语法树转化为真实DOM结构；
步骤S43：根据所述步骤S41获取的页面位置，将所述真实DOM结构插入，进而完成挂载的操作。
进一步地，所述步骤S42中所述预定义方法为基于树形结构的深度遍历算法。
本发明还提供一种页面设计中多组件抽象关联融合装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述一个或多个处理器执行所述可执行代码时，用于实现上述实施例任一项所述的一种页面设计中多组件抽象关联融合方法。
本发明还提供一种计算机可读存储介质，其特征在于，其上存储有程序，该程序被处理器执行时，实现上述实施例任一项所述的一种页面设计中多组件抽象关联融合方法。
本发明的有益效果是：
1、通过劫持数据在组件间流转，对组件绑定数据可进行自动关联。
2、抽象出一种融合组件，根据页面的自然语言描述解析组件结构，自动为融合组件配置属性与事件监听，使前端开发人员可以使用简单的构建方式，即可形成页面组件逻辑。
3、提高前端项目代码重用率，节省开发时间，减化应用开发难度，有效提高了前端开发的效率。
附图说明
图1为本发明一种页面设计中多组件抽象关联融合方法的流程示意图；
图2为本发明实施例抽象关系建模过程示例图；
图3为本发明实施例融合组件绘制过程示例图；
图4为本发明实施例融合组件内部数据流转示意图；
图5为本发明一种页面设计中多组件抽象关联融合装置的结构图。
具体实施方式
以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本发明及其应用或使用的任何限制。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
参见图1，一种页面设计中多组件抽象关联融合方法，包括以下步骤：
步骤S1：根据交互式语音输入获取前端页面构建需求，经语音识别方法对所述构建需求进行解析，得到自然语言文本；
所述构建需求是页面的自然语言描述，包括所需组件、属性与事件、数据关系流转和/或样式逻辑；所述构建需求通过问答的模式获取，用户通过语音或自然语言输入，输入后的语音或自然语言经语音识别算法提取出构建需求，得到表单组件、视图组件、导航组件和/或指定类型组件。
步骤S2：通过预定义组件库、规则库和关系库构建抽象模型，所述抽象模型进行组件融合得到融合组件的JSON结构；
步骤S21：预定义组件库，所述组件库包括视图组件、表单组件、基础组件、导航组件和/或定制组件，所述组件库用于将所述自然语言文本中的组件名映射出视图层的组件；
步骤S22：预定义规则库，所述规则库包括数据层逻辑，所述数据层逻辑分为固有规则和基于所述构建需求建立的规则；
所述固有规则包括属性、样式、层级解析、数据劫持和/或上下文处理。
步骤S23：预定义关系库，所述关系库用于对所述自然语言文本中的组件间关系进行关联绑定，为组件注册事件触发回调；
步骤S24：利用所述组件库对所述自然语言文本中进行实体抽取，当匹配发现所述自然语言文本中出现组件库实体，则所述组件库实体被解析为对应的组件；
步骤S25：根据所述构建需求为组件绑定值添加处理规则，利用所述步骤S24解析的组件结果，在所述规则库中匹配并劫持所述组件绑定值后初始化；
所述步骤S25中所述初始化包括为组件的绑定值添加默认值、添加所述构建需求中定义的处理规则、添加处理组件的层级关系和/或添加处理绑定值上下文关系，为数据在组件间流转及构建组建间关联提供依据。
步骤S26：根据所述组件库暴露出的绑定值以及所述规则库中已完成的数据初始化操作，将组件与规则的依赖关系通过映射收集起来，通过注册事件回调的方式，为组件提供数据逻辑处理，实现数据在多组件之间的流转关联；
步骤S27：将步骤S24-步骤S26处理的单组件关系进行整合，利用预设好的JSON结构来表示融合后的组件关系，得到融合组件的JSON结构表示。
步骤S3：利用渲染函数将所述融合组件的JSON结构转义为虚拟DOM，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果；
步骤S31：根据所述规则库中预定义的虚拟dom模板，将所述融合组件的JSON结构转化为虚拟DOM结构；
步骤S32：从所述融合组件的JSON结构中获取组件绑定值、样式和/或事件回调，为所述虚拟DOM结构自动填充属性与事件，得到抽象语法树；
步骤S33：利用渲染函数将所述抽象语法树向外暴露，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果。
步骤S4：在挂载阶段将所述融合组件绘制结果创建真实DOM结构，并插入到真实DOM节点上，进而实现融合组件在视图上的显示；
步骤S41：根据所述构建需求获取融合组件需要插入到页面的位置；
步骤S42：根据所述规则库中预定义方法，使用浏览器内置的DOM操作应用程序接口，完成将融合组件的抽象语法树转化为真实DOM结构；
所述预定义方法为基于树形结构的深度遍历算法。
步骤S43：根据所述步骤S41获取的页面位置，将所述真实DOM结构插入，进而完成挂载的操作。
实施例：
步骤S1：根据交互式语音输入获取前端页面构建需求，经语音识别方法对所述构建需求进行解析，得到自然语言文本；
所述构建需求是页面的自然语言描述，包括所需组件、属性与事件、数据关系流转和/或样式逻辑；所述构建需求通过问答的模式获取，用户通过语音或自然语言输入，输入后的语音或自然语言经语音识别算法提取出构建需求，得到表单组件、视图组件、导航组件和/或指定类型组件。
步骤S2：通过预定义组件库、规则库和关系库构建抽象模型，所述抽象模型进行组件融合得到融合组件的JSON结构；
步骤S21：预定义组件库，所述组件库包括视图组件、表单组件、基础组件、导航组件和/或定制组件，所述组件库用于将所述自然语言文本中的组件名映射出视图层的组件；
步骤S22：预定义规则库，所述规则库包括数据层逻辑，所述数据层逻辑分为固有规则和基于所述构建需求建立的规则；
所述固有规则包括属性、样式、层级解析、数据劫持和/或上下文处理。
层级解析是解析组件层级关系，比如表单类组件（选择，输入等组件）会被统一添加为在form子组件。
数据劫持需要扫描构建需求中的绑定值，并且处理上下文关系，确保在注册的事件中能够访问到绑定值，进而当事件触发后如有数据绑定可以同步更改。
步骤S23：预定义关系库，所述关系库用于对所述自然语言文本中的组件间关系进行关联绑定，为组件注册事件触发回调；
组件的事件包括两种，一种是浏览器默认行为，一种为用户自定义行为，对于第一种浏览器默认事件则可以通过事件名直接为组件绑定，对于用户自定义行为需要根据构建需求中的事件来设置，二者是通过事件名来区分的，如果用户自定义事件名与浏览器默认事件名相通，则认为是为浏览器默认注册事件回调。
步骤S24：利用所述组件库对所述自然语言文本中进行实体抽取，当匹配发现所述自然语言文本中出现组件库实体，则所述组件库实体被解析为对应的组件；
步骤S25：根据所述构建需求为组件绑定值添加处理规则，利用所述步骤S24解析的组件结果，在所述规则库中匹配并劫持所述组件绑定值后初始化；
所述步骤S25中所述初始化包括为组件的绑定值添加默认值、添加所述构建需求中定义的处理规则、添加处理组件的层级关系和/或添加处理绑定值上下文关系，为数据在组件间流转及构建组建间关联提供依据。
步骤S26：根据所述组件库暴露出的绑定值以及所述规则库中已完成的数据初始化操作，将组件与规则的依赖关系通过映射收集起来，通过注册事件回调的方式，为组件提供数据逻辑处理，实现数据在多组件之间的流转关联；
步骤S27：将步骤S24-步骤S26处理的单组件关系进行整合，利用预设好的JSON结构来表示融合后的组件关系，得到融合组件的JSON结构表示。
比如，当构建一个页面中需要一个table表格包括姓名一列，姓名可根据用户输入进行筛选，翻页时需要保持当前筛选条件。同时，设定业务逻辑是，当table中某位患者的预测患癌概率超过90时，该条目背景颜色设置为红色。
基于上述需求背景首先抽取输入框，按钮，表格，分页器组件，并对组件设置初始参数，例如，对表格组件需要设置表格展示的列包括序号id、姓名name等，表格数据来源dataList，以及样式包括是否具备斑马条纹，是否带边框等，通过给表格绑定事件样式改变，处理当table中某位患者的预测患癌概率超过90时，该条目背景颜色设置为灰色。抽取后的融合组件再经解析得到程序可读的JSON结构。基于这个示例上述过程如图2所示。
参见图3，步骤S3：利用渲染函数将所述融合组件的JSON结构转义为虚拟DOM，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果；
步骤S31：根据所述规则库中预定义的虚拟dom模板，将所述融合组件的JSON结构转化为虚拟DOM结构；
步骤S32：从所述融合组件的JSON结构中获取组件绑定值、样式和/或事件回调，为所述虚拟DOM结构自动填充属性与事件，得到抽象语法树；
步骤S33：利用渲染函数将所述抽象语法树向外暴露，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果。
步骤S4：在挂载阶段将所述融合组件绘制结果创建真实DOM结构，并插入到真实DOM节点上，进而实现融合组件在视图上的显示；
步骤S41：根据所述构建需求获取融合组件需要插入到页面的位置；
步骤S42：根据所述规则库中预定义方法，使用浏览器内置的DOM操作应用程序接口，完成将融合组件的抽象语法树转化为真实DOM结构；
所述预定义方法为基于树形结构的深度遍历算法。
步骤S43：根据所述步骤S41获取的页面位置，将所述真实DOM结构插入，进而完成挂载的操作。
基于前文所述需求背景，将融合组件的ISON结构转义为虚拟DOM结构，如table组件，包括tag标识，props中存放table属性包括id，数据源data，列column，边框border，斑马条纹strip等，children长度为0则表示table组件不存在子组件。同时，关联styleChange事件，程序代码自动计算预测概率是否大于90。基于这个示例上述过程如图3所示。
融合组件本身是一种抽象类结构，这种结构并不指代某一种具体的组合组件类型，而是可根据用户构建需求自定义的组件。融合组件需要以解析后的半结构化语言，即构建模板作为输入参数，而后在内部，自动处理依赖关系与事件关联，并将建模结果，输送渲染阶段对组件进行绘制，最终暴露组件出口，完成组件挂载。融合组件内部数据流转示意图如图4所示。
与前述一种页面设计中多组件抽象关联融合方法的实施例相对应，本发明还提供了一种页面设计中多组件抽象关联融合装置的实施例。
参见图5，本发明实施例提供的一种页面设计中多组件抽象关联融合装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述一个或多个处理器执行所述可执行代码时，用于实现上述实施例中的一种页面设计中多组件抽象关联融合方法。
本发明一种页面设计中多组件抽象关联融合装置的实施例可以应用在任意具备数据处理能力的设备上，该任意具备数据处理能力的设备可以为诸如计算机等设备或装置。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在任意具备数据处理能力的设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图5所示，为本发明一种页面设计中多组件抽象关联融合装置所在任意具备数据处理能力的设备的一种硬件结构图，除了图5所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的任意具备数据处理能力的设备通常根据该任意具备数据处理能力的设备的实际功能，还可以包括其他硬件，对此不再赘述。
上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。
对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
本发明实施例还提供一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时，实现上述实施例中的一种页面设计中多组件抽象关联融合方法。
所述计算机可读存储介质可以是前述任一实施例所述的任意具备数据处理能力的设备的内部存储单元，例如硬盘或内存。所述计算机可读存储介质也可以是任意具备数据处理能力的设备的外部存储设备，例如所述设备上配备的插接式硬盘、智能存储卡（Smart Media Card，SMC）、SD卡、闪存卡（Flash Card）等。进一步的，所述计算机可读存储介质还可以既包括任意具备数据处理能力的设备的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述任意具备数据处理能力的设备所需的其他程序和数据，还可以用于暂时地存储已经输出或者将要输出的数据。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种页面设计中多组件抽象关联融合方法，其特征在于，包括以下步骤：
步骤S1：根据交互式语音输入获取前端页面构建需求，经语音识别方法对所述构建需求进行解析，得到自然语言文本；
步骤S2：通过预定义组件库、规则库和关系库构建抽象模型，所述抽象模型进行组件融合得到融合组件的JSON结构；
步骤S3：利用渲染函数将所述融合组件的JSON结构转义为虚拟DOM，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果；
步骤S4：在挂载阶段将所述融合组件绘制结果创建真实DOM结构，并插入到真实DOM节点上，进而实现融合组件在视图上的显示。
2.如权利要求1所述的一种页面设计中多组件抽象关联融合方法，其特征在于，所述步骤S1中所述构建需求是页面的自然语言描述，包括所需组件、属性与事件、数据关系流转和/或样式逻辑；所述构建需求通过问答的模式获取，用户通过语音或自然语言输入，输入后的语音或自然语言经语音识别算法提取出构建需求，得到表单组件、视图组件、导航组件和/或指定类型组件。
3.如权利要求1所述的一种页面设计中多组件抽象关联融合方法，其特征在于，所述步骤S2具体包括以下子步骤：
步骤S21：预定义组件库，所述组件库包括视图组件、表单组件、基础组件、导航组件和/或定制组件，所述组件库用于将所述自然语言文本中的组件名映射出视图层的组件；
步骤S22：预定义规则库，所述规则库包括数据层逻辑，所述数据层逻辑分为固有规则和基于所述构建需求建立的规则；
步骤S23：预定义关系库，所述关系库用于对所述自然语言文本中的组件间关系进行关联绑定，为组件注册事件触发回调；
步骤S24：利用所述组件库对所述自然语言文本中进行实体抽取，当匹配发现所述自然语言文本中出现组件库实体，则所述组件库实体被解析为对应的组件；
步骤S25：根据所述构建需求为组件绑定值添加处理规则，利用所述步骤S24解析的组件结果，在所述规则库中匹配并劫持所述组件绑定值后初始化；
步骤S26：根据所述组件库暴露出的绑定值以及所述规则库中已完成的数据初始化操作，将组件与规则的依赖关系通过映射收集起来，通过注册事件回调的方式，为组件提供数据逻辑处理，实现数据在多组件之间的流转关联；
步骤S27：将步骤S24-步骤S26处理的单组件关系进行整合，利用预设好的JSON结构来表示融合后的组件关系，得到融合组件的JSON结构表示。
4.如权利要求3所述的一种页面设计中多组件抽象关联融合方法，其特征在于，所述步骤S22中所述固有规则包括属性、样式、层级解析、数据劫持和/或上下文处理。
5.如权利要求3所述的一种页面设计中多组件抽象关联融合方法，其特征在于，所述步骤S25中所述初始化包括为组件的绑定值添加默认值、添加所述构建需求中定义的处理规则、添加处理组件的层级关系和/或添加处理绑定值上下文关系，为数据在组件间流转及构建组建间关联提供依据。
6.如权利要求1所述的一种页面设计中多组件抽象关联融合方法，其特征在于，所述步骤S3具体包括以下子步骤：
步骤S31：根据所述规则库中预定义的虚拟dom模板，将所述融合组件的JSON结构转化为虚拟DOM结构；
步骤S32：从所述融合组件的JSON结构中获取组件绑定值、样式和/或事件回调，为所述虚拟DOM结构自动填充属性与事件，得到抽象语法树；
步骤S33：利用渲染函数将所述抽象语法树向外暴露，并映射虚拟DOM节点的属性与事件，得到融合组件绘制结果。
7.如权利要求1所述的一种页面设计中多组件抽象关联融合方法，其特征在于，所述步骤S4具体包括以下子步骤：
步骤S41：根据所述构建需求获取融合组件需要插入到页面的位置；
步骤S42：根据所述规则库中预定义方法，使用浏览器内置的DOM操作应用程序接口，完成将融合组件的抽象语法树转化为真实DOM结构；
步骤S43：根据所述步骤S41获取的页面位置，将所述真实DOM结构插入，进而完成挂载的操作。
8.如权利要求7所述的一种页面设计中多组件抽象关联融合方法，其特征在于，所述步骤S42中所述预定义方法为基于树形结构的深度遍历算法。
9.一种页面设计中多组件抽象关联融合装置，其特征在于，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述一个或多个处理器执行所述可执行代码时，用于实现权利要求1-8中任一项所述的一种页面设计中多组件抽象关联融合方法。
10.一种计算机可读存储介质，其特征在于，其上存储有程序，该程序被处理器执行时，实现权利要求1-8中任一项所述的一种页面设计中多组件抽象关联融合方法。
CN202210980794.7A 2022-08-16 2022-08-16 一种页面设计中多组件抽象关联融合方法和装置 Active CN115080046B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202210980794.7A CN115080046B (zh) 2022-08-16 2022-08-16 一种页面设计中多组件抽象关联融合方法和装置
US18/360,794 US20240061993A1 (en) 2022-08-16 2023-07-27 Multi-component abstract association and fusion method and apparatus in page design

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210980794.7A CN115080046B (zh) 2022-08-16 2022-08-16 一种页面设计中多组件抽象关联融合方法和装置

Publications (2)

Publication Number Publication Date
CN115080046A true CN115080046A (zh) 2022-09-20
CN115080046B CN115080046B (zh) 2022-11-11

Family

ID=83245036

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210980794.7A Active CN115080046B (zh) 2022-08-16 2022-08-16 一种页面设计中多组件抽象关联融合方法和装置

Country Status (2)

Country Link
US (1) US20240061993A1 (zh)
CN (1) CN115080046B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115756449A (zh) * 2022-12-02 2023-03-07 之江实验室 一种页面复用方法、装置、存储介质及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080243935A1 (en) * 2007-03-27 2008-10-02 International Business Machines Corporation Method, apparatus, and computer program product for managing data in a browser-based application
US20170115968A1 (en) * 2015-10-23 2017-04-27 Oracle International Corporation Application builder with automated data objects creation
CN107291736A (zh) * 2016-03-31 2017-10-24 华为技术有限公司 一种编辑页面的方法和系统
CN107908399A (zh) * 2017-11-14 2018-04-13 山东浪潮通软信息科技有限公司 一种页面开发方法及装置
CN114327564A (zh) * 2021-12-30 2022-04-12 苏州浪潮智能科技有限公司 解决多层嵌套数组数据响应式的方法、系统、设备和介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7886222B2 (en) * 2006-02-09 2011-02-08 Sap Ag Converter-tool for a non-programmer user, to generate a web based application
US9594737B2 (en) * 2013-12-09 2017-03-14 Wolfram Alpha Llc Natural language-aided hypertext document authoring
EP3564812B1 (en) * 2018-04-30 2022-10-26 Mphasis Limited Method and system for automated creation of graphical user interfaces

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080243935A1 (en) * 2007-03-27 2008-10-02 International Business Machines Corporation Method, apparatus, and computer program product for managing data in a browser-based application
US20170115968A1 (en) * 2015-10-23 2017-04-27 Oracle International Corporation Application builder with automated data objects creation
CN107291736A (zh) * 2016-03-31 2017-10-24 华为技术有限公司 一种编辑页面的方法和系统
CN107908399A (zh) * 2017-11-14 2018-04-13 山东浪潮通软信息科技有限公司 一种页面开发方法及装置
CN114327564A (zh) * 2021-12-30 2022-04-12 苏州浪潮智能科技有限公司 解决多层嵌套数组数据响应式的方法、系统、设备和介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
栾绍鹏等: "基于Ajax的WebGIS开发新模式", 《测绘工程》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115756449A (zh) * 2022-12-02 2023-03-07 之江实验室 一种页面复用方法、装置、存储介质及电子设备

Also Published As

Publication number Publication date
US20240061993A1 (en) 2024-02-22
CN115080046B (zh) 2022-11-11

Similar Documents

Publication Publication Date Title
EP3433732B1 (en) Converting visual diagrams into code
US6769095B1 (en) Hierarchically structured control information editor
CN105511873B (zh) 用户界面控件展示方法及装置
US8438190B2 (en) Generating web services from business intelligence queries
US7788238B2 (en) Extensible object-modelling mechanism
CN110806863A (zh) 接口文档生成方法及装置、电子设备、存储介质
JP5166519B2 (ja) ソフトウェア資産ベースのソリューションを開発する一貫した方法システムおよびコンピュータ・プログラム
US8839192B2 (en) System and method for presentation of cross organizational applications
US9087296B2 (en) Navigable semantic network that processes a specification to and uses a set of declaritive statements to produce a semantic network model
US7836119B2 (en) Distributed execution model for cross-organizational declarative web applications
CN101799753B (zh) 一种实现树形结构的方法及装置
CN111352628A (zh) 一种前端代码生成方法、装置、计算机系统及可读存储介质
CN111177621B (zh) 一种web页面开发方法、装置及系统
CN114461200A (zh) 一种基于云SaaS平台的低代码开发应用及方法
CN110688118A (zh) 一种网页优化方法及装置
CN115080046B (zh) 一种页面设计中多组件抽象关联融合方法和装置
CN111752565A (zh) 一种界面生成方法、装置、计算机设备及可读存储介质
CN116467433A (zh) 面向多源数据的知识图谱可视化方法、装置、设备及介质
CN116243914A (zh) 国际化软件开发的方法、国际化软件开发系统及服务器
CN113687827B (zh) 基于微件的数据列表生成方法、装置、设备及存储介质
CN114489619A (zh) 一种界面视图显示方法及终端设备、计算机可读存储介质
CN114296726A (zh) 一种代码生成方法、装置、计算机设备和存储介质
CN106445487B (zh) 用于控制交互式组件的处理单元、软件以及方法
WO2024109400A1 (zh) 子应用页面处理方法、装置、计算机设备和存储介质
CN113687815B (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