迅速启动本地 Mock 服务、方便快捷的模拟各种接口请求场景、模拟各种数据类型响应;
备注 1: 建议保持 Mock 数据的拟真性, 如图片尺寸、文字长短、姓名、日期、证件号码等等, 能提升理解度、美观度、也能发现 UI 的兼容性问题。
备注 2: Postman Collection: https://www.getpostman.com/collections/ae53e4a38a9de2e44b6a
- 安装 VsCode https://code.visualstudio.com;
- 打开 VsCode, 左侧菜单选择「 Extensions 」, 查找并安装 VsCode 插件:
ESLint, Prettier - Code formatter;
- 学习 mock 数据的生成规则, 需要 VPN : https://github.com/nuysoft/Mock/wiki/Getting-Started;
Step2: 配置本地 hosts 文件, 目录: /etc/hosts
127.0.0.1 localhost dev.flatjs.com
npm install -g @flatjs/cli yarnyarnflat mock
Func-simple & Func-simple-nest
// 请求体 Request
{
"protocol": {
"functionCode": "queryProductList",
"fromPlatform": "tc_app",
"userId": "785d680efb8515c71715a694fa0afe81"
},
"param": {
"page": 1,
"pageSize": 10
}
}// 响应体 Response
{
"code": "0000",
"message": "success",
"data": {}
}// Install the following devDependencies.
"@types/express": "^4.17.7",
"@types/express-mung": "^0.5.2",
"@types/http-proxy-middleware": "^0.19.3",
"@types/mockjs": "^1.0.3",
The configuration of the flatjs.mock.js as below example
baseCwd: join(process.cwd(), `packages/mock/mocks`),
apiContext: '/api',
hostname: 'dev.flatjs.com',
port: 4000,
staticMap: {
'/static': 'static',
},
mockMap: {
'/func': { type: 'FUNC', defs: ['func'], middlewares: {res: otherFuncMiddleware.forFuncApiSimpleResponse()] } },
'/rest': { type: 'REST', defs: ['rest']},
},// Tor expressjs middleware cycle
// The outer middlewares defined by user should be executed in the final phase
// e.g. Below middleware will used to simplify response for `func`
otherRestMiddleware.forFuncApiSimpleResponse();
- Both support .ts ,.js mock services.
- Provider class
MockBase as base class for all mock services
- Built in support
mockjs
- Proiders usually module
exports.
- The first scenario, auto instance class need
@Mockable() for class
@mockable()
export default class MockProductService extends MockBase {
@mockAlias("products")
geProducts(_req: MockRequest, res: MockResponse): void {
res.json({
code: "0000",
message: "func product",
data: ["https://www.flatjs.com/blog/img/flatjs_avatar.png"],
});
}
}
- The second scenario, auto instance class need
@Mockable() for class
@mockable()
export class MockCatalogService extends MockBase {
@mockAlias("catalog/list")
getCatalogs(_req: MockRequest, res: MockResponse): void {
res.json({
code: "0000",
message: "func catalogs",
data: ["https://www.flatjs.com/blog/img/flatjs_avatar.png"],
});
}
}
- The third scenario, use module.exports = new () the class decortor
@Mockable is optional
class MockUserService extends MockBase {
@mockAlias("product/list")
getUsers(_req: MockRequest, res: MockResponse): void {
res.json({
data: ["https://www.flatjs.com/blog/img/flatjs_avatar.png"],
});
}
}
module.exports = new MockUserService();export function getAds(_req: MockRequest, res: MockResponse): void {
res.json({
code: "0000",
message: "func ads",
data: ["https://www.flatjs.com/blog/img/flatjs_avatar.png"],
});
} ....
proxyMap: {
'/proxy': {
target: 'https://fex.qa.tcshuke.com',
pathRewrite: { '^/proxy': '' },
router(req) {
switch (req.query.env) {
case 'me':
return 'https://dev.flatjs.com:4000';
case 'uat':
return `https://fex.qa.tcshuke.com`;
}
return 'https://fex.qa.tcshuke.com';
},
},
},
// request `/proxy/mock/api/status/200?env=uat` ---> `https://fex.qa.tcshuke.com/mock/api/status/200?env=uat`Use multer for file upload
import { mockAlias, MockBase, MockRequest, MockResponse } from "@flatjs/mock";
import fs from "fs";
import mimeTypes from "mime-types";
import multer from "multer";
import { join } from "path";
const storage = multer.diskStorage({
destination: function (_req, _file, cb) {
fs.mkdirSync(join(__dirname, "../static/uploads"), { recursive: true });
cb(null, join(__dirname, "../static/uploads"));
},
filename: function (_req, file, cb) {
const { mimetype, fieldname } = file || {};
const extension = mimeTypes.extension(mimetype) as string;
cb(null, `${fieldname}-${Date.now()}.${extension}`);
},
});
class MockService extends MockBase {
@mockAlias("/uploadFile")
uploadFile(req: MockRequest, res: MockResponse): void {
const upload = multer({
storage,
}).any();
upload(req, res, () => {
const files = (req.files as Express.Multer.File[]) || [];
res.json({
code: "0000",
message: "upload files",
data: {
...req.body,
fieldnames: files.map(
(s) => `${this.$hostUri(req)}/static/uploads/${s.filename}`
),
},
});
});
}
}
module.exports = new MockService();Note, it we want to using import or require with cache
First we can't include this folder into mockMap of flatjs.mock.js
Second we can't use importFresh(``)
@example
mockMap: {
'/func': { type: 'FUNC', defs: ['func'], middlewares: {} },
'/rest': { type: 'REST', defs: ['rest'], middlewares: {} },
},
the `defs` config should not include any `folders` that we want to cache. 
