目录文件管理

对于一个前端项目，使用良好的 mock 目录结构组织管理方案，更有助于我们对mock接口数据的管理。

目录与文件命名

微服务架构是当前后端服务采用的主流架构，后端通过 服务名+接口地址 的形式提供接口给到前端进行调用。在这种场景下，为能够直观的与后端的微服务架构能够有清晰的映射关系，在 mock 目录下，也应该采用类型的目录结构，划分目录进行管理。

比如，在一个电商类的项目中，后端提供了：

商品服务：提供了商品列表、商品详情等接口；
搜索服务：提供了关键字搜索、条件筛选等接口；
订单服务：提供了订单列表、订单详情等接口；
支付服务：提供了支付、取消支付等接口；

相对应的，我们的 mock目录，也应根据服务名来划分目录：

./mock
├── goods
├── search
├── order
└── payment

对于单服务下的接口，推荐采用一个接口一个文件的形式进行管理：

├── goods
│   ├── list.mock.ts
│   └── detail.mock.ts
├── search
│   ├── keywords.mock.ts
│   └── filters.mock.ts
├── order
│   ├── list.mock.ts
│   └── detail.mock.ts
└── payment
    ├── payment.mock.ts
    └── cancel.mock.ts

这样做的好处，能够直接通过目录名和文件名，快速找到对应的接口，方便新建、修改配置内容。

同接口入参不同响应不同

对于某些场景，需要对同一个接口，根据不同的请求体内容，返回不同的响应内容。

如果仅需要对同一个接口区分不超过3种请求体，那么建议直接写在同一个接口文件中进行管理。由于插件支持返回一个数组形式的 Mock 配置，所以可以很轻松的在同一个文件中处理这种情况：

export default defineMock([
  {
    url: 'api/goods/list',
    validator: {
      query: { page: 1 },
    },
    body: { page: 1, result: [] }
  },
  {
    url: 'api/goods/list',
    validator: {
      query: { page: 2 },
    },
    body: { page: 2, result: [] }
  }
])

又或者，数组的形式不能够使开发者清晰的区分差异，那么也可以通过具名变量导出的方式，在同一个mock文件中处理：

export const appleGoods = defineMock({
  url: 'api/goods/detail',
  validator: {
    query: { id: 'apple' }
  },
  body: { goodsName: 'apple' }
})

export const bananaGoods = defineMock({
  url: 'api/goods/detail',
  validator: {
    query: { id: 'banana' }
  },
  body: { goodsName: 'banana' }
})

请放心，插件内部同样对处理具名变量导出的方式。

如果需要对同一个接口区分超过3种或以上请求体，如果都写在同一个文件中，那么可能导致单文件内容过长，反而不容易直观的进行管理，在这种场景下，建议再进一步的细化目录，使用以接口名作为目录，以入参的关键词作为文件名：

./mock
├── goods
    ├── list.mock.ts
    └── detail
        ├── apple.mock.ts
        └── banana.mock.ts

目录文件管理 ​

目录与文件命名 ​

同接口入参不同响应不同 ​

目录文件管理

目录与文件命名

同接口入参不同响应不同