统一框架实现方法、系统、电子设备及存储介质与流程

文档序号:25040047发布日期:2021-05-14 14:26阅读:48来源:国知局
1.本申请涉及计算机应用领域,特别涉及数据处理领域的统一框架实现方法、系统、电子设备及存储介质。
背景技术
::2.目前很多的项目前端开发(如页面开发)都是基于react框架实现的,并且由于antdesign(antd)组件库具有视觉简约、交互友好等特点,被广泛应用于react框架中。3.要想应用antd组件库,必须要有react技术基础。而react框架的技术门槛较高,上手相对困难,需要对react技术进行充分了解,从而增加了开发难度,降低了开发效率等。技术实现要素:4.有鉴于此,本申请提供了统一框架实现方法、系统、电子设备及存储介质。5.一种统一框架实现方法,包括:6.获取组件配置信息;7.将所述组件配置信息中的各组件对应的json对象解析为react语法的组件;8.基于解析得到的为组件库中的组件进行页面渲染,所述组件库中至少包括:按预定方式进行改造后的antd组件。9.根据本申请一优选实施例,所述组件库中进一步包括以下之一或全部:从业务通用组件中抽离出的react组件、第三方库。10.根据本申请一优选实施例,该方法进一步包括:针对所述组件配置信息中的任一组件,对所述组件进行合理性检查,若检查未通过,则按照预定方式进行异常处理。11.根据本申请一优选实施例,所述进行合理性检查包括:确定所述组件的格式是否符合要求;确定所述组件是否为所述组件库中的组件;12.所述检查未通过包括:所述组件的格式不符合要求,和/或,所述组件为所述组件库之外的组件。13.根据本申请一优选实施例,该方法进一步包括:针对所述组件配置信息中的任一组件,对所述组件进行权限检查,若检查未通过,则不对所述组件进行展示。14.根据本申请一优选实施例,该方法进一步包括:获取全局配置信息,根据所述全局配置信息进行初始化处理。15.根据本申请一优选实施例,该方法进一步包括:为组件之间的交互提供交互应用程序接口,并提供前后端交互方法。16.根据本申请一优选实施例,该方法进一步包括:将前端开发所用的预定工具库引入所述统一框架。17.一种统一框架实现系统,包括:获取单元以及解析单元;18.所述获取单元,用于获取组件配置信息;19.所述解析单元,用于将所述组件配置信息中的各组件对应的json对象解析为react语法的组件,基于解析得到的为组件库中的组件进行页面渲染,所述组件库中至少包括:按预定方式进行改造后的antd组件。20.根据本申请一优选实施例,所述组件库中进一步包括以下之一或全部:从业务通用组件中抽离出的react组件、第三方库。21.根据本申请一优选实施例,所述解析单元进一步用于,针对所述组件配置信息中的任一组件,对所述组件进行合理性检查,若检查未通过,则按照预定方式进行异常处理。22.根据本申请一优选实施例,所述解析单元确定所述组件的格式是否符合要求,并确定所述组件是否为所述组件库中的组件,若所述组件的格式不符合要求,和/或,所述组件为所述组件库之外的组件,则确定检查未通过。23.根据本申请一优选实施例,所述解析单元进一步用于,针对所述组件配置信息中的任一组件,对所述组件进行权限检查,若检查未通过,则不对所述组件进行展示。24.根据本申请一优选实施例,所述获取单元进一步用于,获取全局配置信息,根据所述全局配置信息进行初始化处理。25.根据本申请一优选实施例,所述系统中进一步包括:应用单元,用于为组件之间的交互提供交互应用程序接口,并提供前后端交互方法。26.根据本申请一优选实施例,所述应用单元进一步用于,将前端开发所用的预定工具库引入所述统一框架。27.一种电子设备,包括:28.至少一个处理器;以及29.与所述至少一个处理器通信连接的存储器;其中,30.所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如以上所述的方法。31.一种存储有计算机指令的非瞬时计算机可读存储介质,所述计算机指令用于使所述计算机执行如以上所述的方法。32.上述申请中的一个实施例具有如下优点或有益效果:可通过json配置实现页面开发,无需对react技术进行充分了解,从而降低了技术门槛和上手难度,即降低了开发难度,进而提升了开发效率等;除改造后的antd组件外,还可将从业务通用组件中抽离出的react组件加入到组件库中,从而使得框架能够覆盖更多的业务场景,减少了相似场景的重复研发量,另外,还可将第三方库加入到组件库中,从而简化了这些第三方库的使用方式等;可对组件配置信息中的各组件进行合理性检查和/或权限检查,从而可及时发现问题组件,进而可确保后续处理的顺利进行等;可为组件之间的交互提供应用程序接口,并可提供前后端交互方法,从而可使得组件之间的交互更为灵活,并方便了前后端交互等;此外还可引入前端开发所用的预定工具库,从而在需要时无需再额外引用这些库,进而提升了框架的易用性等;上述可选方式所具有的其它效果将在下文中结合具体实施例加以说明。附图说明33.附图用于更好地理解本方案,不构成对本申请的限定。其中:34.图1为本申请所述uf框架实现方法实施例的流程图;35.图2为本申请所述uf框架的整体实现方式示意图;36.图3为本申请所述uf框架实现系统300实施例的组成结构示意图;37.图4为根据本申请实施例所述方法的电子设备的框图。具体实施方式38.以下结合附图对本申请的示范性实施例做出说明,其中包括本申请实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本申请的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。39.另外,应理解,本文中术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,a和/或b,可以表示:单独存在a,同时存在a和b,单独存在b这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。40.图1为本申请所述统一框架(uf,unifiedframework)实现方法实施例的流程图。如图1所示,包括以下具体实现方式。41.在101中,获取组件配置信息。42.在102中,将组件配置信息中的各组件对应的json对象解析为react语法的组件。43.在103中,基于解析得到的为组件库中的组件进行页面渲染,所述组件库中至少包括:按预定方式进行改造后的antd组件。44.针对现有技术中存在的问题,本申请中提出了一种uf框架,作为uf框架的重要基础,组件库中具体包括哪些组件可根据实际需要而定,通常至少包括按预定方式进行改造后的antd组件,另外还可进一步包括以下之一或全部:从业务通用组件中抽离出的react组件、第三方库。45.其中,antd组件为核心组件,现有的antd组件库中有着非常丰富的antd组件,且视觉简约、交互友好,可将antd组件根据业务场景需求进行一定的改造,进而可将改造后的antd组件加入到组件库中。46.比如,有些antd组件的使用并不简单,如输入型组件,每一个输入型组件都需要通过写onchange、onselect这样的方法不断去获取组件值,然后再将值更新,并需要理解react虚拟dom节点与真实dom节点关系等,而本实施例中可将这些输入型组件改造成受控组件,但是对用户透明,用户不需要关心是否受控,在需要取值时调用getvalue()方法等即可。47.从业务通用组件中抽离出哪些react组件可根据实际需要而定。按照现有方式,对于antd组件库中不包含的组件,如日常业务中常用的组件需要自行开发,而不同业务项目中所用的组件均独立开发,这样就会造成一些业务通用组件在不同项目中重复开发,从而增加了开发量等。而本实施例中可从业务通用组件中抽离出react组件,加入到组件库中,从而可使得uf框架能够覆盖更多的业务场景,减少了相似场景的重复研发量等。抽离出的react组件可包括具有增删改等扩展功能的table组件、数据导出组件、路由(router)组件等。48.将哪些第三方库加入到组件库中也可根据实际需要而定,如可包括echatrs、ueditor等,从而可简化这些第三方库的使用方式,其使用可如其它组件一样简单。另外,为了避免uf框架趋于臃肿,第三方库可采用惰性加载的机制,即使用时才实时加载,以减少不必要的开销。49.以上三类组件均为uf框架底层组件,共同构成了uf框架的组件库。50.基于本实施例所述uf框架,可通过配置直接生成页面。具体地,在前端代码中引入组件库后可进行一些全局配置,如模块地址入口、ajax通用配置、权限点信息等,可根据全局配置信息进行初始化处理,具体实现为现有技术。在实际应用中,某些组件可能需要配置权限。比如,组件a对应于一个按钮,功能为删除数据,那么则需要考虑权限配置,不是所有人都有权限。再比如,组件b对应于一个简单的筛选框,那么该组件则不需要配置权限。可根据实际需要配置权限点信息,如组件a配置为具有权限,相应地,后续可利用对应的按钮执行删除数据处理。51.还可获取组件配置信息,组件配置信息中包含哪些组件可根据实际需要而定。另外,组件配置信息中可包含各组件对应的json对象,所有的组件均可通过json对象来进行描述,json为js对象标记(javascriptobjectnotation)的缩写,json对象中可按照uf框架规定的格式,描述了组件的名称、属性、事件以及子元素等。52.可利用解析器将组件配置信息进行转化,即可利用解析器对组件配置信息中的各组件对应的json对象进行解析,解析为react语法的组件,即<component…pros>这种格式,以便基于解析得到的为组件库中的组件进行页面渲染,具体实现为现有技术。53.相应地,针对组件配置信息中的任一组件,还可对该组件进行合理性检查,若检查未通过,可按照预定方式进行异常处理。其中,进行合理性检查可包括:确定组件的格式是否符合要求;确定组件是否为组件库中的组件。若组件的格式不符合要求,和/或,组件为组件库之外的组件,则可确定检查未通过。54.如前所述,json对象中按照uf框架规定的格式,描述了组件的名称、属性、事件以及子元素等,div是有效的组件名称,dvv则不是有效的组件名称,那么如果组件的名称为dvv形式,则可认为对组件的检查未通过。若检查未通过,后续如何处理可根据实际需要而定。比如,若某一组件检查未通过,可能会直接产生阻断,从而导致页面不能正常渲染,那么可进行页面报错。55.另外,针对组件配置信息中的任一组件,还可对该组件进行权限检查,若检查未通过,可不对该组件进行展示,并可进行提示报错等。比如,组件a对应于一个按钮,功能为删除数据,若组件a未配置相应的权限,则可不对组件a进行展示。56.通过对组件进行合理性检查和/或权限检查,可及时发现问题组件,从而可确保后续处理的顺利进行等。57.在上述基础上,本实施例所述uf框架中进一步提供了以下内容:为组件之间的交互提供交互应用程序接口(api,applicationprogramminginterface),并提供前后端交互方法。从而可使得组件之间的交互更为灵活,并方便了前后端交互等。58.组件之间的交互api可包括uf.init()、uf(‘name’).get()、uf(‘name’).set()等,底层可使用react的生命周期函数。前后端交互方法可包括uf.ajax()方法等,底层可依赖于reqwest.js等。59.此外,本实施例所述uf框架中还可引入前端开发所用的预定工具库,从而在需要时无需再额外引用这些库,进而提升了uf框架的易用性等。所述预定工具库可包括用于ajax请求的库reqwest.js、时间格式化工具库moment.js,js实用库undersource.js等。60.通过上述介绍可以看出,采用本实施例所述方案,可通过json配置实现页面开发,无需对react技术进行充分了解等,从而降低了技术门槛和上手难度,即降低了开发难度,进而提升了开发效率等。61.需要说明的是,对于前述的方法实施例,为了简单描述,将其表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其它顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。62.综合上述介绍,图2为本申请所述uf框架的整体实现方式示意图。如图2所示,可获取用户所作的全局配置信息和组件配置信息,解析器可对组件配置信息进行解析,即将组件配置信息中的各组件对应的json对象解析为react语法的组件,以便基于解析得到的为组件库中的组件进行页面渲染等。所述组件库中可包括:按预定方式进行改造后的antd组件(如图2中所示的第一类组件)、从业务通用组件中抽离出的react组件(如图2中所示的第二类组件)以及第三方库(如图2中所示的第三类组件)。针对组件配置信息中的任一组件,解析器还可对其进行合理性检查,若检查未通过,可按照预定方式进行异常处理,如确定组件的格式是否符合要求,并确定组件是否为组件库中的组件等,若组件的格式不符合要求,和/或,组件为组件库之外的组件,则可确定检查未通过。针对组件配置信息中的任一组件,解析器还可对其进行权限检查,若检查未通过,可不对该组件进行展示。此外,还可为组件之间的交互提供交互api,并可提供前后端交互方法。另外还可将前端开发所用的预定工具库引入uf框架等。具体实现请参照前述相关说明,不再赘述。63.以上是关于方法实施例的介绍,以下通过系统实施例,对本申请所述方案进行进一步说明。64.图3为本申请所述uf框架实现系统300实施例的组成结构示意图。如图3所示,包括:获取单元301以及解析单元302。65.获取单元301,用于获取组件配置信息。66.解析单元302,用于将组件配置信息中的各组件对应的json对象解析为react语法的组件,基于解析得到的为组件库中的组件进行页面渲染,组件库中至少包括:按预定方式进行改造后的antd组件。67.组件库中具体包括哪些组件可根据实际需要而定,通常至少包括按预定方式进行改造后的antd组件,另外还可进一步包括以下之一或全部:从业务通用组件中抽离出的react组件、第三方库。68.其中,antd组件为核心组件,现有的antd组件库中有着非常丰富的antd组件,且视觉简约、交互友好,可将antd组件根据业务场景需求进行一定的改造,进而可将改造后的antd组件加入到组件库中。从业务通用组件中抽离出哪些react组件可根据实际需要而定,如可包括具有增删改等扩展功能的table组件、数据导出组件、router组件等。将哪些第三方库加入到组件库中也可根据实际需要而定,如可包括echatrs、ueditor等。69.获取单元301可获取全局配置信息,根据全局配置信息进行初始化处理,并可获取组件配置信息,组件配置信息中包含哪些组件也可根据实际需要而定。另外,组件配置信息中可包含各组件对应的json对象,其中可按照uf框架规定的格式,描述了组件的名称、属性、事件以及子元素等。70.解析单元302可将组件配置信息进行转化,即可对组件配置信息中的各组件对应的json对象进行解析,解析为react语法的组件,即<component…pros>这种格式,以便基于解析得到的为组件库中的组件进行页面渲染等。71.针对组件配置信息中的任一组件,解析单元302还可对其进行合理性检查,若检查未通过,可按照预定方式进行异常处理。如解析单元302可确定组件的格式是否符合要求,并确定组件是否为组件库中的组件,若组件的格式不符合要求,和/或,组件为组件库之外的组件,则可确定检查未通过。72.另外,针对组件配置信息中的任一组件,解析单元302还可对其进行权限检查,若检查未通过,可不对组件进行展示。73.图3所示系统中还可进一步包括应用单元303,用于为组件之间的交互提供交互api,并提供前后端交互方法,此外,还可将前端开发所用的预定工具库引入uf框架等。74.图3所示系统实施例的具体工作流程请参照前述方法实施例中的相关说明,不再赘述。75.总之,采用本申请方法和系统实施例所述方案:可通过json配置实现页面开发,无需对react技术进行充分了解,uf框架屏蔽了基层的技术框架,更加关注原生js实现业务逻辑,从而降低了技术门槛和上手难度,即降低了开发难度,进而提升了开发效率等;除改造后的antd组件外,还可将从业务通用组件中抽离出的react组件加入到组件库中,从而使得框架能够覆盖更多的业务场景,减少了相似场景的重复研发量,另外,还可将第三方库加入到组件库中,从而简化了这些第三方库的使用方式;可对组件配置信息中的各组件进行合理性检查和/或权限检查,从而可及时发现问题组件,进而可确保后续处理的顺利进行等;可为组件之间的交互提供应用程序接口,并可提供前后端交互方法,从而可使得组件之间的交互更为灵活,并方便了前后端交互等;此外还可引入前端开发所用的预定工具库,从而在需要时无需再额外引用这些库,进而提升了框架的易用性等。76.根据本申请的实施例,本申请还提供了一种电子设备和一种可读存储介质。77.如图4所示,是根据本申请实施例所述方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本申请的实现。78.如图4所示,该电子设备包括:一个或多个处理器y01、存储器y02,以及用于连接各部件的接口,包括高速接口和低速接口。各个部件利用不同的总线互相连接,并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理,包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如,耦合至接口的显示设备)上显示图形用户界面的图形信息的指令。在其它实施方式中,若需要,可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样,可以连接多个电子设备,各个设备提供部分必要的操作(例如,作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图4中以一个处理器y01为例。79.存储器y02即为本申请所提供的非瞬时计算机可读存储介质。其中,所述存储器存储有可由至少一个处理器执行的指令,以使所述至少一个处理器执行本申请所提供的方法。本申请的非瞬时计算机可读存储介质存储计算机指令,该计算机指令用于使计算机执行本申请所提供的方法。80.存储器y02作为一种非瞬时计算机可读存储介质,可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块,如本申请实施例中的方法对应的程序指令/模块(例如,附图x所示的xx模块x01、xx模块x02和xx模块x03)。处理器y01通过运行存储在存储器y02中的非瞬时软件程序、指令以及模块,从而执行服务器的各种功能应用以及数据处理,即实现上述方法实施例中的方法。81.存储器y02可以包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需要的应用程序;存储数据区可存储根据电子设备的使用所创建的数据等。此外,存储器y02可以包括高速随机存取存储器,还可以包括非瞬时存储器,例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中,存储器y02可选包括相对于处理器y01远程设置的存储器,这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。82.电子设备还可以包括:输入装置y03和输出装置y04。处理器y01、存储器y02、输入装置y03和输出装置y04可以通过总线或者其他方式连接,图4中以通过总线连接为例。83.输入装置y03可接收输入的数字或字符信息,以及产生与电子设备的用户设置以及功能控制有关的键信号输入,例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置y04可以包括显示设备、辅助照明装置和触觉反馈装置(例如,振动电机)等。该显示设备可以包括但不限于,液晶显示器、发光二极管显示器和等离子体显示器。在一些实施方式中,显示设备可以是触摸屏。84.此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用集成电路、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。85.这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令,并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的,术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如,磁盘、光盘、存储器、可编程逻辑装置),包括,接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。86.为了提供与用户的交互,可以在计算机上实施此处描述的系统和技术,该计算机具有:用于向用户显示信息的显示装置(例如,阴极射线管或者液晶显示器监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。87.可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网、广域网和互联网。88.计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。89.应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本申请公开的技术方案所期望的结果,本文在此不进行限制。90.上述具体实施方式,并不构成对本申请保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等,均应包含在本申请保护范围之内。当前第1页1 2 3 当前第1页1 2 3 
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1