CN113568701A - 模态框显示方法、装置、设备及存储介质 - Google Patents

模态框显示方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN113568701A
CN113568701A CN202111139502.9A CN202111139502A CN113568701A CN 113568701 A CN113568701 A CN 113568701A CN 202111139502 A CN202111139502 A CN 202111139502A CN 113568701 A CN113568701 A CN 113568701A
Authority
CN
China
Prior art keywords
modal
component
modal frame
frame
shared
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
CN202111139502.9A
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.)
Shenzhen Xinrun Fulian Digital Technology Co Ltd
Original Assignee
Shenzhen Xinrun Fulian Digital Technology 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 Shenzhen Xinrun Fulian Digital Technology Co Ltd filed Critical Shenzhen Xinrun Fulian Digital Technology Co Ltd
Priority to CN202111139502.9A priority Critical patent/CN113568701A/zh
Publication of CN113568701A publication Critical patent/CN113568701A/zh
Pending legal-status Critical Current

Links

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
    • 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/957—Browsing optimisation, e.g. caching or content distillation
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开了一种模态框显示方法、装置、设备及存储介质，所述模态框显示方法包括：在开发目录中创建组件文件，并在所述组件文件引入模态框组件，配置所述模态框组件对应的功能样式，获得优化模态框，对所述优化模态框进行分块处理，获得各分块模态框，将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中。本申请解决由于需对每个功能模块分别进行创建模态框，导致项目开发效率较低，以及各个功能模块对应的模态框展示风格不统一的技术问题。

Description

