mock工具 | 任先生的笔记库

# 一、云端 Mock 方案 🎈

在真实的项目开发中：

前后端项目：

后端：Swagger（文档） + Postman（调试 --> 后端）

纯前端项目：

前端：mock 服务 / easy mock

# 1、项目级别

如果是项目级别的 Mock 需求，那还是建议：

在项目中集成 Mock 服务
自己部署 easy-mock

# 2、接口级别

如果仅仅是对某些单个接口级别的模拟场景，建议使用：

Apifox 的云端 Mock 功能
postman 的 mock server 功能

上述工具的功能，其实类似于云端的 json-server：

json-server

本地 node 服务器

json-server 是一个 Node 模块，会在本地运行 Express 服务器，根据 json 文件快速生成 api 接口。

安装：

npm install json-server -g

使用：

json-server (opens new window) 包：可以基于一个 json 文件创建多个后端模拟接口

json-server .\data.json --watch

{
  // 接口1
  "users": [
    {
      "id": 1,
      "username": "lencamo"
    },
    {
      "id": 2,
      "username": "lencamo"
    }
  ],
  // 接口2
  "list": ["1111", "2222", "3333"]
}

访问

http://localhost:3000/users
http://localhost:3000/list

如果仅仅是需要一个简单的 ajax 请求接口完全可以使用在线的 jsonplaceholder。

# 二、easy-mock

# 1、基本概述

easy-mock 是一个纯前端可视化，能快速生成模拟数据的持久化服务，简单易用还能结合 swagger，天然支持跨域，不管团队还是个人项目都值得一试。

提示

easy-mock 相当于一个私有化的云端 mock 工具

由于 easy-mock 提供的线上免费服务很不稳定，时不时的就会挂掉，如果有需要的可以自己按照它的教程，搭建自己的服务。

优点

由于 easy-mock 挂在服务器上的，所以直接挂上接口基地址就可以了。

easy-mock 的优点就是快捷，并且让项目中不在有 mock 文件的存在（一个字：爽）。

下面演示一下常规的 easy-mock 部署步骤（也可以使用 docker-compose 部署），先看看我自己的环境配置：

官方环境要求

在开始之前，我们假设你已经安装了 Node.js（不支持 v8.x，v10.x）&MongoDB（>= v3.4）和 Redis（>= v4.0）。

项目环境： mongodb-linux-x86_64-rhel70-4.2.23.tgz、node-v16.18.0-linux-x64.tar.xz、redis-5.0.8.tar.gz

其他环境 git-2.38.1.tar.gz、nginx-1.17.10.tar.gz

# 2、本地测试 *

（可以跳过 😂）

下载 easy-mock：

github 地址：easy-mock (opens new window)

git clone git@github.com:easy-mock/easy-mock.git

cd easy-mock && cnpm install # 注意由于部分包版本较低，所以使用cnpm🍗安装包

项目配置文件：

查找 config/default.json 或创建 config/local.json 以覆盖一些配置。

核心内容（根据自身进行配置）

{
  "port": 7300,
  "host": "localhost",
  "pageSize": 30,
  "proxy": false,
  "db": "mongodb://服务器ip:27017/easy-mock",
  "unsplashClientId": "",
  "redis": {
    "keyPrefix": "[Easy Mock]",
    "port": 6379,
    "host": "服务器ip",
    "password": "redis密码",
    "db": 0
  }
}

本地连接测试：

$ npm run dev
# Visit http://127.0.0.1:7300

# 3、部署上线

提示

个人本地成功的版本：npm@8.16.0、cnpm@7.1.0

当然我自己的服务器已经提前安装、配置了 git。

下载、安装

cd /www/wwwroot
git clone https://github.com/easy-mock/easy-mock.git

npm i -g cnpm --registry=https://registry.npm.taobao.org
# 注意由于部分包版本较低，所以使用cnpm🍗安装包
cd easy-mock && cnpm install

文件配置

配置 config 文件夹下的文件（和上面一样即可）👀

启动项目

# 1、开发环境启动（看看有没有报错信息）
$ npm run dev

# 2、打包线上环境启动
# Build front-end assets
$ npm run build

# Run Easy Mock as production environment (You should run `build` first)
$ npm run start

ngix.conf 代理

server {
    listen 80;  # 监听 80 端口
    server_name localhost;

    location / {
      root   /www/wwwroot/easy-mock;
      index  index.html index.htm;

      proxy_pass http://localhost:7300/; # 因为前面项目的host为localhost
    }
}

pm2 管理（后台守护模式）

npm install pm2@latest -g

cd /www/wwwroot/easy-mock
NODE_ENV=production pm2 start app.js --name easy-mock

pm2 status

# 开启自启动设置
pm2 save
pm2 startup
pm2 save

访问

http://服务器ip

# 三、Apifox ✨

Apifox = Swagger（文档） + Postman（调试 --> 后端） + Mock（模拟 --> 前端） + JMeter（压力/自动化测试）

提示

什么也不用说，一句话：真香！！！

# 1、api 文档

Apifox 可以用于 api 文档的编写、管理

swagger (opens new window)是一个 REST APIs 文档生成工具，它从代码注释中自动生成文档（后端常用）

# 2、接口测试/mock

Apifox 可以对某些接口进行 mock、测试

如果仅仅需要的 api 测试、云端 mock、文档生成等需求的话，postman 和 Apifox 没什么区别。

# 3、优势劣势

优势：

但是往细了说的话，Apifox 更为强大，并且由于是国产的所以使用体验上更加友好。

劣势：

无论 postman 还是 Apifox，其云端 mock 都是公开的（此时 easy mock 的优势就体现出来了）

← Mock服务方案 Token处理 →