CN116107557A - 页面的可视化开发方法、装置、存储介质及电子设备 - Google Patents

页面的可视化开发方法、装置、存储介质及电子设备 Download PDF

Info

Publication number
CN116107557A
CN116107557A CN202310095405.7A CN202310095405A CN116107557A CN 116107557 A CN116107557 A CN 116107557A CN 202310095405 A CN202310095405 A CN 202310095405A CN 116107557 A CN116107557 A CN 116107557A
Authority
CN
China
Prior art keywords
page
component
development
developed
instruction
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
Application number
CN202310095405.7A
Other languages
English (en)
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.)
Qianhai Feisuan Yunzhi Software Technology Shenzhen Co ltd
Original Assignee
Qianhai Feisuan Yunzhi Software 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 Qianhai Feisuan Yunzhi Software Technology Shenzhen Co ltd filed Critical Qianhai Feisuan Yunzhi Software Technology Shenzhen Co ltd
Priority to CN202310095405.7A priority Critical patent/CN116107557A/zh
Publication of CN116107557A publication Critical patent/CN116107557A/zh
Pending legal-status Critical Current

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/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • 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/36—Software reuse
    • 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
    • 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)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本公开涉及一种页面的可视化开发方法、装置、存储介质及电子设备，该方法包括：响应于接收到的页面开发请求，在可视化界面中生成待开发页面，基于待开发页面，在可视化界面中展示页面组件库、待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域，响应于对页面组件库中预设页面组件的选择指令，以及在组件属性编辑区域内接收到预设页面组件的编辑指令，根据选择指令和编辑指令，对预设页面组件进行渲染，得到目标页面组件，根据接收到的对组件大纲树的调整指令、在页面控制编辑区域内接收到的页面控制指令和目标页面组件，在可视化界面内生成页面开发结果。从而降低了页面开发的门槛，提高了开发效率。

Description