模态框显示方法、装置、设备及存储介质
技术领域
本申请涉及计算机技术领域，尤其涉及一种模态框显示方法、装置、设备及存储介质。
背景技术
随着计算机技术的发展，在目前的工业互联网前端开发中，用户在网页的提示模态框进行各种交互操作，弹出模态框对用户进行一些提示或向用户直接展示内容，增强交互体验，减少页面的跳转，然而，在***开发中，随着开发功能模块的数量增加，模态框的使用量会也会增加，开发人员需针对每个功能模块分别进行创建模态框，工作量较大，进而导致项目开发效率较低，以及各个功能模块对应的模态框展示风格不统一。
发明内容
本申请的主要目的在于提供一种模态框显示方法、装置、设备及存储介质，旨在解决现有技术中的由于需对每个功能模块分别进行创建模态框，进而导致项目开发效率较低，以及各个功能模块对应的模态框展示风格不统一的技术问题。
为实现上述目的，本申请提供一种模态框显示方法，所述模态框显示方法应用于客户端，所述模态框显示方法包括：
在开发目录中创建组件文件，并在所述组件文件引入模态框组件；
配置所述模态框组件对应的功能样式，获得优化模态框；
对所述优化模态框进行分块处理，获得各分块模态框；
将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中。
可选地，所述基于所述模态框组件，配置所述模态框组件的功能样式，获得封装模态框的步骤包括：
基于所述模态框组件，修改所述模态框组件中原有功能样式和/或在所述模态框组件添加个性化功能样式，获得所述优化模态框组件。
可选地，在所述将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中的步骤之后，所述模态框显示方法还包括：
向所述服务端发送页面对应的组件请求，以供所述服务端基于所述组件请求，返回所述组件请求对应的各共享分块模态框；
基于各所述共享分块模态框和所述组件请求对应的请求功能，将各所述共享分块模态框展示在所述页面中。
可选地，所述基于各所述分块模态框和所述组件请求对应的请求功能，将各所述分块模态框动态展示在对应的页面中的步骤包括：
基于所述组件请求的请求功能，将各所述共享分块模态框进行整合，获得完整显示组件；
将所述完整显示组件渲染显示在所述页面中。
为实现上述目的，本申请还提供一种模态框显示方法，所述模态框显示方法应用于服务端，所述模态框显示方法包括：
获取客户端上传的各分块模态框；
基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享。
可选地，在所述基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享的步骤之后，所述模态框显示方法包括：
当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框；
将所述组件请求对应的各共享分块模态框返回至所述客户端，以供所述客户端将各所述共享分块模态框进行整合渲染，并展示在所述客户端对应的页面中。
可选地，所述当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框的步骤包括：
对所述组件请求进行解析，获得请求解析结果；
基于所述请求解析结果，通过预设组件拉取方式在所述共享分块模态框组件中拉取各共享分块模态框。
本申请还提供一种模态框显示装置，所述模态框显示装置应用于客户端，所述模态框显示装置为虚拟装置，所述模态框显示装置包括：
创建模块，用于在开发目录中创建组件文件，并在所述组件文件引入模态框组件；
配置模块，用于配置所述模态框组件对应的功能样式，获得优化模态框；
分块处理模块，用于对所述优化模态框进行分块处理，获得各分块模态框；
上传模块，用于将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中。
本申请还提供一种模态框显示装置，所述模态框显示装置应用于服务端，所述模态框显示装置为虚拟装置，所述模态框显示装置包括：
获取模块，用于获取客户端上传的各分块模态框；
组件生成模块，用于基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享。
本申请还提供一种模态框显示设备，所述模态框显示设备为实体设备，所述模态框显示设备包括：存储器、处理器以及存储在所述存储器上的模态框显示程序，所述模态框显示程序被所述处理器执行实现如上述的模态框显示方法的步骤。
本申请还提供一种存储介质，所述介质为计算机可读存储介质，所述计算机可读存储介质上存储模态框显示程序，所述模态框显示程序被处理器执行实现如上述的模态框显示方法的步骤。
本申请还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述的模态框显示方法的步骤。
本申请提供了一种模态框显示方法、装置、设备及存储介质，相比于现有技术采用的需针对每个功能模块分别进行创建模态框的技术手段，本申请首先在开发目录中创建组件文件，并在所述组件文件引入模态框组件，进而配置所述模态框组件对应的功能样式，获得优化模态框，实现了对模态框组件的二次优化封装的目的，进一步地，对所述优化模态框进行分块处理，获得各分块模态框，进而将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中，实现了将二次优化封装的模态框组件分块打包上传至服务端，以使得根据需要进行动态加载服务端存储的模态框组件，即可在页面中显示样式统一的模态框组件，进而减少了开发的工作量，克服了现有技术中由于需对每个功能模块分别进行创建模态框，进而导致项目开发效率较低，以及各个功能模块对应的模态框展示风格不统一的技术缺陷，从而提高了开发的效率。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域默认技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本申请模态框显示方法第一实施例的流程示意图；
图2为本申请模态框显示方法第二实施例的流程示意图；
图3为本申请模态框显示方法第三实施例的流程示意图；
图4为本申请实施例中模态框显示方法涉及的硬件运行环境的模态框显示设备结构示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。
本申请实施例提供一种模态框显示方法，在本申请模态框显示方法的第一实施例中，参照图1，所述模态框显示方法应用于客户端，所述模态框显示方法包括：
步骤S10，在开发目录中创建组件文件，并在所述组件文件引入模态框组件；
在本实施例中，需要说明的是，所述模态框组件包括但不限于ant-design-vue（前端开发框架）Bootstrap（前端开发框架）等框架对应的模态框。
在开发目录中创建组件文件，并在所述组件文件引入模态框组件，具体地，在创建好***项目后，在所述***项目对应的开发目录中创建组件文件，并在所述组件文件引入模态框组件例如，在src开发目录下先创建一个公共的组件库component，并在其中创建一个industry-modal.vue的组件文件，进而引入相关的modal（模态框）组件，比如，importViteComponents, { AntDesignModal, } from 'vite-plugin-components'。
步骤S20，配置所述模态框组件对应的功能样式，获得优化模态框；
在本实施例中，配置所述模态框组件对应的功能样式，获得优化模态框，具体地，选取所述模态框组件对应的原有功能样式进行修改，和/或在所述模态框中自定义的地方添加用户所定制功能对应的个性化样式，获得所述优化模态框，从而实现所述模态框组件的二次封装，保证模态框组件的一致性，确保各个功能模块对应的模态框展示风格的统一性。
其中，所述基于所述模态框组件，配置所述模态框组件的功能样式，获得封装模态框的步骤包括：
步骤S21，基于所述模态框组件，修改所述模态框组件中原有功能样式和/或在所述模态框组件添加个性化功能样式，获得所述优化模态框组件。
在本实施例中，需要说明的是，所述个性化功能样式为用户自定义添加的。
基于所述模态框组件，修改所述模态框组件中原有功能样式和/或在所述模态框组件添加个性化功能样式，获得所述优化模态框组件，具体地，在所述模态框组件中的原有功能样式进行修改，配置所述模态框组件对应的个性化展示样式，例如，去掉不需要的原有功能，配置所述模态框对的CSS样式，position: absolute; top: 0; right: 0; z-index:10; padding: 0; color: rgba(0,0,0,45)。
步骤S30，对所述优化模态框进行分块处理，获得各分块模态框；
在本实施例中，需要说明的是，模态框包括header（头部）,main（内容展示部分）和footer（尾部）等模块。
对所述优化模态框进行分块处理，获得各分块模态框，具体地，按照所述优化模态框的组成模块，将所述优化模态框进行分块处理，从而获得所述优化模态框对应的各模块，也即，获得各所述分块模态框，例如，分为header,main,footer等模块，从而实现了组件的隔离。
步骤S40，将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中。
在本实施例中，将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中，具体地，通过CaaS（Communications-as-a-Service，通讯即服务）将各所述分块模态框打包分块上传至服务端，即可在开发过程中需要运用模态框的时候，动态加载所述服务端获取的分块模态框，直接生成整个项目的模态框，大大减少了开发工作量。
本申请实施例提供了一种模态框显示方法，相比于现有技术采用的需针对每个功能模块分别进行创建模态框的技术手段，本申请实时汇率首先在开发目录中创建组件文件，并在所述组件文件引入模态框组件，进而配置所述模态框组件对应的功能样式，获得优化模态框，实现了对模态框组件的二次优化封装的目的，进一步地，对所述优化模态框进行分块处理，获得各分块模态框，进而将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中，实现了将二次优化封装的模态框组件分块打包上传至服务端，以使得根据需要进行动态加载服务端存储的模态框组件，即可在页面中显示对应的模态框组件，进而减少了开发的工作量，克服了现有技术中由于需对每个功能模块分别进行创建模态框，进而导致项目开发效率较低，以及各个功能模块对应的模态框展示风格不统一的技术缺陷，从而提高了开发的效率。
进一步地，参照图2，基于本申请中第一实施例，在本申请的另一实施例中，在所述将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中的步骤之后，所述模态框显示方法还包括：
步骤A10，向所述服务端发送页面对应的组件请求，以供所述服务端基于所述组件请求，返回所述组件请求对应的各共享分块模态框；
在本实施例中，需要说明的是，在***项目开发中，利用BigPipe 作为网页架构，BigPipe是一个重新设计的基础动态网页服务体系，大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和客户端的浏览器建立管道并管理Pagelets在不同阶段的运行。
向所述服务端发送页面对应的组件请求，以供所述服务端基于所述组件请求，返回所述组件请求对应的各共享分块模态框，具体地，通过所述客户端对应的浏览器向所述服务端发送页面对应的组件请求，其中，所述组件请求为页面需要模态框组件对应的HTTP请求，以供所述服务端基于所述组件请求，对所述组件请求进行解析检查，以返回所述组件请求对应的各共享分块模态框，例如，客户端发送HTTP请求到Web服务端，服务端解析HTTP请求，进而返回所述HTTP请求相应的应答给所述客户端。
步骤A20，基于各所述共享分块模态框和所述组件请求对应的请求功能，将各所述共享分块模态框展示在所述页面中。
在本实施例中，基于各所述共享分块模态框和所述组件请求对应的请求功能，将各所述共享分块模态框展示在所述页面中，具体地，通过所述服务端返回所述组件请求对应的各所述共享分块模态框后，进而通过所述客户端下载各所述共享分块模态框所在页面对应的CSS样式资源和/或下载页面JavaScript引用的资源，基于所述组件请求的请求功能，将各所述共享分块模态框进行整合，获得完整显示组件，从而渲染展示在所述页面中，降低了首屏加载的时间。
其中，所述基于各所述分块模态框和所述组件请求对应的请求功能，将各所述分块模态框动态展示在对应的页面中的步骤包括：
步骤A21，基于所述组件请求的请求功能，将各所述共享分块模态框进行整合，获得完整显示组件；
在本实施例中，需要说明的是，各所述共享分块模态框均有各自对应的功能以及服务，因此，从服务端拉取下来的各所述共享分块模态框并不能直接显示在页面中对应的位置中。
基于所述组件请求的请求功能，将各所述共享分块模态框进行整合，获得完整显示组件，具体地，根据所述组件请求对应的请求功能，控制各所述共享分块模态框进行整合，从而形成所述完整显示组件，以显示在页面中，例如，页面传入控制对象visibleObj，根据visibleObj传入的对象确定对应的请求解析结果，进而控制各所述共享分块模态框进行整合，确保整合过程的准确率。
步骤A22，将所述完整显示组件渲染显示在所述页面中。
在本实施例中，将所述完整显示组件渲染显示在所述页面中，具体地，在获得完整显示组件后，将所述完整显示组件显示在所述页面中，从而实现了模态框动态导入所需页面以进行显示的目的。
本申请实施例提供了一种模态框显示方法，也即，向所述服务端发送页面对应的组件请求，以供所述服务端基于所述组件请求，返回所述组件请求对应的各共享分块模态框，进而基于各所述共享分块模态框和所述组件请求对应的请求功能，将各所述共享分块模态框展示在所述页面中，从而实现了基于所述服务端中的共享分块模态框组件，通过向所述服务端发送组件请求，即可从所述共享分块模态框组件拉取到所述组件请求对应的模态框，进而动态导入至页面以进行显示相应的模态框，从而确保了模态框的统一性。
进一步地，在本申请模态框显示方法的第三实施例中，参照图3，所述模态框显示装置应用于服务端，在本申请的另一实施例中，所述模态框显示方法还包括：
步骤B10，获取客户端上传的各分块模态框；
在本实施例中，需要说明的是，在本申请中，采用依赖收集的方式进行获取各分块模态框，也即当所述模态框组件发生变化时，依赖收集后的分块模态框也会实时更新变化。
步骤B20，基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享。
在本实施例中，基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享，具体地，在接收所述客户端上传的各所述分块模态框后，基于各所述分块模态框，生成对应的共享分块模态框组件，并存储在服务端对应的后端中，进而发布所述依赖共享，以使得所述客户端能够拉取所述共享分块模态框组件。
其中，所述在所述基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享的步骤之后，所述模态框显示方法包括：
步骤C10，当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框；
在本实施例中，当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框，具体地，当接收到所述客户端发送的组件请求时，对所述组件请求进行解析，进而根据解析后对应的请求解析结果获取存储在所述服务端中的各共享分块模态框。
其中，所述当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框的步骤包括：
步骤C11，对所述组件请求进行解析，获得请求解析结果；
在本实施例中，需要说明的是，服务端在接收到所述组件请求，也即HTTP请求，需对请求进行解析检查，从而根据解析结果进行数据拉取操作，也即，拉取各所述共享分块模态框。
步骤C12，基于所述请求解析结果，通过预设组件拉取方式在所述共享分块模态框组件中拉取各共享分块模态框。
在本实施例中，基于所述请求解析结果，通过预设组件拉取方式在所述共享分块模态框组件中拉取各共享分块模态框，具体地，基于所述请求解析结果，通过预设组件拉取方式在所述服务端的共享分块模态框组件中拉取所述请求解析结果对应的各共享分块模态框，其中，所述预设组件拉取方式包括FS（文件拉取）拉取方法和其他组件拉取等方法。
步骤C20，将所述组件请求对应的各共享分块模态框返回至所述客户端，以供所述客户端将各所述共享分块模态框进行整合渲染，并展示在所述客户端对应的页面中。
在本实施例中，需要说明的是，分块模态框上传到服务器，再进行分块下载后，需要将下载得到的分块进行整合，进而形成一个完整的模态框组件，才可渲染显示在页面中。
将所述组件请求对应的各共享分块模态框返回至所述客户端，以供所述客户端将各所述共享分块模态框进行整合渲染，并展示在所述客户端对应的页面中，具体地，将所述组件请求对应的各共享分块模态框，返回应答至所述客户端，使得通过所述客户端从服务端拉取得到的各共享分块模态框。
本申请实施例提供了一种模态框显示方法，也即，获取客户端上传的各分块模态框，进而基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享，从而实现将各所述模态框集成在服务端中，生成共享分块模态框组件，进而使得客户端直接拉取服务端存储的共享分块模态框组件，即可生成页面对应的模态框，进而减少了开发的工作量，克服了现有技术中由于需对每个功能模块分别进行创建模态框，进而导致项目开发效率较低，以及各个功能模块对应的模态框展示风格不统一的技术缺陷，从而提高了开发的效率。
参照图4，图4是本申请实施例中模态框显示方法涉及的硬件运行环境的模态框显示设备结构示意图。
如图4所示，该模态框显示设备可以包括：处理器1001，例如CPU，存储器1005，通信总线1002。其中，通信总线1002用于实现处理器1001和存储器1005之间的连接通信。存储器1005可以是高速RAM存储器，也可以是稳定的存储器（non-volatile memory），例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储设备。
可选地，该模态框显示设备还可以包括矩形用户接口、网络接口、相机、RF（RadioFrequency，射频）电路，传感器、音频电路、WiFi模块等等。矩形用户接口可以包括显示屏（Display）、输入子模块比如键盘（Keyboard），可选矩形用户接口还可以包括标准的有线接口、无线接口。网络接口可选的可包括标准的有线接口、无线接口（如WIFI接口）。
本领域技术人员可以理解，图4中示出的模态框显示设备结构并不构成对模态框显示设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图4所示，作为一种计算机存储介质的存储器1005中可以包括操作***、网络通信模块以及模态框显示程序。操作***是管理和控制模态框显示设备硬件和软件资源的程序，支持模态框显示程序以及其它软件和/或程序的运行。网络通信模块用于实现存储器1005内部各组件之间的通信，以及与模态框显示***中其它硬件和软件之间通信。
在图4所示的模态框显示设备中，处理器1001用于执行存储器1005中存储的模态框显示程序，实现上述任一项所述的模态框显示方法的步骤。
本申请模态框显示设备具体实施方式与上述模态框显示方法各实施例基本相同，在此不再赘述。
本申请还提供一种模态框显示装置，所述模态框显示装置应用于客户端，所述模态框显示装置包括：
创建模块，用于在开发目录中创建组件文件，并在所述组件文件引入模态框组件；
配置模块，用于配置所述模态框组件对应的功能样式，获得优化模态框；
分块处理模块，用于对所述优化模态框进行分块处理，获得各分块模态框；
上传模块，用于将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中。
可选地，所述创建模块还用于：
基于所述模态框组件，修改所述模态框组件中原有功能样式和/或在所述模态框组件添加个性化功能样式，获得所述优化模态框组件。
可选地，所述模态框显示装置还用于：
向所述服务端发送页面对应的组件请求，以供所述服务端基于所述组件请求，返回所述组件请求对应的各共享分块模态框；
基于各所述共享分块模态框和所述组件请求对应的请求功能，将各所述共享分块模态框展示在所述页面中。
可选地，基于所述组件请求的请求功能，将各所述共享分块模态框进行整合，获得完整显示组件；
将所述完整显示组件渲染显示在所述页面中。
本申请模态框显示装置的具体实施方式与上述模态框显示方法各实施例基本相同，在此不再赘述。
本申请还提供一种模态框显示装置，所述模态框显示装置应用于服务端，所述模态框显示装置包括：
获取模块，用于获取客户端上传的各分块模态框；
组件生成模块，用于基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享。
可选地，所述模态框显示装置还用于：
当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框；
将所述组件请求对应的各共享分块模态框返回至所述客户端，以供所述客户端将各所述共享分块模态框进行整合渲染，并展示在所述客户端对应的页面中。
可选地，所述模态框显示装置还用于：
对所述组件请求进行解析，获得请求解析结果；
基于所述请求解析结果，通过预设组件拉取方式在所述共享分块模态框组件中拉取各共享分块模态框。
本申请模态框显示装置的具体实施方式与上述模态框显示方法各实施例基本相同，在此不再赘述。
本申请实施例提供了一种存储介质，所述介质为计算机可读存储介质，且所述计算机可读存储介质存储有一个或者一个以上程序，所述一个或者一个以上程序还可被一个或者一个以上的处理器执行以用于实现上述任一项所述的模态框显示方法的步骤。
本申请可读存储介质具体实施方式与上述模态框显示方法各实施例基本相同，在此不再赘述。
本申请实施例提供了一种计算机程序产品，且所述计算机程序产品包括有一个或者一个以上计算机程序，所述一个或者一个以上计算机程序还可被一个或者一个以上的处理器执行以用于实现上述任一项所述的模态框显示方法的步骤。
本申请计算机程序产品具体实施方式与上述模态框显示方法各实施例基本相同，在此不再赘述。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利处理范围内。

