CN116431149A - 页面排版方法、装置、计算机设备及存储介质 - Google Patents

页面排版方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
CN116431149A
CN116431149A CN202310393303.3A CN202310393303A CN116431149A CN 116431149 A CN116431149 A CN 116431149A CN 202310393303 A CN202310393303 A CN 202310393303A CN 116431149 A CN116431149 A CN 116431149A
Authority
CN
China
Prior art keywords
page
typesetting
target
dom tree
field
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
CN202310393303.3A
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.)
Ping An Property and Casualty Insurance Company of China Ltd
Original Assignee
Ping An Property and Casualty Insurance Company of China 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 Ping An Property and Casualty Insurance Company of China Ltd filed Critical Ping An Property and Casualty Insurance Company of China Ltd
Priority to CN202310393303.3A priority Critical patent/CN116431149A/zh
Publication of CN116431149A publication Critical patent/CN116431149A/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/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/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/109—Font handling; Temporal or kinetic typography
    • 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)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本申请实施例属于研发管理领域，涉及一种页面排版方法、装置、计算机设备及存储介质，方法包括：获取输入的各目标字段以及所述各目标字段的字段顺序信息，其中，目标字段关联于页面控件；获取所述各目标字段所对应的控件配置文件，并获取预设的排版配置文件；基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树；根据所述DOM树进行页面渲染，得到目标页面。此外，本申请还涉及区块链技术，控件配置文件和排版配置文件可存储于区块链中。本申请提高了页面排版的效率。

Description

