使用

安装

npm i nei-scene-mock --save-dev

配置参数

需要在根目录的配置文件 nsm.config.js 增加以下配置

| 名称 | 含义 | 默认值 | | :--------: | :------------------: | :------------------------------------------------------: | | neiKey | nei 项目 key | | | neiPid: | nei 项目 id | | | typeConfig | 类型存储文件 | ./type.config.js | | pathConfig | 路径存储文件 | ./nei.path.js | | commonBack | 接口失败返回 | { result: 'success', code: '200'message: 'common back' } | | mockDir | 生成的 mock 数据目录 | ./mock | | port | 服务端口号 | 8686 |

其他配合

• webpack 中需要增加 deServer 的路径跳转，比如

   // 获取端口
   const mockConfig = require('./ncm.config.js')
   // 本地配置：
   devServer: {
    clientLogLevel: 'none',
    quiet: true,
    proxy: {
      '/': {
        target: `http://localhost:${mockConfig.port}`,
        secure: false,
        changeOrigin: true,
        // eslint-disable-next-line consistent-return
        bypass: (req) => {
          if (req.url && req.url.indexOf('favicon.ico') > -1) {
            return '/favicon.ico'
          }
          const { accept } = req.headers
          if (accept && accept.indexOf('html') !== -1) {
            return '/index.html'
          }
        }
      }
    },
    // 传递给页面
    chainWebpack: (config) => {
    config.plugin('define').tap((args) => {
      args[0]['process.env'].MOCK_PORT = mockConfig.port
      return args
    })
  }

• 页面配置。从 webpack 中拿到 port 端口之后，可以按照自己的喜好在页面上增加 mock 入口了

mock 需要实现的功能

• 可以实现场景化功能，并且自定义场景 done
• 和 nei 联动，尽早知晓接口变动 done
• 避免手写 mock 数据，生成的 mock 一定要简单易读 done
• 可以连上任何场景的数据，包括线上，cookie 问题处理 todo

目前实现：

nei 数据获取，由于 nei 提供的查询接口详情数据，只有第一层数据，所以采用以下曲折方案

• 根据 nei 接口抓取项目所有的接口，并且写入文件，数据包含接口的更新信息默认为 nei.path.js
• 根据接口名称获取所有 mock 数据，并且写入文件，文件目录按照接口名称生成，此处的 mock 数据，如果是枚举，默认值需要写成@+枚举名称
• 获取 nei 所有枚举类型，并且写入文件，默认为 type.config.js

mock 数据设置

• 页面数据设置，请求之后存入内存，包含页面的枚举选择以及模板
• 接口请求的时候，先获取文件内容，然后通过内存枚举转换，再实际输出到页面
• 只要 mock 服务不重启，那么数据状态全局保留，做到真正的类似后端