Claims (10)

1.一种模态框显示方法，其特征在于，所述模态框显示方法应用于客户端，所述模态框显示方法包括：
在开发目录中创建组件文件，并在所述组件文件引入模态框组件；
配置所述模态框组件对应的功能样式，获得优化模态框；
对所述优化模态框进行分块处理，获得各分块模态框；
将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中。
2.如权利要求1所述模态框显示方法，其特征在于，所述基于所述模态框组件，配置所述模态框组件的功能样式，获得封装模态框的步骤包括：
基于所述模态框组件，修改所述模态框组件中原有功能样式和/或在所述模态框组件添加个性化功能样式，获得所述优化模态框组件。
3.如权利要求1所述模态框显示方法，其特征在于，在所述将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中的步骤之后，所述模态框显示方法还包括：
向所述服务端发送页面对应的组件请求，以供所述服务端基于所述组件请求，返回所述组件请求对应的各共享分块模态框；
基于各所述共享分块模态框和所述组件请求对应的请求功能，将各所述共享分块模态框展示在所述页面中。
4.如权利要求3所述模态框显示方法，其特征在于，所述基于各所述分块模态框和所述组件请求对应的请求功能，将各所述分块模态框动态展示在对应的页面中的步骤包括：
基于所述组件请求的请求功能，将各所述共享分块模态框进行整合，获得完整显示组件；
将所述完整显示组件渲染显示在所述页面中。
5.一种模态框显示方法，其特征在于，所述模态框显示方法应用于服务端，所述模态框显示方法包括：
获取客户端上传的各分块模态框；
基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享。
6.如权利要求5所述模态框显示方法，其特征在于，在所述基于各所述分块模态框，生成共享分块模态框组件，并发布模态框依赖共享的步骤之后，所述模态框显示方法包括：
当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框；
将所述组件请求对应的各共享分块模态框返回至所述客户端，以供所述客户端将各所述共享分块模态框进行整合渲染，并展示在所述客户端对应的页面中。
7.如权利要求6所述模态框显示方法，其特征在于，所述当接收到所述客户端发送的组件请求时，在所述共享分块模态框组件中提取所述组件请求对应的各共享分块模态框的步骤包括：
对所述组件请求进行解析，获得请求解析结果；
基于所述请求解析结果，通过预设组件拉取方式在所述共享分块模态框组件中拉取各共享分块模态框。
8.一种模态框显示装置，其特征在于，所述模态框显示装置应用于客户端，所述模态框显示装置包括：
创建模块，用于在开发目录中创建组件文件，并在所述组件文件引入模态框组件；
配置模块，用于配置所述模态框组件对应的功能样式，获得优化模态框；
分块处理模块，用于对所述优化模态框进行分块处理，获得各分块模态框；
上传模块，用于将各所述分块模态框进行打包分块上传至服务端，以供所述服务端基于各所述分块模态框，生成共享分块模态框组件，以在所述共享分块模态框组件中拉取共享分块模态框显示在页面中。
9.一种模态框显示设备，其特征在于，所述模态框显示设备包括：存储器、处理器以及存储在存储器上的模态框显示程序，
所述模态框显示程序被所述处理器执行实现如权利要求1至4或者5至7中任一项所述模态框显示方法的步骤。
10.一种存储介质，所述介质为计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有模态框显示程序，所述模态框显示程序被处理器执行实现如权利要求1至4或者5至7中任一项所述模态框显示方法的步骤。
CN202111139502.9A 2021-09-28 2021-09-28 模态框显示方法、装置、设备及存储介质 Pending CN113568701A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111139502.9A CN113568701A (zh) 2021-09-28 2021-09-28 模态框显示方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111139502.9A CN113568701A (zh) 2021-09-28 2021-09-28 模态框显示方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
CN113568701A true CN113568701A (zh) 2021-10-29

