本发明涉及互联网，特别是一种基于单文件页面的前端卡片平台架构方法及其应用该方法的基于单文件页面的前端卡片平台架构终端及计算机可读存储介质。
背景技术：
1、前端卡片平台是一种专注于前端内容展示和交互的平台，它采用卡片化的设计思想，将内容以卡片的形式呈现给用户。这些卡片可以包含文字、图片、视频、图表等丰富的元素，并支持各种交互操作，如点击、滑动、拖拽等。前端卡片平台通常基于前端框架(如react、vue等)进行开发，提供灵活、高效的前端展示解决方案。通过卡片化的设计，前端卡片平台能够清晰地组织和展示信息，使用户能够快速找到所需内容，并与之进行交互。此外，前端卡片平台还支持动态内容更新和个性化展示，可以根据用户的需求和偏好进行智能推荐和定制。因此，前端卡片平台在各类网站、应用、大屏展示等场景中得到了广泛的应用并呈现出蓬勃发展的态势。
2、随着前端卡片平台功能的不断扩展和内容的持续增加，用户能够通过配置不同的卡片页地址访问到日益丰富的项目功能。然而，这种增长也带来了显著的性能挑战。具体来说，当前卡片平台在加载每个卡片页面时，都必须首先加载该卡片页面所属整个项目的所有资源，包括图片、javascript(js)文件、级联样式表(css)等。一旦所有资源加载完成，系统才会根据路由信息跳转到用户指定的页面。
3、这种加载机制对于使用vue、angular等框架构建的大型项目而言尤为明显。即便这些项目已经进行了性能优化，但由于加载机制的限制，当业务大屏配置包含多个卡片页时(例如，配置六个卡片页)，即便这些卡片页均来自同一项目，卡片平台仍需分别加载六次整个项目的资源。这不仅增加了网络带宽的消耗，还导致了显著的延迟和白屏时间，严重影响了用户的体验。
4、在当前的互联网环境下，用户体验已成为决定产品成败的关键因素之一。因此，如何在保持对业务项目无影响、兼容不同技术栈的同时，有效提升卡片平台的页面加载性能，已成为一个亟待解决的问题。这不仅关乎用户体验的提升，也关乎前端技术发展的方向。
技术实现思路
1、本发明的主要目的在于提供了一种基于单文件页面的前端卡片平台架构方法、终端及存储介质，通过基于单文件页面的架构模式快速加载卡片资源实现页面高效加载，有效提升卡片平台的加载速度。
2、为实现上述目的，本发明提供了一种基于单文件页面的前端卡片平台架构方法，其包括以下步骤：
3、步骤a.针对卡片平台的卡片页面，通过设置每个卡片页面的页面结构和业务功能，并将其封装在一个html单文件页面中，得到卡片单页文件；
4、步骤b.对于卡片单页文件的初始化数据，利用web浏览器的本地存储机制进行数据缓存；
5、步骤c.对于卡片单页文件中的第三方资源，使用cdn服务和图片服务器进行托管，并采用外链形式引入；
6、步骤d.将所述卡片单页文件与业务项目进行绑定和发布，或者对所述卡片单页文件通过域名地址部署进行统一管理；
7、步骤e.将发布后的卡片单页文件部署到对应的域名服务器；
8、步骤f.通过输入发布后的卡片单页文件的url地址及其参数，即可完成卡片平台中卡片的配置，使卡片平台能够加载并展示对应的卡片页面。
9、优选的，所述步骤a进一步包括：
10、创建卡片html文件，作为卡片页面的模板，并定义卡片html文件的基本结构和样式；
11、根据卡片页面的业务功能编写或优化对应的业务代码，并将业务代码集成到卡片html文件；
12、将步骤b的缓存数据和步骤c的第三方资源引用或嵌入到卡片html文件中；
13、在卡片html文件中添加iframe标签。
14、优选的，所述步骤b中，使用localstorage对初始化数据进行数据缓存，具体包括：
15、定义数据的查询条件，以及记录一个时间戳来跟踪数据的缓存时间；
16、当页面首次加载或用户进行新的查询时，从服务器请求数据，并将数据、查询条件和时间戳一起保存到localstorage中；
17、当用户再次进行查询时，将当前查询条件与localstorage中的缓存数据进行匹配，并根据时间戳计算当前查询时间与缓存时间的时间戳差值；
18、判断所述时间戳差值是否超过预设阈值；
19、若查询条件一致且时间戳差值没有超过预设阈值，则直接使用localstorage数据；
20、若查询条件与预设的查询条件不一致，或者时间戳差值超过了预设阈值，则从服务器重新请求新数据，并更新localstorage中的缓存数据。
21、优选的，所述步骤c中，所述第三方资源包括js、css文件资源和图片资源，采用外链形式引入具体包括：
22、对于js、css文件资源，将文件路径替换为cdn加速后的url；
23、对于图片资源，将图片标签的src属性替换为cdn或图片托管服务器上的url；
24、其中，所述第三方资源选取第三方库中的核心库或核心模块。
25、优选的，所述步骤d进一步包括：
26、在业务项目的根目录下创建webpack配置文件，用于对卡片单页文件执行webpack打包操作；
27、将webpack打包后文件加入到业务项目的dist静态文件目录；
28、通过部署工具或脚本将dist静态文件目录中的文件上传到服务器或静态文件托管服务。
29、优选的，所述步骤f进一步包括：
30、获取用户输入的卡片单页文件的url地址，并通过解析该url地址识别出卡片单页文件的实际位置；
31、提取url地址中包含的参数，并通过解析该参数以及根据参数值定制卡片的显示方式和显示内容；
32、使用解析后的url地址发送http请求到服务器，以获取卡片单页文件的内容；
33、解析服务器的响应内容，并将其插入到卡片平台的dom模型中。
34、优选的，还包括在卡片平台中插入新卡片，具体包括：
35、执行步骤a至步骤c进行新卡片的创建，得到新的卡片单页文件；
36、步骤d1.识别卡片平台中已有的业务项目，并确定新的卡片单页文件待集成的业务项目，将新的卡片单页文件与待集成的业务项目进行绑定和发布，并更新待集成的业务项目的配置文件；
37、步骤e1.将新的卡片单页文件部署到对应的域名服务器，并更新卡片平台的路由配置；
38、步骤f1.通过输入新的卡片单页文件的url地址及其参数，加载并展示对应的卡片页面，并对卡片平台的布局进行适应性调整。
39、优选的，还包括在卡片平台中进行卡片替换，具体包括：
40、执行步骤a至步骤c进行待替换的新卡片的创建，得到新的卡片单页文件；
41、步骤d2.确认待替换的原卡片，并将原卡片单页文件与卡片平台中的业务项目解除绑定，将新的卡片单页文件与所述业务项目进行绑定和发布，并更新业务项目的配置文件；
42、步骤e2.将新的卡片单页文件部署到对应的域名服务器，并更新卡片平台的路由配置；
43、步骤f2.通过输入新的卡片单页文件的url地址及其参数，加载并展示对应的卡片页面，并将原卡片中的缓存数据迁移到新卡片中或者进行清理。
44、此外，为实现上述目的，本发明还提供一种终端，所述终端包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于单文件页面的前端卡片平台架构程序，所述基于单文件页面的前端卡片平台架构程序被所述处理器执行时实现如上文所述的基于单文件页面的前端卡片平台架构方法的步骤。
45、此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有基于单文件页面的前端卡片平台架构程序，所述基于单文件页面的前端卡片平台架构程序被处理器执行时实现如上文所述的基于单文件页面的前端卡片平台架构方法的步骤。
46、本发明的有益效果是：
47、(1)本发明采用基于html单文件的卡片页面，通过将每个卡片页面的页面结构和业务功能封装在单一的html文件中，能够兼容不同框架的项目技术栈，支持独立发布不影响所在的项目，并且不会随项目复杂度变大而导致卡片平台页面性能变慢，还能有效提升卡片平台的加载速度；
48、(2)本发明基于单文件页面开发，将独立业务项目的卡片页面独立开发成单文件页面，每个单文件页面都包含完整的业务逻辑和样式，确保功能完备且风格统一，这些单文件页面可通过域名加路径的方式正常访问，为后续的卡片平台集成提供基础；
49、(3)本发明利用web浏览器的本地存储机制对卡片单页文件的初始化数据进行缓存，对卡片单页文件中引用的第三方资源(如图片、字体、脚本等)，使用cdn(内容分发网络)服务和图片服务器进行托管，并通过外链形式引入，减轻了服务器的数据传输压力，确保这些资源的高效、稳定加载，并提高了整体系统的可扩展性；
50、(4)本发明通过将卡片单页文件与业务项目进行绑定和发布，或者通过域名地址进行统一管理，可以实现卡片的灵活配置和复用，并使得不同的业务项目可以共享同一套卡片模板，提高了开发效率；
51、(5)本发明在卡片html文件中添加iframe标签，可以将复杂的功能或页面作为独立的单元嵌入到卡片中，而不需要对整个卡片页面进行重构，增加了卡片的灵活性和可扩展性；
52、(6)本发明通过设置时间戳来跟踪数据的缓存时间，以及预设的阈值，开发人员可以灵活地控制数据的缓存有效期；并且，当大量用户访问相同数据时，由于数据在本地缓存中仍然有效(即时间戳差值未超过预设阈值)时，可以直接从localstorage中读取数据，而无需再次从服务器请求数据，因此服务器的请求量将大大减少，从而减轻了服务器的负载；
53、(7)本发明在业务项目的根目录下创建webpack配置文件，可以方便地定义打包规则、插件配置等，实现自动化构建；并且，通过webpack打包，可以将多个功能组件打包成一个独立的卡片单页文件，不仅提高资源的安全性，而且便于复用和管理，使得代码更加易于扩展和维护，当需要添加新功能或修改现有功能时，只需要修改相应的模块或组件即可；
54、(8)本发明的方案能够在卡片平台中快速创建和插入新卡片，无需对整个平台进行大规模修改，增加了平台的灵活性和可扩展性；并通过更新业务项目的配置文件和卡片平台的路由配置，确保新卡片能够无缝集成到现有系统中，支持了新功能的快速上线，有利于业务发展和创新；
55、(9)本发明通过将原卡片单页文件与卡片平台中的业务项目解除绑定，并将新的卡片单页文件与业务项目进行绑定和发布，确保了业务逻辑的连续性；另外，将原卡片中的缓存数据迁移到新卡片中，确保了数据的连续性和可用性，对于保持用户数据的一致性和完整性具有重要意义；
56、(10)本发明是基于前端微服务架构模式，在整个前端卡片平台中，卡片平台是一个独立的服务，平台中配置的卡片页面也都是一个个单独的服务，每个卡片页面地址唯一，支持独立运行，与其他卡片页面互不干扰。
1.一种基于单文件页面的前端卡片平台架构方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的一种基于单文件页面的前端卡片平台架构方法，其特征在于，所述步骤a进一步包括：
3.根据权利要求1所述的一种基于单文件页面的前端卡片平台架构方法，其特征在于，所述步骤b中，使用localstorage对初始化数据进行数据缓存，具体包括：
4.根据权利要求1所述的一种基于单文件页面的前端卡片平台架构方法，其特征在于，所述步骤c中，所述第三方资源包括js、css文件资源和图片资源，采用外链形式引入具体包括：
5.根据权利要求1所述的一种基于单文件页面的前端卡片平台架构方法，其特征在于，所述步骤d进一步包括：
6.根据权利要求1所述的一种基于单文件页面的前端卡片平台架构方法，其特征在于，所述步骤f进一步包括：
7.根据权利要求1至6任一项所述的一种基于单文件页面的前端卡片平台架构方法，其特征在于，还包括在卡片平台中插入新卡片，具体包括：
8.根据权利要求1至6任一项所述的一种基于单文件页面的前端卡片平台架构方法，其特征在于，还包括在卡片平台中进行卡片替换，具体包括：
9.一种终端，其特征在于，所述终端包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于单文件页面的前端卡片平台架构程序，所述基于单文件页面的前端卡片平台架构程序被所述处理器执行时实现如权利要求1至8任一项所述的基于单文件页面的前端卡片平台架构方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有基于单文件页面的前端卡片平台架构程序，所述基于单文件页面的前端卡片平台架构程序被处理器执行时实现如权利要求1至8任一项所述的基于单文件页面的前端卡片平台架构方法的步骤。
