简易接口mock工具(express+jade)
在这个前后端分离变成开发常态的时代,对于前端,无论是还在采取基础的原生开发还是运用日益精进的前端框架,都会面临后端没给数据就没法往下写的窘境,但还是有解决办法的。
npm mock
无论是用Vue还是Angular,都可以使用mock工具,这个工具可以通过npm install
的方式集成到项目中间去,不得不说,现在公司完善的项目框架,基本上都有mock的身影,但我不会过多介绍,原因如下:
- mock需要集成到项目中去,虽然它的功能及其强大,但我一直还是觉得能不集成就不集成;
- 前几天有个“笨笨”的朋友做项目的时候被mock玩得头晕眼花,所以为了给他些便利,我给他写了一个简单的mock工具,先附上git链接;
功能介绍
由于做的时间较短,所以只满足了基本功能:
- 配置接口,在
routes/config.json
中:
{
"interface": [
// 在这里面配置接口
{
// 接口ID,目前可不写,如果以后要开发更多类似于在网页上动态增删改查接口时才需填写
"id": "1",
// 接口链接 例如 http://localhost:3000/list 可在局域网内通过ip访问
"url": "/list",
// 接口说明
"description": "获取测试列表",
// 请求方式
"method": "GET",
// 入参
"params": [],
// 出参
"output": {
"code": 200,
"data": [
{
"id": "1",
"name": "tom"
},
{
"id": "2",
"name": "nancy"
}
]
}
},
{
"id": "2",
"url": "/edit",
"description": "登录测试",
"method": "POST",
// 入参
"params": [
{
// 入参名称
"name": "username",
// 入参字段说明
"description": "用户名",
// 是否必填
"require": true
},
{
"name": "password",
"description": "密码",
"require": false
}
],
"output": {
"code": 200,
"message": "登录成功"
}
}
]
}
- 简易可视化接口文档:
只是粗略能看,见谅。。。。
使用
npm i
安装依赖nodemon start
或npm start
启动服务,为啥有nodemon
这个命令呢,因为本来我已经写好了在页面上可以增删改查接口的操作,这样可以不用重启服务就可以更新接口,但我想大部分人也许不需要这个功能,所以暂时注释掉了- 现在接口就已经启动了,如图:
若缺少必填字段:
- 局域网通过IP访问接口文档: