发明内容
基于此,有必要针对上述技术问题,提供一种基于基础库的前端开发处理方法、装置、计算机设备和存储介质。
一种基于基础库的前端开发处理方法,所述方法包括:
响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与所述获取请求对应的所述目标功能组件;
调用接口文件获取与所述目标功能组件对应的数据资源;
响应于所述开发端基于所述目标功能组件和所述数据资源发送的开发指令,将所述目标功能组件和所述数据资源进行重组后部署到前端应用页面。
在其中一个实施例中,所述响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与所述获取请求对应的所述目标功能组件的步骤之前,包括:
响应于针对多种基础元素的封装操作,将所述多种基础元素进行封装形成相应的多种功能组件;所述多种基础元素包括业务系统开发逻辑、代码规范插件组件、视觉设计规范插件组件、性能监控插件和埋点插件;
基于所述多种功能组件构建所述基础库。
在其中一个实施例中,所述基础库的类型包括页面模板类、工程模板类、区块模板类和业务组件类。
在其中一个实施例中,所述接口文件包括模拟数据生成器;所述调用接口文件获取与所述目标功能组件对应的数据资源,包括:
在业务系统调试阶段,调用所述模拟数据生成器,以通过所述模拟数据生成器生成模拟数据返回至前端,并作为所述目标功能组件对应的数据资源。
在其中一个实施例中,所述接口文件包括应用程序接口文件;所述调用接口文件获取与所述目标功能组件对应的数据资源,包括:
在业务系统运行阶段,调用所述应用程序接口文件,以通过所述应用程序接口文件从后端服务器获取与所述目标功能组件对应的数据资源。
在其中一个实施例中,所述业务系统开发逻辑用于抽取业务事件的数据实现方法。
在其中一个实施例中,所述模拟数据生成器与所述应用程序接口文件中的参数是一一对应的。
一种基于基础库的前端开发处理装置,所述装置包括:
目标功能组件获取模块,用于响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与所述获取请求对应的所述目标功能组件;
数据资源获取模块,用于调用接口文件获取与所述目标功能组件对应的数据资源;
资源部署模块,用于响应于所述开发端基于所述目标功能组件和所述数据资源发送的开发指令,将所述目标功能组件和所述数据资源进行重组后部署到前端应用页面。
一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:
响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与所述获取请求对应的所述目标功能组件;
调用接口文件获取与所述目标功能组件对应的数据资源;
响应于所述开发端基于所述目标功能组件和所述数据资源发送的开发指令,将所述目标功能组件和所述数据资源进行重组后部署到前端应用页面。
在一个实施例中,处理器执行计算机程序时还实现以下步骤:
响应于针对多种基础元素的封装操作,将所述多种基础元素进行封装形成相应的多种功能组件;所述多种基础元素包括业务系统开发逻辑、代码规范插件组件、视觉设计规范插件组件、性能监控插件和埋点插件;基于所述多种功能组件构建所述基础库。
在一个实施例中,所述基础库的类型包括页面模板类、工程模板类、区块模板类和业务组件类。
在一个实施例中,处理器执行计算机程序时还实现以下步骤:
在业务系统调试阶段,调用所述模拟数据生成器,以通过所述模拟数据生成器生成模拟数据返回至前端,并作为所述目标功能组件对应的数据资源。
在一个实施例中,处理器执行计算机程序时还实现以下步骤:
在业务系统运行阶段,调用所述应用程序接口文件,以通过所述应用程序接口文件从后端服务器获取与所述目标功能组件对应的数据资源。
在一个实施例中,所述业务系统开发逻辑用于抽取业务事件的数据实现方法。
在一个实施例中,所述模拟数据生成器与所述应用程序接口文件中的参数是一一对应的。一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现如上述的基于基础库的前端开发处理方法的步骤
上述基于基础库的前端开发处理方法、装置、计算机设备和存储介质,响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与上述获取请求对应的所述目标功能组件;调用接口文件获取与上述目标功能组件对应的数据资源;响应于开发端基于上述目标功能组件和上述数据资源发送的开发指令,将上述目标组件和上述数据资源进行重组后部署到前端应用页面。该方法将不同的功能组件封装后构成基础库,使用基础库通过接口文件与后端关联,使得前端与后端开发的联调耗时减少,提高了开发效率。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
本申请提供的基于基础库的前端开发处理方法,可以应用于如图1所示的应用环境中。其中,前端101通过网络与后端服务器102进行通信。其中,前端101可由各种浏览器和前端服务器构成,后端服务器102可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
在一个实施例中,如图2所示,提供了一种基于基础库的前端开发处理方法,以该方法应用于图1中的前端101为例进行说明,包括以下步骤:
步骤S201,响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与上述获取请求对应的目标功能组件;
其中,功能组件是事先由前端开发人员从业务事件中抽取出的业务逻辑、模板等,并封装后组成的,这些功能组件的集合构成基础库。
具体地,如图3所示,图3为基于基础库的前端开发处理方法的框架结构图,开发端首先通过浏览器从基础库中选择需要的目标功能组件,前端服务器响应于开发端发送的针对目标功能组件的获取请求,从基础库中选择与该获取请求对应的目标功能组件。
步骤S202,调用接口文件获取与上述目标功能组件对应的数据资源;
具体地,在获取目标功能组件后,还需要获取与该目标功能组件对应的数据资源,例如购物网站上搭建了一定的图片与文字组织格式的模板后,其中的商品内容如价格等数据还需要从后端服务器中获取,因此,设置接口文件链接基础库和后端服务器,调用接口文件获取与上述目标功能组件对应的数据资源,例如商品名称、单价等数据内容。
步骤S203,响应于开发端基于目标功能组件和数据资源发送的开发指令,将目标功能组件和数据资源进行重组后部署到前端应用页面。
具体地,前端开发人员基于上述目标功能组件和数据资源进行二次开发,并将二次开发后的整体部署到前端应用页面。
上述实施例,通过响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与上述获取请求对应的所述目标功能组件;调用接口文件获取与上述目标功能组件对应的数据资源;响应于开发端基于上述目标功能组件和上述数据资源发送的开发指令,将上述目标组件和上述数据资源进行重组后部署到前端应用页面。该方法将不同的功能组件封装后构成基础库,使用基础库通过接口文件与后端关联,使得前端与后端开发的联调耗时减少,提高了开发效率。
在一实施例中,上述步骤S201之前,包括:响应于针对多种基础元素的封装操作,将多种基础元素进行封装形成相应的多种功能组件;多种基础元素包括业务系统开发逻辑、代码规范插件组件、视觉设计规范插件组件、性能监控插件和埋点插件;基于多种功能组件构建基础库。上述基础库的类型包括页面模板类、工程模板类、区块模板类和业务组件类。
具体地,前端开发人员根据不同的业务系统维度封装提供不同类型的基础库,包括页面模板、工程模板、区块模板、业务组件四个大类;根据业务系统的需求从多种业务事件,例如点击事件、用户请求、联动等业务事件,从这些业务事件中抽取相应的逻辑或者构建模板作为基础元素,针对这些基础元素进行封装形成相应的多种功能组件,将这些功能组件集合打包构成基础库。上述多种基础元素包括业务系统开发逻辑、代码规范插件组件、视觉设计规范插件组件、性能监控插件和埋点插件;其中性能监控插件和埋点插件,可以减少二次开发工作量。
可选地,上述基础库内置代码检查插件,可以检查代码错误例如语法错误等。
上述实施例,通过构建基础库封装集成业务逻辑,前端开发人员只需要针对功能组件和相应的数据资源进行简答的修改即可完成需求上线,进一步提升了开发效率。并且内置代码检查插件,可以大幅度提升前端代码质量和性能,减少安全风险。
在一实施例中,上述接口文件包括模拟数据生成器,上述步骤S202,包括:在业务系统调试阶段,调用模拟数据生成器,以通过模拟数据生成器生成模拟数据返回至前端,并作为目标功能组件对应的数据资源。
具体地,如图3所示,模拟数据生成器是基于Javascript开发的随机数据生成器,由于在业务还没上线前,后端数据也没有充分准备后,因此在业务调试阶段,可通过模拟数据生成器模拟后端的数据结构生成模拟数据返回至前端,本实施例中的模拟数据生成器可使用mock.js,使得前端能够使用目标功能组件结合该模拟数据生成相应的前端页面。
本实施例通过模拟数据生成器连接基础库和后端服务器,使得在业务调试阶段能够不依赖后端服务器完成开发测试。
在一实施例中,上述接口文件还包括应用程序接口文件,上述步骤S202,包括:在业务系统运行阶段,调用应用程序接口文件,以通过应用程序接口文件从后端服务器获取与目标功能组件对应的数据资源。
具体地,如图3所示,应用程序接口文件是基于Javascript开发的接口文件,在业务系统上线后,前端需要后端服务器提供数据资源,完成整个页面的布局和上线,但由于前端与后端分离,使得前端不能及时获取相应的数据资源,因此使用应用程序接口文件例如api.js,api.js中对应了实际的后端请求接口封装。在基础库开发调试阶段,页面使用mock.js中的相应请求,页面功能形成完整闭环,后端只需根据mock.js中数据结构和入参等提供相同名称的请求接口,同时在页面组件中替换为api.js请求,即可完成相应的业务开发。
上述实施例,通过应用程序接口文件连接基础库和后端服务器,使得前后端相连,及时获取后端数据,完成业务上线,提高了开发效率。
在一实施例中,上述业务系统开发逻辑用于抽取业务事件的数据实现方法。
具体地,上述业务系统开发逻辑是抽取业务事件的逻辑后形成的,比如点击事件、请求、联动等业务事件,其中涉及到前端响应到后端数据提取并返回前端进行渲染的一系列操作,抽取这些数据实现方式的逻辑形成开发逻辑,并封装后构成基础库中的功能组件。
本实施例,将业务事件的数据实现方式抽取出其中的逻辑,构成基础库中的功能组件,提高了代码的复用率,进一步提升了业务系统开发效率。
在一实施例中,上述模拟数据生成器与上述应用程序接口文件中的参数是一一对应的。
具体地,mock.js标准化相应的后端数据结构以及入参格式等,同时在基础库中提供于相应的请求api.js文件。api.js中对应了实际的后端请求接口封装。在基础库开发调试阶段,页面使用mock.js中的相应请求,页面功能形成完整闭环,后端只需根据mock.js中数据结构和入参等提供相同名称的请求接口,同时在页面组件中替换为api.js请求,即可完成相应的业务开发。
可选的,在所有基础库的工程模板集成相应的代码规范插件组件,搭配开发工具时比如vscode可以实时检测代码质量、风格,可以大幅度的提升代码质量和性能,同时搭配git管理,不符合规范将禁止提交到版本库中。
可选的,所有的基础库模板将按照一套公司内部的标准化视觉交互规范开发,提供统一的视觉风格、优秀的交互体验。
可选的,所有基础模板中集成了性能/埋点插件。并提供同一的平台管理。可以免去业务方额外的集成开发。
本实施例,通过将模拟数据生成器与上述应用程序接口中的参数以及数据结构进行一一对应,方便在业务调试阶段进行准确地调试,使得业务能够快速上线。
应该理解的是,虽然图1至3的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,图1至3中的至少一部分步骤可以包括多个步骤或者多个阶段,这些步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
在一个实施例中,如图4所示,提供了一种基于基础库的前端开发处理装置400,包括:目标功能组件获取模块401、数据资源获取模块402和资源部署模块403,其中:
目标功能组件获取模块,用于响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与所述获取请求对应的所述目标功能组件;
数据资源获取模块,用于调用接口文件获取与所述目标功能组件对应的数据资源;
资源部署模块,用于响应于所述开发端基于所述目标功能组件和所述数据资源发送的开发指令,将所述目标功能组件和所述数据资源进行重组后部署到前端应用页面。
在一实施例中,还包括基础库构建单元,用于响应于针对多种基础元素的封装操作,将所述多种基础元素进行封装形成相应的多种功能组件;所述多种基础元素包括业务系统开发逻辑、代码规范插件组件、视觉设计规范插件组件、性能监控插件和埋点插件;基于所述多种功能组件构建所述基础库。
在一实施例中,所述基础库的类型包括页面模板类、工程模板类、区块模板类和业务组件类。
在一实施例中,上述数据资源获取模块402,用于在业务系统调试阶段,调用所述模拟数据生成器,以通过所述模拟数据生成器生成模拟数据返回至前端,并作为所述目标功能组件对应的数据资源。
在一实施例中,上述数据资源获取模块402,用于在业务系统运行阶段,调用所述应用程序接口文件,以通过所述应用程序接口文件从后端服务器获取与所述目标功能组件对应的数据资源。
在一实施例中,所述业务系统开发逻辑用于抽取业务事件的数据实现方法。
在一实施例中,所述模拟数据生成器与所述应用程序接口文件中的参数是一一对应的。
关于基于基础库的前端开发处理装置的具体限定可以参见上文中对于基于基础库的前端开发处理方法的限定,在此不再赘述。上述基于基础库的前端开发处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中,提供了一种计算机设备,该计算机设备可以是服务器,其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储功能组件或者业务数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种基于基础库的前端开发处理方法。
在一个实施例中,提供了一种计算机设备,该计算机设备可以是终端,其内部结构图可以如图6所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信,无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种基于基础库的前端开发处理方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏,该计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解,图5至6中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,提供了一种计算机设备,包括存储器和处理器,存储器中存储有计算机程序,该处理器执行计算机程序时实现以下步骤:
响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与所述获取请求对应的所述目标功能组件;
调用接口文件获取与所述目标功能组件对应的数据资源;
响应于所述开发端基于所述目标功能组件和所述数据资源发送的开发指令,将所述目标功能组件和所述数据资源进行重组后部署到前端应用页面。
在一个实施例中,处理器执行计算机程序时还实现以下步骤:
响应于针对多种基础元素的封装操作,将所述多种基础元素进行封装形成相应的多种功能组件;所述多种基础元素包括业务系统开发逻辑、代码规范插件组件、视觉设计规范插件组件、性能监控插件和埋点插件;基于所述多种功能组件构建所述基础库。
在一个实施例中,所述基础库的类型包括页面模板类、工程模板类、区块模板类和业务组件类。
在一个实施例中,处理器执行计算机程序时还实现以下步骤:
在业务系统调试阶段,调用所述模拟数据生成器,以通过所述模拟数据生成器生成模拟数据返回至前端,并作为所述目标功能组件对应的数据资源。
在一个实施例中,处理器执行计算机程序时还实现以下步骤:
在业务系统运行阶段,调用所述应用程序接口文件,以通过所述应用程序接口文件从后端服务器获取与所述目标功能组件对应的数据资源。
在一个实施例中,所述业务系统开发逻辑用于抽取业务事件的数据实现方法。
在一个实施例中,所述模拟数据生成器与所述应用程序接口文件中的参数是一一对应的。
在一个实施例中,提供了一种计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现以下步骤:
响应于开发端发送的针对目标功能组件的获取请求,从基础库中获取与所述获取请求对应的所述目标功能组件;调用接口文件获取与所述目标功能组件对应的数据资源;响应于所述开发端基于所述目标功能组件和所述数据资源发送的开发指令,将所述目标功能组件和所述数据资源进行重组后部署到前端应用页面。
在一个实施例中,计算机程序被处理器执行时还实现以下步骤:
响应于针对多种基础元素的封装操作,将所述多种基础元素进行封装形成相应的多种功能组件;所述多种基础元素包括业务系统开发逻辑、代码规范插件组件、视觉设计规范插件组件、性能监控插件和埋点插件;基于所述多种功能组件构建所述基础库。
在一个实施例中,所述基础库的类型包括页面模板类、工程模板类、区块模板类和业务组件类。
在一个实施例中,计算机程序被处理器执行时还实现以下步骤:
在业务系统调试阶段,调用所述模拟数据生成器,以通过所述模拟数据生成器生成模拟数据返回至前端,并作为所述目标功能组件对应的数据资源。
在一个实施例中,计算机程序被处理器执行时还实现以下步骤:
在业务系统运行阶段,调用所述应用程序接口文件,以通过所述应用程序接口文件从后端服务器获取与所述目标功能组件对应的数据资源。
在一个实施例中,所述业务系统开发逻辑用于抽取业务事件的数据实现方法。
在一个实施例中,所述模拟数据生成器与所述应用程序接口文件中的参数是一一对应的。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-Only Memory,ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory,RAM)或外部高速缓冲存储器。作为说明而非局限,RAM可以是多种形式,比如静态随机存取存储器(Static Random Access Memory,SRAM)或动态随机存取存储器(Dynamic Random Access Memory,DRAM)等。
以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。