CN117390326A - 页面管理方法、装置、设备以及存储介质 - Google Patents
页面管理方法、装置、设备以及存储介质 Download PDFInfo
- Publication number
- CN117390326A CN117390326A CN202311698280.3A CN202311698280A CN117390326A CN 117390326 A CN117390326 A CN 117390326A CN 202311698280 A CN202311698280 A CN 202311698280A CN 117390326 A CN117390326 A CN 117390326A
- Authority
- CN
- China
- Prior art keywords
- page
- url
- component
- mapping table
- components
- 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
- 238000007726 management method Methods 0.000 title claims abstract description 53
- 238000013507 mapping Methods 0.000 claims abstract description 87
- 238000000034 method Methods 0.000 claims abstract description 42
- 238000009877 rendering Methods 0.000 claims abstract description 28
- 238000011161 development Methods 0.000 claims abstract description 24
- 230000008859 change Effects 0.000 claims description 24
- 230000006870 function Effects 0.000 claims description 15
- 238000012544 monitoring process Methods 0.000 claims description 4
- 230000008569 process Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000036316 preload Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000002457 bidirectional effect Effects 0.000 description 1
- 230000008275 binding mechanism Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000006378 damage Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- 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
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请公开了一种页面管理方法、装置、设备以及存储介质，其页面管理方法包括：当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。本申请方案可以实现在页面内容发生变化时，只需在页面更新变化的组件，而不需重新加载整个页面，从而减少了服务器请求和页面加载时间，提高用户体验感。
Description
技术领域
本申请涉及可视化平台管理技术领域，尤其涉及一种页面管理方法、装置、设备以及存储介质。
背景技术
目前市面上的单页面应用主要受到前端技术限制、网络传输限制、设备性能限制和用户体验考虑等的影响，使得其页面的展示内容非常有限，难以展示大量的内容和数据。在需要展示丰富的内容和数据时，经常需要通过变更页面内容的方式来实现。然而，在单页面应用中，当页面内容发生变化时，通常需要重新加载整个页面来更新内容，使得每次内容改变都需要对页面进行大量的重复渲染，增加页面加载时间和服务器压力。
发明内容
本申请的主要目的在于提供一种页面管理方法、装置、设备以及存储介质，旨在解决现有技术在页面内容发生变化时存在的页面加载时间和服务器压力较大的问题。
为实现上述目的，本申请提供一种页面管理方法，所述页面管理方法包括：
当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；
基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；
根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。
可选地，所述获取预先创建的路由映射表的步骤之前，还包括：
通过路由管理器将所述页面的URL映射到所述组件，并创建得到所述路由映射表。
可选地，所述获取预先创建的路由映射表的步骤之前，还包括：
在用户登录时，获取用于预加载的页面资源的URL；
根据所述页面资源的URL创建文件File对象或类文件Blob对象；
将所述File对象或Blob对象转换为URL对象；
根据所述页面资源的资源类型创建对应的页面元素；
根据所述页面元素添加预加载属性，并将所述预加载属性设置为所述URL对象的URL；
根据所述URL对象的URL将所述页面元素加载到页面中的对应位置，以完成所述页面的预加载。
可选地，所述将所述File对象或Blob对象转换为URL对象的步骤包括：
通过创建指向参数对象方法将所述File对象或Blob对象转换为所述URL对象。
可选地，所述将所述File对象或Blob对象转换为URL对象的步骤之后，还包括：
将所述URL对象与当前浏览窗口中的文档对象document进行绑定。
可选地，所述将渲染后的组件切换到所述页面上的步骤包括：
通过所述Vue中的动态切换组件将所述渲染后的组件切换到页面上；
通过所述Vue中的缓存组件缓存所述页面中无需切换的组件。
可选地，所述根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上的步骤之后，还包括：
通过执行定时查询函数对所述页面的URL进行监听。
本申请实施例还提出一种页面管理装置，所述页面管理装置包括：
获取模块，用于当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；
匹配模块，用于基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；
加载模块，用于根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。
本申请实施例还提出一种页面管理设备，所述页面管理设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的页面管理程序，所述页面管理程序被所述处理器执行时实现如上所述的页面管理方法的步骤。
本申请实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有页面管理程序，所述页面管理程序被处理器执行时实现如上所述的页面管理方法的步骤。
本申请实施例提出的页面管理方法、装置、设备以及存储介质，通过当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。通过在监听到页面内容变化时，根据页面变化内容对应的URL与路由映射表匹配得到组件，将匹配到的组件进行渲染和切换，可以实现在页面内容发生变化时，只需在页面更新变化的组件，而不需重新加载整个页面，从而可以减少服务器请求和页面加载时间，提高用户体验感。
同时，基于本申请方案通过使用Vue框架进行组件化开发，可以更好地管理和复用页面组件，提高了开发效率和代码的可维护性。
附图说明
图1为本申请页面管理装置所属终端设备的功能模块示意图；
图2为本申请页面管理方法一示例性实施例的流程示意图；
图3为本申请页面管理方法另一示例性实施例的流程示意图；
图4为本申请页面管理方法又一示例性实施例的流程示意图。
本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本申请实施例的主要解决方案是：通过当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。通过在监听到页面内容变化时，根据页面变化内容对应的URL与路由映射表匹配得到组件，将匹配到的组件进行渲染和切换，可以实现在页面内容发生变化时，只需在页面更新变化的组件，而不需重新加载整个页面，从而可以减少服务器请求和页面加载时间，提高用户体验感。
同时，基于本申请方案通过使用Vue框架进行组件化开发，可以更好地管理和复用页面组件，提高了开发效率和代码的可维护性。
具体地，参照图1，图1为本申请页面管理装置所属终端设备的功能模块示意图。该页面管理装置可以为独立于终端设备的、能够进行页面管理的装置，其可以通过硬件或软件的形式承载于终端设备上。该终端设备可以为手机、平板电脑等具有数据处理功能的智能移动终端，还可以为具有数据处理功能的固定终端设备或服务器等。
在本实施例中，该页面管理装置所属终端设备至少包括输出模块110、处理器120、存储器130以及通信模块140。
存储器130中存储有操作系统以及页面管理程序，页面管理装置可以将监听到的页面发生变化时的统一资源定位地址URL，获取到的预先创建的路由映射表，基于URL和路由映射表匹配得到的与URL对应的组件，根据匹配的组件进行渲染后得到的组件，以及在用户登录时预加载的页面等信息存储于该存储器130中；输出模块110可为显示屏等。通信模块140可以包括WIFI模块、移动通信模块以及蓝牙模块等，通过通信模块140与外部设备或服务器进行通信。
其中，存储器130中的页面管理程序被处理器执行时实现以下步骤：
当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；
基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；
根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。
进一步地，存储器130中的页面管理程序被处理器执行时还实现以下步骤：
通过路由管理器将所述页面的URL映射到所述组件，并创建得到所述路由映射表。
进一步地，存储器130中的页面管理程序被处理器执行时还实现以下步骤：
在用户登录时，获取用于预加载的页面资源的URL；
根据所述页面资源的URL创建文件File对象或类文件Blob对象；
将所述File对象或Blob对象转换为URL对象；
根据所述页面资源的资源类型创建对应的页面元素；
根据所述页面元素添加预加载属性，并将所述预加载属性设置为所述URL对象的URL；
根据所述URL对象的URL将所述页面元素加载到页面中的对应位置，以完成所述页面的预加载。
进一步地，存储器130中的页面管理程序被处理器执行时还实现以下步骤：
通过创建指向参数对象方法将所述File对象或Blob对象转换为所述URL对象。
进一步地，存储器130中的页面管理程序被处理器执行时还实现以下步骤：
将所述URL对象与当前浏览窗口中的文档对象document进行绑定。
进一步地，存储器130中的页面管理程序被处理器执行时还实现以下步骤：
通过所述Vue中的动态切换组件将所述渲染后的组件切换到页面上；
通过所述Vue中的缓存组件缓存所述页面中无需切换的组件。
进一步地，存储器130中的页面管理程序被处理器执行时还实现以下步骤：
通过执行定时查询函数对所述页面的URL进行监听。
本实施例通过上述方案，具体通过当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。通过在监听到页面内容变化时，根据页面变化内容对应的URL与路由映射表匹配得到组件，将匹配到的组件进行渲染和切换，可以实现在页面内容发生变化时，只需在页面更新变化的组件，而不需重新加载整个页面，从而可以减少服务器请求和页面加载时间，提高用户体验感。
同时，基于本申请方案通过使用Vue框架进行组件化开发，可以更好地管理和复用页面组件，提高了开发效率和代码的可维护性。
基于上述终端设备架构但不限于上述架构，提出本申请方法实施例。
参照图2，图2为本申请页面管理方法一示例性实施例的流程示意图。所述页面管理方法包括：
步骤S110，当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到。
本实施例方法的执行主体可以是一种页面管理装置，也可以是一种页面管理终端设备或服务器，本实施例以页面管理装置进行举例，该页面管理装置可以集成在具有数据处理功能的智能手机、电脑等设备上。
具体地，通过页面管理装置持续监听页面变化，当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表。
其中，统一资源定位地址（URL，Uniform Resource Locator）也叫统一资源定位符，是用于标识和定位互联网上资源的字符串。在浏览器中，URL一般用于指定需要加载和显示的页面、图像、视频等资源的位置。
在本实施例中，预先创建的路由映射表包括了URL与组件的映射关系，也即在路由映射表中URL与其对应的组件实现数据关联。组件是预先基于用于构建用户界面的架构，即Vue架构，进行组件化开发得到。
本实施例通过基于Vue架构进行组件化开发可以减少代码书写量，使得代码更易于理解。相比于一般的项目代码，这种方法可以减少代码的体积。同时，Vue架构实现了数据的双向绑定，可以使数据的变化自动更新到页面上。
进一步地，在一实施例中，在上述获取预先创建的路由映射表的步骤之前，所述页面管理方法还可以包括：
步骤S100，通过路由管理器将所述页面的URL映射到所述组件，并创建得到所述路由映射表。
具体地，在获取预先创建的路由映射表之前，通过路由管理器将页面的URL映射到组件，并基于页面的URL与组件之间的映射关系创建得到路由映射表。之后，存储创建得到的路由映射表，以便后续根据需要调用。
比如，通过使用Vue Router插件来创建路由映射表，将不同URL路径映射到对应的组件。Vue Router是Vue.js官方提供的路由管理器，其支持在Vue应用程序中实现客户端路由，通过定义路由映射表来管理不同URL路径与对应组件的关系。Vue Router可以帮助构建单页应用（SPA）或多页应用（MPA），实现页面之间的切换和导航。此外，Vue Router还可以实现动态路由匹配、路由参数传递、路由守卫等功能，使得在Vue应用中实现复杂的路由逻辑变得更加简单和高效。
步骤S120，基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；
步骤S130，根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。
具体地，根据监听到的URL和预先创建的路由映射表进行组件匹配，得到与该URL对应的组件。根据匹配到的组件进行渲染，并将渲染后的组件切换到页面上，以完成页面变化内容的更新，从而实现了页面无刷新跳转。
示例性地，根据组件进行渲染是指将组件的模板、数据和逻辑结合起来，生成最终的用户界面。在Vue架构中，组件是由模板、数据和方法组成，可以通过组件的定义来描述组件的结构和行为。更为具体地，根据匹配的组件进行渲染的过程可以包括：解析组件的模板、创建组件实例、数据绑定、组件渲染和组件更新等。
S01，解析组件的模板：组件的模板是一个包含HTML标记和Vue指令的字符串，用于描述组件的结构和布局。在渲染组件之前，首先将组件的模板解析成虚拟DOM（VirtualDOM）的形式，以便后续的操作。
S02，创建组件实例：根据组件的定义创建一个组件实例。组件实例是Vue框架中的一个对象，它包含了组件的数据、方法和生命周期钩子函数等。
S03，数据绑定：将组件实例的数据与模板进行绑定。Vue框架提供了响应式的数据绑定机制，当组件实例的数据发生变化时，相关的视图会自动更新。
S04，渲染组件：将组件的虚拟DOM渲染成真实的DOM，并插入到页面中的指定位置。这个过程会根据组件的模板和数据生成最终的用户界面。
S05，组件更新：当组件的数据发生变化时，Vue框架会重新渲染组件，并更新相关的视图。这个过程是基于虚拟DOM的，只会更新发生变化的部分，从而提高了渲染的效率。
本实施例通过上述方案，具体通过当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。通过在监听到页面内容变化时，根据页面变化内容对应的URL与路由映射表匹配得到组件，将匹配到的组件进行渲染和切换，可以实现在页面内容发生变化时，只需在页面更新变化的组件，而不需重新加载整个页面，从而可以减少服务器请求和页面加载时间，提高用户体验感。
同时，基于本申请方案通过使用Vue框架进行组件化开发，可以更好地管理和复用页面组件，提高了开发效率和代码的可维护性。
进一步地，参照图3，图3为本申请任务运行页面管理方法另一示例性实施例的流程示意图。基于上述图2所示的实施例，在本实施例中，在上述获取预先创建的路由映射表的步骤之前，所述页面管理方法还可以包括：
步骤S101，在用户登录时，获取用于预加载的页面资源的URL。
具体地，在用户登录时，首先获取用于预加载的页面资源的URL。该页面资源可以包括但不限于图像、视频、PPT、数据看板、音乐等。其中，用于预加载的页面资源的URL可以是通过服务器端提供的API接口或者直接在前端代码中指定资源的URL。
需要说明的是，用于预加载的页面资源的URL是指指向实际图像、视频文件等资源的网络地址。实际资源的URL的生命周期是永久的，可以在任何时间使用。实际资源的URL适用于直接加载和显示在页面上，也可以通过设置图像或视频等资源元素的预加载属性，如src属性来使用。
步骤S102，根据所述页面资源的URL创建文件File对象或类文件Blob对象。
具体地，根据获取到的页面资源的URL创建得到文件对象（File对象）或类文件对象（Blob对象）。其中，File对象可用于表示用户选择的文件，Blob对象是一种表示二进制数据的对象，可以用于表示图像、视频等多种类型的数据。在本实施例中，通过使用File对象或Blob对象来表示URL所对应的页面资源。
步骤S103，将所述File对象或Blob对象转换为URL对象。
具体地，将创建得到的File对象或Blob对象转换为URL对象，其中，该URL对象可以表示指定的页面资源。
步骤S104，根据所述页面资源的资源类型创建对应的页面元素。
具体地，根据预加载的页面资源的资源类型，创建对应的页面元素。比如，对于图像资源，可以使用<img>标签创建图像元素；对于视频资源，可以使用<video>标签创建视频元素。
步骤S105，根据所述页面元素添加预加载属性，并将所述预加载属性设置为所述URL对象的URL。
具体地，在创建完对应的页面元素之后，为该页面元素添加预加载属性，如src属性，并将该预加载属性设置为URL对象的URL。
例如，设置图像的src属性为URL对象的URL，或者设置视频的src属性为URL对象的URL。
需要说明的是，URL对象的URL是创建的临时URL地址，它是一个Blob URL（BlobUniform Resource Locator）。Blob URL是一种特殊的URL格式，它指向一个Blob对象或File对象。由于URL对象的URL是临时的，它只在创建URL对象后有效，一旦页面刷新或关闭，URL对象就会被释放，此时URL对象的 URL也会失效。
本实施例通过设置预加载属性，可以在加载页面时提前请求和加载图像或视频资源，以提高用户体验和页面加载速度。
步骤S106，根据所述URL对象的URL将所述页面元素加载到页面中的对应位置，以完成所述页面的预加载。
具体地，在为页面元素添加完预加载属性之后，根据URL对象的URL将对应的页面元素加载到页面中的对应位置，以实现页面的预加载。
本实施例方案在用户登录后，页面会预加载所有的PPT、音乐、图像和视频等资源，这意味着在网络中断时，仍可在不依赖网络的情况下正常获取资源和进行业务操作，而不受网络中断的影响。其次，本实施例方案的项目只有一个HTML文件，只会加载一个HTML/CSS/JS文件，这意味着在整个项目的生命周期内，只需要加载一次HTML文件以及相关的样式和脚本文件，从而提高了页面的加载速度和用户体验，减少了网络请求的次数。
本实施例通过上述方案，通过实现页面资源的预加载功能，提前将资源加载到页面上，以便在后续需要使用页面资源时，可以直接从页面中获取，而不需要再次进行网络请求，从而提高了页面的加载速度和性能。
进一步地，在一实施例中，上述步骤S103，将所述File对象或Blob对象转换为URL对象可以包括：
步骤S1031，通过创建指向参数对象方法将所述File对象或Blob对象转换为所述URL对象。
具体地，通过使用创建指向参数对象方法，将File对象或Blob对象转换为URL对象。其中，该创建指向参数对象方法是指用于创建包含指定对象的URL的方法。创建指向参数方法可以包括URL.createObjectURL()静态方法。
示例性地，使用URL.createObjectURL()静态方法将File对象或Blob对象转换为URL对象。更为具体地，URL.createObjectURL()方法接受一个参数，即要创建URL的对象。这个对象可以是File、Blob或MediaSource等类型的对象。使用URL.createObjectURL()方法将这些对象转换为一个URL字符串，然后可以将该URL用作<img>、<video>、<audio>等标签的src属性，或者用作超链接的href属性。
本实施例通过使用URL.createObjectURL()方法，将图像和视频等资源转换为URL对象，并将其预加载到页面中，可以提前加载资源，减少后续的网络请求，提高页面的加载速度和性能。
进一步地，在上述步骤S103之后，所述页面管理方法还可以包括：
步骤S1032，将所述URL对象与当前浏览窗口中的文档对象document进行绑定。
具体地，在将File对象或Blob对象转换为URL对象之后，将该URL对象与当前浏览窗口中的文档document对象进行绑定。在本实施例中，document对象表示当前窗口或标签页中加载的HTML文档。它是JavaScript中的一个内置对象，提供了许多方法和属性，用于操作和访问文档中的元素、样式、事件等。
本实施例通过将URL对象与document绑定，可以将URL对象与当前文档关联起来，以便在文档中加载、显示和操作与URL相关的资源，如图像、视频等。例如，可以将URL对象的URL设置为图像元素的src属性，或者将URL对象的URL设置为视频元素的src属性，从而在文档中加载和显示相应的图像或视频。
同时，在将URL对象与创建它的窗口中的document绑定后，当窗口关闭或文档被卸载时，该URL对象会自动释放内存，从而可以避免内存泄漏问题，确保在不再需要URL对象时，相关的内存资源能够被正确释放。并且，通过将URL对象与创建它的窗口中的document绑定，还可以限制URL对象的使用范围，减少潜在的安全风险。
进一步地，基于上述所示实施例，上述将渲染后的组件切换到所述页面上的步骤可以包括：
步骤S1301，通过所述Vue中的动态切换组件将所述渲染后的组件切换到页面上；
步骤S1302，通过所述Vue中的缓存组件缓存所述页面中无需切换的组件。
具体地，Vue架构中包括动态切换组件和缓存组件。在根据匹配的组件进行渲染之后，通过调用Vue中的动态切换组件将渲染后的组件切换到页面上，并且，通过调用Vue中的缓存组件缓存该页面中无需切换的组件，完成页面的更新。其中，动态切换组件可以为component动态组件，缓存组件可以为keep-alive缓存组件。通过使用component动态组件切换各个组件，使用keep-alive缓存暂时不活动的组件，实现了页面的无刷新跳转。
本实施例通过使用动态切换组件实现灵活和动态的组件加载和切换，通过使用缓存组件将无需切换的组件进行缓存，可以在需要频繁切换和复用组件的场景下，避免不必要的组件销毁和重新渲染，减少了性能开销，并且保证了组件状态和数据的连续性。
进一步地，参照图4，图4为本申请页面管理方法又一示例性实施例的流程示意图。基于上述所示的实施例，在上述步骤S130之后，还可以包括：
S140，通过执行定时查询函数对所述页面的URL进行监听。
具体地，预先设置定时查询函数，在完成当前页面的预加载或内容更新后，通过执行定时查询函数对页面的URL进行监听，从而定期获取最新数据。例如，定时查询函数可以设置为setInterval方法。setInterval方法是 JavaScript 中的一个函数，可用于按照指定的时间间隔重复执行指定的代码或函数。
之后，当再次监听到页面的URL发生变化时，执行步骤：获取预先创建的路由映射表，基于再次监听到的页面的URL和路由映射表，匹配得到与该URL对应的组件，根据匹配的组件进行渲染，将渲染后的组件切换到页面上，以完成该页面的变化内容的加载。
本实施例通过定时执行查询事件，可以定期获取最新的数据，并将数据动态更新到平台的内容中，保持内容的实时性。
此外，本申请实施例还提出一种页面管理装置，所述页面管理装置包括：
获取模块，用于当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；
匹配模块，用于基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；
加载模块，用于根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。
本实施例实现页面管理的原理及实施过程，请参照上述各实施例，在此不再一一赘述。
此外，本申请实施例还提出一种页面管理设备，所述页面管理设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的页面管理程序，所述页面管理程序被所述处理器执行时实现如上所述的页面管理方法的步骤。
由于本页面管理程序被处理器执行时，采用了前述所有实施例的全部技术方案，因此至少具有前述所有实施例的全部技术方案所带来的所有有益效果，在此不再一一赘述。
此外，本申请实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有页面管理程序，所述页面管理程序被处理器执行时实现如上所述的页面管理方法的步骤。
由于本页面管理程序被处理器执行时，采用了前述所有实施例的全部技术方案，因此至少具有前述所有实施例的全部技术方案所带来的所有有益效果，在此不再一一赘述。
相比现有技术，本申请实施例提出的页面管理方法、装置、设备以及存储介质，通过当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。通过在监听到页面内容变化时，根据页面变化内容对应的URL与路由映射表匹配得到组件，将匹配到的组件进行渲染和切换，可以实现在页面内容发生变化时，只需在页面更新变化的组件，而不需重新加载整个页面，从而可以减少服务器请求和页面加载时间，提高用户体验感。
同时，基于本申请方案通过使用Vue框架进行组件化开发，可以更好地管理和复用页面组件，提高了开发效率和代码的可维护性。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，被控终端，或者网络设备等)执行本申请每个实施例的方法。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。
Claims (10)
1.一种页面管理方法，其特征在于，所述页面管理方法包括：
当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；
基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；
根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。
2.根据权利要求1所述的页面管理方法，其特征在于，所述获取预先创建的路由映射表的步骤之前，还包括：
通过路由管理器将所述页面的URL映射到所述组件，并创建得到所述路由映射表。
3.根据权利要求1所述的页面管理方法，其特征在于，所述获取预先创建的路由映射表的步骤之前，还包括：
在用户登录时，获取用于预加载的页面资源的URL；
根据所述页面资源的URL创建文件File对象或类文件Blob对象；
将所述File对象或Blob对象转换为URL对象；
根据所述页面资源的资源类型创建对应的页面元素；
根据所述页面元素添加预加载属性，并将所述预加载属性设置为所述URL对象的URL；
根据所述URL对象的URL将所述页面元素加载到页面中的对应位置，以完成所述页面的预加载。
4.根据权利要求3所述的页面管理方法，其特征在于，所述将所述File对象或Blob对象转换为URL对象的步骤包括：
通过创建指向参数对象方法将所述File对象或Blob对象转换为所述URL对象。
5.根据权利要求3所述的页面管理方法，其特征在于，所述将所述File对象或Blob对象转换为URL对象的步骤之后，还包括：
将所述URL对象与当前浏览窗口中的文档对象document进行绑定。
6.根据权利要求1所述的页面管理方法，其特征在于，所述将渲染后的组件切换到所述页面上的步骤包括：
通过所述Vue中的动态切换组件将所述渲染后的组件切换到页面上；
通过所述Vue中的缓存组件缓存所述页面中无需切换的组件。
7.根据权利要求1所述的页面管理方法，其特征在于，所述根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上的步骤之后，还包括：
通过执行定时查询函数对所述页面的URL进行监听。
8.一种页面管理装置，其特征在于，所述页面管理装置包括：
获取模块，用于当监听到页面的统一资源定位地址URL发生变化时，获取预先创建的路由映射表，其中，所述路由映射表包括URL与组件的映射关系，所述组件是基于用于构建用户界面的架构Vue进行组件化开发得到；
匹配模块，用于基于所述URL和所述路由映射表，匹配得到与所述URL对应的组件；
加载模块，用于根据匹配的组件进行渲染，将渲染后的组件切换到所述页面上，以更新所述页面。
9.一种页面管理设备，其特征在于，所述页面管理设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的页面管理程序，所述页面管理程序被所述处理器执行时实现如权利要求1-7中任一项所述的页面管理方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有页面管理程序，所述页面管理程序被处理器执行时实现如权利要求1-7中任一项所述的页面管理方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311698280.3A CN117390326A (zh) | 2023-12-12 | 2023-12-12 | 页面管理方法、装置、设备以及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311698280.3A CN117390326A (zh) | 2023-12-12 | 2023-12-12 | 页面管理方法、装置、设备以及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117390326A true CN117390326A (zh) | 2024-01-12 |
Family
ID=89465237
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311698280.3A Pending CN117390326A (zh) | 2023-12-12 | 2023-12-12 | 页面管理方法、装置、设备以及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117390326A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117579549A (zh) * | 2024-01-19 | 2024-02-20 | 广州市玄武无线科技股份有限公司 | 一种动态路由多页面的缓存方法和装置 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542404A (zh) * | 2018-10-19 | 2019-03-29 | 东软集团股份有限公司 | 页面组件化的构建方法、装置、存储介质及电子设备 |
| CN110489116A (zh) * | 2018-05-15 | 2019-11-22 | 优酷网络技术（北京）有限公司 | 一种页面的渲染方法、装置及计算机存储介质 |
| CN113536168A (zh) * | 2021-06-03 | 2021-10-22 | 中国联合网络通信集团有限公司 | 组件处理方法及设备 |
-
2023
- 2023-12-12 CN CN202311698280.3A patent/CN117390326A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489116A (zh) * | 2018-05-15 | 2019-11-22 | 优酷网络技术（北京）有限公司 | 一种页面的渲染方法、装置及计算机存储介质 |
| CN109542404A (zh) * | 2018-10-19 | 2019-03-29 | 东软集团股份有限公司 | 页面组件化的构建方法、装置、存储介质及电子设备 |
| CN113536168A (zh) * | 2021-06-03 | 2021-10-22 | 中国联合网络通信集团有限公司 | 组件处理方法及设备 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117579549A (zh) * | 2024-01-19 | 2024-02-20 | 广州市玄武无线科技股份有限公司 | 一种动态路由多页面的缓存方法和装置 |
| CN117579549B (zh) * | 2024-01-19 | 2024-05-31 | 广州市玄武无线科技股份有限公司 | 一种动态路由多页面的缓存方法和装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11252252B2 (en) | Installable web applications | |
| US9846649B1 (en) | Providing files with cacheable portions | |
| US7840647B2 (en) | System, method, and computer program product for executing scripts on mobile devices | |
| US10015226B2 (en) | Methods for making AJAX web applications bookmarkable and crawlable and devices thereof | |
| US7870482B2 (en) | Web browser extension for simplified utilization of web services | |
| CN102799372B (zh) | 一种图片信息的上传方法及上传装置 | |
| US20170302747A1 (en) | Card-type desktop implementation method, apparatus, and system | |
| JP2010521721A (ja) | ウェブデータ使用のプラットフォーム | |
| US20170300459A1 (en) | Card-type desktop implementation method and apparatus | |
| US20040268249A1 (en) | Document transformation | |
| US20170111431A1 (en) | Methods for transforming a server side template into a client side template and devices thereof | |
| CN112256990B (zh) | 一种图像处理方法及装置、计算机可读存储介质 | |
| KR101453743B1 (ko) | 웹 어플리케이션을 위한 사전 캐싱 방법 및 이를 적용한 단말 장치 | |
| CN117390326A (zh) | 页面管理方法、装置、设备以及存储介质 | |
| US10116726B2 (en) | Methods for bundling images and devices thereof | |
| CN104915404A (zh) | 访问失效网址的方法和装置 | |
| CN112905920A (zh) | 一种页面显示的方法和装置 | |
| CN115981650A (zh) | 一种网站搭建方法及装置、电子设备、存储介质 | |
| US20150089559A1 (en) | Method and system for managing display of web-based content on portable communication devices | |
| CN110020320A (zh) | 缓存页面图片的方法和装置 | |
| CN114528510A (zh) | 网页数据处理的方法、装置、电子设备及介质 | |
| CN113961298A (zh) | 一种页面切换方法、装置、设备及介质 | |
| CN113326456B (zh) | 网页资源获取方法、装置、设备、系统及存储介质 | |
| CN117348960A (zh) | 一种网页内容导出方法、装置、设备及介质 | |
| WO2016138394A1 (en) | Methods and systems for cross-device webpage replication |
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 |
Application publication date: 20240112 |