CN117573127B - 一种页面搭建方法、装置、电子设备及介质 - Google Patents
一种页面搭建方法、装置、电子设备及介质 Download PDFInfo
- Publication number
- CN117573127B CN117573127B CN202410064270.2A CN202410064270A CN117573127B CN 117573127 B CN117573127 B CN 117573127B CN 202410064270 A CN202410064270 A CN 202410064270A CN 117573127 B CN117573127 B CN 117573127B
- Authority
- CN
- China
- Prior art keywords
- component
- page
- tree structure
- unique
- node
- 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
- 238000000034 method Methods 0.000 title claims abstract description 32
- 230000006870 function Effects 0.000 claims description 18
- 230000000007 visual effect Effects 0.000 claims description 18
- 230000006399 behavior Effects 0.000 claims description 12
- 230000004044 response Effects 0.000 claims description 6
- 238000013507 mapping Methods 0.000 claims description 5
- 238000013461 design Methods 0.000 description 7
- 238000011161 development Methods 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及一种页面搭建方法、装置、电子设备及介质，其方法包括：基于用户对组件的拖拽行为生成页面树结构；对页面树结构所有节点的属性进行配置，得到配置后的页面树结构；对配置后的页面树结构进行解析，得到页面树结构对应的页面。本发明提高了页面生成效率。
Description
技术领域
本发明涉及网页设计技术领域，尤其涉及一种页面搭建方法、装置、电子设备及介质。
背景技术
随着Web信息系统的普及，B/S架构已成为其主导选择。此类系统的优势在于，对于用户而言拥有跨平台、跨设备的特点；对于软件开发者而言使其在开发语言选择上形成了一致，大大减少了开发时间，提升了开发效率。
现有技术中，基于可视化Web页面设计器开发的方案被一部分开发者采用，此方案通过用户自选组件拖入到页面设计器中以形成初步Web页面，并输出最终的HTML、CSS等文件。此方法虽在一定程度上能够加快开发页面的速度，但是存在如下问题：1）传统的页面设计器所拥有的组件较为固定，用户只能选择设计器所提供的有限范围的组件，无法满足大多数用户的设计需求。2）用户使用的设计器组件样式较为固定，无法在设计器中对其进行更改，在一定程度上降低了开发速度。并且，传统设计器没有提供各组件的属性配置，需要用户在对最终的输出代码进行整体审视后进行添加和修改。综上所述，现有技术中的生成页面的效率低。
发明内容
有鉴于此，有必要提供一种页面搭建方法，用以解决现有技术中的生成页面的效率低的问题。
为了解决上述问题，本发明提供一种页面搭建方法，包括：
基于用户对组件的拖拽行为生成页面树结构；
对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构；
对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面。
在一些可能的实现方式中，所述基于用户对组件的拖拽行为生成页面树结构，包括：
响应于针对目标网页节点发出的网页创建请求，显示网页编辑界面，所述网页编辑界面包括画布区域、组件库区域以及组件属性配置区域，所述组件库区域包括多个组件；
在所述组件库区域通过对至少一个所述组件拖拽操作，将所述至少一个所述组件放置在所述画布区域；
将所述网页编辑界面作为所述树形结构的根节点，将拖拽后的所述至少一个所述组件按照拖拽后的层级关系放入根节点的子节点属性中，得到页面树结构。
在一些可能的实现方式中，所述组件包括应用组件和布局组件，当在所述组件库区域拖拽所述应用组件到所述画布区域时，为所述应用组件配置唯一标识属性、唯一名称属性与组件类型属性，当在所述组件库区域拖拽所述布局组件到所述画布区域时，为所述布局组件配置唯一标识属性、唯一名称属性与子组件属性。
在一些可能的实现方式中，所述对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构，包括：
针对每个所述组件，响应于针对所述组件执行的选择操作，在组件属性配置区域显示与所述组件对应的多个属性配置项；
针对每个所述组件，响应于针对所述组件执行的配置操作，生成与所述组件对应的属性配置数据并保存，得到配置后的页面树结构。
在一些可能的实现方式中，所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面，包括：
对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面。
在一些可能的实现方式中，所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面，包括：
将配置后的页面树结构作为唯一组件，并为所述唯一组件添加组件依赖和函数组件；
对所述唯一组件中的树形结构对象进行遍历，得到页面文件；
设计器对所述页面文件进行渲染得到可配置属性的可视化页面。
在一些可能的实现方式中，所述对所述唯一组件中的树形结构对象进行遍历，得到页面文件，包括：
对所述唯一组件中的树形结构的每个节点进行遍历，通过所述节点的组件类型确定所述节点的组件依赖和函数组件，并将所述节点组件依赖和函数组件添加到所述节点上，得到页面文件。
另一方面，本发明还提供了一种页面搭建装置，包括：
页面树获取模块，用于基于用户对组件的拖拽行为生成页面树结构；
页面树配置模块，用于对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构；
页面生成模块，用于对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面。
另一方面，本发明还提供了一种电子设备，包括存储器和处理器，其中，
所述存储器，用于存储程序；
所述处理器，与所述存储器耦合，用于执行所述存储器中存储的所述程序，以实现上述任意一种实现方式中所述的一种页面搭建方法中的步骤。
另一方面，本发明还提供了一种计算机可读存储介质，用于存储计算机可读取的程序或指令，所述程序或指令被处理器执行时能够实现上述任意一种实现方式中所述的一种页面搭建方法中的步骤。
采用上述实施例的有益效果是：本发明提供的一种页面搭建方法，首先基于用户对组件的拖拽行为生成页面树结构，进一步对页面树结构所有节点的属性进行配置，得到配置后的页面树结构，最后对配置后的页面树结构进行解析，得到页面树结构对应的页面。本发明通过对配置后的页面树结构进行解析，得到配置后的页面树结构，从而提高页面生成的效率。
附图说明
图1为本发明提供的一种页面搭建方法一实施例的结构示意图流程图；
图2为本发明提供的一种页面搭建装置的一个实施例结构示意图；
图3为本发明提供的电子设备的一个实施例结构示意图。
具体实施方式
下面结合附图来具体描述本发明的优选实施例，其中，附图构成本申请一部分，并与本发明的实施例一起用于阐释本发明的原理，并非用于限定本发明的范围。
图1为本发明提供的一种页面搭建方法的一个实施例流程示意图，如图1所示，一种页面搭建方法，包括：
S101、基于用户对组件的拖拽行为生成页面树结构；
S102、对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构；
S103、对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面。
与现有技术相比，本实施例提供的一种页面搭建方法，首先基于用户对组件的拖拽行为生成页面树结构，进一步对页面树结构所有节点的属性进行配置，得到配置后的页面树结构，最后对配置后的页面树结构进行解析，得到页面树结构对应的页面。本发明通过对配置后的页面树结构进行解析，得到配置后的页面树结构，从而提高页面生成的效率。
在本发明的一些实施例中，所述基于用户对组件的拖拽行为生成页面树结构，包括：
响应于针对目标网页节点发出的网页创建请求，显示网页编辑界面，所述网页编辑界面包括画布区域、组件库区域以及组件属性配置区域，所述组件库区域包括多个组件；
在所述组件库区域通过对至少一个所述组件拖拽操作，将所述至少一个所述组件放置在所述画布区域；
将所述网页编辑界面作为所述树形结构的根节点，将拖拽后的所述至少一个所述组件按照拖拽后的层级关系放入根节点的子节点属性中，得到页面树结构。
在本发明的一些实施例中，所述组件包括应用组件和布局组件，当在所述组件库区域拖拽所述应用组件到所述画布区域时，为所述应用组件配置唯一标识属性、唯一名称属性与组件类型属性，当在所述组件库区域拖拽所述布局组件到所述画布区域时，为所述布局组件配置唯一标识属性、唯一名称属性与子组件属性。
在本发明的具体实施例中，页面设计包括组件库、画布（解析器）、属性配置面板，用户在登录页面设计器后，进入画布设计页面。用户可在左侧组件库中拖拽相关组件至中间画布页面中，此后可在右侧为该组件进行相关属性配置，如文本、颜色、宽度等。
在本发明的具体实施例中，在步骤S101中，拖拽组件规则：在页面设计器的左侧组件库中存在两种类型的组件：布局组件与应用组件。布局组件用于通用页面布局，而应用组件则主要用于具体功能实现。用户可拖拽布局组件与应用组件至另外的布局组件中，而应用组件只可被拖入布局组件与主页面下。在此，可将画布中的主页面视为全局最大的布局组件。当其他组件被拖入布局组件中，将会默认接受此布局组件中的所有相关配置属性。
页面树结构中间语言生成：在用户进入页面设计器后，此设计器会自动将画布中的主页面作为树的根结点存放在json格式的tree配置对象中，其属性包含唯一标识（unikey）、唯一名称（name）与其包含的子组件（children），其中子组件为列表型数据结构，其他为字符串型。
若用户拖入了组件，则将此组件放入根结点的children属性中，若拖入的组件为布局组件，则为其配置唯一标识、唯一名称与子组件等属性；若拖入的组件为应用组件，则为其配置唯一标识、唯一名称与组件类型（type），其中组件类型为字符串。当用户拖入应用组件至布局组件中时，将拖入的应用组件写入对于布局组件的children中，并为其进行相关配置。当用户完成可组件拖拽后，整个页面树结构中间语言生成完毕，其是一个包含各组件树形结构，各树结点中包含对应的属性信息。
在此需要说明的是，每个组件的唯一标识（unikey）作为属性匹配时所对一的唯一键，唯一名称（name）用于用户扩展，组件类型（type）用于组件关系映射。
在本发明的一些实施例中，所述对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构，包括：
针对每个所述组件，响应于针对所述组件执行的选择操作，在组件属性配置区域显示与所述组件对应的多个属性配置项；
针对每个所述组件，响应于针对所述组件执行的配置操作，生成与所述组件对应的属性配置数据并保存，得到配置后的页面树结构。
在本发明的具体实施例中，在步骤S102中，对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构，具体的，当用户将组件拖入画布中后，可在画布中选中相关组件并在右侧配置栏中对组件的属性进行配置，此过程具体可分为两步操作。
第一步：选中组件
选中画布中被拖入的组件有两大方式。一是直接在画布中点击相关组件，此时右侧属性栏会展示此组件中能够被配置的相关属性。若想选择处于外侧的布局组件，则用户可将鼠标放在当前组件顶端，画布会自动展示外侧布局组件的轮廓，再次点击此轮廓即可选中外部布局组件；二则是在左侧组件库的上方Tab页中，选择“大纲”项。此大纲能够通过tree配置对象计算页面数结构并将其可视化。用户在此树中选择相应的组件后，右侧组件配置栏能够展示当前组件能够被配置的属性。
第二步：组件属性配置
此过程主要用于生成树结点的属性配置。由于tree配置对象中存放的只是组件内容，并没有进行相关配置。于是用户可在右侧对页面树中的所有组件进行属性配置。每当用户对一个组件进行配置后，页面设计器会在json格式的props配置对象中添加一个键值对类型数据。其中，每个组件的键为其唯一标识（unikey），值为用户设置的属性配置（通常也为键值对类型）。用户对画布中所有组件的属性配置后，此文件中都会保存相关状态，并与挂载组件结点一一对应。
当所有组件配置完毕后，则页面树结构所有结点的属性也配置完毕。以上tree对象与props对象两个配置保存着当前页面的结构以及属性等相关状态信息，之后，将上述两种中间语言发送至后台进行解析处理。
在本发明的一些实施例中，所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面，包括：
对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面。
在本发明的一些实施例中，所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面，包括：
将配置后的页面树结构作为唯一组件，并为所述唯一组件添加组件依赖和函数组件；
对所述唯一组件中的树形结构对象进行遍历，得到页面文件；
设计器对所述页面文件进行渲染得到可配置属性的可视化页面。
在本发明的一些实施例中，所述对所述唯一组件中的树形结构对象进行遍历，得到页面文件，包括：
对所述唯一组件中的树形结构的每个节点进行遍历，通过所述节点的组件类型确定所述节点的组件依赖和函数组件，并将所述节点组件依赖和函数组件添加到所述节点上，得到页面文件。
在本发明的具体实施例中，在步骤S103中，对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面，具体包括如下步骤：
步骤一：对页面进行默认基本配置
在后台创建一个基于用户设计的唯一组件并为其设置唯一id。在组件内部添加现有组件库中的所有组件依赖、函数组件主体与暴露方法等常规jsx文件配置。
步骤二：同时读取tree配置对象与现有组件库依赖
对tree对象中存在的树型数据结构进行深度优先方式的递归遍历。当遍历到一个结点后，通过其组件类型（type）值找到现有组件库中所对应的组件，并将其作为当前组件的引用组件，挂载至函数组件主体上。之后，通过判断其是否是叶子结点或无子组件后，进行递归挂载。当递归计算完成后，整个页面的静态结构已经生成，此时各组件的属性皆为默认配置值。
步骤三：读取props配置对象
将其作为组件唯一标识至属性配置的映射数据字典。在静态页面生成之后，通过各组件的唯一标识确认用户在设计时在该组件上的属性配置，并将此属性添加在各组件中，以使得用户配置生效。当各组件添加props属性配置后，其能够传递至引用组件内部，使得其呈现为用户期望达到的状态效果。
最后，当上述中间语言解析步骤完成后，后台会将其打包成一个单独的封装组件，并为此组件添加唯一标识，之后用户在设计器页面上能够通过该唯一标识对已生成的页面进行预览。预览页面的代码量极少，只有jsx文件必有内容与该设计组件的引用。
为了便于用户能够对已设计完成的组件内容与属性进行修改，通过利用各组件上的唯一名称（name）对组件进行绑定，并维护组件唯一标识（unikey）与唯一名称（name）的映射关系表。用户可在预览状态下的源代码中使用ref结合组件的唯一名称，直接操作现有组件中的状态，以满足用户的业务需求。
通过上述步骤，可以成功的将在页面设计器中设计的各组件以及其各功能属性配置在一个组件中，并且用户可结合ref与组件唯一名称对组件进行自定义修改和功能新增。大大增加了页面设计器的灵活性与可扩展性，并且通过中间语言生成与解析的方式极大的降低了通信成本与浏览器计算成本，使得其拥有“开箱即用”的特点，较大程度的提升了系统的开发速度与相关人员的工作效率。
为了更好实施本发明实施例中的一种页面搭建方法，在一种页面搭建方法基础之上，对应地，如图2所示，本发明实施例还提供了一种页面搭建装置，一种页面搭建装置200包括：
页面树获取模块201，用于基于用户对组件的拖拽行为生成页面树结构；
页面树配置模块202，用于对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构；
页面生成模块203，用于对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面。
上述实施例提供的一种页面搭建装置200可实现上述自一种页面搭建方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述一种页面搭建方法实施例中的相应内容，此处不再赘述。
如图3所示，本发明还相应提供了一种电子设备300。该电子设备300包括处理器301、存储器302及显示器303。图3仅示出了电子设备300的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
处理器301在一些实施例中可以是一中央处理器（Central Processing Unit，CPU），微处理器或其他数据处理芯片，用于运行存储器302中存储的程序代码或处理数据，例如本发明中的一种页面搭建方法。
在一些实施例中，处理器301可以是单个服务器或服务器组。服务器组可为集中式或分布式的。在一些实施例中，处理器301可为本地的或远程的。在一些实施例中，处理器301可实施于云平台。在一实施例中，云平台可包括私有云、公共云、混合云、社区云、分布式云、内部间、多重云等，或以上的任意组合。
存储器302在一些实施例中可以是电子设备300的内部存储单元，例如电子设备300的硬盘或内存。存储器302在另一些实施例中也可以是电子设备300的外部存储设备，例如电子设备300上配备的插接式硬盘，智能存储卡（Smart Media Card，SMC），安全数字（Secure Digital，SD）卡，闪存卡（Flash Card）等。
进一步地，存储器302还可既包括电子设备300的内部储存单元也包括外部存储设备。存储器302用于存储安装电子设备300的应用软件及各类数据。
显示器303在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED（Organic Light-Emitting Diode，有机发光二极管）触摸器等。显示器303用于显示在电子设备300的信息以及用于显示可视化的用户界面。电子设备300的部件301-303通过系统总线相互通信。
在一实施例中，当处理器301执行存储器302中的一种页面搭建程序时，可实现以下步骤：
基于用户对组件的拖拽行为生成页面树结构；
对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构；
对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面。
应当理解的是：处理器301在执行存储器302中的一种页面搭建程序时，除了上面的功能之外，还可实现其他功能，具体可参见前面相应方法实施例的描述。
进一步地，本发明实施例对提及的电子设备300的类型不作具体限定，电子设备300可以为手机、平板电脑、个人数字助理(personaldigitalassistant，PDA)、可穿戴设备、膝上型计算机(laptop)等便携式电子设备。便携式电子设备的示例性实施例包括但不限于搭载IOS、android、microsoft或者其他操作系统的便携式电子设备。上述便携式电子设备也可以是其他便携式电子设备，诸如具有触敏表面(例如触控面板)的膝上型计算机(laptop)等。还应当理解的是，在本发明其他一些实施例中，电子设备300也可以不是便携式电子设备，而是具有触敏表面(例如触控面板)的台式计算机。
本领域技术人员可以理解，实现上述实施例方法的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读存储介质中。其中，所述计算机可读存储介质为磁盘、光盘、只读存储记忆体或随机存储记忆体等。
以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。
Claims (7)
1.一种页面搭建方法，其特征在于，包括：
基于用户对组件的拖拽行为生成页面树结构；
对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构；
对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面；
所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面，包括：
对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面；
所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面，包括：
将配置后的页面树结构作为唯一组件，并为所述唯一组件添加组件依赖和函数组件；
对所述唯一组件中的树结构对象进行遍历，得到页面文件；
设计器对所述页面文件进行渲染得到可配置属性的可视化页面，所述可配置属性的可视化页面上的组件通过组件的唯一名称对所述组件进行绑定，并维护所述组件唯一标识和唯一名称的映射关系表，使得用户在预览状态下的源代码中使用ref结合所述组件的唯一名称，操作所述组件的状态；
所述对唯一组件中的树结构对象进行遍历，得到页面文件，包括：
对所述唯一组件中的树结构的每个节点进行遍历，通过所述节点的组件类型确定所述节点的组件依赖和函数组件，并将所述节点组件依赖和函数组件添加到所述节点上，得到页面文件。
2.根据权利要求1所述的页面搭建方法，其特征在于，所述基于用户对组件的拖拽行为生成页面树结构，包括：
响应于针对目标网页节点发出的网页创建请求，显示网页编辑界面，所述网页编辑界面包括画布区域、组件库区域以及组件属性配置区域，所述组件库区域包括多个组件；
在所述组件库区域通过对至少一个所述组件拖拽操作，将所述至少一个所述组件放置在所述画布区域；
将所述网页编辑界面作为所述树结构的根节点，将拖拽后的所述至少一个所述组件按照拖拽后的层级关系放入根节点的子节点属性中，得到页面树结构。
3.根据权利要求2所述的页面搭建方法，其特征在于，所述组件包括应用组件和布局组件，当在所述组件库区域拖拽所述应用组件到所述画布区域时，为所述应用组件配置唯一标识属性、唯一名称属性与组件类型属性，当在所述组件库区域拖拽所述布局组件到所述画布区域时，为所述布局组件配置唯一标识属性、唯一名称属性与子组件属性。
4.根据权利要求1所述的页面搭建方法，其特征在于，所述对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构，包括：
针对每个所述组件，响应于针对所述组件执行的选择操作，在组件属性配置区域显示与所述组件对应的多个属性配置项；
针对每个所述组件，响应于针对所述组件执行的配置操作，生成与所述组件对应的属性配置数据并保存，得到配置后的页面树结构。
5.一种页面搭建装置，其特征在于，包括：
页面树获取模块，用于基于用户对组件的拖拽行为生成页面树结构；
页面树配置模块，用于对所述页面树结构所有节点的属性进行配置，得到配置后的页面树结构；
页面生成模块，用于对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面；
所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的页面，包括：
对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面；
所述对所述配置后的页面树结构进行解析，得到所述页面树结构对应的可配置属性的可视化页面，包括：
将配置后的页面树结构作为唯一组件，并为所述唯一组件添加组件依赖和函数组件；
对所述唯一组件中的树结构对象进行遍历，得到页面文件；
设计器对所述页面文件进行渲染得到可配置属性的可视化页面，所述可配置属性的可视化页面上的组件通过组件的唯一名称对所述组件进行绑定，并维护所述组件唯一标识和唯一名称的映射关系表，使得用户在预览状态下的源代码中使用ref结合所述组件的唯一名称，操作所述组件的状态；
所述对唯一组件中的树结构对象进行遍历，得到页面文件，包括：
对所述唯一组件中的树结构的每个节点进行遍历，通过所述节点的组件类型确定所述节点的组件依赖和函数组件，并将所述节点组件依赖和函数组件添加到所述节点上，得到页面文件。
6.一种电子设备，其特征在于，包括存储器和处理器，其中，
所述存储器，用于存储程序；
所述处理器，与所述存储器耦合，用于执行所述存储器中存储的所述程序，以实现上述权利要求1至4中任意一项所述的一种页面搭建方法中的步骤。
7.一种计算机可读存储介质，其特征在于，用于存储计算机可读取的程序或指令，所述程序或指令被处理器执行时能够实现上述权利要求1至4中任意一项所述的一种页面搭建方法中的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410064270.2A CN117573127B (zh) | 2024-01-17 | 2024-01-17 | 一种页面搭建方法、装置、电子设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410064270.2A CN117573127B (zh) | 2024-01-17 | 2024-01-17 | 一种页面搭建方法、装置、电子设备及介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117573127A CN117573127A (zh) | 2024-02-20 |
| CN117573127B true CN117573127B (zh) | 2024-04-23 |
Family
ID=89890438
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410064270.2A Active CN117573127B (zh) | 2024-01-17 | 2024-01-17 | 一种页面搭建方法、装置、电子设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117573127B (zh) |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20140019627A (ko) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | 웹 어플리케이션 저작도구 및 저작 방법 |
| KR20150037238A (ko) * | 2013-09-30 | 2015-04-08 | 엘지전자 주식회사 | 이동 단말기 및 그 구동 방법 |
| US9348563B1 (en) * | 2014-12-10 | 2016-05-24 | Sap Se | Bi-directional editing between visual screen designer and source code |
| CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
| CN109299422A (zh) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | 可视化网页编辑方法、系统、设备及存储介质 |
| CN111930378A (zh) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Web端项目表单设计器的实现方法、装置和系统 |
| CN112130856A (zh) * | 2020-09-29 | 2020-12-25 | 重庆紫光华山智安科技有限公司 | 强扩展性的前端可视化界面生成方法、系统、介质及终端 |
| CN112965701A (zh) * | 2021-02-08 | 2021-06-15 | 中国工商银行股份有限公司 | 前端代码生成方法及装置 |
| CN113918151A (zh) * | 2021-10-12 | 2022-01-11 | 平安国际智慧城市科技股份有限公司 | 低代码的页面开发方法、装置、设备及存储介质 |
| CN114077430A (zh) * | 2021-11-16 | 2022-02-22 | 上海上实龙创智能科技股份有限公司 | 界面生成方法、装置、电子设备及存储介质 |
| CN114968224A (zh) * | 2022-03-28 | 2022-08-30 | 徐工汉云技术股份有限公司 | 一种多业务场景的树组件封装系统及方法 |
-
2024
- 2024-01-17 CN CN202410064270.2A patent/CN117573127B/zh active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR20140019627A (ko) * | 2012-08-06 | 2014-02-17 | 인크로스 주식회사 | 웹 어플리케이션 저작도구 및 저작 방법 |
| KR20150037238A (ko) * | 2013-09-30 | 2015-04-08 | 엘지전자 주식회사 | 이동 단말기 및 그 구동 방법 |
| US9348563B1 (en) * | 2014-12-10 | 2016-05-24 | Sap Se | Bi-directional editing between visual screen designer and source code |
| CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
| CN109299422A (zh) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | 可视化网页编辑方法、系统、设备及存储介质 |
| CN111930378A (zh) * | 2020-08-11 | 2020-11-13 | 上海亿锎智能科技有限公司 | Web端项目表单设计器的实现方法、装置和系统 |
| CN112130856A (zh) * | 2020-09-29 | 2020-12-25 | 重庆紫光华山智安科技有限公司 | 强扩展性的前端可视化界面生成方法、系统、介质及终端 |
| CN112965701A (zh) * | 2021-02-08 | 2021-06-15 | 中国工商银行股份有限公司 | 前端代码生成方法及装置 |
| CN113918151A (zh) * | 2021-10-12 | 2022-01-11 | 平安国际智慧城市科技股份有限公司 | 低代码的页面开发方法、装置、设备及存储介质 |
| CN114077430A (zh) * | 2021-11-16 | 2022-02-22 | 上海上实龙创智能科技股份有限公司 | 界面生成方法、装置、电子设备及存储介质 |
| CN114968224A (zh) * | 2022-03-28 | 2022-08-30 | 徐工汉云技术股份有限公司 | 一种多业务场景的树组件封装系统及方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117573127A (zh) | 2024-02-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Buels et al. | JBrowse: a dynamic web platform for genome visualization and analysis | |
| EP3876116B1 (en) | Method and apparatus for running mini program, electronic device, and storage medium | |
| US8775930B2 (en) | Generic frequency weighted visualization component | |
| Daniel et al. | NeoEMF: A multi-database model persistence framework for very large models | |
| TWI394051B (zh) | 網頁呈現優先次序機制 | |
| US20120317504A1 (en) | Automated user interface object transformation and code generation | |
| CN114510231A (zh) | 应用构建方法、装置、设备及计算机可读存储介质 | |
| US20180129482A1 (en) | Generation of application behaviors | |
| AU2012271774A1 (en) | Automated user interface object transformation and code generation | |
| KR20080106550A (ko) | 그래픽 디자이너 재사용을 가능하게 하는 선언적 정의를 이용하기 위한 컴퓨터 프로그램 제품, 및 컴퓨팅 시스템, 컴퓨터 판독 가능 매체 | |
| CN101909082A (zh) | 一种基于模型驱动的网格门户配置系统及配置方法 | |
| Anderson et al. | Pro business applications with silverlight 4 | |
| US9280361B2 (en) | Methods and systems for a real time transformation of declarative model and layout into interactive, digital, multi device forms | |
| Kotaru | „Angular for Material Design “ | |
| CN117573127B (zh) | 一种页面搭建方法、装置、电子设备及介质 | |
| Chaganti | Google Web Toolkit GWT Java AJAX Programming | |
| US20110131512A1 (en) | Updateable running application | |
| US20140282477A1 (en) | Automatic updating of data in application programs | |
| CN111831277B (zh) | 虚拟数据生成方法、系统、设备及计算机可读存储介质 | |
| Purushothaman | Oracle ADF Real World Developer's Guide | |
| Sajjadi et al. | Revising Web Design to Deal with Current Development Practices. | |
| Trivedi | User interface implementation of environmental data integration system with React | |
| Patel | Sitecore Cookbook for Developers | |
| Paul | Mastering Web Development with Miscrosoft Visual Studio 2005 | |
| Gill | Building Web Applications with C# and. NET: A Complete Reference |
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 |