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