CN112433799A - 页面生成方法、装置、设备及介质 - Google Patents
页面生成方法、装置、设备及介质 Download PDFInfo
- Publication number
- CN112433799A CN112433799A CN202011339533.4A CN202011339533A CN112433799A CN 112433799 A CN112433799 A CN 112433799A CN 202011339533 A CN202011339533 A CN 202011339533A CN 112433799 A CN112433799 A CN 112433799A
- Authority
- CN
- China
- Prior art keywords
- template
- page
- component
- json
- rendered
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 66
- 238000006243 chemical reaction Methods 0.000 claims abstract description 59
- 238000009877 rendering Methods 0.000 claims abstract description 58
- 238000004458 analytical method Methods 0.000 claims abstract description 21
- 230000000007 visual effect Effects 0.000 claims abstract description 12
- 238000012986 modification Methods 0.000 claims description 20
- 230000004048 modification Effects 0.000 claims description 20
- 238000004590 computer program Methods 0.000 claims description 12
- 230000008676 import Effects 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 6
- 238000004806 packaging method and process Methods 0.000 claims description 4
- 230000009466 transformation Effects 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 21
- 238000013473 artificial intelligence Methods 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 8
- 230000003068 static effect Effects 0.000 description 6
- 230000002452 interceptive effect Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000009795 derivation Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- 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
-
- 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
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)
- Information Transfer Between Computers (AREA)
Abstract
本申请涉及人工智能技术领域,揭示了一种页面生成方法、装置、设备及介质,其中方法包括:基于Vue框架和.Vue格式的单文件组件形成的DOM模板组成的模板组件可视化获取用户输入的待渲染视图;对待渲染视图进行JSON数据转换,将转换得到的待存储的JSON页面数据存储在数据库中;从数据库中获取JSON页面数据作为待渲染的JSON页面数据;采用ejs模板解析引擎对待渲染的JSON页面数据进行模板转换,然后采用Vue解析器进行模板解析,最后采用Vue渲染器进行动态渲染得到目标HTML文件并进行可视化展示。从而使非前端开发能快速生成动态页面,通过动态页面快速处理用户体验和界面细节,提高了页面开发效率。
Description
技术领域
本申请涉及到人工智能技术领域,特别是涉及到一种页面生成方法、装置、设备及介质。
背景技术
目前页面的开发对前端开发能力要求较高,除了开发编写代码,还需要处理用户体验和界面细节,存在专业门槛,从而导致页面开发效率较低;而且现有的前端框架对使用者要求较高,需要较多的学习时间,从而导致非前端开发人员无法有效的开发页面。
发明内容
本申请的主要目的为提供一种页面生成方法、装置、设备及介质,旨在解决现有的页面的开发存在专业门槛,导致页面开发效率较低,而且现有的前端框架对使用者要求较高,导致非前端开发人员无法有效的开发页面的技术问题。
为了实现上述发明目的,本申请提出一种页面生成方法,所述方法包括:
获取页面生成请求;
响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;
基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;
采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;
获取页面渲染请求;
响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据;
采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板;
采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件;
采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
进一步的,所述基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图的步骤,包括:
获取所述编辑预览区域发送的所述模板组件选择结果和所述模板组件位置数据,所述模板组件选择结果是所述组件选择区域中的所述模板组件被拖拽到所述编辑预览区域的结果;
根据所述模板组件选择结果,确定所述模板组件属性配置结果;
根据所述模板组件选择结果、所述模板组件位置数据和所述模板组件属性配置结果,确定所述待渲染视图。
进一步的,所述根据所述模板组件选择结果,确定所述模板组件属性配置结果的步骤,包括:
基于所述模板组件选择结果获取模板组件属性展示请求,所述模板组件属性展示请求携带有待展示的模板组件标识;
响应所述模板组件属性展示请求,将所述待展示的模板组件标识的模板组件的组件属性在所述组件属性编辑区域中进行展示;
获取所述组件属性编辑区域发送的所述待展示的模板组件标识对应的第一模板组件属性;
根据所述模板组件选择结果和所述待展示的模板组件标识进行未被修改的模板组件属性查找,得到第二模板组件属性;
根据所述第一模板组件属性和所述第二模板组件属性,确定所述模板组件属性配置结果。
进一步的,所述采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板的步骤,包括:
获取所述编辑预览区域的预览分辨率;
根据所述预览分辨率对所述待渲染的JSON页面数据进行分辨率比例转换,得到转换分辨率后的JSON页面数据;
采用所述ejs模板解析引擎对所述转换分辨率后的JSON页面数据进行模板转换,得到所述待解析页面模板。
进一步的,所述采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示的步骤之后,包括:
获取页面导出请求,所述页面导出请求携带有导出方式数据;
响应所述页面导出请求,根据所述目标HTML文件进行web程序生成,得到目标web程序;
采用所述导出方式数据将所述目标web程序导出。
进一步的,所述采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件的步骤之前,还包括:
获取页面导入请求,所述页面导入请求携带有待导入的web程序;
响应所述页面导入请求,根据所述待导入的web程序,得到待转换的HTML文件;
根据所述待转换的HTML文件进行JSON页面数据转换,得到待转换的JSON页面数据;
将所述待转换的JSON页面数据进行视图转换,得到待修改视图;
将所述待修改视图在所述编辑预览区域中进行展示;
基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,根据所述待修改视图获取所述待修改视图的修改结果,得到所述待渲染视图。
进一步的,所述获取页面生成请求的步骤之前,包括:
采用所述Vue框架的mixins方法将事件数据封装到组件,得到待展示的模板组件;
将JS脚本以script标签形式嵌入到组件,得到所述待展示的模板组件;
将所述待展示的模板组件在所述组件选择区域中进行展示。
本申请还提出了一种页面生成装置,所述装置包括:
页面生成请求获取模块,用于获取页面生成请求,响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;
待渲染视图生成模块,用于基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;
JSON数据转换模块,用于采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;
页面渲染展示模块,用于获取页面渲染请求,响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
本申请还提出了一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。
本申请还提出了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述任一项所述的方法的步骤。
本申请的页面生成方法、装置、设备及介质,通过将.Vue格式的单文件组件形成的DOM模板组成模板组件展示在组件选择区域,基于Vue框架可视化获取用户输入的待渲染视图,采用JSON Schema对待渲染视图进行JSON数据转换成待存储的JSON页面数据,将待存储的JSON页面数据存储在数据库中,从数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对待解析的AST文件进行动态渲染,得到目标HTML文件,将目标HTML文件在编辑预览区域进行展示,使非前端开发人员也能快速生成动态页面,通过动态页面可以快速处理用户体验和界面细节,提高了页面开发效率;通过对待渲染视图进行JSON数据转换后存储在数据库中,减少了需要存储的数据量,提高了存储效率,提高了用户体验;使用DOM模板时会受到HTML本身的限制导致自定义组件会被当作无效的内容,从而导致错误的渲染结果,采用.Vue格式的单文件组件时模板组件的DOM模板将不受HTML本身的限制,从而实现了对自定义模板组件的动态渲染,实现了快速动态渲染,提升了搭建效率。
附图说明
图1为本申请一实施例的页面生成方法的流程示意图;
图2为本申请一实施例的页面生成装置的结构示意框图;
图3为本申请一实施例的计算机设备的结构示意框图。
本申请目的的实现、功能特点及优点将结合实施例,参照附图做进一步说明。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
本申请使用到的专业术语如下:
本申请的前端,也就是网站前台部分,运行在PC端(电脑端),移动端等浏览器上展现给用户浏览的网页。
本申请的服务端,服务端是为前端服务的,服务的内容诸如向前端提供资源,保存前端数据。
本申请的web页面,也就是web网页,是万维网上的一个按照HTML(超文本标记语言)格式组织起来的文件;在通过万维网进行信息查询时,以信息页面的形式出现,它可包括图形、文字、声音和视像等信息。
本申请的Vue框架,是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue的核心库只关注视图层。
本申请的DOM模板,就是原先就写在页面上的,能被浏览器识别的HTML结构,会在一加载就被浏览器渲染,所以要遵循HTML结构和标签命名,不然是不会被浏览器解析的,也就获取不到内容了,接着js获取DOM节点的内容,就形成了DOM模板。
本申请的JSON Schema,又写为jsonschema,是描述你的JSON数据格式;JSON模式(应用程序/模式+JSON)有多种用途,其中之一就是实例验证。验证过程可以是交互式或非交互式的。例如,应用程序可以使用JSON模式来构建用户界面使互动的内容生成除了用户输入检查或验证各种来源获取的数据。
本申请的script标签,是HTML中很重要的一个标签之一,用的非常多,经常使用来嵌入脚本语言(如:JavaScript)或引入外部脚本文件(如:JavaScript文件)。
为了解决现有的页面的开发存在专业门槛,导致页面开发效率较低,而且现有的前端框架对使用者要求较高,导致非前端开发人员无法有效的开发页面的技术问题,本申请提出了一种页面生成方法,所述方法应用于人工智能技术领域。所述页面生成方法基于Vue框架和.Vue格式的单文件组件形成的DOM模板组成的模板组件可视化获取用户输入的待渲染视图,对待渲染视图进行JSON数据转换,将转换得到的待存储的JSON页面数据存储在数据库中,从数据库中获取JSON页面数据作为待渲染的JSON页面数据,然后进行动态渲染后进行可视化展示,从而使非前端开发能快速生成动态页面,通过动态页面快速处理用户体验和界面细节,提高了页面开发效率。
参照图1,本申请实施例中提供一种页面生成方法,所述方法包括:
S1:获取页面生成请求;
S2:响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;
S3:基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;
S4:采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;
S5:获取页面渲染请求;
S6:响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据;
S7:采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板;
S8:采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件;
S9:采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
本申请通过将.Vue格式的单文件组件形成的DOM模板组成模板组件展示在组件选择区域,基于Vue框架可视化获取用户输入的待渲染视图,采用JSON Schema对待渲染视图进行JSON数据转换成待存储的JSON页面数据,将待存储的JSON页面数据存储在数据库中,从数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对待解析的AST文件进行动态渲染,得到目标HTML文件,将目标HTML文件在编辑预览区域进行展示,使非前端开发人员也能快速生成动态页面,通过动态页面可以快速处理用户体验和界面细节,提高了页面开发效率;通过对待渲染视图进行JSON数据转换后存储在数据库中,减少了需要存储的数据量,提高了存储效率,提高了用户体验;使用DOM模板时会受到HTML本身的限制导致自定义组件会被当作无效的内容,从而导致错误的渲染结果,采用.Vue格式的单文件组件时模板组件的DOM模板将不受HTML本身的限制,从而实现了对自定义模板组件的动态渲染,实现了快速动态渲染,提升了搭建效率。
对于S1,获取用户通过前端发送的页面生成请求。该用户包括但不限于:前端开发人员、运营人员、产品人员、中后台开发人员。
页面生成请求,是指生成web页面的请求。
对于S2,响应所述页面生成请求,基于Vue框架在前端的可视化界面中展示模板组件选择区域、编辑预览区域、模板组件属性编辑区域。比如,在前端的可视化界面中从左到右依次展示模板组件选择区域、编辑预览区域、模板组件属性编辑区域,在此举例不做具体限定。
模板组件选择区域,是展示模板组件供用户进行拖拽选择的区域。模板组件,是指对HTML元素、元素布局和样式、业务逻辑进行封装得到的组件。
编辑预览区域,是用于接收用户拖拽选择的模板组件,接收用户对模板组件进行位置改变操作,向用户展示渲染的动态页面。
模板组件属性编辑区域,用于展示编辑预览区域中的模板组件的组件属性,接收用户对展示的组件属性的配置操作。
可选的,所述模板组件选择区域中所有模板组件以树状结构展示。
所述模板组件选择区域中的模板组件包括但不限于:输入框、选择器、容器、图片、按钮、控件。所述模板组件是静态的DOM(文档对象模型)模板。所述模板组件的每一个组件属性开发一个属性编辑组件。比如,模板组件QkText需要text属性,新增一个属性编辑组件attr-qk-text来操作该组件属性,在此举例不做具体限定。
对于S3,获取用户通过所述编辑预览区域输入的视图提交请求,前端响应所述视图提交请求,从操作记录状态机数组中获取数据,得到所述待渲染视图。
用户将组件选择区域中的模板组件拖拽到编辑预览区域,然后选择编辑预览区域中的模板组件,在组件属性编辑区域将展示用户在编辑预览区域中选择的模板组件的组件属性,然后用户可以在组件属性编辑区域配置组件属性,完成配置点击提交按钮输入待渲染视图。可以理解的是,用户还可以在编辑预览区域中调整模板组件的位置。
操作记录状态机数组存放的是历史操作记录,每次修改编辑操作都把整个pageDataJson字段push到historyCache。
模板组件选择结果中包含的是模板组件标识。
模板组件位置数据包括:模板组件标识、位置数据,模板组件位置数据中模板组件标识和位置数据一一对应。
模板组件属性配置结果,是对模板组件的组件属性进行配置的结果。
用户通过在所述编辑预览区域中拖拽模板组件以改变模板组件的组件属性的尺寸,拖拽触发结束发送所述待展示的模板组件标识的模板组件属性配置结果。
对于S4,前端采用JSON Schema将模板组件选择结果、模板组件位置数据和模板组件属性配置结果进行JSON数据转换,得到待存储的JSON页面数据。前端将所述待存储的JSON页面数据发送给服务端,服务端将所述待存储的JSON页面数据存储在数据库中。
JSON页面数据描述的是具体的页面元素。
JSON Schema采用规范的数据结构,具体包括:页面工程数据结构、多页页面中一页、元素数据结构。每个数据结构可以单独渲染成一个模板组件。
页面工程数据结构包括但不限于:标题、描述、封面、作者、脚本、高、宽、多页面、渲染模式。
多页页面中一页包括但不限于:页面名、页面元素、基本样式、配置信息。
元素数据结构包括但不限于:模板组件名、动画效果、公共样式、事件、属性、绑定至、值类型、是否是表单控件。
对于S5,获取用户通过前端发送的页面渲染请求,前端将页面渲染请求发送给服务端。
页面渲染请求,是获取JSON页面数据进行页面渲染形成动态页面并进行预览的请求。
对于S6,服务端响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据,将待渲染的JSON页面数据发送给前端。
对于S7,前端采用ejs模板解析引擎解析所述待渲染的JSON页面数据,将解析的结果转换为静态模板,将转换得到的静态模板作为待解析页面模板。
ejs模板解析引擎的实现方法可以从现有技术中选择ejs模板引擎,在此不做赘述。
对于S8,前端采用Vue解析器将待解析页面模板进行模板解析转换成字符串,得到.AST(抽象语法树)格式的文件,将得到的.AST格式的文件作为待解析的AST文件。
Vue解析器可以将Vue的template字符串转换为AST,所谓AST就是用js对象来描述节点,一个对象为一个节点,通过对象中的children、parent等属性,描述该节点,如此所形成的一个节点数即为AST。
Vue解析器通过循环遍历元素模板组件数组,将元素模板组件数组中的元素模板组件取出进行模板解析,转换成AST格式的数据。
Vue解析器的实现方法可以从现有技术中选择,在此不做赘述。
对于S9,前端采用Vue渲染器将所述待解析的AST文件的字符串转换成HTML文件,将转换得到的HTML文件作为目标HTML文件,从而实现动态渲染,然后将目标HTML文件在所述编辑预览区域进行展示,从而实现了页面的快速预览,用户通过动态渲染得到的动态页面可以快速处理用户体验和界面细节,提高了页面开发效率。
模板组件采用的是DOM模板,采Vue的:is标签实现模板组件的动态渲染。
在一个实施例中,上述基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图的步骤,包括:
S31:获取所述编辑预览区域发送的所述模板组件选择结果和所述模板组件位置数据,所述模板组件选择结果是所述组件选择区域中的所述模板组件被拖拽到所述编辑预览区域的结果;
S32:根据所述模板组件选择结果,确定所述模板组件属性配置结果;
S33:根据所述模板组件选择结果、所述模板组件位置数据和所述模板组件属性配置结果,确定所述待渲染视图。
本实施例实现了基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域可视化获取用户输入的待渲染视图,使非前端开发人员也能快速搭建页面,提高了页面开发效率。
对于S31,获取用户通过所述编辑预览区域发送的所述模板组件选择结果和所述模板组件位置数据,将所述模板组件选择结果和所述模板组件位置数据存在操作记录状态机数组中。
对于S32,用户选择编辑预览区域中的模板组件,前端在组件属性编辑区域将展示用户在编辑预览区域中选择的模板组件的组件属性,然后用户可以在组件属性编辑区域配置组件属性,最后将在组件属性编辑区域配置的组件属性和没有配置组件属性的模板组件的默认组件属性作为所述模板组件属性配置结果。
对于S33,从操作记录状态机数组中获取所述模板组件选择结果、所述模板组件位置数据和所述模板组件属性配置结果,将获取的所述模板组件选择结果、所述模板组件位置数据和所述模板组件属性配置结果作为所述待渲染视图。
在一个实施例中,上述根据所述模板组件选择结果,确定所述模板组件属性配置结果的步骤,包括:
S321:基于所述模板组件选择结果获取模板组件属性展示请求,所述模板组件属性展示请求携带有待展示的模板组件标识;
S322:响应所述模板组件属性展示请求,将所述待展示的模板组件标识的模板组件的组件属性在所述组件属性编辑区域中进行展示;
S323:获取所述组件属性编辑区域发送的所述待展示的模板组件标识对应的第一模板组件属性;
S324:根据所述模板组件选择结果和所述待展示的模板组件标识进行未被修改的模板组件属性查找,得到第二模板组件属性;
S325:根据所述第一模板组件属性和所述第二模板组件属性,确定所述模板组件属性配置结果。
本实施例实现了根据模板组件选择结果采用默认和用户个性化修改的方式确定模板组件属性配置结果,实现了可视化配置组件属性,简化了组件属性的确定方法,进一步提高了页面开发效率。
对于S321,用户想要修改编辑预览区域中的某个模板组件,只需要在编辑预览区域中点击该模板组件触发模板组件属性展示请求,前端将该模板组件的模板组件标识作为待展示的模板组件标识。
对于S323,前端获取用户输入的属性修改提交请求,根据属性修改提交请求从操作记录状态机数组中获取所述待展示的模板组件标识对应的组件属性作为第一模板组件属性。也就是说,第一模板组件属性可以是修改后通过属性修改提交请求提交的组件属性,也可以是没有修改过但是用户通过属性修改提交请求提交的组件属性。
用户对所述组件属性编辑区域中的模板组件的组件属性进行修改完成后触发组件属性修改提交请求,前端将修改的结果存储在操作记录状态机数组中。
对于S324,从所述模板组件选择结果中获取模板组件标识得到待分析模板组件标识集合;从所述待分析模板组件标识集合删除所述待展示的模板组件标识,将所述待分析模板组件标识中剩余的模板组件标识作为未修改的组件标识,将未修改的组件标识对应的组件属性作为第二模板组件属性。
对于S325,将所述第一模板组件属性和所述第二模板组件属性放在一个集合中,将该集合作为所述模板组件属性配置结果。
在一个实施例中,上述采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板的步骤,包括:
S71:获取所述编辑预览区域的预览分辨率;
S72:根据所述预览分辨率对所述待渲染的JSON页面数据进行分辨率比例转换,得到转换分辨率后的JSON页面数据;
S73:采用所述ejs模板解析引擎对所述转换分辨率后的JSON页面数据进行模板转换,得到所述待解析页面模板。
本实施例实现了动态调整分辨率,从而使在所述编辑预览区域进行展示的页面与所述编辑预览区域的分辨率匹配,提高了用户体验。
对于S71,前端获取PC端分辨率,获取组件选择区域、编辑预览区域、组件属性编辑区域的分辨率分配数据,根据PC端分辨率和分辨率分配数据进行计算,得到所述编辑预览区域的预览分辨率。
对于S72,根据所述预览分辨率对所述待渲染的JSON页面数据对应的模板组件的尺寸进行比例转换,转换结束得到转换分辨率后的JSON页面数据。
比如:模板组件的宽度的转换公式为:
new=old*windows.x/pageJson.width
其中,new是转换后的模板组件宽度,windows.x就是所述编辑预览区域的预览分辨率对应的窗口宽度,pageJson.width是设计所述待渲染的JSON页面数据对应的模板组件时的窗口宽度,old是设计所述待渲染的JSON页面数据对应的模板组件时的模板组件宽度。
对于S73,前端采用ejs模板解析引擎解析所述转换分辨率后的JSON页面数据,将解析的结果转换为静态模板,将转换得到的静态模板作为待解析页面模板。
在一个实施例中,上述采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示的步骤之后,包括:
S911:获取页面导出请求,所述页面导出请求携带有导出方式数据;
S912:响应所述页面导出请求,根据所述目标HTML文件进行web程序生成,得到目标web程序;
S913:采用所述导出方式数据将所述目标web程序导出。
本实施例实现了将目标HTML文件导出成目标web程序,从而方便用户将目标web程序进行个性化发布,提高了用户满意度。
对于S911,前端获取用户输入的页面导出请求。
页面导出请求,是将将目标HTML文件导出成目标web程序的请求。
导出方式数据包括:邮件发送导出方式、发送指定应用系统导出方式、导出到指定的存储地址的导出方式。邮件发送导出方式包括:邮箱地址。发送指定应用系统导出方式包括:应用系统接收接口。导出到指定的存储地址的导出方式包括:本地存储地址。
对于S912,前端响应所述页面导出请求,将所述目标HTML文件对于的数据进行web程序打包,将打包得到的程序作为目标web程序。
对于S913,当所述导出方式数据是邮件发送导出方式时,将所述目标web程序作为邮件附件发送给邮件发送导出方式的邮箱地址;当所述导出方式数据是发送指定应用系统导出方式时,将所述目标web程序通过调用指定应用系统导出方式的应用系统接收接口发送给目标应用系统;当所述导出方式数据是导出到指定的存储地址的导出方式时,将所述目标web程序存储在导出到指定的存储地址的导出方式的本地存储地址。
在一个实施例中,上述采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件的步骤之前,还包括:
S921:获取页面导入请求,所述页面导入请求携带有待导入的web程序;
S922:响应所述页面导入请求,根据所述待导入的web程序,得到待转换的HTML文件;
S923:根据所述待转换的HTML文件进行JSON页面数据转换,得到待转换的JSON页面数据;
S924:将所述待转换的JSON页面数据进行视图转换,得到待修改视图;
S925:将所述待修改视图在所述编辑预览区域中进行展示;
S926:基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,根据所述待修改视图获取所述待修改视图的修改结果,得到所述待渲染视图。
本实施例实现了导入web程序,将导入的web程序转换为待修改视图,完成修改后得到待渲染视图,从而方便用户修改外来的web程序,方便协同进行页面开发,满足用户个性化的开发需求,进一步提高了用户体验。
对于S921,前端获取用户输入的页面导入请求。
待导入的web程序,是需要导入到实现本申请的程序进行修改的web程序。
对于S922,前端响应所述页面导入请求,对所述待导入的web程序进行HTML文件转换,转换后得到待转换的HTML文件。
对于S923,前端对所述待转换的HTML文件进行JSON页面数据转换,转换后得到待转换的JSON页面数据,将待转换的JSON页面数据发送给服务端。服务端将待转换的JSON页面数据存储在数据库中。
对于S924,将所述待转换的JSON页面数据转换成模板组件,将所有模板组件作为待修改视图。
对于S926,所述待修改视图的修改结果包括但:模板组件选择修改结果、模板组件位置数据修改结果和模板组件属性配置修改结果。
模板组件选择修改结果,可以是对模板组件的删除、增加中的一种或两种。
模板组件位置数据修改结果,是对所述编辑预览区域中的模板组件的位置进行调整的结果。
模板组件属性配置修改结果,是对所述编辑预览区域中的模板组的组件属性修改的结果。
可选的,步骤S926之后,可以执行步骤S4至步骤S9,以实现对待渲染视图的动态渲染和预览。
在一个实施例中,上述获取页面生成请求的步骤之前,包括:
S11:采用所述Vue框架的mixins方法将事件数据封装到组件,得到待展示的模板组件;
S12:将JS脚本以script标签形式嵌入到组件,得到所述待展示的模板组件;
S13:将所述待展示的模板组件在所述组件选择区域中进行展示。
本实施例实现了将事件数据、JS脚本封装到组件中,从而实现了自定义模板组件,从而有利于满足用户个性化的模板组件定制需求。
对于S11,采用所述Vue框架的mixins方法将事件数据混入到组件中,每个事件数据对应的事件方法返回异步的结果,组件被点击时按顺序执行事件方法。
对于S12,将JS脚本转换成script标签,将转换得到的script标签嵌入到组件,当该组件被加载时将执行script标签对应的JS脚本。
参照图2,本申请还提出了一种页面生成装置,所述装置包括:
页面生成请求获取模块100,用于获取页面生成请求,响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;
待渲染视图生成模块200,用于基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;
JSON数据转换模块300,用于采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;
页面渲染展示模块400,用于获取页面渲染请求,响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
本实施例通过将.Vue格式的单文件组件形成的DOM模板组成模板组件展示在组件选择区域,基于Vue框架可视化获取用户输入的待渲染视图,采用JSON Schema对待渲染视图进行JSON数据转换成待存储的JSON页面数据,将待存储的JSON页面数据存储在数据库中,从数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对待解析的AST文件进行动态渲染,得到目标HTML文件,将目标HTML文件在编辑预览区域进行展示,使非前端开发人员也能快速生成动态页面,通过动态页面可以快速处理用户体验和界面细节,提高了页面开发效率;通过对待渲染视图进行JSON数据转换后存储在数据库中,减少了需要存储的数据量,提高了存储效率,提高了用户体验;使用DOM模板时会受到HTML本身的限制导致自定义组件会被当作无效的内容,从而导致错误的渲染结果,采用.Vue格式的单文件组件时模板组件的DOM模板将不受HTML本身的限制,从而实现了对自定义模板组件的动态渲染,实现了快速动态渲染,提升了搭建效率。
参照图3,本申请实施例中还提供一种计算机设备,该计算机设备可以是服务器,其内部结构可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中,该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于储存页面生成方法等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面生成方法。所述页面生成方法,包括:获取页面生成请求;响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;获取页面渲染请求;响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据;采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板;采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件;采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
本实施例通过将.Vue格式的单文件组件形成的DOM模板组成模板组件展示在组件选择区域,基于Vue框架可视化获取用户输入的待渲染视图,采用JSON Schema对待渲染视图进行JSON数据转换成待存储的JSON页面数据,将待存储的JSON页面数据存储在数据库中,从数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对待解析的AST文件进行动态渲染,得到目标HTML文件,将目标HTML文件在编辑预览区域进行展示,使非前端开发人员也能快速生成动态页面,通过动态页面可以快速处理用户体验和界面细节,提高了页面开发效率;通过对待渲染视图进行JSON数据转换后存储在数据库中,减少了需要存储的数据量,提高了存储效率,提高了用户体验;使用DOM模板时会受到HTML本身的限制导致自定义组件会被当作无效的内容,从而导致错误的渲染结果,采用.Vue格式的单文件组件时模板组件的DOM模板将不受HTML本身的限制,从而实现了对自定义模板组件的动态渲染,实现了快速动态渲染,提升了搭建效率。
本申请一实施例还提供一种计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现一种页面生成方法,包括步骤:获取页面生成请求;响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;获取页面渲染请求;响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据;采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板;采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件;采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
上述执行的页面生成方法,通过将.Vue格式的单文件组件形成的DOM模板组成模板组件展示在组件选择区域,基于Vue框架可视化获取用户输入的待渲染视图,采用JSONSchema对待渲染视图进行JSON数据转换成待存储的JSON页面数据,将待存储的JSON页面数据存储在数据库中,从数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对待解析的AST文件进行动态渲染,得到目标HTML文件,将目标HTML文件在编辑预览区域进行展示,使非前端开发人员也能快速生成动态页面,通过动态页面可以快速处理用户体验和界面细节,提高了页面开发效率;通过对待渲染视图进行JSON数据转换后存储在数据库中,减少了需要存储的数据量,提高了存储效率,提高了用户体验;使用DOM模板时会受到HTML本身的限制导致自定义组件会被当作无效的内容,从而导致错误的渲染结果,采用.Vue格式的单文件组件时模板组件的DOM模板将不受HTML本身的限制,从而实现了对自定义模板组件的动态渲染,实现了快速动态渲染,提升了搭建效率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双速据率SDRAM(SSRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
以上所述仅为本申请的优选实施例,并非因此限制本申请的专利范围,凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本申请的专利保护范围内。
Claims (10)
1.一种页面生成方法,其特征在于,所述方法包括:
获取页面生成请求;
响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;
基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;
采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;
获取页面渲染请求;
响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据;
采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板;
采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件;
采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
2.根据权利要求1所述的页面生成方法,其特征在于,所述基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图的步骤,包括:
获取所述编辑预览区域发送的所述模板组件选择结果和所述模板组件位置数据,所述模板组件选择结果是所述组件选择区域中的所述模板组件被拖拽到所述编辑预览区域的结果;
根据所述模板组件选择结果,确定所述模板组件属性配置结果;
根据所述模板组件选择结果、所述模板组件位置数据和所述模板组件属性配置结果,确定所述待渲染视图。
3.根据权利要求2所述的页面生成方法,其特征在于,所述根据所述模板组件选择结果,确定所述模板组件属性配置结果的步骤,包括:
基于所述模板组件选择结果获取模板组件属性展示请求,所述模板组件属性展示请求携带有待展示的模板组件标识;
响应所述模板组件属性展示请求,将所述待展示的模板组件标识的模板组件的组件属性在所述组件属性编辑区域中进行展示;
获取所述组件属性编辑区域发送的所述待展示的模板组件标识对应的第一模板组件属性;
根据所述模板组件选择结果和所述待展示的模板组件标识进行未被修改的模板组件属性查找,得到第二模板组件属性;
根据所述第一模板组件属性和所述第二模板组件属性,确定所述模板组件属性配置结果。
4.根据权利要求1所述的页面生成方法,其特征在于,所述采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板的步骤,包括:
获取所述编辑预览区域的预览分辨率;
根据所述预览分辨率对所述待渲染的JSON页面数据进行分辨率比例转换,得到转换分辨率后的JSON页面数据;
采用所述ejs模板解析引擎对所述转换分辨率后的JSON页面数据进行模板转换,得到所述待解析页面模板。
5.根据权利要求1所述的页面生成方法,其特征在于,所述采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示的步骤之后,包括:
获取页面导出请求,所述页面导出请求携带有导出方式数据;
响应所述页面导出请求,根据所述目标HTML文件进行web程序生成,得到目标web程序;
采用所述导出方式数据将所述目标web程序导出。
6.根据权利要求1所述的页面生成方法,其特征在于,所述采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件的步骤之前,还包括:
获取页面导入请求,所述页面导入请求携带有待导入的web程序;
响应所述页面导入请求,根据所述待导入的web程序,得到待转换的HTML文件;
根据所述待转换的HTML文件进行JSON页面数据转换,得到待转换的JSON页面数据;
将所述待转换的JSON页面数据进行视图转换,得到待修改视图;
将所述待修改视图在所述编辑预览区域中进行展示;
基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,根据所述待修改视图获取所述待修改视图的修改结果,得到所述待渲染视图。
7.根据权利要求1所述的页面生成方法,其特征在于,所述获取页面生成请求的步骤之前,包括:
采用所述Vue框架的mixins方法将事件数据封装到组件,得到待展示的模板组件;
将JS脚本以script标签形式嵌入到组件,得到所述待展示的模板组件;
将所述待展示的模板组件在所述组件选择区域中进行展示。
8.一种页面生成装置,其特征在于,所述装置包括:
页面生成请求获取模块,用于获取页面生成请求,响应所述页面生成请求,基于Vue框架在可视化界面中展示组件选择区域、编辑预览区域、组件属性编辑区域,其中,所述组件选择区域中的模板组件是.Vue格式的单文件组件形成的DOM模板;
待渲染视图生成模块,用于基于所述组件选择区域、所述编辑预览区域、所述组件属性编辑区域,获取用户输入的待渲染视图,所述待渲染视图包括:模板组件选择结果、模板组件位置数据和模板组件属性配置结果;
JSON数据转换模块,用于采用JSON Schema对所述待渲染视图进行JSON数据转换,得到待存储的JSON页面数据,将所述待存储的JSON页面数据存储在数据库中;
页面渲染展示模块,用于获取页面渲染请求,响应所述页面渲染请求,从所述数据库中获取JSON页面数据作为待渲染的JSON页面数据,采用ejs模板解析引擎对所述待渲染的JSON页面数据进行模板转换,得到待解析页面模板,采用Vue解析器对所述待解析页面模板进行模板解析,得到待解析的AST文件,采用Vue渲染器对所述待解析的AST文件进行动态渲染,得到目标HTML文件,将所述目标HTML文件在所述编辑预览区域进行展示。
9.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011339533.4A CN112433799A (zh) | 2020-11-25 | 2020-11-25 | 页面生成方法、装置、设备及介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011339533.4A CN112433799A (zh) | 2020-11-25 | 2020-11-25 | 页面生成方法、装置、设备及介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112433799A true CN112433799A (zh) | 2021-03-02 |
Family
ID=74697700
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011339533.4A Pending CN112433799A (zh) | 2020-11-25 | 2020-11-25 | 页面生成方法、装置、设备及介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112433799A (zh) |
Cited By (34)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112988298A (zh) * | 2021-03-12 | 2021-06-18 | 土巴兔集团股份有限公司 | 可视化界面配置方法、装置、计算机设备及存储介质 |
CN113032708A (zh) * | 2021-04-02 | 2021-06-25 | 广州博恒信息科技有限责任公司 | 一种无代码Web开发系统 |
CN113094037A (zh) * | 2021-04-20 | 2021-07-09 | 上海携宁计算机科技股份有限公司 | 表单和工作流的交互方法、开发平台、设备及存储介质 |
CN113094049A (zh) * | 2021-04-29 | 2021-07-09 | 北京金山云网络技术有限公司 | 一种页面生成方法、页面展示方法、装置及电子设备 |
CN113128174A (zh) * | 2021-03-18 | 2021-07-16 | 深圳震有科技股份有限公司 | 基于vue根据文本字数的动态显示处理方法、装置 |
CN113126990A (zh) * | 2021-04-22 | 2021-07-16 | 北京京东振世信息技术有限公司 | 一种页面开发方法、装置、设备及存储介质 |
CN113138760A (zh) * | 2021-04-29 | 2021-07-20 | 北京百度网讯科技有限公司 | 一种页面生成方法、装置、电子设备和介质 |
CN113268234A (zh) * | 2021-05-17 | 2021-08-17 | 北京三快在线科技有限公司 | 页面生成方法、装置、终端和存储介质 |
CN113282795A (zh) * | 2021-06-29 | 2021-08-20 | 中国平安人寿保险股份有限公司 | 数据结构图生成及更新方法、装置、电子设备及存储介质 |
CN113361235A (zh) * | 2021-06-30 | 2021-09-07 | 北京百度网讯科技有限公司 | Html文件的生成方法、装置、电子设备及可读存储介质 |
CN113365122A (zh) * | 2021-06-18 | 2021-09-07 | 帕科视讯科技(杭州)股份有限公司 | 一种epg可视化页面的动态编排方法 |
CN113448569A (zh) * | 2021-06-28 | 2021-09-28 | 天闻数媒科技(湖南)有限公司 | 一种站点页面的处理系统、方法、设备和存储介质 |
CN113468460A (zh) * | 2021-09-02 | 2021-10-01 | 北京优锘科技有限公司 | 基于YAML语言渲染Web页面的方法、装置和设备 |
CN113553047A (zh) * | 2021-07-28 | 2021-10-26 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种将dsl转换为可视化页面的方法及装置 |
WO2021218535A1 (zh) * | 2020-04-30 | 2021-11-04 | 华为技术有限公司 | 一种ui控件生成、触发方法及终端 |
CN113626025A (zh) * | 2021-06-30 | 2021-11-09 | 上海豹云网络信息服务有限公司 | 页面配置的方法、装置、设备以及存储介质 |
CN113792536A (zh) * | 2021-09-18 | 2021-12-14 | 深信服科技股份有限公司 | 一种页面生成方法、页面生成系统、存储介质和电子设备 |
CN113805966A (zh) * | 2021-09-15 | 2021-12-17 | 上海得帆信息技术有限公司 | 一种多端设备动态视图渲染实现方法和系统 |
CN113835701A (zh) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | 一种基于组件化的代码生成方法和装置 |
CN113885996A (zh) * | 2021-10-19 | 2022-01-04 | 支付宝(杭州)信息技术有限公司 | 用户界面的生成方法及装置 |
CN114115876A (zh) * | 2021-11-25 | 2022-03-01 | 北京力控元通科技有限公司 | 软件开发方法、装置、计算机设备及存储介质 |
CN114138425A (zh) * | 2022-02-07 | 2022-03-04 | 广州市玄武无线科技股份有限公司 | 一种基于公式生成表单的方法及装置 |
CN114138254A (zh) * | 2021-11-30 | 2022-03-04 | 北京宇信科技集团股份有限公司 | 一种代码自动生成方法、介质、设备和系统 |
CN114244971A (zh) * | 2021-11-24 | 2022-03-25 | 北京新奥特图腾科技有限公司 | 一种多系统的集中控制方法和装置 |
CN114265584A (zh) * | 2021-12-08 | 2022-04-01 | 中国联合网络通信集团有限公司 | 页面组件生成方法、装置、设备及存储介质 |
CN114356472A (zh) * | 2021-12-03 | 2022-04-15 | 浙江臻善科技股份有限公司 | 一种系统界面差别化动态渲染的方法 |
CN114385957A (zh) * | 2022-03-24 | 2022-04-22 | 北京搜狐新媒体信息技术有限公司 | 一种落地页的创建方法及建站平台 |
CN114461960A (zh) * | 2021-12-28 | 2022-05-10 | 马上消费金融股份有限公司 | 页面生成方法、页面展示方法及装置 |
CN114553971A (zh) * | 2022-02-24 | 2022-05-27 | 山东浪潮通软信息科技有限公司 | 一种应用框架的设计方法、系统、设备及介质 |
CN114968204A (zh) * | 2020-11-16 | 2022-08-30 | 华为技术有限公司 | 一种前端组件与后端组件转换的方法及装置 |
CN115268884A (zh) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | 一种基于aPaaS平台的移动端可视化页面配置和渲染方法 |
CN115268911A (zh) * | 2022-08-01 | 2022-11-01 | 广州道然信息科技有限公司 | 基于布局和组件的电视应用构建方法 |
CN115495081A (zh) * | 2022-11-18 | 2022-12-20 | 深圳代码兄弟技术有限公司 | 基于json数据的低代码页面组件生成和加载的方法及系统 |
CN115981750A (zh) * | 2023-02-09 | 2023-04-18 | 中远海运科技股份有限公司 | 一种基于递归算法的组件配置方法 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110058856A (zh) * | 2019-04-28 | 2019-07-26 | 恒生电子股份有限公司 | 页面配置方法及装置 |
CN110990731A (zh) * | 2019-10-12 | 2020-04-10 | 平安国际智慧城市科技股份有限公司 | 一种静态网页的渲染方法、装置、设备及计算机存储介质 |
US20200272681A1 (en) * | 2019-02-21 | 2020-08-27 | Bank Of America Corporation | Just-In-Time Front End Template Generation Using Logical Document Object Models |
-
2020
- 2020-11-25 CN CN202011339533.4A patent/CN112433799A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20200272681A1 (en) * | 2019-02-21 | 2020-08-27 | Bank Of America Corporation | Just-In-Time Front End Template Generation Using Logical Document Object Models |
CN110058856A (zh) * | 2019-04-28 | 2019-07-26 | 恒生电子股份有限公司 | 页面配置方法及装置 |
CN110990731A (zh) * | 2019-10-12 | 2020-04-10 | 平安国际智慧城市科技股份有限公司 | 一种静态网页的渲染方法、装置、设备及计算机存储介质 |
Non-Patent Citations (1)
Title |
---|
肖建芳;: "Web前端网页渲染优化研究", 现代计算机, no. 20 * |
Cited By (48)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2021218535A1 (zh) * | 2020-04-30 | 2021-11-04 | 华为技术有限公司 | 一种ui控件生成、触发方法及终端 |
CN114968204A (zh) * | 2020-11-16 | 2022-08-30 | 华为技术有限公司 | 一种前端组件与后端组件转换的方法及装置 |
CN114968204B (zh) * | 2020-11-16 | 2023-05-09 | 华为技术有限公司 | 一种前端组件与后端组件转换的方法及装置 |
CN112988298A (zh) * | 2021-03-12 | 2021-06-18 | 土巴兔集团股份有限公司 | 可视化界面配置方法、装置、计算机设备及存储介质 |
CN113128174A (zh) * | 2021-03-18 | 2021-07-16 | 深圳震有科技股份有限公司 | 基于vue根据文本字数的动态显示处理方法、装置 |
CN113128174B (zh) * | 2021-03-18 | 2024-05-07 | 深圳震有科技股份有限公司 | 基于vue根据文本字数的动态显示处理方法、装置 |
CN113032708A (zh) * | 2021-04-02 | 2021-06-25 | 广州博恒信息科技有限责任公司 | 一种无代码Web开发系统 |
CN113094037A (zh) * | 2021-04-20 | 2021-07-09 | 上海携宁计算机科技股份有限公司 | 表单和工作流的交互方法、开发平台、设备及存储介质 |
CN113126990A (zh) * | 2021-04-22 | 2021-07-16 | 北京京东振世信息技术有限公司 | 一种页面开发方法、装置、设备及存储介质 |
CN113126990B (zh) * | 2021-04-22 | 2023-09-29 | 北京京东振世信息技术有限公司 | 一种页面开发方法、装置、设备及存储介质 |
CN113094049A (zh) * | 2021-04-29 | 2021-07-09 | 北京金山云网络技术有限公司 | 一种页面生成方法、页面展示方法、装置及电子设备 |
CN113138760B (zh) * | 2021-04-29 | 2024-03-12 | 北京百度网讯科技有限公司 | 一种页面生成方法、装置、电子设备和介质 |
CN113138760A (zh) * | 2021-04-29 | 2021-07-20 | 北京百度网讯科技有限公司 | 一种页面生成方法、装置、电子设备和介质 |
CN113268234A (zh) * | 2021-05-17 | 2021-08-17 | 北京三快在线科技有限公司 | 页面生成方法、装置、终端和存储介质 |
CN113365122A (zh) * | 2021-06-18 | 2021-09-07 | 帕科视讯科技(杭州)股份有限公司 | 一种epg可视化页面的动态编排方法 |
CN113365122B (zh) * | 2021-06-18 | 2023-03-03 | 帕科视讯科技(杭州)股份有限公司 | 一种epg可视化页面的动态编排方法 |
CN113448569A (zh) * | 2021-06-28 | 2021-09-28 | 天闻数媒科技(湖南)有限公司 | 一种站点页面的处理系统、方法、设备和存储介质 |
CN113282795B (zh) * | 2021-06-29 | 2024-05-14 | 中国平安人寿保险股份有限公司 | 数据结构图生成及更新方法、装置、电子设备及存储介质 |
CN113282795A (zh) * | 2021-06-29 | 2021-08-20 | 中国平安人寿保险股份有限公司 | 数据结构图生成及更新方法、装置、电子设备及存储介质 |
CN113626025A (zh) * | 2021-06-30 | 2021-11-09 | 上海豹云网络信息服务有限公司 | 页面配置的方法、装置、设备以及存储介质 |
CN113361235B (zh) * | 2021-06-30 | 2024-03-22 | 北京百度网讯科技有限公司 | Html文件的生成方法、装置、电子设备及可读存储介质 |
CN113361235A (zh) * | 2021-06-30 | 2021-09-07 | 北京百度网讯科技有限公司 | Html文件的生成方法、装置、电子设备及可读存储介质 |
CN113553047A (zh) * | 2021-07-28 | 2021-10-26 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种将dsl转换为可视化页面的方法及装置 |
CN113468460A (zh) * | 2021-09-02 | 2021-10-01 | 北京优锘科技有限公司 | 基于YAML语言渲染Web页面的方法、装置和设备 |
CN113805966A (zh) * | 2021-09-15 | 2021-12-17 | 上海得帆信息技术有限公司 | 一种多端设备动态视图渲染实现方法和系统 |
CN113792536A (zh) * | 2021-09-18 | 2021-12-14 | 深信服科技股份有限公司 | 一种页面生成方法、页面生成系统、存储介质和电子设备 |
CN113835701B (zh) * | 2021-09-22 | 2024-04-02 | 上海妙一生物科技有限公司 | 一种基于组件化的代码生成方法和装置 |
CN113835701A (zh) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | 一种基于组件化的代码生成方法和装置 |
CN113885996A (zh) * | 2021-10-19 | 2022-01-04 | 支付宝(杭州)信息技术有限公司 | 用户界面的生成方法及装置 |
CN114244971A (zh) * | 2021-11-24 | 2022-03-25 | 北京新奥特图腾科技有限公司 | 一种多系统的集中控制方法和装置 |
CN114244971B (zh) * | 2021-11-24 | 2023-09-05 | 图腾视界(广州)数字科技有限公司 | 一种多系统的集中控制方法和装置 |
CN114115876A (zh) * | 2021-11-25 | 2022-03-01 | 北京力控元通科技有限公司 | 软件开发方法、装置、计算机设备及存储介质 |
CN114138254A (zh) * | 2021-11-30 | 2022-03-04 | 北京宇信科技集团股份有限公司 | 一种代码自动生成方法、介质、设备和系统 |
CN114356472A (zh) * | 2021-12-03 | 2022-04-15 | 浙江臻善科技股份有限公司 | 一种系统界面差别化动态渲染的方法 |
CN114265584A (zh) * | 2021-12-08 | 2022-04-01 | 中国联合网络通信集团有限公司 | 页面组件生成方法、装置、设备及存储介质 |
CN114265584B (zh) * | 2021-12-08 | 2024-06-04 | 中国联合网络通信集团有限公司 | 页面组件生成方法、装置、设备及存储介质 |
CN114461960A (zh) * | 2021-12-28 | 2022-05-10 | 马上消费金融股份有限公司 | 页面生成方法、页面展示方法及装置 |
CN114138425B (zh) * | 2022-02-07 | 2022-06-10 | 广州市玄武无线科技股份有限公司 | 一种基于公式生成表单的方法及装置 |
CN114138425A (zh) * | 2022-02-07 | 2022-03-04 | 广州市玄武无线科技股份有限公司 | 一种基于公式生成表单的方法及装置 |
CN114553971A (zh) * | 2022-02-24 | 2022-05-27 | 山东浪潮通软信息科技有限公司 | 一种应用框架的设计方法、系统、设备及介质 |
CN114553971B (zh) * | 2022-02-24 | 2024-05-28 | 浪潮通用软件有限公司 | 一种应用框架的设计方法、系统、设备及介质 |
CN114385957A (zh) * | 2022-03-24 | 2022-04-22 | 北京搜狐新媒体信息技术有限公司 | 一种落地页的创建方法及建站平台 |
CN115268884A (zh) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | 一种基于aPaaS平台的移动端可视化页面配置和渲染方法 |
CN115268884B (zh) * | 2022-06-09 | 2023-06-16 | 知学云(北京)科技股份有限公司 | 一种基于aPaaS平台的移动端可视化页面配置和渲染方法 |
CN115268911A (zh) * | 2022-08-01 | 2022-11-01 | 广州道然信息科技有限公司 | 基于布局和组件的电视应用构建方法 |
CN115495081A (zh) * | 2022-11-18 | 2022-12-20 | 深圳代码兄弟技术有限公司 | 基于json数据的低代码页面组件生成和加载的方法及系统 |
CN115981750B (zh) * | 2023-02-09 | 2023-10-20 | 中远海运科技股份有限公司 | 一种基于递归算法的组件配置方法 |
CN115981750A (zh) * | 2023-02-09 | 2023-04-18 | 中远海运科技股份有限公司 | 一种基于递归算法的组件配置方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN112433799A (zh) | 页面生成方法、装置、设备及介质 | |
CN105955888B (zh) | 一种页面调试预览方法及系统 | |
US8365203B2 (en) | Method for creating a native application for mobile communications device in real-time | |
US7680883B2 (en) | Dynamic integration of web sites | |
AU2012370492B2 (en) | Graphical overlay related to data mining and analytics | |
US10542123B2 (en) | System and method for generating and monitoring feedback of a published webpage as implemented on a remote client | |
CN109032917B (zh) | 页面调试方法和系统、移动终端以及电脑端 | |
US7783967B1 (en) | Packaging web content for reuse | |
US20020035579A1 (en) | Transform rule generator for web-based markup languages | |
CN109614601A (zh) | 基于web的表格处理方法、装置、设备及可读介质 | |
CN109840083B (zh) | 网页组件模板构建方法、装置、计算机设备和存储介质 | |
CN108595697B (zh) | 网页集成方法、装置及系统 | |
CN112068824A (zh) | 一种网页开发预览方法、装置及电子设备 | |
CN112417338B (zh) | 一种页面适配方法、系统及设备 | |
CN112395848A (zh) | 富文本显示方法、装置、计算机设备和存储介质 | |
CN113296653B (zh) | 一种仿真交互模型构建方法、交互方法及相关设备 | |
CN111913566A (zh) | 数据处理方法、装置、电子设备及计算机存储介质 | |
CN109558123A (zh) | 网页转化电子书的方法、电子设备、存储介质 | |
CN117093386A (zh) | 页面截图方法、装置、计算机设备和存储介质 | |
US7844909B2 (en) | Dynamically rendering a button in a hypermedia content browser | |
CN101753598A (zh) | 用于整合多个web应用的方法和Web应用集成器 | |
CN112507257B (zh) | 一种网页显示方法、装置、设备以及存储介质 | |
CN112486378B (zh) | 图形生成方法、装置、终端及存储介质 | |
CN114185795A (zh) | 埋点配置方法、装置、电子设备及存储介质 | |
CN110147477A (zh) | Web系统的数据资源模型化提取方法、装置以及设备 |
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 | ||
AD01 | Patent right deemed abandoned |
Effective date of abandoning: 20240507 |
|
AD01 | Patent right deemed abandoned |