mock-leason
简单node服务器,在前后端分离开发中,模拟 HTTP 接口数据和静态资源服务器
,方便前端调试开发。
工具说明
前后端开发协作的过程中,为了不依赖于后端环境,我们常常会和后端童鞋定好接口,然后采用前后端分离的开发模式。为了提高前后端开发效率,前端需要自行模拟数据,因此此工具基于node.js和 express.js 实现,仅需要对配置文件进行修改。
开始
- 环境要求
nodejs 和 npm
- 获取工具
- 依赖安装
项目目录下npm install
- 启动服务
npm start 或者bin目录下run www文件
配置文件
配置文件可以是config目录下所有.js文件,但是文件必须按照给出的example.js为模板。形如:
module.exports = function (mock) {
return [{
url: '/admin',
action: 'GET',
result:{name: 'json test'}
}];
};
显然,每个文件中可以配置多个规则,分文件好处是可以以文件去区分项目模块,方便管理。
-
最简单的接口
// 简单get请求示例 { url: '/simple', action: 'GET', result: {name: 'json test'} }
-
自定义返回内容
自定义返回内容不仅,可以对返回内容进行完全定制,还可以对请求的数据进行判断验证。如:
// 登录模拟示例 { url: '/login', action: 'POST', result: function (req, res) { //POST方法req.body获取请求信息 if (req.body.name === 'admin' && req.body.password === 'admin') { res.send({"msg": "登录成功!","code": 0,"authorization":"fdjflsjflfds4f5df5s4f5d4f5s"}); }else { res.send({"msg": "账号或者密码错误!", "code": 1}); } } }
-
直接返回json文件
对于有些返回数据量非常大的,将返回数据直接写在config里面会非常难看,这时就可以使用返回json文件的方法,如:
//返回json文件中的内容示例 { url: '/json', action: 'GET', result:mock.json('./json/test.json') }
-
返回mock模拟的数据
对于有些需要返回不规则的模拟数据,可以按照mockjs语法编写json文件然后在配置文件中调用mock.mock()方法,如:
//返回mock规则中的内容示例 { url: '/admin1', action: 'GET', result:mock.mock('mock/test.json') }
mock.mock(url,page,limit)有三个参数url为mock路径,page是分页页码,limit每页条数。
-
设置headers,cookies等等
如果某些请求需要设置headers,cookies可以配置如下:
// 设置headers,cookies等等 { url: "/list", action: 'GET', result: function (req, res) { // 获取请求头内容 console.log(req.get('Content-Type')); console.log(req.get('authorization')); if(req.get('authorization') != "authorization"){ res.send({"msg": "会话超时,请重新登录","code": 1}); }else{ //POST方法req.body获取请求信息 res.send(mock.mock('mock/test.json', page=req.param('page'), limit=req.param('limit'))); } }, //设置Content-Type为json or text type: 'text', // 设置请求头 headers: { authorization: "sjhfdihfishfhs454154154fsf" }, //设置cookies cookies: [ {name: 'ssid', value: 'shfdishixls', maxAge: 900000, httpOnly: true} ] }
模拟数据json
建议放在项目mock目录下,格式规范按照mock.js官网。
正则表达式格式略作修改RegExp_+正则内容,如5-10位纯数字写作RegExp_\d{5,10}
完整example:
{
"code":0,
"msg":"操作成功!",
"total":20, //需要生成多少模拟数据
"data": {
"id|+1":1,
"num": "RegExp_\\d{5,10}",
"array|3": [
"Mock.js"
],
"object|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
},
"cparagraph": "@cparagraph",
"name": "leason",
"items|1-5": [{
"id|+1": 1,
"type|1": [0,1],
"name": "RegExp_\\d{5,10}"
}]
}
}
固定接口
-
返回静态图片
在/status/pic目录下,放入需要的图片访问:
http://127.0.0.1:3000/status/pic/1.png
-
上传文件
当你要测试你的上传文件组件有么有没问题,这是你就不需要去找后端要接口直接api:
http://127.0.0.1:3000/upload
上传成功返回:
{ "msg": "上传成功!", "code": 0, "data": { "file_url": "/status/upload/Gsw_hjowIWiyO8BaTmAmnRE3.png" } }
-
访问上传的图片
http://127.0.0.1:3000/status/upload/Gsw_hjowIWiyO8BaTmAmnRE3.png