随着前端开发的不断发展，数据的处理愈发重要，json-server 是一个非常好用的工具，可以帮助前端开发人员快速构建一个模拟的 RESTful API 服务。本文将介绍 json-server 的使用方法，并通过实例展示其用法。
安装 json-server
安装 npm
npm install -g json-server
安装完成后，你就可以使用 json-server 命令了。
基本使用方法
比如我们有这样一个文件 db.json
-- -------------------- ---- ------- - ----------- - - ----- -- -------- -------------- --------- -------- ------- ------------ -- - ----- -- -------- ---- -- ---- - ------- ----- --------- -------- ------- ------------ -- - ----- -- -------- ---- -------- ----- -- ------------- --------- ------- ------- ------------ - - -展开代码
你可以在终端使用以下命令启动服务
json-server db.json
这样你就可以通过 http://localhost:3000/articles 这个链接来访问这个 JSON 文件中的数据了。
这个时候你会发现这个服务支持所有的 RESTful API 请求方式：GET、POST、PUT、PATCH 和 DELETE。
通过路由配置来控制接口
json-server 同时支持通过路由配置来控制接口的处理逻辑。比如你可以像这样在命令行中运行 json-server：
json-server db.json --routes routes.json
这里的 routes.json 文件里面可以配置所有支持的 RESTful API 请求方式的路由逻辑，比如：
{ "/api/articles/1": "/articles/1", "/api/posts?id=1": "/posts/1", "/api/articles/1/comments": "/comments/?articleId=1", "/categories/:id/products/:pid": "/products/:pid" }
这样，当我们请求 /api/articles/1 的时候，json-server 就会自动进行重定向，转而请求 /articles/1。
动态操作
json-server 还支持在稍稍配置后，在前端通过 AJAX 请求模拟对 JSON 数据的增删改查。而这是一种在前端快速建立临时数据源的好方法。
首先修改路由，让所有的数据请求都通过 /api/v1 进行。
{ "/api/*": "/$1" }
然后配置一个数据查询接口 /api/v1/data。
{ "data": [] }
启动 json-server
json-server --watch db.json --routes routes.json --middlewares middleware.js
中间件 middleware.js 如下。
-- -------------------- ---- ------- ----- ---------- - ---------------------- -------------- - ------------- ---- ----- - -- ----------- --- ------ -- --------------- --- --------------- - ----------- - ---------- ----------- -------- ----- ----- -------- -- - ---- - ------ - -展开代码
然后就可以从前端进行动态数据操作了。
总结
json-server 是一个非常好用的工具，可以帮助前端开发人员快速搭建一个模拟的 RESTful API 服务。本文介绍了 json-server 的基本使用方法和一些高级用法，包括路由配置和动态操作。通过 json-server，可以让我们的前端开发更加高效、便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/169077
