br-qstart

根据 YApi 接口文档快速创建 Typescript 接口定义及对应 mock 数据

使用

1. 安装

yarn add br-qstart -D

2. 初始化配置文件

yarn br-qstart init

配置文件默认生成在根目录 qs.config.json

配置文件说明

注：🚧项目 id(project.1) 跟 token(projec.token) 需要根据实际 Yapi 进行替换

{
  // Yapi 项目信息
  "project": {
    // 1 是项目 id，可从 Yapi 接口地址获取 例：http://10.241.70.1:3000/project/1/interface/api/25289  url 1 就是项目 id
    "1": {
      // 项目名称
      "name": "api1",
      // 项目 token 可以在 Yapi 项目 - 设置 - token 配置查看
      "token": "token",
      // 后端接口返回数据格式映射
      // 可以不用配置。如后端接口返回 {resData: {}}，需要配置 responseDataFieldName: {data: "resData"}
      "responseDataFieldName": {
        "data": "data",
      },
    }
  },
  // ts 类型输出路径
  "outPath": "_qsTypes",
  // mock 配置
  "mock": {
    // mock api 基础路径, 默认 '/mock'
    "base": '/mock'
  },
  // 生成类型默认使用 interface 定义，genType = true 使用 type 定义
  /**
  * genType = false
  * interface T {
  *
  * }
  * ===================
  * genType = true
  * type T = {
  *
  * }
  */
  "genType": false
}

3. 生成 TS 定义文件

配置文件配置完成，执行：

yarn br-qstart

注意！ 🚧🚧🚧复制对应接口的浏览器 url(例：http://10.241.70.1:3000/project/153/interface/api/25289） 地址到终端交互项，按回车，自动生成 types 文件到指定目录

Mock

br-qstart 生成 ts，会自动在根目录 mock/**， 根据 api 接口路径生成 mock 文件。 例：/appSystemAnalysis/appList，生成的文件路径 mock/appSystemAnalysis/appList.json。

暂不支持 RESTful api。

启动 mock 服务

yarn br-qstart mock

mock 服务启动后就可以访问 mock 接口，接口路径 = 配置文件 mock.base（默认 /mock) + 根据根目录 mock 目录下的 json 文件确定。

例:

| 配置文件 mock.base | 文件路径 | api | | ---------------- | ------ | ---------| | '/mock' | {root}/mock/user/info | 'http://localhost:8088/mock/user/info' | | '/mock' | {root}/mock/api/user/info | 'http://localhost:8088/mock/api/user/info' | | '/m/api' | {root}/mock/user/info | 'http://localhost:8088/m/api/user/info' |

可以配合 webpack-dev-server proxy 配置特定 mock 服务转发

mock 数据

生成的 mock 文件, 使用 mockjs 语法，可以自行查看。

因为 Yapi 获取只有最基本的 Object, Array, Number, String, Boolean, 所以 mock 数据包括：

• Array：默认生成 1-10 个数组
• String：随机生成 1-20 长度，小写英文字母字符串
• Number：随机生成正整数，范围 1-10000

同时扩展了时间戳随机数，用法如下：

{
    "time": "@timestamp"
}