# 一、云端 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.tgznode-v16.18.0-linux-x64.tar.xzredis-5.0.8.tar.gz

其他环境 git-2.38.1.tar.gznginx-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.0cnpm@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 的优势就体现出来了)

更新于 : 7/8/2024, 10:21:14 AM