CN113535130B

CN113535130B - 前端接口框架开发方法、系统、电子设备及存储介质

Info

Publication number: CN113535130B
Application number: CN202110805083.1A
Authority: CN
Inventors: 安超
Original assignee: Beijing Mininglamp Software System Co ltd
Current assignee: Beijing Mininglamp Software System Co ltd
Priority date: 2021-07-16
Filing date: 2021-07-16
Publication date: 2022-08-02
Anticipated expiration: 2041-07-16
Also published as: CN113535130A

Abstract

本发明提出一种前端接口框架开发方法、系统、电子设备及存储介质，其方法技术方案包括服务器接口开发步骤，基于一工程，遵循restful接口规范开发服务器接口层，所述服务器接口层负责前端及后端接口的定义；Actioncreator开发步骤，开发Actioncreator层，所述Actioncreator层对所述工程中的ajax请求和静态的DOM操作进行统一配置；Framework开发步骤，开发Framework层，所述Framework层进行模块数据存储、组件模板存储、模块间消息通讯，并解析actionCreator中的配置。本申请解决了现有前端接口框架开发方法在接口与界面的快速实现上存在不便的问题。

Description

前端接口框架开发方法、系统、电子设备及存储介质

技术领域

本发明属于前端开发技术领域，尤其涉及一种前端接口框架开发方法、系统、电子设备及存储介质。

背景技术

现代软件开发中，前端开发和后端开发一起进行。通常情况下，接口定义都会在统一的平台进行定义，接口定义保持固定的格式，但是所有字段的定义都与前端界面组件没有直接联系，然而前端研发通常会使用统一的UI组件库，在接口定义时可以使用关键字实现接口与UI组件的关联。

发明内容

本申请实施例提供了一种前端接口框架开发方法、系统、电子设备及存储介质，以至少解决现有前端接口框架开发方法在接口与界面的快速实现上存在不便的问题。

第一方面，本申请实施例提供了一种前端接口框架开发方法，包括：服务器接口开发步骤，基于一工程，遵循restful接口规范开发服务器接口层，所述服务器接口层负责前端及后端接口的定义；Actioncreator开发步骤，开发Actioncreator层，所述Actioncreator层对所述工程中的ajax请求和静态的DOM操作进行统一配置；Framework开发步骤，开发Framework层，所述Framework层进行模块数据存储、组件模板存储、模块间消息通讯，并解析actionCreator中的配置。

优选的，所述方法进一步包括：模块组件生成步骤，在所述工程的配置文件中配置一任务，所述任务包括在需要生成组件文件时，通过命令执行使在所述Actioncreator层中配置的接口生成业务代码基础结构。

优选的，所述服务器接口开发步骤进一步包括：所述接口的返回报文结构包括data、message和statusCode，所述data包括所述接口返回的主要数据，所述message包括所述接口请求的成功信息和失败原因，所述statusCode包括所述接口请求的结果代码。

优选的，所述Framework开发步骤进一步包括：对于所述Actioncreator层中所述ajax请求的配置，通过所述Framework层在全局创建axios单一实例，然后使用所述axios单一实例进行所述ajax的创建与配置。

第二方面，本申请实施例提供了一种前端接口框架开发系统，适用于上述一种前端接口框架开发方法，包括：服务器接口开发模块，基于一工程，遵循restful接口规范开发服务器接口层，所述服务器接口层负责前端及后端接口的定义；Actioncreator开发模块，开发Actioncreator层，所述Actioncreator层对所述工程中的ajax请求和静态的DOM操作进行统一配置；Framework开发模块，开发Framework层，所述Framework层进行模块数据存储、组件模板存储、模块间消息通讯，并解析actionCreator中的配置。

在其中一些实施例中，所述系统进一步包括：模块组件生成模块，在所述工程的配置文件中配置一任务，所述任务包括在需要生成组件文件时，通过命令执行使在所述Actioncreator层中配置的接口生成业务代码基础结构。

