json-server : 前端工程师的小伙伴!

简介: json-server : 前端工程师的小伙伴!

引子

你是否曾为了前端开发需要依赖后端接口而烦恼?是否曾因接口未开发完成而垂头丧气?是否曾梦想能自己制作一个玩具服务器,随心所欲地调试接口?

“json-server”!json-server,简洁,快速,并带你领略REST风采。


安装 json-server

打开终端,使用 npm 来安装:

npm install -g json-server

创建你的小世界

花几秒钟创建一个db.json文件,预先定义你所有的假数据,比如:

{
  "unicorns": [
    { "id": 1, "name": "Rosa", "color": "Pink" },
    { "id": 2, "name": "Misty", "color": "Purple" }
  ]
}

启动你的火箭

进入终端,启动 json-server:

json-server --watch db.json

去享受你的api接口吧!

观看所有的:http://localhost:3000/unicorns

检查你最爱的 Rosa:http://localhost:3000/unicorns/1

路由规则

GET    /unicorns
GET    /unicorns/:id
POST   /unicorns
PUT    /unicorns/:id
PATCH  /unicorns/:id
DELETE /unicorns/:id

别看接口“小小个”,配合上增删查改,放任你大展拳脚。

参数的集合

简洁而实用,你的各种筛选,排序,限额需求,json-server一概包揽:

筛选

条件只要下面这些,瞬间体验扔掉数学的解脱感:

→ ==
_lt → <
_lte → <=
_gt → >
_gte → >=
_ne → !=
GET /unicorns?color=Pink
限额

无论是"从…到…“还是"前…个”,一切尽在 索取,例如取 id 为 1 到 2 的独角兽:

GET /unicorns?_start=1&_end=2

或者仅取前 2 个独角兽:

GET /unicorns?_start=1&_limit=2

排序

对比竞争者一眼看清状况,凭实力排序:

GET /unicorns?_sort=id,_desc
其他高级操作

嵌套字段和数组字段让你能轻松获取你需求的内容:

GET /unicorns?color=Pink&name=rosa

内嵌其他字段,将嵌套的数据一次性取来:

GET /unicorns?_embed=comments

删除需要删除的数据:

DELETE /unicorns/1

静态文件服务

除了 REST API,还可以提供静态文件。只需要创建一个 public 文件夹,JSON Server 将提供它的内容。

同样,你还可以使用 -s 或者 --static 选项来添加更多的自定义文件夹:

json-server -s ./static  db.json


小结

目录
相关文章
|
6月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
161 0
|
6月前
|
JSON 前端开发 JavaScript
前端使用lottie-web,使用AE导出的JSON动画贴心教程
前端使用lottie-web,使用AE导出的JSON动画贴心教程
601 2
|
6月前
|
XML JSON 前端开发
【Web 前端】XML和JSON的区别?
【4月更文挑战第22天】【Web 前端】XML和JSON的区别?
【Web 前端】XML和JSON的区别?
|
6月前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
6月前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
38 0
|
6月前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
288 0
|
JSON 前端开发 数据格式
前端学习笔记202306学习笔记第三十七天-js-认识json数据2
前端学习笔记202306学习笔记第三十七天-js-认识json数据2
49 0
|
6月前
|
JSON 前端开发 Java
(简易详细)spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
(简易详细)spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
717 0
|
6月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
|
JSON 前端开发 数据格式
ajax请求解析json数据渲染在前端界面
ajax请求解析json数据渲染在前端界面
56 0