CN114840203B - 页面元素的动态创建方法及*** - Google Patents
页面元素的动态创建方法及*** Download PDFInfo
- Publication number
- CN114840203B CN114840203B CN202210777375.3A CN202210777375A CN114840203B CN 114840203 B CN114840203 B CN 114840203B CN 202210777375 A CN202210777375 A CN 202210777375A CN 114840203 B CN114840203 B CN 114840203B
- Authority
- CN
- China
- Prior art keywords
- page
- component
- object model
- sub
- document object
- 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.)
- Active
Links
Images
Classifications
-
- 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
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明涉及电数字数据处理技术领域,本发明公开了页面元素的动态创建方法及***,包括:获取待***的页面元素以及所述页面元素待***的位置;根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;将页面元素视为子组件,将整体页面视为父组件;子组件将自身的参数传递给父组件;父组件将自身的参数传递给子组件;对整体页面进行渲染。减少用户手写代码的工作量,基于低代码开发平台+页面DOM元素扩展快速相应用户需求。
Description
技术领域
本发明涉及电数字数据处理技术领域,特别是涉及页面元素的动态创建方法及***。
背景技术
本部分的陈述仅仅是提到了与本发明相关的背景技术,并不必然构成现有技术。
在低代码开发平台的使用场景下,很多页面开发出来是不一定能够完全满足用户需求的,需要用户手动编写代码来实现,针对于有些页面,80%可以通过低代码实现,仅有20%功能不能实现,此时开发人员手写代码实现功能,大大增加了开发工作量,增加项目成本。
发明内容
为了解决现有技术的不足,本发明提供了页面元素的动态创建方法及***;减少用户手写代码的工作量,基于低代码开发平台+页面DOM元素扩展快速相应用户需求。
第一方面,本发明提供了页面元素的动态创建方法;
页面元素的动态创建方法,包括:
获取待***的页面元素以及所述页面元素待***的位置;
根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;
将页面元素视为子组件,将整体页面视为父组件;子组件将自身的参数传递给父组件;父组件将自身的参数传递给子组件;
对整体页面进行渲染。
第二方面,本发明提供了页面元素的动态创建***;
页面元素的动态创建***,包括:
获取模块,其被配置为:获取待***的页面元素以及所述页面元素待***的位置;
函数调用模块,其被配置为:根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;
参数传递模块,其被配置为:将页面元素视为子组件,将整体页面视为父组件;子组件将自身的参数传递给父组件;父组件将自身的参数传递给子组件;
渲染模块,其被配置为:对整体页面进行渲染。
与现有技术相比,本发明的有益效果是:
解决低代码开发平台开发出来的***不能完全满足用户需求的问题,减少用户重写代码的工作量。实现在低代码开发场景下,在生成的页面中动态***DOM元素的功能,减少用户手写代码的工作量,减少项目开发成本。简单功能通过低代码完成可视化拖拽,复杂功能在生成的源码中通过手写组件动态***,快速完成***开发,响应用户需求。
附图说明
构成本发明的一部分的说明书附图用来提供对本发明的进一步理解,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。
图1为实施例一的方法流程图。
具体实施方式
应该指出,以下详细说明都是示例性的,旨在对本发明提供进一步的说明。除非另有指明,本文使用的所有技术和科学术语具有与本发明所属技术领域的普通技术人员通常理解的相同含义。
在不冲突的情况下,本发明中的实施例及实施例中的特征可以相互组合。
本实施例所有数据的获取都在符合法律法规和用户同意的基础上,对数据的合法应用。
实施例一
本实施例提供了页面元素的动态创建方法;
如图1所示,页面元素的动态创建方法,包括:
S101:获取待***的页面元素以及所述页面元素待***的位置;
S102:根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;
S103:将页面元素视为子组件,将整体页面视为父组件;子组件将自身的参数传递给父组件;父组件将自身的参数传递给子组件;
S104:对整体页面进行渲染。
进一步地,所述待***的页面元素,包括:vue组件。
vue组件是指自定义的、可重复使用的Vue实例,有不可重复的名称,可作为HTML自定义元素进行使用。
示例性地,所述待***的页面元素为完整的页面或单个组件。
vue组件是能够进行复用的。所述组件为自定义vue组件。
进一步地,所述待***的页面元素,包括:模板、数据以及工具函数。
进一步地,根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;具体包括:
如果所述页面元素待***位置为目标DOM(Document Object Model文档对象模型)元素内部,并作为目标DOM元素的第一个DOM元素;则判断目标DOM元素是否存在子DOM列表,如果存在子DOM列表,就使用超文本标记语言html提供的insertBefore方式进行操作,将待***的页面元素***到子DOM列表的第一个子DOM前面;如果不存在子DOM列表,就使用html提供的appenChild方式,将待***的页面元素***到目标DOM元素内部。
进一步地,根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;还包括:
如果所述页面元素待***位置为目标DOM元素内部,并作为目标DOM元素的最后一个DOM元素;则使用html提供的appenChild方式,将待***的页面元素***到目标DOM元素内部。
进一步地,根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;还包括:
如果所述页面元素待***位置为目标DOM元素的前方,且待***的页面元素的DOM层级与目标DOM元素的DOM层级一致;则使用html提供的insertBefore方式进行操作,将待***的页面元素***到目标DOM元素的前方。
进一步地,根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;还包括:
如果所述页面元素待***位置为目标DOM元素的后方,且待***的页面元素的DOM层级与目标DOM元素的DOM层级一致;则判断目标DOM元素是否有下一个同级的DOM元素;
如果有,则使用html提供的insertBefore方式进行操作,将待***的页面元素***到下一个DOM元素之前;
如果没有,则使用html提供的appenChild方式,将待***的页面元素***到目标DOM元素的父DOM元素中作为最后一个DOM元素。
调用工具函数时,参数包括子组件数据、***位置、传递参数、监听事件以及监听事件触发时需要执行的方法。通过js提供的call方法确保工具函数的执行环境是当前要***的vue页面,确保组件***到指定页面的指定位置。
低代码开发平台每个组件都有ref属性,通过$ref属性获取***的指定位置,建议在要***的位置放入低代码开发平台提供的区域组件,以此确保***子组件的位置和大小,方便控制***子组件的显示样式。
DOM元素的层级不能确定显示位置,页面渲染时,被***DOM元素的具体显示位置,是由定位方式、显示位置、显示大小等等因素确定的。
进一步地,所述子组件将自身的参数传递给父组件;具体包括:
子组件通过vue封装的$emit方法触发vue实例上的监听,根据业务场景,将子组件数据传递给父组件。
父组件在监听事件参数的过程中,获取到子组件传递给父组件的数据,根据业务场景对获取到数据进行操作,例如:进行赋值、计算等操作。
当前方法的执行环境是要***的vue页面,可以通过全局变量this直接获取到要***的vue页面的数据,并且进行赋值等操作。
进一步地,所述父组件将自身的参数传递给子组件;具体包括:
创建子组件时,如果子组件从父组件获取到的值是明确值,并且子组件从父组件获取到的值不再改变,父组件调用工具函数时,以propsData形式将子组件需要的数据传入到实例中,在子组件内以props形式获取propsData传入的变量的值;
反之,创建子组件时,如果子组件从父组件获取到值不是明确值,或者根据使用业务场景的不同,子组件从父组件获取到值是改变的,则将变量定义在子组件data内,定义一个变量将调用工具函数的返回值组件实例进行存储,获取子组件对应的数据,并且赋值改变。
进一步地,所述S104:对整体页面进行渲染;具体步骤如下:
S1041:注册子组件,获取子组件构造方法:工具函数根据获取到的数据,通过vue提供的extend静态函数,注册组件模板,获取子组件的Vue提供的默认构造方法;
S1042:创建DOM元素:通过html的document对象提供的createElement方法创建DOM元素;
S1043:创建vue实例:调用注册子组件获取到的构造方法,传入工具函数获取到的数据、创建的DOM元素,创建vue实例;
S1044:增加监听事件列表:根据工具函数获取到的eventList列表,对创建的vue实例增加监听事件,并且指定监听事件触发时需要执行的方法;
监听事件触发时需要执行的方法,包括:写在当前js文件内的方法,或者,要***的vue页面内低代码开发平台生成的方法;
S1045:将创建的DOM元素***到父组件中:调用html中提供的DOM元素操作方法,根据工具函数获取到的数据,将创建的DOM元素***到父组件的指定位置上;
S1046:在低代码开发平台上注册js脚本文件,配置调用注册js脚本文件内***DOM元素的方法:
将动态***DOM元素方法所在的js脚本文件,放入到低代码开发平台指定的目录下,并注册到平台。
在低代码开发平台开发的页面中,配置页面事件,触发***方法,保存发布页面后生成代码,调用动态***DOM元素的代码,完成前端页面的功能扩展。
调用工具函数后,工具函数根据获取到的参数进行渲染,通过调用工具函数才能使其渲染到可视化编辑器绘制页面的指定位置上。
实施例二
本实施例提供了页面元素的动态创建***;
页面元素的动态创建***,包括:
获取模块,其被配置为:获取待***的页面元素以及所述页面元素待***的位置;
函数调用模块,其被配置为:根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;
参数传递模块,其被配置为:将页面元素视为子组件,将整体页面视为父组件;子组件将自身的参数传递给父组件;父组件将自身的参数传递给子组件;
渲染模块,其被配置为:对整体页面进行渲染。
此处需要说明的是,上述获取模块、函数调用模块、参数传递模块和渲染模块对应于实施例一中的步骤S101至S104,上述模块与对应的步骤所实现的示例和应用场景相同,但不限于上述实施例一所公开的内容。需要说明的是,上述模块作为***的一部分可以在诸如一组计算机可执行指令的计算机***中执行。
以上所述仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (2)
1.页面元素的动态创建方法,其特征是,包括:
获取待***的页面元素以及所述页面元素待***的位置;
根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;
其中,根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;具体包括:
如果所述页面元素待***位置为目标文档对象模型元素内部,并作为目标文档对象模型元素的第一个文档对象模型元素;则判断目标文档对象模型元素是否存在子文档对象模型列表,如果存在子文档对象模型列表,就使用超文本标记语言提供的insertBefore方式进行操作,将待***的页面元素***到子文档对象模型列表的第一个子文档对象模型前面;如果不存在子文档对象模型列表,就使用超文本标记语言提供的appenChild方式,将待***的页面元素***到目标文档对象模型元素内部;
如果所述页面元素待***位置为目标文档对象模型元素内部,并作为目标文档对象模型元素的最后一个文档对象模型元素;则使用超文本标记语言提供的appenChild方式,将待***的页面元素***到目标文档对象模型元素内部;
如果所述页面元素待***位置为目标文档对象模型元素的前方,且待***的页面元素的文档对象模型层级与目标文档对象模型元素的文档对象模型层级一致;则使用超文本标记语言提供的insertBefore方式进行操作,将待***的页面元素***到目标文档对象模型元素的前方;
如果所述页面元素待***位置为目标文档对象模型元素的后方,且待***的页面元素的文档对象模型层级与目标文档对象模型元素的文档对象模型层级一致;则判断目标文档对象模型元素是否有下一个同级的文档对象模型元素;
如果有,则使用超文本标记语言提供的insertBefore方式进行操作,将待***的页面元素***到下一个文档对象模型元素之前;
如果没有,则使用超文本标记语言提供的appenChild方式,将待***的页面元素***到目标文档对象模型元素的父文档对象模型元素中作为最后一个文档对象模型元素;
将页面元素视为子组件,将整体页面视为父组件;子组件将自身的参数传递给父组件;父组件将自身的参数传递给子组件;
所述子组件将自身的参数传递给父组件;具体包括:根据业务场景,将子组件数据传递给父组件;
所述父组件将自身的参数传递给子组件;具体包括:
创建子组件时,如果子组件从父组件获取到的值是明确值,并且子组件从父组件获取到的值不再改变,父组件调用工具函数时,以propsData形式将子组件需要的数据传入到实例中,在子组件内以props形式获取propsData传入的变量的值;
反之,创建子组件时,如果子组件从父组件获取到值不是明确值,或者根据使用业务场景的不同,子组件从父组件获取到值是改变的,则将变量定义在子组件data内,定义一个变量将调用工具函数的返回值组件实例进行存储,获取子组件对应的数据,并且赋值改变;
调用工具函数时,参数包括子组件数据、***位置、传递参数、监听事件以及监听事件触发时需要执行的方法;通过js提供的call方法确保工具函数的执行环境是当前要***的vue页面,确保组件***到指定页面的指定位置;
低代码开发平台每个组件都有ref属性,通过$ref属性获取***的指定位置,在要***的位置放入低代码开发平台提供的区域组件,以此确保***子组件的位置和大小,控制***子组件的显示样式;
对整体页面进行渲染。
2.采用如权利要求1所述的页面元素的动态创建方法的页面元素的动态创建***,其特征是,包括:
获取模块,其被配置为:获取待***的页面元素以及所述页面元素待***的位置;
函数调用模块,其被配置为:根据所述页面元素待***的位置,调用对应的工具函数,以实现所述页面元素***到整体页面中;
参数传递模块,其被配置为:将页面元素视为子组件,将整体页面视为父组件;子组件将自身的参数传递给父组件;父组件将自身的参数传递给子组件;
渲染模块,其被配置为:对整体页面进行渲染。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210777375.3A CN114840203B (zh) | 2022-07-04 | 2022-07-04 | 页面元素的动态创建方法及*** |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210777375.3A CN114840203B (zh) | 2022-07-04 | 2022-07-04 | 页面元素的动态创建方法及*** |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114840203A CN114840203A (zh) | 2022-08-02 |
CN114840203B true CN114840203B (zh) | 2022-09-16 |
Family
ID=82575248
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210777375.3A Active CN114840203B (zh) | 2022-07-04 | 2022-07-04 | 页面元素的动态创建方法及*** |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114840203B (zh) |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101963987A (zh) * | 2010-09-30 | 2011-02-02 | 百度在线网络技术(北京)有限公司 | 一种用于生成网页文件和加载网页文件的方法与设备 |
CN102662966A (zh) * | 2012-03-08 | 2012-09-12 | 中国科学院计算机网络信息中心 | 一种面向主题的获取动态页面内容的方法及*** |
CN104461484A (zh) * | 2013-09-16 | 2015-03-25 | 腾讯科技(深圳)有限公司 | 前端模板的实现方法和装置 |
CN104932889A (zh) * | 2015-06-15 | 2015-09-23 | 北京奇虎科技有限公司 | 页面可视化生成方法和装置 |
CN108874373A (zh) * | 2017-05-12 | 2018-11-23 | 腾讯科技(深圳)有限公司 | 向网页内***信息的方法及装置、显示终端及存储介质 |
CN109101150A (zh) * | 2018-07-20 | 2018-12-28 | 广州视源电子科技股份有限公司 | 元素***方法、装置、电子设备及计算机可读存储介质 |
CN109697254A (zh) * | 2018-12-04 | 2019-04-30 | 国云科技股份有限公司 | 一种前端页面图表组件化的方法 |
CN110717120A (zh) * | 2018-07-12 | 2020-01-21 | 北京京东尚科信息技术有限公司 | 一种网页列表显示方法和装置 |
CN114020252A (zh) * | 2021-10-28 | 2022-02-08 | 四川启睿克科技有限公司 | 基于vue和element动态渲染多级表头的方法 |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101727675B (zh) * | 2008-10-30 | 2012-03-14 | 鸿富锦精密工业(深圳)有限公司 | 动态预览图形元素***位置的***及方法 |
CN101807209A (zh) * | 2010-04-14 | 2010-08-18 | 深圳市同洲电子股份有限公司 | 网页制作的方法和***,客户端、服务端 |
CN106339226B (zh) * | 2016-08-26 | 2019-10-25 | 南威软件股份有限公司 | 一种网页页面的展示方法和页面展示装置 |
CN108495192B (zh) * | 2018-03-13 | 2021-04-23 | 武汉斗鱼网络科技有限公司 | 页面编辑处理方法及装置 |
CN114329264A (zh) * | 2021-12-24 | 2022-04-12 | 北京沃东天骏信息技术有限公司 | 获取动态数据的方法及装置、计算机可读存储介质 |
-
2022
- 2022-07-04 CN CN202210777375.3A patent/CN114840203B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101963987A (zh) * | 2010-09-30 | 2011-02-02 | 百度在线网络技术(北京)有限公司 | 一种用于生成网页文件和加载网页文件的方法与设备 |
CN102662966A (zh) * | 2012-03-08 | 2012-09-12 | 中国科学院计算机网络信息中心 | 一种面向主题的获取动态页面内容的方法及*** |
CN104461484A (zh) * | 2013-09-16 | 2015-03-25 | 腾讯科技(深圳)有限公司 | 前端模板的实现方法和装置 |
CN104932889A (zh) * | 2015-06-15 | 2015-09-23 | 北京奇虎科技有限公司 | 页面可视化生成方法和装置 |
CN108874373A (zh) * | 2017-05-12 | 2018-11-23 | 腾讯科技(深圳)有限公司 | 向网页内***信息的方法及装置、显示终端及存储介质 |
CN110717120A (zh) * | 2018-07-12 | 2020-01-21 | 北京京东尚科信息技术有限公司 | 一种网页列表显示方法和装置 |
CN109101150A (zh) * | 2018-07-20 | 2018-12-28 | 广州视源电子科技股份有限公司 | 元素***方法、装置、电子设备及计算机可读存储介质 |
CN109697254A (zh) * | 2018-12-04 | 2019-04-30 | 国云科技股份有限公司 | 一种前端页面图表组件化的方法 |
CN114020252A (zh) * | 2021-10-28 | 2022-02-08 | 四川启睿克科技有限公司 | 基于vue和element动态渲染多级表头的方法 |
Also Published As
Publication number | Publication date |
---|---|
CN114840203A (zh) | 2022-08-02 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108345531B (zh) | 一种测试方法、装置及*** | |
US9792284B2 (en) | System, method and computer program product for multilingual content management | |
CN111241454B (zh) | 一种生成网页代码的方法、***和装置 | |
US7228500B2 (en) | Web page rendering priority mechanism | |
CN113076096B (zh) | 一种桌面应用程序开发方法、装置、设备及存储介质 | |
CN104731589A (zh) | 用户界面的自动生成方法及自动生成装置 | |
US9460230B1 (en) | Method and system for visual styling of visual elements for applications | |
CN108170430B (zh) | 一种界面展示的方法及*** | |
CN111177621B (zh) | 一种web页面开发方法、装置及*** | |
CN110362792B (zh) | 将rn文件转换为小程序文件的方法、装置及转换设备 | |
CN111078637B (zh) | 脚本文件上线方法、装置、计算机设备及存储介质 | |
WO2023035563A1 (zh) | 小程序跨应用迁移方法、设备、终端、***及存储介质 | |
KR20220132458A (ko) | 반응형 또는 적응형 웹 구현을 위한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법 | |
CN111538526A (zh) | 一种应用程序的多版本差异化功能定制实现方法及*** | |
CN117149301A (zh) | 基于mdf的微前端资源共享方法、***和存储介质 | |
CN114153473A (zh) | 模块集成方法、装置、存储介质及电子设备 | |
CN114840203B (zh) | 页面元素的动态创建方法及*** | |
US20240160421A1 (en) | Integrated development system and method, for user interface platform, having source compiler | |
CN116301813A (zh) | 低代码平台开发方法及*** | |
CN112764757A (zh) | 小程序处理方法、装置、设备及存储介质 | |
KR100884624B1 (ko) | 룰 기반의 사용자 인터페이스 통합 플랫폼 시스템 | |
CN111026466A (zh) | 文件处理方法、装置、计算机可读存储介质及电子设备 | |
JP2006236375A (ja) | Webアプリケーション開発方法、開発支援システム、および該方法に係るプログラム | |
KR20160082732A (ko) | 에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템 및 방법 | |
US20240176599A1 (en) | User interface platform integrated-development system and method having microservice architecture |
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 |