在其中一些实施例中，所述服务器接口开发模块进一步包括：所述接口的返回报文结构包括data、message和statusCode，所述data包括所述接口返回的主要数据，所述message包括所述接口请求的成功信息和失败原因，所述statusCode包括所述接口请求的结果代码。

在其中一些实施例中，所述Framework开发模块进一步包括：对于所述Actioncreator层中所述ajax请求的配置，通过所述Framework层在全局创建axios单一实例，然后使用所述axios单一实例进行所述ajax的创建与配置。

第三方面，本申请实施例提供了一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述第一方面所述的一种前端接口框架开发方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述第一方面所述的一种前端接口框架开发方法。

本申请可应用于数据能力技术领域。相比于相关技术，本申请实施例提供的一种前端接口框架开发方法，可以实现在接口定义时，接口关键字实现与前端组件的一一对应，未能对应的，前端研发可以在actionCreator里进行手工配置实现，前端框架自行实现组件需求的数据结构，本申请有利于接口与界面的快速实现。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本发明的前端接口框架开发方法流程图；

图2为本发明的前端接口框架开发系统的框架图；

图3为本发明的电子设备的框架图；

以上图中：

1、服务器接口开发模块；2、Actioncreator开发模块；3、Framework开发模块；4、模块组件生成模块；60、总线；61、处理器；62、存储器；63、通信接口。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

以下，结合附图详细介绍本发明的实施例：

图1为本发明的前端接口框架开发方法流程图，请参见图1，本发明前端接口框架开发方法包括如下步骤：

S1：基于一工程，遵循restful接口规范开发服务器接口层，所述服务器接口层负责前端及后端接口的定义。

可选的，所述接口的返回报文结构包括data、message和statusCode，所述data包括所述接口返回的主要数据，所述message包括所述接口请求的成功信息和失败原因，所述statusCode包括所述接口请求的结果代码。

在具体实施中，服务器接口层主要负责前后端接口的定义，其中遵循restful接口规范，请求contentType默认使用application/json；charset＝UTF-8。接口返回报文结构为：

{data:返回接口数据

message:返回相关信息，一般在接口非200时会使用此处的错误消息

statusCode:200，遵守http code规范，200成功，300跳转，400权限相关}

在具体实施中，其中statusCode为接口是否请求成功，成功返回200，不成功根据不同的业务系统返回不同的业务错误码。Message为接口返回的消息体，成功时返回成功相关的消息，失败时则返回接口失败的原因。data为接口返回的主要数据，格式可以为array类型、json类型、string类型、number类型。

S2:开发Actioncreator层，所述Actioncreator层对所述工程中的ajax请求和静态的DOM操作进行统一配置。

在具体实施中，Actioncreator层，主要对当前工程中的ajax请求和静态的DOM操作统一配置。

S3：开发Framework层，所述Framework层进行模块数据存储、组件模板存储、模块间消息通讯，并解析actionCreator中的配置。

可选的，对于所述Actioncreator层中所述ajax请求的配置，通过所述Framework层在全局创建axios单一实例，然后使用所述axios单一实例进行所述ajax的创建与配置。

在具体实施中，Framework层为所有产品的核心。Framework负责模块数据存储、组件模板的存储、模块间消息通讯，及解析actionCreator中的配置。因此，以上actionCreator中ajax的配置，framework在全局创建axios单一实例，然后使用此实例进行ajax的创建与配置。Container负责从framework中获取数据，然后对数据进行二次加工，加工为视图层需要的数据格式。View层负责界面的展示，其中大部分是通过接口配置的方式生成基础结构，减少重复性开发。开发人员在此基础结构上再进行业务开发。

S4：在所述工程的配置文件中配置一任务，所述任务包括在需要生成组件文件时，通过命令执行使在所述Actioncreator层中配置的接口生成业务代码基础结构。