页面的可视化开发方法、装置、存储介质及电子设备
技术领域
本公开涉及网页开发领域，具体地，涉及一种页面的可视化开发方法、装置、存储介质及电子设备。
背景技术
随着软件行业的快速发展，越来越多的web(World Wide Web，全球广域网)页面需要开发、迭代、维护，现有的开发模式已经越来越难以支撑。现有的开发模式开发前需要先安装开发环境，安装开发工具、安装版本管理工具、创建项目、修改配置等，这一系列的操作增加了开发时间，无论是在准备工作上，还是开发过程中，乃至在部署页面运维上都效率低下。现有的开发模式为了实现项目的快速迭代，或者项目本身时间比较紧张的时候，开发人员只关注业务逻辑的开发，忽视了项目的安全问题、性能问题等，导致软件开发的质量较低。且前端页面开发领域中软件工程师的人力成本较高，增加页面开发的开发成本。
发明内容
本公开的目的是提供一种页面的可视化开发方法、装置、存储介质及电子设备，以解决现有技术中页面开发效率较低的技术问题。
为了实现上述目的，本公开的第一方面提供一种页面的可视化开发方法，包括：
响应于接收到的页面开发请求，在可视化界面中生成待开发页面；
基于所述待开发页面，在所述可视化界面中展示页面组件库、所述待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域；
响应于对所述页面组件库中预设页面组件的选择指令，以及在所述组件属性编辑区域内接收到所述预设页面组件的编辑指令，根据所述选择指令和所述编辑指令，对所述预设页面组件进行渲染，得到目标页面组件；
根据接收到的对所述组件大纲树的调整指令、在所述页面控制编辑区域内接收到的页面控制指令和所述目标页面组件，在所述可视化界面内生成页面开发结果。
可选地，所述响应于对所述页面组件库中预设页面组件的选择指令，以及在所述组件属性编辑区域内接收到所述预设页面组件的编辑指令，根据所述选择指令和所述编辑指令，对所述预设页面组件进行渲染，得到目标页面组件，包括：
响应于接收到的所述选择指令，在所述待开发页面的画布区域内生成所述预设页面组件；
基于在所述待开发页面内对所述预设页面组件的拖拽指令，调整所述预设页面组件在所述待开发页面中的位置；
根据所述编辑指令对调整后的所述待开发页面进行渲染，得到所述目标页面组件。
可选地，所述响应于接收到的页面开发请求，在可视化界面中生成待开发页面，包括：
响应于接收到的页面开发请求，对当前的页面开发环境进行检测，得到开发环境检测结果；
在根据所述开发环境检测结果确定满足页面开发条件的情况下，基于预设基础数据包，在所述可视化界面的预设位置生成所述待开发页面。
可选地，所述方法还包括：
在根据所述开发环境检测结果确定不满足所述页面开发条件的情况下，根据预设下载地址，获得开发环境数据；
根据所述开发环境数据，对所述页面开发环境进行调整；
响应于所述页面开发环境的调整完成，基于所述预设基础数据包，在所述可视化界面中生成所述待开发页面。
可选地，所述目标页面组件包括多个页面组件，所述根据接收到的对所述组件大纲树的调整指令、在所述页面控制编辑区域内接收到的页面控制指令和所述目标页面组件，在所述可视化界面内生成页面开发结果，包括：
根据所述组件大纲树的所述调整指令，调整所述多个页面组件在所述待开发页面中的排列顺序，得到页面组件集合；
根据所述页面控制指令，调整所述页面组件集合中的各页面组件，生成目标页面组件集合；
根据所述目标页面组件集合，生成所述页面开发结果。
可选地，所述页面控制指令包括：组件清空指令、撤销指令、恢复指令或变量调整指令。
可选地，所述方法还包括：
响应于接收到的模板生成指令，根据所述页面开发结果，生成页面模板数据；
将所述页面模板数据存储至页面模板库中；
响应于再次接收到所述页面开发请求，在所述可视化界面中展示所述页面模板库。
根据本公开的第二方面提供一种页面的可视化开发装置，所述装置包括：
第一生成模块，用于响应于接收到的页面开发请求，在可视化界面中生成待开发页面；
显示模块，用于基于所述待开发页面，在所述可视化界面中展示页面组件库、所述待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域；
渲染模块，用于响应于对所述页面组件库中预设页面组件的选择指令，以及在所述组件属性编辑区域内接收到所述预设页面组件的编辑指令，根据所述选择指令和所述编辑指令，对所述预设页面组件进行渲染，得到目标页面组件；
第二生成模块，用于根据接收到的对所述组件大纲树的调整指令、在所述页面控制编辑区域内接收到的页面控制指令和所述目标页面组件，在所述可视化界面内生成页面开发结果。
根据本公开的第三方面提供一种非临时性计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现本公开第一方面中任一项所述方法的步骤。
根据本公开的第四方面提供一种电子设备，包括：
存储器，其上存储有计算机程序；
处理器，用于执行所述存储器中的所述计算机程序，以实现本公开第一方面中任一项所述方法的步骤。
通过上述技术方案，响应于接收到的页面开发请求，在可视化界面中生成待开发页面，基于待开发页面，在可视化界面中展示页面组件库、待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域，响应于对页面组件库中预设页面组件的选择指令，以及在组件属性编辑区域内接收到预设页面组件的编辑指令，根据选择指令和编辑指令，对预设页面组件进行渲染，得到目标页面组件，根据接收到的对组件大纲树的调整指令、在页面控制编辑区域内接收到的页面控制指令和目标页面组件，在可视化界面内生成页面开发结果。从而通过可视化界面进行软件开发，用户在该可视化界面中进行组件操作，实现页面组件的编辑，降低了页面开发的门槛，提高了开发效率。
本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：
图1是根据一示例性实施例示出的一种页面的可视化开发方法的流程图。
图2是根据一示例性实施例示出的一种页面可视化开发界面的示例图。
图3是根据一示例性实施例示出的一种待开发页面生成方法的流程图。
图4是根据一示例性实施例示出的一种页面的可视化开发装置的框图。
图5是根据一示例性实施例示出的一种电子设备的框图。
具体实施方式
以下结合附图对本公开的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本公开，并不用于限制本公开。
需要说明的是，本公开中所有获取信号、信息或数据的动作都是在遵照所在地国家相应的数据保护法规政策的前提下，并获得由相应装置所有者给予授权的情况下进行的。
图1是根据一示例性实施例示出的一种页面的可视化开发方法的流程图，如图1所示，该方法包括以下步骤。
步骤S101，响应于接收到的页面开发请求，在可视化界面中生成待开发页面。
示例的，本实施例应用于终端中，该终端可以是PC电脑、平板电脑、笔记本电脑等，终端中装载有相应的操作系统，并配置有网络环境可以满足用户的页面开发需求。其中，终端中的页面为web网页页面，该页面开发完成装载相应的广域网络地址后，用户可以通过广域网络访问该广域网络地址，从而打开该web网页页面。web网页页面中可以包括网页开发者需要向网页浏览用户展示的文字内容、图表内容、数据链接、跳转组件、广告链接等。网页开发者可以根据实际需要对页面中展示的网页内容进行编辑。
值得一提的是，本实施例中终端对应的用户为网页开发者，通过外置设备向终端输入非代码指令，应用终端完成的可视化页面开发。用户通过终端的外置设备，向终端传递页面开发请求，其中，外置设备可以是键盘或鼠标等，用户通过操作键盘或鼠标向终端发送页面开发请求。终端接收到该页面开发请求后，在用于进行页面开发的可视化界面中生成空白的待开发页面。示例的，本实施例中的页面可视化开发方法可以装置至终端的app(Application，第三方应用程序)中，用户通过外置鼠标打开该app，终端通过外置显示设备，显示该app的操作界面，用户在app内通过点击创造按钮，向终端发送页面开发请求，在app对应的可视化界面中生成用于开发的待开发页面。
需要说明的是，本实施例中一个应用业务中可以存在多个开发页面，终端可以对多个应用业务的页面进行开发管理，示例的，以上述app为例，该app中包括应用管理系统，通过该管理系统对终端中不同的应用业务进行页面开发管理，用户通过应用管理系统从多个应用业务中选定出需要进行页面开发的目标应用业务，或者用户还可以通过应用管理系统创造新的应用业务作为目标应用业务，并在该目标应用业务中创造新的待开发页面。示例的，该待开发页面还可以是目标应用业务中开发未完成的半成品页面，用户进入目标应用业务后，终端向用户展示目标应用业务中各个流程阶段上的历史开发页面，用户通过选定确定其中的某一个历史开发页面为待开发页面，并在可视化界面中显示该历史开发页面中的文字数据、图表数据、跳转链接等。
步骤S102，基于待开发页面，在可视化界面中展示页面组件库、待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域。
示例的，本实施例中用户通过页面开发请求，在可视化界面中打开待开发页面后，基于该待开发页面在可视化界面中的位置，可以在待开发页面的边沿处生成用于进行页面开发的多个开发工具，其中，该开发工具可以包括(1)页面组件库，其中包括用于进行页面开发的多个页面组件，包括：卡片组件、拖拽容器组件、列表组件等；用户可以通过控制终端的外置鼠标，将页面组件库中的页面组件拖拽至待开发页面的相应位置，实现待开发页面中页面组件的创建；(2)待开发页面的组件大纲树，该大纲树用于显示待开发页面中页面组件对应的组件名称，示例的，若该待开发页面为半成品页面时，响应于该半成品页面在可视化界面中的打开，大纲树通过扫描确定待开发页面中的页面组件，并根据各个页面组件在待开发页面中的放置位置，在大纲树中从上到下依次生成页面组件对应的名称，构成页面组件列表；若该开发页面为空白页面，响应于用户拖拽页面组件至待开发页面中，在大纲树中生成页面组件的名称；值得一提的是，在页面开发过程中，容易出现一个页面中存在多个页面组件的场景，为方便页面组件的筛选本实施例中用户可以通过点击大纲树中页面组件的组件名称，来选中待开发页面中的页面组件。(3)组件属性编辑区域，该区域用于接收用户通过外置设备发送的组件编辑指令，终端可以通过该组件编辑指令更改页面组件的组件参数、组件样式或组件大小等；(4)页面控制编辑区域，该区域用于接收用户通过外置设备发送的页面控制指令，该控制指令包括恢复页面设置、撤销页面设置、预览、历史版本记录、导出版本等。用户通过在该区域内向终端输入开发指令，实现对待开发页面的编辑控制。
示例的，为方便用户进行编辑操作本实施例中可以根据组件属性编辑区域内的组件编辑指令，设置相应的编辑按钮，用户通过外置鼠标点击该编辑按钮向终端发送组件编辑指令。图2是根据一示例性实施例示出的一种页面可视化开发界面的示例图，其中，当在可视化界面中生成待开发页面后，在待开发页面的上边沿生成页面控制编辑区域，其中页面控制编辑区域中设置有组件属性编辑按钮，在待开发页面的左边沿生成页面编辑区域，该页面组件编辑区域中设置有页面组件库和组件大纲树，用户通过在该页面控制编辑区域和页面组件编辑区域中接收用户的点击或拖拽指令，实现待开发页面的编辑，包括添加编辑组件、拖拽组件、开发页面浏览等操作。
步骤S103，响应于对页面组件库中预设页面组件的选择指令，以及在组件属性编辑区域内接收到预设页面组件的编辑指令，根据选择指令和编辑指令，对预设页面组件进行渲染，得到目标页面组件。
示例的，本实施例中页面组件库中包括多个不同类型的页面组件模板，用户通过点击鼠标来选择页面组件库中的预设页面组件，并在待开发页面中生成该预设页面组件。值得一提的是，本实施例中不同类型的预设页面组件具有初始参数，该初始参数可以包括预设页面组件的形状、大小、颜色、动态轨迹等，用户通过在组件属性编辑区域向终端传递页面组件的编辑指令，以改变待开发页面中该预设页面组件的形状参数、大小参数、颜色参数、类型参数等。并基于组件属性编辑区域内接收到的编辑指令，在可视化界面中对该预设页面组件进行实时渲染，生成目标页面组件。通过实时渲染的方式，使用户能够直观的看到页面开发过程中页面组件在待开发页面中的展示效果，从而提高页面开发的开发效率。
可选地，在一种实施方式中，上述步骤S103，包括：
响应于接收到的选择指令，在待开发页面的画布区域内生成预设页面组件。
基于在待开发页面内对预设页面组件的拖拽指令，调整预设页面组件在待开发页面中的位置。
根据编辑指令对调整后的待开发页面进行渲染，得到目标页面组件。
示例的，本实施例中用户通过点击从页面组件库的多个预设页面组件中选择出预设页面组件后，在待开发页面的画布区域内生成预设页面组件。通常情况下预设页面组件在待开发页面中的生成位置为待开发页面的中心，用户需要根据实际需要对该预设页面组件的位置进行调整，示例的，本实施例中用户通过外置鼠标对待开发页面中的预设页面组件进行拖拽，从而调整预设页面组件在待开发页面中的位置，并根据组件属性编辑区域内接收到的编辑指令，对预设待开发页面的属性进行调整，并根据调整结果在可视化页面中对预设页面组件进行实时渲染，以方便用户进行查看，进而生成目标页面组件。
步骤S104，根据接收到的对组件大纲树的调整指令、在页面控制编辑区域内接收到的页面控制指令和目标页面组件，在可视化界面内生成页面开发结果。
示例的，本实施例中通过上述步骤在待开发页面中生成目标页面组件后，通过大纲树的调整指令对待开发页面中多个目标页面组件在待开发页面中的排列顺序进行调整，进而在可视化界面中生成页面开发结果，其中该页面开发结果可以是开发完成的页面，根据用户发送的保存指令，在可视化界面内生成目标开发页面；该页面开发结果也可以是半成品的待开发页面，通过接收用户发送的各种类型的控制指令，在可视化界面中进行动态响应，对可视化界面中的待开发页面进行实时渲染，生成页面开发结果。
可选地，在另一种实施方式中，上述步骤S104，包括：
根据组件大纲树的调整指令，调整多个页面组件在待开发页面中的排列顺序，得到页面组件集合。
根据页面控制指令，调整页面组件集合中的各页面组件，生成目标页面组件集合。
根据目标页面组件集合，生成页面开发结果。
示例的，本实施例中组件大纲树用于检测待开发页面中各个页面组件从上到下的顺序，并根据各页面组件的名称，在组件大纲树中生成待开发页面对应页面组件的顺序，用户可以在组件大纲树中对页面组件在待开发页面中的排列顺序进行调整，得到页面组件集合。并根据页面控制编辑区域内接收到的用户输入的页面控制指令，对页面组件集合中不同页面组件的属性进行调整，生成目标页面组件集合。在可视化界面中根据各页面组件的调整数据对各页面组件进行实时渲染，生成页面开发结果。
可选地，页面控制指令包括：组件清空指令、撤销指令、恢复指令或变量调整指令。
示例的，本实施例中在页面控制编辑区域内接收到的页面控制指令包括：组件情况指令用于清空待开发页面中的所有组件；撤销指令用于撤销用户在页面控制编辑区域内输入的上一条控制指令；恢复指令用于恢复待开发页面中删除的页面组件；变更调整指令用于对待开发页面中的页面内容进行调整和变更。
可选地，在另一种实施方式中，上述步骤S104之后，该方法还包括：
响应于接收到的模板生成指令，根据页面开发结果，生成页面模板数据。
将页面模板数据存储至页面模板库中。
响应于再次接收到页面开发请求，在可视化界面中展示页面模板库。
示例的，本实施例中该app中还设置有页面模板库，该页面模板库中包括多个页面模板数据，各个页面模板数据中包括多个设置完成的页面组件，以及相应的模板参数，用户使用页面模板数据后在可视化界面中生成对应的页面模板，在该页面模板的基础上进行页面编辑，生成满足用户需求的目标页面。用户在对待开发页面进行编辑时，可以将待开发页面作为页面模板存储至页面模板库中，以便丰富页面模板库为以后的页面开发提供更多的数据支撑。示例的，用户可以基于当前的待开发页面向终端发送模板生成指令，根据待开发页面中的页面开发结果，生成页面模板数据，并将该页面模板数据存储至页面模板库中。当再次接收到用户的页面开发请求后，在可视化界面中展示页面模板库，其中该页面模板库中包括页面模板数据，以供用户进行模板选择。
通过上述方案，响应于接收到的页面开发请求，在可视化界面中生成待开发页面，基于待开发页面，在可视化界面中展示页面组件库、待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域，响应于对页面组件库中预设页面组件的选择指令，以及在组件属性编辑区域内接收到预设页面组件的编辑指令，根据选择指令和编辑指令，对预设页面组件进行渲染，得到目标页面组件，根据接收到的对组件大纲树的调整指令、在页面控制编辑区域内接收到的页面控制指令和目标页面组件，在可视化界面内生成页面开发结果。从而通过可视化界面进行软件开发，用户在该可视化界面中进行组件操作，实现页面组件的编辑，降低了页面开发的门槛，提高了开发效率。
图3是根据一示例性实施例示出的一种待开发页面生成方法的流程图，如图3所示，上述步骤S101，包括以下步骤。
步骤S201，响应于接收到的页面开发请求，对当前的页面开发环境进行检测，得到开发环境检测结果。
值得一提的是，页面开发需要对应的终端设备具备页面开发条件，因此，本实施例中当接收到用户发送的页面开发请求后，对终端的页面开发环境进行检测，确定终端中是否存在适合进行页面开发的软件环境、操作环境等，生成开发环境检测结果。示例的，该开发环境检测结果用于显示终端中页面开发环境是否符合进行页面开发。
步骤S202，在根据开发环境检测结果确定满足页面开发条件的情况下，基于预设基础数据包，在可视化界面的预设位置生成待开发页面。
示例的，本实施例中当开发环境检测结果确定终端中存在适合进行页面开发的操作系统、操作软件等配置文件时，则表示该终端满足页面开发条件，因此，基于预设基础数据包，在可视化界面的预设位置生成待开发页面。其中，该预设基础数据包中包括预设的页面组件库数据、组件属性编辑区域数据等。
可选地，在一种实施方式中，上述步骤S202之后，该生成方法还包括：
在根据开发环境检测结果确定不满足页面开发条件的情况下，根据预设下载地址，获得开发环境数据。
根据开发环境数据，对页面开发环境进行调整。
响应于页面开发环境的调整完成，基于预设基础数据包，在可视化界面中生成待开发页面。
示例的，本实施例中通过对终端的页面开发环境进行检测生成开发环境接触结果，通过该结果确定终端不满足页面开发条件时，根据终端中设置的预设下载地址，从互联网中下载开发环境数据，并在终端中根据该开发环境数据装载相应的软件，从而使终端满足页面开发条件。当终端满足页面开发条件后，基于预设基础数据包生成待开发页面的方式与上述步骤S202中相同，可以参照上述步骤S202，不再赘述。
图4是根据一示例性实施例示出的一种页面的可视化开发装置的框图，如图4所示，该装置100包括：第一生成模块110、显示模块120、渲染模块130和第二生成模块140。
第一生成模块110，用于响应于接收到的页面开发请求，在可视化界面中生成待开发页面。
显示模块120，用于基于待开发页面，在可视化界面中展示页面组件库、待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域。
渲染模块130，用于响应于对页面组件库中预设页面组件的选择指令，以及在组件属性编辑区域内接收到预设页面组件的编辑指令，根据选择指令和编辑指令，对预设页面组件进行渲染，得到目标页面组件。
第二生成模块140，用于根据接收到的对组件大纲树的调整指令、在页面控制编辑区域内接收到的页面控制指令和目标页面组件，在可视化界面内生成页面开发结果。
可选地，该渲染模块130，用于：
响应于接收到的选择指令，在待开发页面的画布区域内生成预设页面组件。
基于在待开发页面内对预设页面组件的拖拽指令，调整预设页面组件在待开发页面中的位置。
根据编辑指令对调整后的待开发页面进行渲染，得到目标页面组件。
可选地，该第一生成模块110，包括：
检测子模块，用于响应于接收到的页面开发请求，对当前的页面开发环境进行检测，得到开发环境检测结果。
第一生成子模块，用于在根据开发环境检测结果确定满足页面开发条件的情况下，基于预设基础数据包，在可视化界面的预设位置生成待开发页面。
可选地，该第一生成模块110还包括第二生成子模块，该第二生成子模块用于：
在根据开发环境检测结果确定不满足页面开发条件的情况下，根据预设下载地址，获得开发环境数据。
根据开发环境数据，对页面开发环境进行调整。
响应于页面开发环境的调整完成，基于预设基础数据包，在可视化界面中生成待开发页面。
可选地，该第二生成模块140，用于：
根据组件大纲树的调整指令，调整多个页面组件在待开发页面中的排列顺序，得到页面组件集合。
根据页面控制指令，调整页面组件集合中的各页面组件，生成目标页面组件集合。
根据目标页面组件集合，生成页面开发结果。
可选地，页面控制指令包括：组件清空指令、撤销指令、恢复指令或变量调整指令。
可选地，该装置100还包括执行模块，该执行模块用于：
响应于接收到的模板生成指令，根据页面开发结果，生成页面模板数据。
将页面模板数据存储至页面模板库中。
响应于再次接收到页面开发请求，在可视化界面中展示页面模板库。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
图5是根据一示例性实施例示出的一种电子设备的框图。如图5所示，该电子设备500可以包括：处理器501，存储器502。该电子设备500还可以包括多媒体组件503，输入/输出(I/O)接口504，以及通信组件505中的一者或多者。
其中，处理器501用于控制该电子设备500的整体操作，以完成上述的页面的可视化开发方法中的全部或部分步骤。存储器502用于存储各种类型的数据以支持在该电子设备500的操作，这些数据例如可以包括用于在该电子设备500上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等等。该存储器502可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件503可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器502或通过通信组件505发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口504为处理器501和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件505用于该电子设备500与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(Near FieldCommunication，简称NFC)，2G、3G、4G、NB-IOT、eMTC、或其他5G等等，或它们中的一种或几种的组合，在此不做限定。因此相应的该通信组件505可以包括：Wi-Fi模块，蓝牙模块，NFC模块等等。
在一示例性实施例中，电子设备500可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，简称ASIC)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device，简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的页面的可视化开发方法。
在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述的页面的可视化开发方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器502，上述程序指令可由电子设备500的处理器501执行以完成上述的页面的可视化开发方法。
在另一示例性实施例中，还提供一种计算机程序产品，该计算机程序产品包含能够由可编程的装置执行的计算机程序，该计算机程序具有当由该可编程的装置执行时用于执行上述的页面的可视化开发方法的代码部分。
以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，可以对本公开的技术方案进行多种简单变型，这些简单变型均属于本公开的保护范围。
另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。
此外，本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。