Family

ID=78174889

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111139502.9A Pending CN113568701A (zh) 2021-09-28 2021-09-28 模态框显示方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN113568701A (zh)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103324756A (zh) * 2013-07-09 2013-09-25 星云融创（北京）信息技术有限公司 一种提高浏览器访问速度的方法及装置
US20150248302A1 (en) * 2014-03-03 2015-09-03 Baidu Online Network Technology (Beijing) Co., Ltd Method, apparatus, server and system for implementing web application
CN106951270A (zh) * 2017-04-06 2017-07-14 腾讯科技（深圳）有限公司 一种代码处理方法、***及服务器
CN110597583A (zh) * 2019-08-14 2019-12-20 北京金堤科技有限公司 模态框的吸顶方法和装置、存储介质、电子设备
CN111258675A (zh) * 2020-01-15 2020-06-09 平安银行股份有限公司 共享前端组件的渲染方法、装置、设备及存储介质
CN112685105A (zh) * 2021-01-13 2021-04-20 北京三快在线科技有限公司 前端组件共享方法、装置、计算机设备及存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103324756A (zh) * 2013-07-09 2013-09-25 星云融创（北京）信息技术有限公司 一种提高浏览器访问速度的方法及装置
US20150248302A1 (en) * 2014-03-03 2015-09-03 Baidu Online Network Technology (Beijing) Co., Ltd Method, apparatus, server and system for implementing web application
CN106951270A (zh) * 2017-04-06 2017-07-14 腾讯科技（深圳）有限公司 一种代码处理方法、***及服务器
CN110597583A (zh) * 2019-08-14 2019-12-20 北京金堤科技有限公司 模态框的吸顶方法和装置、存储介质、电子设备
CN111258675A (zh) * 2020-01-15 2020-06-09 平安银行股份有限公司 共享前端组件的渲染方法、装置、设备及存储介质
CN112685105A (zh) * 2021-01-13 2021-04-20 北京三快在线科技有限公司 前端组件共享方法、装置、计算机设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
妄笑伊: "登录注册模态框", 《CSDN网站》 *