在具体实施中，在工程的package.json文件中配置有buildComponent的任务，在需要生成相关组件文件时，执行npm run buildComponent，则所有在actionCreator中配置的接口，都会根据component指定的模板在指定的path上生成业务代码基础结构。在具体实施中，通常在模块开发时，先进行actionCreator的定义，然后直接生成模块中需要的组件雏形。

本申请提供一具体实施例对上述技术方案进行进一步说明：

需要生成哪种可视化组件时，通过在actionCreator中配置，接口需要严格按可视化组件的数据格式返回。其中，在framework中存储有各种可视化组件的模板，相关模板包括但不限于：breadcrumb面包屑、dropdown下拉菜单、menu导航菜单、pagination分页、autoComplete自动完成、cascader级联选择、checkbox多选框、datepicker日期选择框、form表单、select选择器、slider滑动输入条、switch开关、transfer穿梭框、treeSelect树选择、upload上传、badge徽标数、calendar日历、comment评论、descriptions描述列表、empty空状态、list列表、table表格

以table表格为例，接口返回数据格式如下：

其中data字段为主要的数据报文，component标识当前接口使用的可视化组件名称，通常在actionCreator中的设置，框架在发送ajax请求时作为参数自动携带。接口返回数据时在data中再次返回即可。Columns是表格组件需要配置的表头数据，其中每一项(json)为表格的每一列，每列的title为表头标题，dataIndex为列数据在数据项中对应的路径，支持通过数组查询嵌套路径。Key为react组件需要的唯一标识。dataSource是表格组件的数据，其中每一项(json)为表格的每一行，每行数据中包括以columns里定义的每列的title定义的值，同时包括每一行的唯一标识key。

在具体实施中，上述生成表格组件的示例，在actionCreator中相关的配置参数如下：

getModelList:{

url:'${actionPrefix}/model',

method:'get',

hasLoading:false,

component:'table',

path:'/model/components/list

trigger:'componentDidMount',

create:'once'

}

其中：

url：为ajax请求地址；

method:为ajax请求的方式；

hasLoading:为ajax异步请求时是否显示loading画面；

component:为请求数据后生成的组件类型；

path:为请求数据后生成的组件存放地址，默认在对应路径下生成index.jsx文件；

trigger：ajax触发的时机，通常在生成的组件的生命周期中自动生成；

create：指生成组件的次数，支持once和always，默认为“once”一次。

需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例提供了一种前端接口框架开发系统，适用于上述的一种前端接口框架开发方法。如以下所使用的，术语“单元”、“模块”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件、或者软件和硬件的组合的实现也是可能并被构想的。

图2为根据本发明的前端接口框架开发系统的框架图，请参见图2，包括：

服务器接口开发模块1：基于一工程，遵循restful接口规范开发服务器接口层，所述服务器接口层负责前端及后端接口的定义。

