前言
有时候,我们写前端页面或者小程序的时候,如果有数据,我们就可以更好的进行开发,但是实际场景中,前后端是并行开发的,并没有现成的后端接口给我们用,这时候 mock 假数据的作用有显得十分有必要了。
1. 常见的 Mock 方式
日常开发过程中,有以下几种常见的 Mock 假数据的方式:
- 将模拟数据直接写在代码里
- 利用 JavaScript 拦截请求
- 利用 Charles、 Fiddler 等代理工具拦截请求
虽然这几种方式都很 实用
但是却存在以下几点问题:
- 配置、编写繁琐
- mock 的数据不够真实
- 加上容易去除难
2. 什么是 Easy Mock
Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务。
官方网站:https://www.easy-mock.com/
特性:
- 支持接口代理
- 支持快捷键操作
- 支持协同编辑
- 支持团队项目
- 支持 RESTful
- 支持 Swagger | OpenAPI Specification (1.2 & 2.0 & 3.0)
- 基于 Swagger 快速创建项目
- 支持显示接口的入参与返回值
- 支持显示实体类
- 支持灵活性与扩展性更高的响应式数据开发
- 支持自定义响应配置(例:status/headers/cookies)
- 支持 Mock.js 语法
- 支持 restc 方式的接口预览
3. 搭建 Easy Mock
因为 Easy Mock 依赖 Redis 和 MongoDB,因此本地环境使用 docker-compose 来搭建 Easy Mock 应该算是最佳实践了。
3.1. 安装 docker-compose
官方文档:https://docs.docker.com/compose/install/
首先你得确定拥有 docker 环境,如果你是 Windows / Mac 用户,那么安装客户端,就会自带 docker-compose 了。
因为本次我们是在服务器搭建,当前服务器系统是 CentOS 7,所以我们需要自行安装 docker-compose。
运行如下命令,下载当前稳定版本的 docker-compose
1
sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
修改文件权限为可执行文件
1
sudo chmod +x /usr/local/bin/docker-compose
验证是否安装成功
1
2
3
4
5$ docker-compose version
docker-compose version 1.24.1, build 4667896b
docker-py version: 3.7.3
CPython version: 3.6.8
OpenSSL version: OpenSSL 1.1.0j 20 Nov 2018
3.2. 编写 docker-compose.yml 文件
注意看文件中的注释信息,有一处 npm start 修改为 npm run dev,是因为我看了下 easy-mock 的源码 package.json 中 npm start 命令跑的是 production 模式,需要额外配置,为了简单起见,我们使用 npm run dev 直接运行 dev 模式
1 | version: '3' |
3.3. 启动 Easy Mock
在 docker-compose 文件目录下,运行如下命令:
1 | $ docker-compose up -d |
4. 配置 nginx
4.1. 编写 nginx 配置文件
1 | server { |
4.2. 测试配置文件
1 | $ nginx -t |
4.3. 重启 nginx
1 | $ nginx -s reload |
5. DNS 解析
前往云服务器对配置的域名做 DNS 解析到服务器,就大功告成了~
6. 参考
- easy mock docker 官方仓库
- easy mock 官方仓库