Claims (10)

1.一种页面的可视化开发方法，其特征在于，包括：
响应于接收到的页面开发请求，在可视化界面中生成待开发页面；
基于所述待开发页面，在所述可视化界面中展示页面组件库、所述待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域；
响应于对所述页面组件库中预设页面组件的选择指令，以及在所述组件属性编辑区域内接收到所述预设页面组件的编辑指令，根据所述选择指令和所述编辑指令，对所述预设页面组件进行渲染，得到目标页面组件；
根据接收到的对所述组件大纲树的调整指令、在所述页面控制编辑区域内接收到的页面控制指令和所述目标页面组件，在所述可视化界面内生成页面开发结果。
2.根据权利要求1所述的方法，其特征在于，所述响应于对所述页面组件库中预设页面组件的选择指令，以及在所述组件属性编辑区域内接收到所述预设页面组件的编辑指令，根据所述选择指令和所述编辑指令，对所述预设页面组件进行渲染，得到目标页面组件，包括：
响应于接收到的所述选择指令，在所述待开发页面的画布区域内生成所述预设页面组件；
基于在所述待开发页面内对所述预设页面组件的拖拽指令，调整所述预设页面组件在所述待开发页面中的位置；
根据所述编辑指令对调整后的所述待开发页面进行渲染，得到所述目标页面组件。
3.根据权利要求1所述的方法，其特征在于，所述响应于接收到的页面开发请求，在可视化界面中生成待开发页面，包括：
响应于接收到的页面开发请求，对当前的页面开发环境进行检测，得到开发环境检测结果；
在根据所述开发环境检测结果确定满足页面开发条件的情况下，基于预设基础数据包，在所述可视化界面的预设位置生成所述待开发页面。
4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
在根据所述开发环境检测结果确定不满足所述页面开发条件的情况下，根据预设下载地址，获得开发环境数据；
根据所述开发环境数据，对所述页面开发环境进行调整；
响应于所述页面开发环境的调整完成，基于所述预设基础数据包，在所述可视化界面中生成所述待开发页面。
5.根据权利要求1所述的方法，其特征在于，所述目标页面组件包括多个页面组件，所述根据接收到的对所述组件大纲树的调整指令、在所述页面控制编辑区域内接收到的页面控制指令和所述目标页面组件，在所述可视化界面内生成页面开发结果，包括：
根据所述组件大纲树的所述调整指令，调整所述多个页面组件在所述待开发页面中的排列顺序，得到页面组件集合；
根据所述页面控制指令，调整所述页面组件集合中的各页面组件，生成目标页面组件集合；
根据所述目标页面组件集合，生成所述页面开发结果。
6.根据权利要求5所述的方法，其特征在于，所述页面控制指令包括：组件清空指令、撤销指令、恢复指令或变量调整指令。
7.根据权利要求1所述的方法，其特征在于，所述方法还包括：
响应于接收到的模板生成指令，根据所述页面开发结果，生成页面模板数据；
将所述页面模板数据存储至页面模板库中；
响应于再次接收到所述页面开发请求，在所述可视化界面中展示所述页面模板库。
8.一种页面的可视化开发装置，其特征在于，所述装置包括：
第一生成模块，用于响应于接收到的页面开发请求，在可视化界面中生成待开发页面；
显示模块，用于基于所述待开发页面，在所述可视化界面中展示页面组件库、所述待开发页面的组件大纲树、组件属性编辑区域和页面控制编辑区域；
渲染模块，用于响应于对所述页面组件库中预设页面组件的选择指令，以及在所述组件属性编辑区域内接收到所述预设页面组件的编辑指令，根据所述选择指令和所述编辑指令，对所述预设页面组件进行渲染，得到目标页面组件；
第二生成模块，用于根据接收到的对所述组件大纲树的调整指令、在所述页面控制编辑区域内接收到的页面控制指令和所述目标页面组件，在所述可视化界面内生成页面开发结果。
9.一种非临时性计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1-7中任一项所述方法的步骤。
10.一种电子设备，其特征在于，包括：
存储器，其上存储有计算机程序；
处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1-7中任一项所述方法的步骤。
CN202310095405.7A 2023-01-17 2023-01-17 页面的可视化开发方法、装置、存储介质及电子设备 Pending CN116107557A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310095405.7A CN116107557A (zh) 2023-01-17 2023-01-17 页面的可视化开发方法、装置、存储介质及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310095405.7A CN116107557A (zh) 2023-01-17 2023-01-17 页面的可视化开发方法、装置、存储介质及电子设备

