json-server搭建mock服务
概述
前后端分离开发是当前大多数公司的一种模式，这样让开发者更加专注于某一方向。但是在实际的工作中，很容易出现前端后端互等的情况，一方面不利于沟通，另一方面降低了开发效率。在很多公司的业务都是前端驱动的，所以前端人员可以根据业务先定义数据结构先行开发。本文基于json-server搭建一个mock接口。
json-server简介
json-server是一款小巧的Mock工具，它可以不写一行代码在30秒内创建一套Restful风格的 api，适合3人及以下的前端团队做迅速mock后台逻辑，也可以在接口测试中使用。
实现效果
image.png
实现
1. 初始化工程
npm init -y2.添加依赖
npm i json-server -D3. 添加启动
# 修改package.json文件
"scripts": {
"mock": "json-server --watch ./mock_server/db.json --id key --p 13000"
},在根目录下创建mock_server/db.json文件，文件内容如下：
{
"users": [
{
"key": 11,
"name": "KevinChen"
},
{
"key": 12,
"name": "KevinChen"
},
{
"key": 13,
"name": "KevinChen"
},
{
"key": 14,
"name": "KevinChen"
},
{
"key": 15,
"name": "KevinChen"
},
{
"key": 16,
"name": "KevinChen"
},
{
"key": 17,
"name": "KevinChen"
},
{
"key": 18,
"name": "KevinChen"
}
],
"dept": [
{
"title": "西安分公司",
"key": "xian",
"checkable": false,
"isDept": true,
"children": [
{
"title": "张叁",
"key": "张叁"
},
{
"title": "李四",
"key": "李四"
},
{
"title": "王五",
"key": "王五"
}
]
},
{
"title": "上海分公司",
"key": "shanghai",
"isDept": true,
"checkable": false,
"children": [
{
"title": "刘平",
"key": "刘平"
},
{
"title": "陈辰",
"key": "陈辰"
},
{
"title": "何夕",
"key": "何夕"
}
]
}
]
}4.调用接口
# 获取数据 get
http://localhost:13000
http://localhost:13000/users
http://localhost:13000/users?_page=1&_limit=4 // 分页
http://localhost:13000/dept
http://localhost:13000/dept/xian // 根据id查询
http://localhost:13000/dept?title=西安分公司 // 根据条件查询
# 新增数据 post
http://localhost:13000/dept JSON(application/json)
{
"title": "北京分公司",
"key": "beijing",
"checkable": false,
"isDept": true,
"children": [
{
"title": "张叁",
"key": "张叁"
},
{
"title": "李四",
"key": "李四"
},
{
"title": "王五",
"key": "王五"
}
]
}
# 修改数据 patch
http://localhost:13000/dept/beijing JSON(application/json)
{
"title": "北京分公司",
"key": "beijing",
"checkable": false,
"isDept": true,
"children": [
{
"title": "张叁",
"key": "张叁"
},
{
"title": "李四",
"key": "李四"
},
{
"title": "王五",
"key": "王五"
}
]
}
# 删除数据 delete
http://localhost:13000/dept/beijing本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-08-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