Similar Documents

Publication Publication Date Title
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
EP3465467B1 (en) Web page accelerations for web application hosted in native mobile application
CN108984714B (zh) 页面渲染方法、装置、电子设备及计算机可读介质
KR102115057B1 (ko) 그래픽 렌더링
CN106997298B (zh) 一种应用资源获取方法及装置
US20090019133A1 (en) System, method and computer program for updating a web page in a web browser
US6922200B1 (en) Delivering a graphical object to a browser
US20130007107A1 (en) Rendering components within different browser environments
CN109885301B (zh) 一种可缩放矢量图形的生成方法、装置、存储介质和设备
CN111880790A (zh) 页面渲染方法、页面渲染***和计算机可读存储介质
CN111880788A (zh) 页面渲染方法、装置、客户端和计算机可读存储介质
CN111224880A (zh) 一种单页面应用的接口数据获取方法、装置及存储介质
CN114650434A (zh) 一种基于云服务的渲染方法及其相关设备
CN103942307B (zh) 一种基于图片流的前端加速方法
CN111600920B (zh) 基于js的数据请求代理方法、装置、设备及可读存储介质
CN110347319A (zh) 一种应用内屏幕截图方法及装置
CN111880789A (zh) 页面渲染方法、装置、服务端和计算机可读存储介质
US10467332B2 (en) Graphics display capture system
US10089406B2 (en) Generating web pages with integrated content
US10997261B2 (en) System and method that facilitate display responsive message rendering on client device
CN113568701A (zh) 模态框显示方法、装置、设备及存储介质
US11758016B2 (en) Hosted application as web widget toolkit
US20160094610A1 (en) Systems and methods to package web site resources
Sawicki et al. 3D mesh viewer using HTML5 technology
CN113204405A (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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20211029