开发个好用的mock CLI工具，开发速度提升一倍：使用篇开发了Mock工具，已经开源，使用起来非常简单，欢迎各位使用，

一、前言

开发了Mock工具，已经开源，使用起来非常简单，欢迎各位使用，也欢迎参与和提出建议，欢迎点赞👍支持！

地址：github.com/richLpf/dev…

最近发现团队的小伙伴开发速度很慢，发现原因是开发完静态页面后，在等着API开发部署，老司机一般拿到文档后页面都调试的7788了。

面对接口出来慢、问题多、数据不全等问题，我们可以用mockjs来模拟接口数据返回，但效果一般，无法做到可插拔，接口配置繁琐。

当前CLI工具支持的能力：

Mock API
读取Swagger文档，并生成API接口
无需担心跨域问题，在反代理时自行在本地配置
安装方便：node环境一行指令安装/也支持Docker启动
API生成读取顺序：本地mock -> swagger -> remote api

注：当前版本仅支持返回参数的生成，不对请求参数进行校验

二、快速体验

Docker启动，当前镜像已经上传Docker hub，目前支持amd和arm架构。

docker run -d -p 9000:9000 lvpf/dev-mock-cli

启动docker容器

查看日志，即可启动

请求接口

三、配置文件解读

仅仅使用内置的API肯定是不够的，那么当前CLI提供了三种方式：

Local JSON读取：只要创建response的json文件，即可请求返回，支持Mockjs规则
读取Swagger JSON数据
读取远程API服务

mock.config.json

{
    "port": "9000",
    "type": "restful",
    "proxyApiUrl": "",
    "cors": {
      "allowedHeaders": ["Origin", "X-Requested-With", "Content-Type", "Accept", "X-Accesstoken"],
      "allowCredentials": true,  
      "maxAge": 86400
    },
    "swaggerApi": [],
    "requestPriority": ["local", "swagger", "proxy"],
    "mockFields": {
        "RetCode": {
            "fixedValue": 0
        }
    }
}

配置文件解读

字段	说明
port	启动本地服务的端口号，默认9000
type	api风格，默认restful
proxyApiUrl	读取远程API服务，只需要写入远程服务的请求地址
cors	跨域字段设置
swaggerAPI	需要生成API的swagger文档
requestPriority	API读取的优先级，匹配到后将直接返回
mockFields	特殊字段的配置，比如swagger中code是number类型，但是在实践中我们需要配置code字段为0，代表成功

swaggerAPI

字段	说明
title	swagger文档说明
type	api风格，默认restful，可以选择action
url	swagger文档的json url地址

四、API数据来源配置

1、本地mock API

启动后，我们内置了一个api作为参考，我们这里来看下如何在本地文件mock api

原理：我们以目录为api请求路径，以文件名为请求方法。

不存在路由参数的请求：

比如/v1/list/get.json，当前文件匹配的请求为Get方法，路径为/v1/list
比如/v1/list/post.json，当前文件匹配的请求为Post方法，路径为/v1/list

存在路由参数的请求：

比如/v1/list/{id}/get.json，当前文件匹配的请求为Get请求，id可以被替换成任意数字或字符串，匹配路径有：/v1/list/1 /v1/list/abc

2、对接swagger

swagger文档生成后，只需要拿到当前swagger的json文件，写入配置文件即可，然后访问对应的路由，即可生成返回参数

3、代理远程服务器API

在开发项目时，除了本地和swagger模拟的api，我们一般会有远程的api服务。

此时我们只需要在mock.config.json中配置proxyApiUrl，即可进行反向代理，在本地mock和swagger都无法匹配到路由的时候，将会请求到proxyApiUrl代理的地址。

五、在项目中使用

在项目中安装：yarn add -D dev-mock-cli

我们可以在项目根目录下新建mock.config.json

{
    "port": "9000",
    "type": "restful",
    "proxyApiUrl": "",
    "cors": {
      "allowedHeaders": ["Origin", "X-Requested-With", "Content-Type", "Accept", "X-Accesstoken"],
      "allowCredentials": true,  
      "maxAge": 86400
    },
    "swaggerApi": [],
    "requestPriority": ["local", "swagger", "proxy"],
    "mockFields": {
        "RetCode": {
            "fixedValue": 0
        }
    }
}

启动服务yarn dev-mock-cli mock，会自动在项目根目录下新建mock文件夹，并生成list/get.json，作为/listAPI的请求数据源。

当然也可以全局安装，然后随时启动yarn global add dev-mock-cli

快捷配置

将yarn dev-mock-cli写在script中，方便快速启动
将mock目录和mock.config.json写入.gitignore，不需要提交到代码仓库，当然如果多人使用也可以提交。

"scripts": {
    "mock": "yarn dev-mock-cli mock"
}

六、通过docker使用

上面我们通过docker启动，只有本地的一个API，那么如何新增API，如何配置swagger和代理远程的服务，我们继续

新建目录/data/api，在当前目录下维护本地mock数据和配置文件

docker run -d -p 9000:9000 -v /data/api/mock:/app/mock -v data/api/mock.config.json:/app/mock.config.json lvpf/dev-mock-cli

只需要更新mock文件夹下的json数据即可操作API

七、通过docker-compose使用

version: '3.8'  # docker-compose 版本

services:
  dev-mock-cli:
    image: lvpf/dev-mock-cli        # Docker 镜像名称
    container_name: dev-mock-cli
    ports:
      - "9000:9000"            # 映射本地 9000 端口到容器的 9000 端口
    volumes:
      - ./mock:/app/mock       # 将本地 ./mock 目录挂载到容器的 /app/mock
      - ./mock.config.json:/app/mock.config.json  # 挂载本地的 mock.config.json 到容器内
    restart: unless-stopped    # 保持容器运行，除非手动停止

开发个好用的mock CLI工具，开发速度提升一倍：使用篇