一种前端工程的接口切换方法、系统、装置和存储介质与流程

本发明涉及软件开发领域，尤其是一种前端工程的接口切换方法、系统、装置和存储介质。

背景技术：

近几年前后端完全分离的思想和其高效、多端支持、强交互的特点逐渐被认可，越多越多的前端开发者使用不同的框架构建前端工程，实现前后端完全分离开发。此开发模式在开发之初开发人员之间协商好接口的路径和json数据格式，前端使用模拟数据服务器/工具开始不依赖于后端的开发工作，待后端接口开发完成，只需将原来前端模拟数据服务器的路径改成后端真实的服务器路径即可实现真实的对接联调。开发过程中，前端专注展示和页面流，后端专注数据和接口，前后端并行高效地进行开发。

前端模拟数据服务器的方案也是多种多样，有mock.js、faker.js、json-server和使用node.js的静态的json文件服务器等方式。而采用json-server和json文件服务器的解决方案是通过http代理中间件http-proxy-middleware转发请求来实现的，但是采用这种方案需要通过手工更改开发环境中的配置和前端工程的配置来实现，在开发过程中需要频繁在模拟数据服务器和后端接口之间切换，采用该方法的效率特别低。

技术实现要素：

为解决上述技术问题，本发明的目的在于：提供一种高效的前端工程的接口切换方法、系统、装置和存储介质。

本发明所采取的第一种技术方案是：

一种前端工程的接口切换方法，包括以下步骤：

获取用户在前端工程的开发环境中输入的命令中所带的参数；

根据所述参数判断是否使用模拟数据服务器，

若是，则根据所述参数配置http代理中间件的转发路径和转发规则，然后根据所述参数对前端工程的所有请求的url进行配置；

反之，则不对http代理中间件进行配置，然后根据设定值将前端工程的所有请求的url配置为后端工程的url。

进一步，所述根据所述参数对前端工程的所有请求的url进行配置，这一步骤具体包括：

根据所述参数在前端工程的所有请求的url中添加转发标识，以使http代理中间件根据所述转发标识转发前端工程的请求。

进一步，所述模拟数据服务器包括json文件服务器和json-sever。

进一步，所述根据所述参数配置http代理中间件的转发路径和转发规则，这一步骤具体包括：

根据所述参数将http代理中间件的转发路径配置为json文件服务器的路径或者json-sever的路径；

根据所述参数配置http代理中间件的转发规则。

进一步，所述开发环境为webpack开发环境。

本发明所采取的第二种技术方案是：

一种前端工程的接口切换系统，包括：

参数获取模块，用于获取用户在前端工程的开发环境中输入的命令中所带的参数；

参数判断模块，用于根据所述参数判断是否使用模拟数据服务器，若是，则转至第一配置模块进行处理，反之，则转至第二配置模块进行处理；

第一配置模块，用于根据所述参数配置http代理中间件的转发路径和转发规则，然后根据所述参数对前端工程的所有请求的url进行配置；

第二配置模块，用于根据设定值将前端工程的所有请求的url配置为后端工程的url；

所述参数获取模块与参数判断模块连接，所述参数判断模块分别与第一配置模块和第二配置模块连接。

进一步，所述模拟数据服务器包括json文件服务器和json-sever。

进一步，所述第一配置模块包括：

第一配置单元，用于根据所述参数将http代理中间件的转发路径配置为json文件服务器的路径或者json-sever的路径；

第二配置单元，用于根据所述参数配置http代理中间件的转发规则；

参数传递单元，用于根据所述参数在前端工程的所有请求的url中添加转发标识，以使http代理中间件根据所述转发标识转发前端工程的请求。

本发明所采取的第三种技术方案是：

一种前端工程的接口切换装置，包括：

存储器，用于存储程序；

处理器，用于加载所述程序以执行一种前端工程的接口切换方法。

本发明所采取的第四种技术方案是：

一种存储介质，所述存储介质上存储有程序，所述程序被处理器执行时实现一种前端工程的接口切换方法。

本发明的有益效果是：通过在开发环境中获取用户输入的命令中的参数，根据参数自动对http代理中间件和前端工程的所有请求的url进行配置，使得用户在切换接口时，仅需在开发环境的运行命令中携带设定的参数即可，本发明免除了用户在开发过程中手动修改文件时带来的麻烦，提升了在开发环境中接口切换的效率。

附图说明

图1为本发明一种前端工程的接口切换方法的流程图；

图2为本发明一种前端工程的接口切换系统的模块框图。

具体实施方式

下面结合说明书附图和具体的实施例对本发明进行进一步的说明。

参照图1，一种前端工程的接口切换方法，包括以下步骤：

获取用户在前端工程的开发环境中输入的命令中所带的参数；所述参数是指命令附带的参数，例如像命令行中的命令所带的参数，例如“rm-r”，其中“rm”为命令，“-r”为命令附带的参数。

根据所述参数判断是否使用模拟数据服务器，本领域技术人员可以设定一些参数值来进行判断，例如，设定字符a和字符b表示使用模拟数据服务器，其他字符则表示不使用模拟数据服务器。

若是，则根据所述参数配置http代理中间件的转发路径和转发规则，然后根据所述参数对前端工程的所有请求的url进行配置；完成对http代理中间件和前端工程的配置以后，前端工程所发出的请求，http代理中间件均转发至被配置的转发路径中，其中，这些转发路径为模拟数据服务器的路径。

反之，则不对http代理中间件进行配置，然后根据设定值将前端工程的所有请求的url配置为后端工程的url。设定值可以是后端工程的url，也可以是后端工程的url在数据库中对应的编号等，当用户所输入的命令不带有参数或者参数不符合规则时，则将前端工程的url配置为后端工程的url，http代理中间件会直接将请求发送至后端工程的url。

