使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock

Posted 2020-09-03 田想兵

使用h5+electron创建一个本地的应用mock，它可以模拟后端的接口，创建本地http服务。

使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock

在上一篇《electron快速开始》里讲述了如何快速的开始一个electron的应用程序，既然electron是可以直接使用node环境编写程序的，那么我们就可以有很多可以处理的事，比如我们可以做个可视化的前端构建工具，或者我们可以建一个后台的管理系统。基于这两天，我简单的做了一个模拟后端接口的http服务。

它可以完成如下功能：

1. 它可以创建http本地服务
2. 它可以模拟后端的多种请求方式，如get、post、put、delete
3. 可以格式化json字符串
4. 可以验证请求的参数合法性

...等等，凡是在后端接口未写好前的，前后端联调，都可以用到，它可以让你的后期前后端联调更顺畅，减少前后端不一致的情况。它的主界面是这样的：

主界面很简单，就是几个按钮，可以修改端口号，开启http服务，这里的服务是express创建的。然后可以管理你所模拟的所有接口，这些数都保存在本地文件中。添加接口的界面如下：

这里的url就是localhost:8080/a/b/c了，可以自定义任何结构 ，不再需要自己创建对应的文件夹。参数也是可以是多个，返回值，目前只做了成功的默认返回，后面版本会做出条件判断的返回等功能。

管理的界面如下：

 

管理界面比较简单，主要就是修改、删除和预览功能。预览就是用本地默认浏览器打开该地址。

这里新增了一个json格式验证的功能：

后期我们还可以把打包js和less的功能都集成进去，基本上来说，nodejs、electron给了web的无限可能。

mock系统的下载地址：

http://www.lovewebgames.com/app/mock/mock.exe

http://www.react-cn.com/app/mock/mock.exe

http://www.react-cn.com/app/mock/mock.rar

该项目的github地址是：https://github.com/tianxiangbing/mock

 

打包electron时遇到的网络下载卡住的问题，可以单独去github上下载https://github.com/electron/electron/releases压缩包后复制到用户目录的.electron文件夹中，再修改打包命令与该压缩包一致即可:

electron-packager . mock --electron-version=0.37.8 --asar.unpack=protocol-link.html --overwrite --platform=win32 --arch=x64 --icon=src/icon/favicon.ico --out=out  --version-string.FileDescription=\'mock\' --version-string.ProductName=\'mock\'

关于跨域问题，可以使用nginx代理。