mock 开源工具 (SSM+Nginx+shell)

开发背景

工作中经常出现前端开发和后端开发并行的情况,为了帮助前端开发早些进行调试,我们测试有时会协助提供接口的 mock 服务。

那么接下来就是 mock 框架的选择,之前选用的是 moco,但是 moco 的缺点是每个 mock 服务都需要新起一个服务,也就占用了一个端口,一次性使用还好,如果一次需要制作很多,就会存在不少问题(例如 mock 机器本身由于启动过多 moco 带来的性能问题、数据维护不便等)。

于是我就做了这个。

使用说明

demo(由于使用的阿里云主机且没有备案,可能会存在问题,建议大家使用自己的服务器):http://139.224.165.210:8080/mock-open/page/mock,139.224.165.210 就可以查看效果了~创建完把域名指向

github:https://github.com/RookieTester/mock-open

新增 mock 在 web 界面进行操作:

图片.png
填写完信息后,点击 URL 填写框旁边的 “确认添加” 按钮即可完成。

成功后会弹窗提示,失败也会有相应提示。

成功例子:

图片.png
失败例子:
(何为重复在注意事项里会提到)
图片.png

也支持状态码的定制,可以设计该 mock 接口只返回指定的状态码:
图片.png
成功添加后,可以看到状态码确实是 400
图片.png

页面的下方是搜索框,用的是 jqgrid 表格框架,支持按 URL 和名称查询两种查询方式:
图片.png

配置方法

环境要求

Linux 主机一台(Windows 版正在开发,时间嘛就不提了),需要安装 Nginx,MySQL 和 tomcat。MySQL 和 tomcat 可以安装在 Windows。

服务端配置方法:

yum/apt-get install nginx #安装Nginx
cd /etc/nginx/conf.d #使用上述方式安装Nginx的话,这里就是Nginx server模块的配置文件目录
###将下面的内容粘贴进去
###begin
vi default.conf
#
# The default server
#


server {
    listen       80;
    server_name  app.api.com;
    root         /usr/share/nginx/html;
    index        index.html;
    charset      utf-8;
    include /etc/nginx/conf.d/mock/http/*.conf;
}
###end
:wq  #保存并退出

mdkir mock
cd mock
mkdir http
mkdir https
mkdir shell
cd shell
rz auto_domain.sh #rz是上传文件,也可以用别的方式上传,只要是这个位置就行。shell,用于添加虚拟域名
rz auto_mock.sh #shell,用于添加location
rz change_json.sh #shell,用于某个mock更新Json数据
service nginx reload #因为使用上述方法安装Nginx后会自动启动服务,这里只需要reload一下服务即可

上面用到的 shell 可以在源代码下找到,路径为 src/main/resouces/shell。

MySQL 配置

新建一个数据库,名为 server,当然你也可以改名字。然后执行 src/main/resources/sql/schema.sql 里的语句即可创建好需要的表结构。最后修改源代码的数据库连接配置文件 jdbc.properties。

Linux 连接设置

web 服务需要连接 Nginx 所在的 Linux 服务器,配置文件在 src/main/resources/mock.properties

客户端配置

把源代码中的配置文件修改好以后,使用 IDE(推荐 eclipse 或 idea)将服务部署在 tomcat 即可。
或者编译完源代码,自己放在 tomcat 的服务目录(webapps)下启动。
最后通过http://ip:8080/page/mockweb 页面。访问

注意事项

设计与编码

前端展示使用 bootstrap,后端是 SSM(SpringMVC+Spring+mybatis)。代码不复杂,前端页面调用 ajax 向后端发送请求,后端会对 mock 服务端(一台 Linux 机器)建立连接并发送命令,该命令会调用 Linux 主机上的 shell 脚本,对 Nginx 的配置文件进行操作,成功后重启 Nginx,最后将记录写入数据库。

架构图:

架构.png


↙↙↙阅读原文可查看相关链接,并与作者交流