docs: 优化 mock.js 文档 (#129)

This commit is contained in:
qlin 2022-06-15 16:15:07 +08:00 committed by GitHub
parent cd950ac3e0
commit c628ec236c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 46 deletions

View File

@ -7,6 +7,7 @@ Mock 数据是前端开发过程中必不可少的一环,是分离前后端开
Fes.js 约定 `./mock.js` 为 mock 文件。 Fes.js 约定 `./mock.js` 为 mock 文件。
比如: 比如:
``` ```
. .
├── mock.js ├── mock.js
@ -18,39 +19,46 @@ Fes.js 约定 `./mock.js` 为 mock 文件。
## 编写 Mock 文件 ## 编写 Mock 文件
可以参考如下 🌰: 可以参考如下 🌰:
``` js
```js
export default function ({ cgiMock, mockjs, utils }) { export default function ({ cgiMock, mockjs, utils }) {
const { Random } = mockjs; const { Random } = mockjs;
// 测试 proxy 与 mock 用例集合 // 测试 proxy 与 mock 用例集合
cgiMock('/movie/in_theaters_mock', (req, res) => { cgiMock('/movie/in_theaters_mock', (req, res) => {
res.send(JSON.stringify({ res.send(
JSON.stringify({
code: '0', code: '0',
msg: '', msg: '',
result: { result: {
text: 'movie: movie/in_theaters_mock ~~~~~' text: 'movie: movie/in_theaters_mock ~~~~~',
} },
})); }),
);
}); });
cgiMock('/movie/test_mock', (req, res) => { cgiMock('/movie/test_mock', (req, res) => {
res.send(JSON.stringify({ res.send(
JSON.stringify({
code: '0', code: '0',
msg: '', msg: '',
result: { result: {
text: 'mock: movie/test_mock' text: 'mock: movie/test_mock',
} },
})); }),
);
}); });
// 测试用例: mock.js change重现请求需要能拉最新的数据 // 测试用例: mock.js change重现请求需要能拉最新的数据
cgiMock('/watchtest', (req, res) => { cgiMock('/watchtest', (req, res) => {
res.send(JSON.stringify({ res.send(
JSON.stringify({
code: '0', code: '0',
msg: '', msg: '',
result: { result: {
text: '通过 register 测试 mock watch: 初始状态' text: '通过 register 测试 mock watch: 初始状态',
} },
})); }),
);
}); });
// 返回一个数字 // 返回一个数字
@ -61,17 +69,23 @@ export default function ({ cgiMock, mockjs, utils }) {
cgiMock({ cgiMock({
url: '/json', url: '/json',
result: { result: {
code: '400101', msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String", transactionTime: '20170309171146', success: false code: '400101',
} msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String",
transactionTime: '20170309171146',
success: false,
},
}); });
// 利用 mock.js 产生随机文本 // 利用 mock.js 产生随机文本
cgiMock('/text', Random.cparagraph()); cgiMock('/text', Random.cparagraph());
// 返回一个字符串 利用 mock.js 产生随机字符 // 返回一个字符串 利用 mock.js 产生随机字符
cgiMock('/random', mockjs.mock({ cgiMock(
'string|1-10': '★' '/random',
})); mockjs.mock({
'string|1-10': '★',
}),
);
// 正则匹配url, 返回一个字符串 // 正则匹配url, 返回一个字符串
cgiMock(/\/abc|\/xyz/, 'regexp test!'); cgiMock(/\/abc|\/xyz/, 'regexp test!');
@ -98,20 +112,21 @@ export default function ({ cgiMock, mockjs, utils }) {
headers: { headers: {
'Content-Type': 'text/plain', 'Content-Type': 'text/plain',
'Content-Length': '123', 'Content-Length': '123',
ETag: '12345' ETag: '12345',
}, },
cookies: [ cookies: [
{ {
name: 'myname', value: 'kwan', maxAge: 900000, httpOnly: true name: 'myname',
} value: 'kwan',
] maxAge: 900000,
httpOnly: true,
},
],
}); });
// 携带参数的请求 // 携带参数的请求
cgiMock('/v2/audit/list', (req, res) => { cgiMock('/v2/audit/list', (req, res) => {
const { const { currentPage, pageSize, isAudited } = req.body;
currentPage, pageSize, isAudited
} = req.body;
res.send({ res.send({
code: '0', code: '0',
msg: '', msg: '',
@ -135,9 +150,9 @@ export default function ({ cgiMock, mockjs, utils }) {
handleTag: '已采纳', handleTag: '已采纳',
postType: 'voice', postType: 'voice',
postStatus: isAudited ? 'pass' : 'auditing', postStatus: isAudited ? 'pass' : 'auditing',
auditStatus: 'audit1' auditStatus: 'audit1',
})) })),
} },
}); });
}); });
@ -145,37 +160,47 @@ export default function ({ cgiMock, mockjs, utils }) {
cgiMock('/v2/upload', (req, res) => { cgiMock('/v2/upload', (req, res) => {
res.send({ res.send({
code: '0', code: '0',
msg: '文件上传成功' msg: '文件上传成功',
}); });
}); });
}; }
``` ```
### cgiMock 参数 ### cgiMock 参数
创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。 创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。
### mockjs 参数 ### mockjs 参数
[Mock.js](http://mockjs.com/) 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。 [Mock.js](http://mockjs.com/) 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。
比如: 比如:
```js ```js
export default function ({ cgiMock, mockjs, utils }) { export default function ({ cgiMock, mockjs, utils }) {
cgiMock('/random', mockjs.mock({ cgiMock(
'string|1-10': '★' '/random',
})); mockjs.mock({
'string|1-10': '★',
}),
);
} }
``` ```
### utils 参数 ### utils 参数
工具函数: 工具函数:
- utils.file(path)从项目根目录根据path寻找文件返回文件流。
- utils.file(path),从项目根目录根据 path 寻找文件,返回文件流。
## 配置 Mock ## 配置 Mock
详见配置 [mock](../reference/config/#mock)。 详见配置 [mock](../reference/config/#mock)。
## 关闭 Mock ## 关闭 Mock
可以通过配置关闭。 可以通过配置关闭。
```js ```js
export default { export default {
mock: false, mock: false,

View File

@ -133,7 +133,7 @@ export default {
}; };
``` ```
然后所有以 `/api/users` 开始的请求,就能进入 mock.js 文件处理。 然后所有以 `/api/users` 开始的请求,就能进入 mock.js 文件处理[mock.js 示例](../../guide/mock)
### mountElementId ### mountElementId