为开发环境快速搭建koa服务器,只需要一个mock模板文件即可。
脚本将启动本地服务器,然后匹配mock模板内的url返回对应的数据
# 全局安装
npm i @shymean/mock-server -g
# 快速启动mock服务器
mock -p 9999 -f ./_mock.js
参数说明
- port,服务器端口号,默认7654,简写 -p
- file,mock模板文件路径,默认
./_mock.js
,简写 -f
使用该工具只需要准备一个mock模板文件,其语法参考
- 内部使用@shymean/koa-mock`,这是一个快速搭建koa的mock服务器的中间件
- mock模板使用mockjs语法,并扩展了相关的功能
其使用方式与mockjs基本类似
Mock.mock(url, template)
Mock.mock(url, method, template)
// _mock.js
// 对应的rurl会被中间件拦截,并返回mock数据
// ANY localhost:9999/
Mock.mock('/', {
data: [],
msg: "hello mock",
"code|1-4": 1,
})
// 可以mock指定的请求方法
// POST localhost:9999/test
Mock.mock('/test', 'POST', {
data: [],
msg: "hello mock",
"code|1-4": 1,
})
// 扩展rtype,支持jsonp形式,使用param传入对应的回调名
// GET JSONP localhost:9999/test
Mock.mock('/test', {
type: 'jsonp',
param: 'callbackName'
},{
code: 0,
msg: 'hello from mock jsonp',
data: {
"id|1000-9999": 1,
}
})
// 默认回调名称 callback
Mock.mock("/test2", "jsonp", {
code: 0,
msg: "hello from mock jsonp2",
data: {
"id|1000-9999": 1,
}
});
有时候某个相同的url请求,根据业务参数需要返回不同的模拟数据,因此提供了自定义匹配请求url的功能,需要在模板文件中实现Mock.parseUrl
方法即可,该方法返回一个用于匹配的rurl
Mock.parseUrl = function(ctx){
// ctx为koa上下文对象
return 'someUrl'
}
Mock.mock('someUrl', {code: 0})
在某些时候需要根据请求详情(如请求参数、cookie等)返回不同的模拟数据,因此提供了函数模板,其中Koa
请求上下文将通过参数的方式注入
Mock.mock(/auth/, (ctx) => {
let {uid} = ctx.query
if (uid) {
return {
code: 200,
msg: 'success',
data: {
uid
}
}
} else {
return {
code: 401,
msg: 'no uid',
}
}
})
注:该功能看起来与上面提供的parseUrl
方法比较类似,但区别在于:parseUrl
主要用于批量指定解析rurl的模式,而函数模板主要用于针对单个url的请求动态返回模拟数据
由于内部使用eval
执行模板文件,因此在模板文件中使用require
导入的其他模块(如很大一段JSON模拟数据)路径可能存在问题,
解决办法是使用process.cwd()
+path.resolve
显式指定模块路径
const path = require('path')
let list = require(path.resolve(process.cwd(), './example/list.json'))
Mock.mock(/list/, {data:list})
因此,工具内置了Mock.loadModule
方法,用于导入其他模块
let list = Mock.loadModule('./example/list.json')
Mock.mock(/list/, {data:list})
为了避免在业务代码中使用localhost域名,最佳实践方案是开发时将业务域名(如xxx.test.com
)指向本地
127.0.0.1 xxx.test.com
然后通过nginx配置反向代理到mock服务器
server {
listen 80;
server_name xxx.test.com;
# wireless_j项目中的活动接口
location /j/cn/control/api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:9999; # mock -p 9999 指令启动的服务器的端口号
}
}
- 与mockjs浏览器端共用同一套mock模板,方便迁移和代码维护
- 支持jsonp请求
- 数据模板热更新,修改模板文件后,将自动重启服务器
- 根据请求信息,动态返回模板数据
- 支持映射本地文件,比如样式表、图片等