页面排版方法、装置、计算机设备及存储介质
技术领域
本申请涉及研发管理技术领域，尤其涉及一种页面排版方法、装置、计算机设备及存储介质。
背景技术
在前端开发中，页面排版开发是重要的环节。现有的页面低代码排版技术，是由开发人员对页面中出现的各字段及其控件进行逐一配置，通过拖拽或者输入配置的方式进行页面排版。当页面中的元素较多时，这种排版技术费时费力；另外，可能出现多个字段一起展示的情况，控件展示的数据所依赖的接口可能各不相同，可能会出现某个字段对应的控件展示区域被挤满的情况，或者导致多个控件互相挤压、样式塌陷；开发人员为此需要预先进行多种排版尝试，导致了页面排版的效率较低。
发明内容
本申请实施例的目的在于提出一种页面排版方法、装置、计算机设备及存储介质，以解决页面排版效率较低的问题。
为了解决上述技术问题，本申请实施例提供一种页面排版方法，采用了如下所述的技术方案：
获取输入的各目标字段以及所述各目标字段的字段顺序信息，其中，目标字段关联于页面控件；
获取所述各目标字段所对应的控件配置文件，并获取预设的排版配置文件；
基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树；
根据所述DOM树进行页面渲染，得到目标页面。
为了解决上述技术问题，本申请实施例还提供一种页面排版装置，采用了如下所述的技术方案：
字段获取模块，用于获取输入的各目标字段以及所述各目标字段的字段顺序信息，其中，目标字段关联于页面控件；
配置获取模块，用于获取所述各目标字段所对应的控件配置文件，并获取预设的排版配置文件；
排版计算模块，用于基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树；
页面渲染模块，用于根据所述DOM树进行页面渲染，得到目标页面。
为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：
获取输入的各目标字段以及所述各目标字段的字段顺序信息，其中，目标字段关联于页面控件；
获取所述各目标字段所对应的控件配置文件，并获取预设的排版配置文件；
基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树；
根据所述DOM树进行页面渲染，得到目标页面。
为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：
获取输入的各目标字段以及所述各目标字段的字段顺序信息，其中，目标字段关联于页面控件；
获取所述各目标字段所对应的控件配置文件，并获取预设的排版配置文件；
基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树；
根据所述DOM树进行页面渲染，得到目标页面。
与现有技术相比，本申请实施例主要有以下有益效果：获取输入的各目标字段以及各目标字段的字段顺序信息，目标字段关联于页面控件；获取各目标字段所对应的控件配置文件，并获取预设的排版配置文件；基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，在排版计算时，字段顺序信息用于约束目标字段及其页面控件在页面中出现的先后顺序，控件配置文件用于定义目标控件的控件类型以及展示内容，排版配置文件可以生成各种可能的排版样式，计算完成后得到DOM树；根据DOM树进行页面渲染，可以得到目标页面；本申请中，开发人员仅输入需要的目标字段以及字段顺序信息，便可以根据字段顺序信息、控件配置文件和排版配置文件自动进行排版计算，确定最终的目标页面，提高了页面排版的效率。
附图说明
为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请可以应用于其中的示例性系统架构图；
图2是根据本申请的页面排版方法的一个实施例的流程图；
图3是根据本申请的页面排版装置的一个实施例的结构示意图；
图4是根据本申请的计算机设备的一个实施例的结构示意图。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是，本申请实施例所提供的页面排版方法一般由服务器执行，相应地，页面排版装置一般设置于服务器中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
继续参考图2，示出了根据本申请的页面排版方法的一个实施例的流程图。所述的页面排版方法，包括以下步骤：
步骤S201，获取输入的各目标字段以及各目标字段的字段顺序信息，其中，目标字段关联于页面控件。
在本实施例中，页面排版方法运行于其上的电子设备(例如图1所示的服务器)可以通过有线连接方式或者无线连接方式与终端进行通信。需要指出的是，上述无线连接方式可以包括但不限于3G/4G/5G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。
具体地，本申请在完成页面排版系统的初始化之后，在进行页面排版时，开发人员可以仅输入各目标字段以及各目标字段的字段顺序信息。
其中，目标字段可以是页面中需要显示的字段，目标字段关联于页面控件。例如，在一个搜索页面中的虚拟按钮上存在目标字段“搜索一下”，且目标字段“搜索一下”旁边存在一个输入框，该输入框以及虚拟按钮可以是目标字段所对应的页面控件。
页面中可以存在多个目标字段，目标字段在页面中可以具有先后的排列顺序，该排列顺序即为字段顺序信息，字段顺序信息可以由开发人员根据需求进行输入。例如，在登录页面中有两个目标字段“账号”和“密码”，通常习惯是让用户先输入账号，再输入密码，因此可以将目标字段“账号”和“密码”的先后顺序写入字段顺序信息。通常，使用数组来存储开发人员输入的各目标字段以及各目标字段的字段顺序信息，承接上述例子，数组形式为：[{type:‘username’},{type:‘password’}]。
步骤S202，获取各目标字段所对应的控件配置文件，并获取预设的排版配置文件。
具体地，获取各目标字段所对应的控件配置文件，各目标字段所对应的页面控件可以有多种形式，包括但不限于输入框、下拉选择框、文本域、各种形式的单选框、多选框等，因此页面控件具有相应的展示内容，这些信息可以存储在目标字段的控件配置文件中。
本申请预设了一些进行排版布局计算时需要遵循的策略，这些信息存储在排版配置文件中。
控件配置文件和排版配置文件可以在初始化时设置，并存储于服务器中。
需要强调的是，为进一步保证上述控件配置文件和排版配置文件的私密和安全性，上述控件配置文件和排版配置文件还可以存储于一区块链的节点中。
本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
进一步的，上述获取各目标字段所对应的控件配置文件的步骤可以包括：获取预设的字段配置表；在字段配置表中查询各目标字段分别对应的控件配置信息，控件配置信息包括本地配置信息和网络配置信息，控件配置信息用于展示目标字段及其对应的页面控件；将控件配置信息进行格式转换，得到各目标字段所对应的控件配置文件。
具体地，本申请中预先设置了字段配置表，字段配置表用于对每个目标字段所对应的控件配置信息，控件配置信息包括控件类型及其展示内容进行了预先配置，其中，控件类型包括但不限于输入框、下拉选择框、文本域、各种形式的单选框、多选框；当控件为下拉选择框、单选框、多选框时，页面控件具有展示内容。
在字段配置表中查询目标字段，可以得到目标字段所对应的控件配置信息。其中，控件配置信息又可以分为本地配置信息和网络配置信息。本地配置信息是可以直接从字段配置表获取到的、内容确切的配置信息，例如，性别选择控件的展示内容包含男性和女性两个选项，这些是预先确定的；然而，有些目标控件的展示内容无法直接从字段配置表获取到，这些目标控件可以调用网络接口，通过网络接口获取到展示内容，此时，字段配置表中存储的是网络接口的URL(统一资源定位符)，这样的控件配置信息属于网络配置信息。
将获取到的控件配置信息进行格式转换，得到各目标字段所对应的控件配置文件，通常是将控件配置信息转换为jsonSchema格式。
本实施例中，获取预设的字段配置表，在字段配置表中查询各目标字段分别对应的控件配置信息，控件配置信息用于展示目标字段及其对应的页面控件，它包括本地配置信息和网络配置信息，丰富了页面控件的配置方式；将控件配置信息进行格式转换，得到各目标字段所对应的控件配置文件，以便后续进行页面排版计算。
进一步的，上述获取预设的排版配置文件的步骤可以包括：获取预设的排版配置文件，排版配置文件包括控件展示风格信息、页面布局信息以及字段关联信息。
具体地，本申请预先配置了排版配置文件，排版配置文件包括控件展示风格信息、页面布局信息以及字段关联信息。其中，控件展示风格信息用于配置页面的展示风格，例如可以包括逐行展示控件(页面中每行只有一个页面控件)、行列展示控件(页面中每行可以展示多个页面控件)等。
本申请中的页面可以采用多种布局格式，例如，页面可以采用栅格布局，可以采用的布局格式以页面布局信息进行表示。
本申请中的目标字段可以具有关联性，关联性可以记录在字段关联信息中。在进行页面排版计算时，也可以根据目标字段的关联性进行自适应，用户可以对字段关联信息进行设置，可以选择根据目标字段的关联性进行自适应，也可以不选择这种自适应。
可以理解，排版配置文件中的控件展示风格信息、页面布局信息以及字段关联信息都具有可选性。开发人员可以对排版配置文件进行选择，从而基于选择后的排版配置文件进行排版计算。
在一个实施例中，排版配置文件可以是排版配置模板的形式，排版配置模板直接定义控件展示风格信息、页面布局信息以及字段关联信息。排版配置模板可以有一个，则直接根据该模板进行排版计算；排版配置模板也可也以有多个，开发人员选择其中的一个后，根据选择的模板进行排版计算。
本实施例中，排版配置文件包括控件展示风格信息、页面布局信息以及字段关联信息，可以从多个维度对排版计算进行预配置，确保了可以生成排版形式丰富的页面。
步骤S203，基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，得到DOM树。
具体地，本申请可以根据字段顺序信息、控件配置文件和排版配置文件进行排版计算，其中，字段顺序信息用于约束目标字段及其页面控件在页面中出现的先后顺序；控件配置文件用于定义目标控件的控件类型以及展示内容，排版配置文件可以生成各种可能的排版样式。
排版计算后可以得到DOM树(DOM tree)，DOM是文档对象化模型(Document ObjectModel)的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。
步骤S204，根据DOM树进行页面渲染，得到目标页面。
具体地，基于DOM树可以进行页面渲染生成目标页面，DOM树是浏览器渲染机制的一部分，通过DOM树和css树可以构建渲染树，通过渲染树可以进行页面绘制，得到目标页面。
可以生成多个DOM树，每个DOM树都可以生成一个目标页面。可以由开发人员对目标页面进行选择，作为最终通过浏览器进行展示的页面。
本实施例中，获取输入的各目标字段以及各目标字段的字段顺序信息，目标字段关联于页面控件；获取各目标字段所对应的控件配置文件，并获取预设的排版配置文件；基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，在排版计算时，字段顺序信息用于约束目标字段及其页面控件在页面中出现的先后顺序，控件配置文件用于定义目标控件的控件类型以及展示内容，排版配置文件可以生成各种可能的排版样式，计算完成后得到DOM树；根据DOM树进行页面渲染，可以得到目标页面；本申请中，开发人员仅输入需要的目标字段以及字段顺序信息，便可以根据字段顺序信息、控件配置文件和排版配置文件自动进行排版计算，确定最终的目标页面，提高了页面排版的效率。
进一步的，上述基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，得到DOM树的步骤可以包括：基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，得到候选DOM树；根据候选DOM树进行页面预渲染，得到候选页面；对候选页面进行页面展示评估；当候选页面未通过页面展示评估时，对候选DOM树进行迭代排版计算，直至候选页面通过页面展示评估，得到DOM树。
具体地，根据字段顺序信息、控件配置文件和排版配置文件自动进行排版计算，自动排版计算时生成任意可能的页面排版格式，此时得到的DOM树为候选DOM树。
根据候选DOM树进行页面预渲染，得到候选页面；本申请预先设置了页面展示评估策略，页面展示评估策略用于对候选页面中目标字段、页面控件的展示效果以及排版格式进行评估、打分。例如，如果目标字段过长，但目标字段未能在展示区域内完全展示，则候选页面不可通过页面展示评估，或者在该页面元素的评估上得到较低的分数；如果候选页面中存在多个输入框，但多个输入框的长度各异，则候选页面不可通过页面展示评估，或者在各输入框的评估上得到较低的分数。
候选页面可以通过页面展示评估，也可以未通过页面展示评估。如果候选页面通过页面展示评估，则可以将该候选页面的候选DOM树作为最后的DOM树。
如果候选页面未通过页面展示评估，则对候选DOM树进行迭代排版计算，直至候选页面通过页面展示评估，将通过页面展示评估时的DOM树作为最后的DOM树。
本实施例中，排版计算中得到候选DOM树，根据候选DOM树进行页面预渲染，得到候选页面；对候选页面进行页面展示评估，以评估当前的候选页面的展示与排版效果；当候选页面未通过页面展示评估时，对候选DOM树进行迭代排版计算，直至候选页面通过页面展示评估，确保了可以生成合理的DOM树，从而提高了目标页面的展示与排版效果。
进一步的，上述根据DOM树进行页面渲染，得到目标页面的步骤之后，还可以包括：通过目标浏览器的监听接口注册监听事件，以对DOM树进行监听，其中，目标页面为目标浏览器中的页面；当监听到DOM树发生变化时，对当前的DOM树重新进行排版计算得到第二DOM树；根据第二DOM树对目标页面进行重新渲染，得到更新后的目标页面。
具体地，目标页面通过目标浏览器进行展示，目标浏览器可以提供监听接口，在一个实施例中，监听接口可以是MutationObserver接口，通过该接口可以注册监听事件，从而通过监听事件对DOM树进行监听。
DOM树可以发生变化，例如，当用户进行页面操作，例如下拉选择、输入框输入时，页面需要重新渲染，例如新增了页面节点、样式发生变更等，此时DOM树发生了变更。当监听到DOM树发生变更时，可以对当前的、存在变更的DOM树重新进行排版计算得到第二DOM树，对第二DOM树对目标页面进行重新渲染，可以得到更新后的目标页面。在一个实施例中，基于dom-diff算法将第二DOM树更新到目标页面中。
本实施例中，通过目标浏览器的监听接口注册监听事件，以对DOM树进行监听，用户操作可能带来页面样式以及DOM树的变化；当监听到DOM树发生变化时，对当前的DOM树重新进行排版计算得到第二DOM树，根据第二DOM树对目标页面进行重新渲染，得到更新后的目标页面，确保了目标页面可以根据用户操作实时进行样式更新，避免样式错误的出现。
进一步的，上述当监听到DOM树发生变化时，对当前的DOM树重新进行排版计算得到第二DOM树的步骤可以包括：当监听到DOM树发生变化时，获取当前的DOM树中的差异项；对差异项进行排版计算，得到替换项；根据替换项更新当前的DOM树，得到第二DOM树。
具体地，当用户操作导致DOM树发生变更时，变更以及变更影响到的可能只是DOM树中的一部分，该部分即为DOM树中差异项。为了减少排版计算的计算量，可以获取DOM树中的差异项，仅针对差异项进行新的排版计算，得到替换项。将当前的DOM树中的差异项替换为生成的替换项，即可得到第二DOM树。
本实施例中，当监听到DOM树发生变化时，获取当前的DOM树中的差异项，差异项是变更影响到的部分DOM树；仅对差异项进行排版计算，得到替换项，根据替换项更新当前的DOM树，可以减少计算量，提高第二DOM树的生成效率，从而提高页面排版刷新的响应速度。
进一步的，上述根据DOM树进行页面渲染，得到目标页面的步骤之后，还可以包括：当监听到目标页面关闭时，销毁监听事件。
具体地，监听事件可以即时生成，即时销毁。当监听到目标页面关闭时，可以销毁监听事件，从而释放内存，减少服务器运行时的计算资源消耗。
本实施例中，当监听到目标页面关闭时，可以及时销毁监听事件，从而释放内存。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种页面排版装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
如图3所示，本实施例所述的页面排版装置300包括：字段获取模块301、配置获取模块302、排版计算模块303以及页面渲染模块304，其中：
字段获取模块301，用于获取输入的各目标字段以及各目标字段的字段顺序信息，其中，目标字段关联于页面控件。
配置获取模块302，用于获取各目标字段所对应的控件配置文件，并获取预设的排版配置文件。
排版计算模块303，用于基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，得到DOM树。
页面渲染模块304，用于根据DOM树进行页面渲染，得到目标页面。
本实施例中，获取输入的各目标字段以及各目标字段的字段顺序信息，目标字段关联于页面控件；获取各目标字段所对应的控件配置文件，并获取预设的排版配置文件；基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，在排版计算时，字段顺序信息用于约束目标字段及其页面控件在页面中出现的先后顺序，控件配置文件用于定义目标控件的控件类型以及展示内容，排版配置文件可以生成各种可能的排版样式，计算完成后得到DOM树；根据DOM树进行页面渲染，可以得到目标页面；本申请中，开发人员仅输入需要的目标字段以及字段顺序信息，便可以根据字段顺序信息、控件配置文件和排版配置文件自动进行排版计算，确定最终的目标页面，提高了页面排版的效率。
在本实施例的一些可选的实现方式中，配置获取模块302可以包括：配置表获取子模块、信息查询子模块以及格式转换子模块，其中：
配置表获取子模块，用于获取预设的字段配置表。
信息查询子模块，用于在字段配置表中查询各目标字段分别对应的控件配置信息，控件配置信息包括本地配置信息和网络配置信息，控件配置信息用于展示目标字段及其对应的页面控件。
格式转换子模块，用于将控件配置信息进行格式转换，得到各目标字段所对应的控件配置文件。
本实施例中，获取预设的字段配置表，在字段配置表中查询各目标字段分别对应的控件配置信息，控件配置信息用于展示目标字段及其对应的页面控件，它包括本地配置信息和网络配置信息，丰富了页面控件的配置方式；将控件配置信息进行格式转换，得到各目标字段所对应的控件配置文件，以便后续进行页面排版计算。
在本实施例的另一些可选的实现方式中，配置获取模块302还可以用于获取预设的排版配置文件，排版配置文件包括控件展示风格信息、页面布局信息以及字段关联信息。
本实施例中，排版配置文件包括控件展示风格信息、页面布局信息以及字段关联信息，可以从多个维度对排版计算进行预配置，确保了可以生成排版形式丰富的页面。
在本实施例的一些可选的实现方式中，排版计算模块303可以包括：排版计算子模块、预渲染子模块、页面评估子模块以及迭代计算子模块，其中：
排版计算子模块，用于基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，得到候选DOM树。
预渲染子模块，用于根据候选DOM树进行页面预渲染，得到候选页面。
页面评估子模块，用于对候选页面进行页面展示评估。
迭代计算子模块，用于当候选页面未通过页面展示评估时，对候选DOM树进行迭代排版计算，直至候选页面通过页面展示评估，得到DOM树。
本实施例中，排版计算中得到候选DOM树，根据候选DOM树进行页面预渲染，得到候选页面；对候选页面进行页面展示评估，以评估当前的候选页面的展示与排版效果；当候选页面未通过页面展示评估时，对候选DOM树进行迭代排版计算，直至候选页面通过页面展示评估，确保了可以生成合理的DOM树，从而提高了目标页面的展示与排版效果。
在本实施例的一些可选的实现方式中，页面排版装置300还可以包括：监听模块、重新计算模块以及重新渲染模块，其中：
监听模块，用于通过目标浏览器的监听接口注册监听事件，以对DOM树进行监听，其中，目标页面为目标浏览器中的页面。
重新计算模块，用于当监听到DOM树发生变化时，对当前的DOM树重新进行排版计算得到第二DOM树。
重新渲染模块，用于根据第二DOM树对目标页面进行重新渲染，得到更新后的目标页面。
本实施例中，通过目标浏览器的监听接口注册监听事件，以对DOM树进行监听，用户操作可能带来页面样式以及DOM树的变化；当监听到DOM树发生变化时，对当前的DOM树重新进行排版计算得到第二DOM树，根据第二DOM树对目标页面进行重新渲染，得到更新后的目标页面，确保了目标页面可以根据用户操作实时进行样式更新，避免样式错误的出现。
在本实施例的一些可选的实现方式中，重新计算模块可以包括：差异获取子模块、差异排版子模块以及更新子模块，其中：
差异获取子模块，用于当监听到DOM树发生变化时，获取当前的DOM树中的差异项。
差异排版子模块，用于对差异项进行排版计算，得到替换项。
更新子模块，用于根据替换项更新当前的DOM树，得到第二DOM树。
本实施例中，当监听到DOM树发生变化时，获取当前的DOM树中的差异项，差异项是变更影响到的部分DOM树；仅对差异项进行排版计算，得到替换项，根据替换项更新当前的DOM树，可以减少计算量，提高第二DOM树的生成效率，从而提高页面排版刷新的响应速度。
在本实施例的一些可选的实现方式中，页面排版装置300可以包括：事件销毁模块，用于当监听到目标页面关闭时，销毁监听事件。
本实施例中，当监听到目标页面关闭时，可以及时销毁监听事件，从而释放内存。
为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。
所述计算机设备4包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有控件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的控件，可以替代的实施更多或者更少的控件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作系统和各类应用软件，例如页面排版方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述页面排版方法的计算机可读指令。
所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。
本实施例中提供的计算机设备可以执行上述页面排版方法。此处页面排版方法可以是上述各个实施例的页面排版方法。
本实施例中，获取输入的各目标字段以及各目标字段的字段顺序信息，目标字段关联于页面控件；获取各目标字段所对应的控件配置文件，并获取预设的排版配置文件；基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，在排版计算时，字段顺序信息用于约束目标字段及其页面控件在页面中出现的先后顺序，控件配置文件用于定义目标控件的控件类型以及展示内容，排版配置文件可以生成各种可能的排版样式，计算完成后得到DOM树；根据DOM树进行页面渲染，可以得到目标页面；本申请中，开发人员仅输入需要的目标字段以及字段顺序信息，便可以根据字段顺序信息、控件配置文件和排版配置文件自动进行排版计算，确定最终的目标页面，提高了页面排版的效率。
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的页面排版方法的步骤。
本实施例中，获取输入的各目标字段以及各目标字段的字段顺序信息，目标字段关联于页面控件；获取各目标字段所对应的控件配置文件，并获取预设的排版配置文件；基于字段顺序信息、控件配置文件和排版配置文件进行排版计算，在排版计算时，字段顺序信息用于约束目标字段及其页面控件在页面中出现的先后顺序，控件配置文件用于定义目标控件的控件类型以及展示内容，排版配置文件可以生成各种可能的排版样式，计算完成后得到DOM树；根据DOM树进行页面渲染，可以得到目标页面；本申请中，开发人员仅输入需要的目标字段以及字段顺序信息，便可以根据字段顺序信息、控件配置文件和排版配置文件自动进行排版计算，确定最终的目标页面，提高了页面排版的效率。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种页面排版方法，其特征在于，包括下述步骤：
获取输入的各目标字段以及所述各目标字段的字段顺序信息，其中，目标字段关联于页面控件；
获取所述各目标字段所对应的控件配置文件，并获取预设的排版配置文件；
基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树；
根据所述DOM树进行页面渲染，得到目标页面。
2.根据权利要求1所述的页面排版方法，其特征在于，所述获取所述各目标字段所对应的控件配置文件的步骤包括：
获取预设的字段配置表；
在所述字段配置表中查询所述各目标字段分别对应的控件配置信息，所述控件配置信息包括本地配置信息和网络配置信息，控件配置信息用于展示目标字段及其对应的页面控件；
将所述控件配置信息进行格式转换，得到所述各目标字段所对应的控件配置文件。
3.根据权利要求1所述的页面排版方法，其特征在于，所述获取预设的排版配置文件的步骤包括：
获取预设的排版配置文件，所述排版配置文件包括控件展示风格信息、页面布局信息以及字段关联信息。
4.根据权利要求1所述的页面排版方法，其特征在于，所述基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树的步骤包括：
基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到候选DOM树；
根据所述候选DOM树进行页面预渲染，得到候选页面；
对所述候选页面进行页面展示评估；
当所述候选页面未通过所述页面展示评估时，对所述候选DOM树进行迭代排版计算，直至所述候选页面通过所述页面展示评估，得到DOM树。
5.根据权利要求1所述的页面排版方法，其特征在于，在所述根据所述DOM树进行页面渲染，得到目标页面的步骤之后，还包括：
通过目标浏览器的监听接口注册监听事件，以对所述DOM树进行监听，其中，所述目标页面为所述目标浏览器中的页面；
当监听到所述DOM树发生变化时，对当前的DOM树重新进行排版计算得到第二DOM树；
根据所述第二DOM树对所述目标页面进行重新渲染，得到更新后的目标页面。
6.根据权利要求5所述的页面排版方法，其特征在于，所述当监听到所述DOM树发生变化时，对当前的DOM树重新进行排版计算得到第二DOM树的步骤包括：
当监听到所述DOM树发生变化时，获取所述当前的DOM树中的差异项；
对所述差异项进行排版计算，得到替换项；
根据所述替换项更新所述当前的DOM树，得到第二DOM树。
7.根据权利要求5所述的页面排版方法，其特征在于，在所述根据所述DOM树进行页面渲染，得到目标页面的步骤之后，还包括：
当监听到所述目标页面关闭时，销毁所述监听事件。
8.一种页面排版装置，其特征在于，包括：
字段获取模块，用于获取输入的各目标字段以及所述各目标字段的字段顺序信息，其中，目标字段关联于页面控件；
配置获取模块，用于获取所述各目标字段所对应的控件配置文件，并获取预设的排版配置文件；
排版计算模块，用于基于所述字段顺序信息、所述控件配置文件和所述排版配置文件进行排版计算，得到DOM树；
页面渲染模块，用于根据所述DOM树进行页面渲染，得到目标页面。
9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的页面排版方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的页面排版方法的步骤。
CN202310393303.3A 2023-04-06 2023-04-06 页面排版方法、装置、计算机设备及存储介质 Pending CN116431149A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310393303.3A CN116431149A (zh) 2023-04-06 2023-04-06 页面排版方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310393303.3A CN116431149A (zh) 2023-04-06 2023-04-06 页面排版方法、装置、计算机设备及存储介质

