分享一款自己做的前后端接口文档管理及数据模拟的工具软件

[xiayudashan]

前后端分离的常见开发方式是：

后端：接收 http 请求->根据请求 url 及 params 处理对应业务逻辑->将处理结果序列化为 json 返回

前端：发起 http 请求并传递相关参数->获取返回结果处理相关逻辑

分离的主要目的是让前后端可以并行的进行工作，彼此之间只需要依赖一份接口文档

接口文档可能会使用一些文本工具进行记录，例如 word，excel 等

其中记录的内容可能为请求路径，请求类型，请求参数，响应参数，请求示例，响应示例，变更记录等

不过以上方式还存在那么一点不完美，那就是前端需要等待后端开发完接口才能有数据进行测试在此之前只能先画页面

这就有可能造成前端要等后端的情况，使工作变为串行

因此我想能否有办法可以消除这种情况，让前端不必等待后端

经过一段时间的摸索，我想可以做一个 mock server 来模拟前端需要的数据

当前端请求某个 url 时，mock server 会在其数据库中进行查询，匹配到这个 url 后就返回默认或者用户自定义的模拟数据

这样一来前端就可以在不依赖后端的情况下拿到数据进行测试了

但如果只是仅仅依赖 mock server，那么一些已开发的接口将无法得到正常的请求

那么问题就又变成了如何使正常接口与 mock 接口共存

很容易想到的就是使用 nginx 反向代理，将未开发完的接口匹配到 mock server，剩余的接口匹配正常程序

所以前端开发时自己启动一个 nginx，然后需要 mock 什么接口自己去配置即可

但是。。。。当接口很多时，前端得自己手动去配置 nginx，还要在对 nginx 进行重启等等操作，很繁琐

为了解决这个问题我又想能不能让这一切自动化的去完成

有一个客户端程序，自动的对 nginx 进行相关配置并启动 nginx，将开发中的接口转发给 mock server，将其余接口转发给正常程序

显然这个思路是可行的，为了让程序好用，客户端制作成了 GUI，并且打包成了 exe，使以上 nginx 配置步骤变为一键操作

https://github.com/github20120522/docdoc

https://github.com/github20120522/docdochelper

不知道大家是否也是类似的开发模式，有没有类似需求，希望这款工具能有所帮助

[xuanli]

star 下

[xiayudashan]

对比同类型的 api 管理软件，大部分需要注册帐号，需要在别人的服务器上使用，这点是很令人费解的，这就相当于把自己的接口详细信息告诉给第三方软件
docdoc 采用 java 开发其中用到了 vertx，h2，spring 等技术，由于 h2 是内存数据库所以对于运行环境仅只有 jre8 的要求，为了方便使用打包成了 docdoc.exe ，但完全可以自己下载源码然后使用 mvn package 编译出 fat jar 后执行 java -jar 来运行
dochelper 由于代码里耦合了 nginx.exe ，所以只能在 windows 上去运行，但也可以通过修改源码使其在 mac 等系统上运行，本质都是 java -jar

[xiayudashan]

举例来说：
docdoc server 上配置了一个 url /category/daily 其状态为开发中，配置其响应数据为 [默认每日聚焦] （注：可以是任意数据，html，json，xml 等），通过 docdoc server 所在地址访问这个 url http://localhost:9981/category/daily 将会得到配置的响应数据 [默认每日聚焦] ，每个用户还可以设置自定义的响应数据，满足多个前端各用各的模拟数据的需求

dochelper 本质上就是从 docdoc 上拉取配置，然后配置 nginx 启动 nginx，配置完的 nginx 大致如下面这样

helper-nginx.conf

worker_processes 2;

events {
worker_connections 1024;
}

http {
upstream program_server {
server www.chuapp.com;
}
upstream mock_server {
server 192.168.1.21:9981;
}

index index.html index.htm index.php;
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;

server {
listen 80;
server_name localhost;
root html;

location / {
proxy_redirect off;
proxy_set_header Host www.chuapp.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffers 32 4k;
proxy_pass http://program_server;
}

location /category/daily {
proxy_redirect off;
proxy_set_header Host 192.168.1.21:9981;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header owner fz;

client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffers 32 4k;
proxy_pass http://mock_server;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}

[aaa5838769]

GET

[zephyru]

实际..区分是否为开发完的接口用 webpack 就能区分呀...用的上 nginx 么？...
开发完的接口,webpack 自动转发到线上环境去..
在 url 里加上 /test/前缀自动转发去 mock 地址...
开发完把 url 里的 /test/删掉就完了...
第三方的比如 rap 什么的自己公司里面布一套也不费事...
真的前后端分离的话，这个需求已经用 webpack 就解决了..还简单，还方便

[xiayudashan]

@zephyru
一些区别就是 mock 接口完全和文档一样，开发完不需要整体删除 /test 了
docdoc 既是管理 api 的工具也是提供 mock 数据的工具，当接口开发完成后将 docdoc 里面的接口状态从开发中改为其他状态后，30 秒后 dochelper 就会更新同步下最新的 mock 接口，那时再请求这个接口就会直接走程序地址了
第三方的怎么说呢，把自己的接口数据给到别人我还是觉得不安全
最后我一直是做后端开发的，webpack 这种确实没用过也不会用。。。所以我就用我所熟悉的方式做了这样的算是通用一点的 mock server

[CodeDeer]

zan-proxy 了解一下

[xiayudashan]

@zephyru
第三方的 rap 部署一套，这个没看清楚，还以为是直接去用
我之前也找过第三方的，但发现都需要账号然后在别人服务器上调用，所以就没做考虑
docdoc 也算是我遇到这个问题并想办法解决的一个结果吧
分享出来也是想和大家交流一下经验和思路，顺便如果能有帮助就更好了

[xiayudashan]

@CodeDeer
这个功能就太强大了。。
看手机流量我一般用的是 charles，看了你发的 zan-proxy，发现它就能实现流量拦截，以前我觉得拦截流量肯定很难实现，看到这个 zan-proxy 实现了，突然觉得是不是只要是个 web server 就可以了？然后我就试了一下果然是这样。。
那 web server 再做个证书装手机上理论上应该和 charles 一样也可以拦截 https 了

[wwek]

yapi