进一步作为优选的实施方式，所述根据所述参数对前端工程的所有请求的url进行配置，这一步骤具体包括：

根据所述参数在前端工程的所有请求的url中添加转发标识，以使http代理中间件根据所述转发标识转发前端工程的请求。http代理中间件根据自身的转发规则，识别转发标识，凡是带有转发标识的请求均发送至模拟数据服务器中。

进一步作为优选的实施方式，本实施例提供多种模拟数据服务器的选择，本领域技术人员可以根据实际需要拓展出更多的模拟数据服务器。所述模拟数据服务器包括json文件服务器和json-sever。

进一步作为优选的实施方式，所述根据所述参数配置http代理中间件的转发路径和转发规则，这一步骤具体包括：

根据所述参数将http代理中间件的转发路径配置为json文件服务器的路径或者json-sever的路径；例如，当参数为“json”时，将http代理中间件的转发路径配置为json文件服务器的路径；当参数为“json-sever”时，将http代理中间件的转发路径配置为json-sever的路径。

根据所述参数配置http代理中间件的转发规则。

进一步作为优选的实施方式，所述开发环境为webpack开发环境。

参照图2，一种前端工程的接口切换系统，包括：

参数获取模块，用于获取用户在前端工程的开发环境中输入的命令中所带的参数；

参数判断模块，用于根据所述参数判断是否使用模拟数据服务器，若是，则转至第一配置模块进行处理，反之，则转至第二配置模块进行处理；

第一配置模块，用于根据所述参数配置http代理中间件的转发路径和转发规则，然后根据所述参数对前端工程的所有请求的url进行配置；

第二配置模块，用于根据设定值将前端工程的所有请求的url配置为后端工程的url；

所述参数获取模块与参数判断模块连接，所述参数判断模块分别与第一配置模块和第二配置模块连接。

进一步作为优选的实施方式，所述模拟数据服务器包括json文件服务器和json-sever。

进一步作为优选的实施方式，所述第一配置模块包括：

第一配置单元，用于根据所述参数将http代理中间件的转发路径配置为json文件服务器的路径或者json-sever的路径；

第二配置单元，用于根据所述参数配置http代理中间件的转发规则；

参数传递单元，用于根据所述参数在前端工程的所有请求的url中添加转发标识，以使http代理中间件根据所述转发标识转发前端工程的请求。

一种前端工程的接口切换装置，包括：

存储器，用于存储程序；

处理器，用于加载所述程序以执行图1所对应的前端工程的接口切换方法。所述装置可以是计算机。

一种存储介质，所述存储介质上存储有程序，所述程序被处理器执行时实现图1所对应的前端工程的接口切换方法。

本实施例提供了一种前端工程的接口切换方法，该方法中用户选择json-server作为模拟数据服务器。该方法的部分步骤给出了示例性代码，示例性代码中含有多种不同的运算符，其中包括“/”、“\”、“？”、“-”、“*”、“！”以及“$”等等特殊字符。

该方法包括以下步骤：

s101、获取用户在cmd命令行中输入的命令：“npmrunstart–mock＝json-server”，其中“npmrunstart”为运行命令，“mock＝json-server”为本实施例中所带的参数，以运行前端工程webpack开发环境。

s102、在webpack调用以下函数以获取模拟数据服务器的地址。函数mockserver存储了模拟数据服务器的url。

s103、使用node.js获取步骤s1中输入的命令，并将获取process.argv索引大于1的值：mock＝json-server，处理成{mock:”json-server”}，并将获得的参数赋给全局的global.argv；

使用步骤s2传入的参数初始化json和json-server两种模拟数据的配置，即将ajax请求的url按原来的路径重写到对应的路径。mock的数值为json-server，返回json-server的配置对http代理中间件http-proxy-middleware进行配置，使得http代理中间件会将所有带mockapi的请求会转发到地址为http://localhost:26080/的json-server。

以下是用于实现本步骤的一种示例性代码，其中本领域技术人员可以根据实际需要修改代码的变量名称以及函数结构：

s104、使用webpack插件将global.argv.mock注入到前端工程中，本步骤可以用以下代码实现。

newwebpack.defineplugin({

'process.mock':json.stringify(global.argv.mock)

}),

s105、在前端工程中根据process.mock的数值对工程的接口配置文件中所有的请求进行初始化，可以使用以下代码实现：

前端工程根据输入的mock数值，使所有的请求都带着mockapi，即带有一个转发标识。

当前端工程发起的ajax请求带mockapi时，http代理中间件http-proxy-middleware将请求转发到http://localhost:26080/users，并获得响应。

如需切换接口，先把当前开发环境停止，再运行对应的命令即可实现接口的切换。

本实施例示出了一种前端工程的接口切换方法，在该方法中，用户选择将请求直接发送至后端工程的url中。该方法包括以下步骤：

s201、获取用户运行前端工程webpack开发环境时的命令的参数。

s202、所述参数的返回结果是一个空值“none”，不对http代理中间件http-proxy-middleware进行配置。

s203、通过webpack的组件所述空值注入到前端工程中。

s204、判定前端工程中的接口配置文件中被注入的值为空值“none”后，使用后端工程的url对前端工程中所有的请求进行配置。

在配置完成后，前端工程中的ajax请求均从后端服务器获得响应。

通过在前端工程的开发环境中输入带有参数的命令，可以自动配置前端工程以及http代理中间件的相关参数，使得前端工程的请求能够切换到相应的接口中，使得接口切换更加方便，错误率相对于手动修改配置文件更低。

对于本实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。

以上是对本发明的较佳实施进行了具体说明，但本发明并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。