Publications (1)

Publication Number Publication Date
CN116431149A true CN116431149A (zh) 2023-07-14

Family

ID=87084994

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310393303.3A Pending CN116431149A (zh) 2023-04-06 2023-04-06 页面排版方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN116431149A (zh)

Similar Documents

Publication Publication Date Title
CN113010542B (zh) 业务数据处理方法、装置、计算机设备及存储介质
CN110765610B (zh) Pdm集成方法、装置、计算机设备及存储介质
CN117195886A (zh) 基于人工智能的文本数据处理方法、装置、设备及介质
CN116911572A (zh) 页面自动化装配方法、系统、计算机设备及存储介质
CN116821493A (zh) 消息推送方法、装置、计算机设备及存储介质
CN116956326A (zh) 权限数据的处理方法、装置、计算机设备及存储介质
CN116661936A (zh) 页面数据的处理方法、装置、计算机设备及存储介质
CN114626352B (zh) 报表自动化生成方法、装置、计算机设备及存储介质
CN116383787A (zh) 页面创建方法、装置、计算机设备及存储介质
CN115687826A (zh) 页面刷新方法、装置、计算机设备及存储介质
CN112528189B (zh) 基于数据的组件封装方法、装置、计算机设备及存储介质
CN115562662A (zh) 应用页面的创建方法、装置、计算机设备及存储介质
CN116431149A (zh) 页面排版方法、装置、计算机设备及存储介质
CN114968725A (zh) 任务依赖关系校正方法、装置、计算机设备及存储介质
CN114510908A (zh) 数据导出方法、装置、计算机设备及存储介质
CN114722787B (zh) 一种基于Excel级联的标签匹配方法、及其相关设备
CN113806372B (zh) 新数据信息构建方法、装置、计算机设备及存储介质
CN117251159A (zh) 规则页面生成方法、装置、计算机设备及存储介质
CN116932486A (zh) 文件生成方法、装置、计算机设备及存储介质
CN117435267A (zh) 基于配置文件的表单加载方法、装置、计算机设备及介质
CN116776838A (zh) 文本处理方法、装置、计算机设备及存储介质
CN116701488A (zh) 数据处理方法、装置、计算机设备及存储介质
CN116775186A (zh) 页面数据处理方法、装置、计算机设备及存储介质
CN117115307A (zh) 基于Flutter的富文本编辑方法、装置、设备及介质
CN116775649A (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