Publications (1)

Publication Number Publication Date
CN116107557A true CN116107557A (zh) 2023-05-12

Family

ID=86255755

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310095405.7A Pending CN116107557A (zh) 2023-01-17 2023-01-17 页面的可视化开发方法、装置、存储介质及电子设备

Country Status (1)

Country Link
CN (1) CN116107557A (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109299422A (zh) * 2018-09-20 2019-02-01 江苏满运软件科技有限公司 可视化网页编辑方法、系统、设备及存储介质
CN111459478A (zh) * 2020-03-03 2020-07-28 深圳木成林科技有限公司 一种生成网页的方法及终端
CN113535176A (zh) * 2021-08-11 2021-10-22 京东方科技集团股份有限公司 一种页面生成方法及装置
CN115169315A (zh) * 2022-07-04 2022-10-11 北京安锐卓越信息技术股份有限公司 营销内容页的生成方法、装置、设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109299422A (zh) * 2018-09-20 2019-02-01 江苏满运软件科技有限公司 可视化网页编辑方法、系统、设备及存储介质
CN111459478A (zh) * 2020-03-03 2020-07-28 深圳木成林科技有限公司 一种生成网页的方法及终端
CN113535176A (zh) * 2021-08-11 2021-10-22 京东方科技集团股份有限公司 一种页面生成方法及装置
CN115169315A (zh) * 2022-07-04 2022-10-11 北京安锐卓越信息技术股份有限公司 营销内容页的生成方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN101957730B (zh) 信息处理设备和信息处理方法
CN111273907A (zh) 一种页面处理方法及相关设备
CN110708202B (zh) 插件节点的配置方法、装置、设备及存储介质
CN109996109B (zh) 一种图像处理方法和装置
CN106027785A (zh) 一种语音处理方法及终端
CN109286517B (zh) 创建服务的方法、装置和存储介质以及电子设备
JP6750124B2 (ja) 端末装置、ｕｉ拡張方法及びｕｉ拡張プログラム
CN112860247B (zh) 一种模型组件的自定义生成方法、装置、设备及介质
WO2013109858A1 (en) Design canvas
CN110543301A (zh) jenkins代码文件的生成方法及装置
CN110941428A (zh) 一种网站创建方法和装置
CN114036439A (zh) 网站搭建方法、装置、介质及电子设备
CN113569541A (zh) 一种消息生成方法、装置、设备及介质
CN113407284A (zh) 导航界面的生成方法、装置、存储介质及电子设备
CN114036417A (zh) 页面更新方法、装置、存储介质及电子设备
CN117875288A (zh) 一种表单页面生成方法、装置及电子设备
CN112306488A (zh) 组合图标生成方法、装置、设备与计算机可读存储介质
JP7318704B2 (ja) テスト装置、テスト方法及びプログラム
CN113033171A (zh) 模板创建方法、文件生成方法、装置及计算机设备
CN108255486B (zh) 用于表单设计的视图转换方法、装置和电子设备
CN116107557A (zh) 页面的可视化开发方法、装置、存储介质及电子设备
CN116301772A (zh) 业务代码的开发方法、装置、设备及介质
JP2017102872A (ja) 開発装置、開発システム、およびプログラム
CN114116077A (zh) 一种图片编辑方法、装置、电子设备和介质
CN114449063A (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