前言
有时候,我们写前端页面或者小程序的时候,如果有数据,我们就可以更好的进行开发,但是实际场景中,前后端是并行开发的,并没有现成的后端接口给我们用,这时候 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
-
首先你得确定拥有 docker 环境,如果你是 Windows / Mac 用户,那么安装客户端,就会自带 docker-compose 了。
-
因为本次我们是在服务器搭建,当前服务器系统是 CentOS 7,所以我们需要自行安装 docker-compose。
-
运行如下命令,下载当前稳定版本的 docker-compose
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 -
修改文件权限为可执行文件
sudo chmod +x /usr/local/bin/docker-compose -
验证是否安装成功
$ 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 模式
version: "3"
services:
mongodb:
image: mongo:3.4.1
volumes:
# /apps/easy-mock/data/db 是数据库文件存放地址,根据需要修改为本地地址
- "/apps/easy-mock/data/db:/data/db"
networks:
- easy-mock
restart: always
redis:
image: redis:4.0.6
command: redis-server --appendonly yes
volumes:
# /apps/easy-mock/data/redis 是 redis 数据文件存放地址,根据需要修改为本地地址
- "/apps/easy-mock/data/redis:/data"
networks:
- easy-mock
restart: always
web:
image: easymock/easymock:1.6.0
# easy-mock 官方给出的文件,这里是 npm start,这里修改为 npm run dev
command: /bin/bash -c "npm run dev"
ports:
- 7300:7300
volumes:
# 日志地址,根据需要修改为本地地址
- "/apps/easy-mock/logs:/home/easy-mock/easy-mock/logs"
networks:
- easy-mock
restart: always
networks:
easy-mock:
3.3. 启动 Easy Mock
在 docker-compose 文件目录下,运行如下命令:
$ docker-compose up -d
4. 配置 nginx
4.1. 编写 nginx 配置文件
server {
listen 443;
server_name mock.xkcoding.com; # 监听的域名
client_max_body_size 5G; # 突破上传大文件限制
ssl on;
ssl_certificate xxxxxx.pem; # https 的 pem 文件
ssl_certificate_key xxxxxx.key; # https 的 key 文件
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:7300;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
}
}
server{
listen 80;
server_name mock.xkcoding.com; # 监听的域名
rewrite ^(.*)$ https://$host$1 permanent; # 强制 非https 跳转到 https
}
4.2. 测试配置文件
$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
4.3. 重启 nginx
$ nginx -s reload
5. DNS 解析
前往云服务器对配置的域名做 DNS 解析到服务器,就大功告成了~