一种基于iframe-message微前端的跨平台试题录入方法与流程

1.本发明涉及数据监管领域，尤其涉及一种基于iframe-message微前端的跨平台试题录入方法。

背景技术：

2.随着教培行业的不断发展，线上试题库的建设显得尤为重要。而支持试题库建设的题库后台管理系统、paper试卷编辑系统、试卷库收集系统等多个web端项目在多个环节都涉及试题录入技术。
3.如何使用一种简单的方式，将试题录入技术延伸为一个独立的服务，独立开发、独立运行，并且可以供各个业务方系统直接接入，复用整个服务，提高开发效率。
4.现有技术中的开发方式中，各个业务方系统各自维护一套试题录入组件，每一套代码在业务处理、逻辑处理上基本一致，只是有细微的差异。举个例子，比如各个业务方在提交的时候，都需要判断是新生成一道试题，还是对试题进行编辑，还是基于当前试题改编出一道新的试题。这种相似的业务逻辑的处理，相似的ui，对于开发者来说，无疑是一个重复开发的过程。

技术实现要素：

5.鉴于上述问题，提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种基于iframe-message微前端的跨平台试题录入方法。
6.根据本发明的一个方面，提供了一种基于iframe-message微前端的跨平台试题录入方法包括：
7.配置定制化参数；
8.请求server端获取url；
9.iframe根据url重定向到录题服务；
10.进行试题录入；
11.保存试题；
12.判断所述试题是否通过校验；如果是，请求sever端保存，试题入库；
13.broadcast向业务方输出试题id；
14.业务方接收试题id关闭frame。
15.可选的，所述配置定制化参数具体包括：两种模式，第一种模式为通过broadcast函数的共享数据data，通过不同的参数来定制试题录入服务的各个模块的逻辑；第二种模式为通过server端不同的业务方http接口返回的不同的json配置文件来实现。
16.可选的，所述试题录入的内容包括：年部学科、试题主体数据、难度系数、标签标注、试题来源。
17.可选的，所述试题主体数据在录入时，均为富文本编辑器，所述富文本编辑器基于ckeditor集成自研拼音插件、公式编辑器、竖式编辑器、ggb编辑器，增强图片、音频和视频
上传功能。
18.可选的，所述试题录入的方式包括：手动录入、粘贴、上传图片、对图片进行ocr识别；根据映射规则对题干、选项、答案、解析的主体内容进行自动填充。
19.可选的，所述录入方法还包括：
20.在iframe和容器标签之间建立一个connection连接中心，connection是iframe-message对外输出的一个构造函数，基于该构造函数初始化一个connection实例，并将该实例存入连接中心的handshake变量、便于后期获取。
21.可选的，所述录入方法还包括：
22.基于事件发布订阅机制，connection实例绑定了两个核心的事件处理函数：broadcast函数和on函数，用于解决业务方与服务双方通信、状态数据共享的问题。
23.可选的，所述录入方法还包括：
24.iframe内外dom割裂的问题，主应用在connection中心，向子应用，共享一个slot插槽，在iframe内部拦截document对象，统一将dom指向slot插槽，弹窗就被约束在slot内部，覆盖到整个浏览器窗口居中。
25.本发明提供的一种基于iframe-message微前端的跨平台试题录入方法包括：配置定制化参数；请求server端获取url；iframe根据url重定向到录题服务；进行试题录入；保存试题；判断所述试题是否通过校验；如果是，请求sever端保存，试题入库；broadcast向业务方输出试题id；业务方接收试题id关闭frame。解决了iframe内外跨域通信、状态数据难以共享的问题，slot插槽方法突破了dom割裂严重的限制。
26.上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
27.为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
28.图1为本发明实施例提供的一种基于iframe-message微前端的跨平台试题录入方法的流程图。
具体实施方式
29.下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
30.本发明的说明书实施例和权利要求书及附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元。
31.下面结合附图和实施例，对本发明的技术方案做进一步的详细描述。
32.如图1所示，本发明基于iframe的硬沙箱隔离特性，提出一种iframe-message的微前端跨域通信、状态共享方法，将试题录入抽象为一个独立的服务。
33.由于iframe-message继承了iframe的硬隔离特性，内部子应用的技术选型是相互隔离的，因此本发明对外部主应用技术栈不做要求，内部子应用可以选用前端的优秀框架vue.js。与其它大型框架不同的是，vue.js被设计为可以自底向上逐层应用，核心库只关注视图层，方便与第三方库或者既有项目对接。
34.本发明所公开的试题录入服务，基于vue3.0进行构建开发、基于typescript进行强类型校验，作为子应用嵌入各个业务方、基于iframe-message的方法与各个业务方通信，状态共享。
35.业务方与服务如何跨域通信、共享状态数据、突破dom割裂。
36.本发明基于iframe的硬沙箱隔离特性，提出一种iframe-message的微前端跨域通信、状态共享方法，具体包括：
37.业务方作为主应用，首先需要在html中构建一个容器标签和一个iframe标签，容器标签包裹iframe标签，在iframe中嵌入子应用。
38.在iframe和容器标签之间建立一个connection连接中心，connection是iframe-message对外输出的一个构造函数，基于该构造函数初始化一个connection实例，并将该实例存入连接中心的handshake变量、便于后期获取。
39.在初始化connection实例时，需要获取包裹元素example_content作为container，根据配置的id和样式参数，生成一个iframe元素，并将这个iframe元素挂载到container下。
40.url参数用于设置iframe的src属性，旨在解决跨域问题：在主应用中加载子应用时，调起server端的http接口，返回iframe嵌套的子应用的目标域名，在该实例的url参数配置上目标域名url，通过重定向到目标域名实现跨域传输。
41.基于事件发布订阅机制，connection实例绑定了两个核心的事件处理函数：broadcast函数和on函数，旨在解决业务方与服务双方通信、状态数据共享的问题。
42.broadcast函数用于发布一个自定义的事件，第一个参数为自定义事件名称。第二个参数为事件传递参数。主应用在加载服务时，便可通过broadcast函数向子应用共享一次存储的数据，需要标明来源业务方、操作类型、共享数据data。下图中，这样向connection连接中心就存储了一个事件名为event_name的事件，业务方来源为tiku。
43.而on函数用于订阅自定义事件：子应用在初始化时，需要通过connection实例的handshake变量，注册监听broadcast函数发布的事件，收集主应用共享的数据，并做临时存储以供后续使用。
44.以上描述的broadcast函数和on函数，实现了从主应用到子应用的一次数据的共享，数据传递到子应用存储，在子应用内部编辑完成，可以再向主应用发起broadcast函数传递刚刚编辑的数据，在主应用中通过on函数去监听，这样就形成了一个从主应用-》子应用-》主应用-》子应用的循环数据流，这样实现数据的共享。
45.而iframe内外dom割裂的问题，需要主应用在connection中心，向子应用，共享一个slot插槽，在iframe内部拦截document对象，统一将dom指向slot插槽，弹窗就被约束在slot内部，覆盖到整个浏览器窗口居中。
46.不同业务方的定制化配置
47.定制化配置指的是不同业务方需求上的差异化。例如，试题题型可通过logicidlist这样一个序列去配置有哪些题型，富文本编辑器工具不同业务方不同的校验规则诸如此类的需求。
48.定制化配置主要是通过两种模式来实现：一是通过broadcast函数的共享数据data，通过不同的参数来定制试题录入服务的各个模块的逻辑。二是通过server端不同的业务方http接口返回的不同的json配置文件来实现。
49.试题录入服务逻辑抽离，试题录入服务支持试题创建与修改、同时也支持改编试题库中已有的试题并重新生成一道新的试题。用户还能够对录入的试题进行简单的标注，增加知识标签、试题难度以及试题来源信息以满足用户对试题附属信息的一些需求。
50.试题录入内容包括年部学科、试题主体数据(题干、选项、答案、解析)、难度系数、标签标注、试题来源这几个模块。试题主体数据在录入时，均为富文本编辑器，富文本编辑器基于ckeditor集成自研拼音插件、公式编辑器、竖式编辑器、ggb编辑器，增强图片、音频、视频上传功能。
51.试题题型包括单选、多选、填空、解答、判断、复合、配对、跟读8种题型，多种题型基于javascript的面向对象class类继承，输出试题基础模型数据。
52.试题录入方式不仅支持手动录入，同时也支持粘贴、上传图片，对图片进行ocr识别(光学字符识别optical character recognition，ocr)，识别结果为图片所述试题对应的json文本数据，根据映射规则对题干、选项、答案、解析主体内容自动填充。
53.有益效果：本发明基于浏览器原生支持的iframe的硬沙箱隔离方案，提出一种iframe-message微前端的复用组件方案，connection连接中心机制，解决了iframe内外跨域通信、状态数据难以共享的问题，slot插槽方法突破了dom割裂严重的限制。
54.本发明一种将试题录入技术抽象为独立服务，对试题内容、主体数据、试题题型、试题录入方式、试题录入流程等逻辑的抽离，以及不同业务方定制化配置，做了详细的描述，实现跨项目复用。
55.以上的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

