1.0.4 • Published 2 years ago
nei-scene-mock v1.0.4
使用
安装
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 服务不重启,那么数据状态全局保留,做到真正的类似后端