{data:返回接口数据

Actioncreator开发模块2:开发Actioncreator层，所述Actioncreator层对所述工程中的ajax请求和静态的DOM操作进行统一配置。

Framework开发模块3：开发Framework层，所述Framework层进行模块数据存储、组件模板存储、模块间消息通讯，并解析actionCreator中的配置。

模块组件生成模块4：在所述工程的配置文件中配置一任务，所述任务包括在需要生成组件文件时，通过命令执行使在所述Actioncreator层中配置的接口生成业务代码基础结构。

本申请提供一具体实施例对上述技术方案进行进一步说明：

以table表格为例，接口返回数据格式如下：

getModelList:{

url:'${actionPrefix}/model',

method:'get',

hasLoading:false,

component:'table',

path:'/model/components/list

trigger:'componentDidMount',

create:'once'

}

其中：

url：为ajax请求地址；

method:为ajax请求的方式；

hasLoading:为ajax异步请求时是否显示loading画面；

component:为请求数据后生成的组件类型；

另外，结合图1描述的一种前端接口框架开发方法可以由电子设备来实现。图3为本发明的电子设备的框架图。

电子设备可以包括处理器61以及存储有计算机程序指令的存储器62。

具体地，上述处理器61可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器62可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器62可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器62可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器62可在数据处理装置的内部或外部。在特定实施例中，存储器62是非易失性(Non-Volatile)存储器。在特定实施例中，存储器62包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器62可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器61所执行的可能的计算机程序指令。

处理器61通过读取并执行存储器62中存储的计算机程序指令，以实现上述实施例中的任意一种前端接口框架开发方法。

在其中一些实施例中，电子设备还可包括通信接口63和总线60。其中，如图3所示，处理器61、存储器62、通信接口63通过总线60连接并完成相互间的通信。

通信端口63可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。

总线60包括硬件、软件或两者，将电子设备的部件彼此耦接在一起。总线60包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(ControlBus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线60可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(FrontSide Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线60可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

该电子设备可以执行本申请实施例中的一种前端接口框架开发方法。

另外，结合上述实施例中的一种前端接口框架开发方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种前端接口框架开发方法。

而前述的存储介质包括：U盘、移动硬盘、只读存储器(ReadOnly Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims

1.一种前端接口框架开发方法，其特征在于，包括：

服务器接口开发步骤，基于一工程，遵循restful接口规范开发服务器接口层，所述服务器接口层负责前端及后端接口的定义；

Actioncreator开发步骤，开发Actioncreator层，所述Actioncreator层对所述工程中的ajax请求和静态的DOM操作进行统一配置；

Framework开发步骤，开发Framework层，所述Framework层进行模块数据存储、组件模板存储、模块间消息通讯，并解析Actioncreator 中的配置；

所述Framework开发步骤进一步包括：对于所述Actioncreator层中所述ajax请求的配置，通过所述Framework层在全局创建axios单一实例，然后使用所述axios单一实例进行所述ajax的创建与配置。

2.根据权利要求1所述的前端接口框架开发方法，其特征在于，所述方法进一步包括：

模块组件生成步骤，在所述工程的配置文件中配置一任务，所述任务包括在需要生成组件文件时，通过命令执行使在所述Actioncreator层中配置的接口生成业务代码基础结构。

3.根据权利要求1所述的前端接口框架开发方法，其特征在于，所述服务器接口开发步骤进一步包括：所述接口的返回报文结构包括data、message和statusCode，所述data包括所述接口返回的主要数据，所述message包括所述接口请求的成功信息和失败原因，所述statusCode包括所述接口请求的结果代码。

4.一种前端接口框架开发系统，其特征在于，包括：

服务器接口开发模块，基于一工程，遵循restful接口规范开发服务器接口层，所述服务器接口层负责前端及后端接口的定义；

Actioncreator开发模块，开发Actioncreator层，所述Actioncreator层对所述工程中的ajax请求和静态的DOM操作进行统一配置；

Framework开发模块，开发Framework层，所述Framework层进行模块数据存储、组件模板存储、模块间消息通讯，并解析Actioncreator 中的配置；

所述Framework开发模块进一步包括：对于所述Actioncreator层中所述ajax请求的配置，通过所述Framework层在全局创建axios单一实例，然后使用所述axios单一实例进行所述ajax的创建与配置。

5.根据权利要求4所述的前端接口框架开发系统，其特征在于，所述系统进一步包括：

模块组件生成模块，在所述工程的配置文件中配置一任务，所述任务包括在需要生成组件文件时，通过命令执行使在所述Actioncreator层中配置的接口生成业务代码基础结构。

6.根据权利要求4所述的前端接口框架开发系统，其特征在于，所述服务器接口开发模块进一步包括：所述接口的返回报文结构包括data、message和statusCode，所述data包括所述接口返回的主要数据，所述message包括所述接口请求的成功信息和失败原因，所述statusCode包括所述接口请求的结果代码。

7.一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至3中任一项所述的前端接口框架开发方法。

8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至3中任一项所述的前端接口框架开发方法。