技术特征：

1.一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述试题录入方法包括：配置定制化参数；请求server端获取url；iframe根据url重定向到录题服务；进行试题录入；保存试题；判断所述试题是否通过校验；如果是，请求sever端保存，试题入库；broadcast向业务方输出试题id；业务方接收试题id关闭frame。2.根据权利要求1所述的一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述配置定制化参数具体包括：两种模式，第一种模式为通过broadcast函数的共享数据data，通过不同的参数来定制试题录入服务的各个模块的逻辑；第二种模式为通过server端不同的业务方http接口返回的不同的json配置文件来实现。3.根据权利要求1所述的一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述试题录入的内容包括：年部学科、试题主体数据、难度系数、标签标注、试题来源。4.根据权利要求3所述的一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述试题主体数据在录入时，均为富文本编辑器，所述富文本编辑器基于ckeditor集成自研拼音插件、公式编辑器、竖式编辑器、ggb编辑器，增强图片、音频和视频上传功能。5.根据权利要求1所述的一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述试题录入的方式包括：手动录入、粘贴、上传图片、对图片进行ocr识别；根据映射规则对题干、选项、答案、解析的主体内容进行自动填充。6.根据权利要求1所述的一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述录入方法还包括：在iframe和容器标签之间建立一个connection连接中心，connection是iframe-message对外输出的一个构造函数，基于该构造函数初始化一个connection实例，并将该实例存入连接中心的handshake变量、便于后期获取。7.根据权利要求1所述的一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述录入方法还包括：基于事件发布订阅机制，connection实例绑定了两个核心的事件处理函数：broadcast函数和on函数，用于解决业务方与服务双方通信、状态数据共享的问题。8.根据权利要求1所述的一种基于iframe-message微前端的跨平台试题录入方法，其特征在于，所述录入方法还包括：iframe内外dom割裂的问题，主应用在connection中心，向子应用，共享一个slot插槽，在iframe内部拦截document对象，统一将dom指向slot插槽，弹窗就被约束在slot内部，覆盖到整个浏览器窗口居中。

技术总结

本发明提供的一种基于iframe-message微前端的跨平台试题录入方法包括：配置定制化参数；请求server端获取url；Iframe根据url重定向到录题服务；进行试题录入；保存试题；判断所述试题是否通过校验；如果是，请求sever端保存，试题入库；Broadcast向业务方输出试题id；业务方接收试题id关闭frame。解决了iframe内外跨域通信、状态数据难以共享的问题，slot插槽方法突破了DOM割裂严重的限制。槽方法突破了DOM割裂严重的限制。槽方法突破了DOM割裂严重的限制。