JSON Server 教程介绍了 JavaScript json-server
库,可用于创建伪造的 REST API。
JSON 服务器
json-server 是一个用于创建测试 REST API 的 JavaScript 库。
JSON 服务器安装
首先,我们创建一个项目目录并安装json-server
模块。
$ mkdir json-server-lib $ cd json-server-lib $ npm init -y $ npm i -g json-server
JSON 服务器模块使用npm
全局安装。
$ npm install axios
此外,我们安装axios
模块,它是一个基于promise 的JavaScript HTTP 客户端。
$ cat package.json { "name": "json-server-lib", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "axios": "^0.18.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
这是我们的 package.json
文件。
JSON测试数据
我们有一些 JSON 测试数据:
{ "users": [ { "id": 1, "first_name": "Robert", "last_name": "Schwartz", "email": "rob23@gmail.com" }, { "id": 2, "first_name": "Lucy", "last_name": "Ballmer", "email": "lucyb56@gmail.com" }, { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "annasmith23@gmail.com" }, { "id": 4, "first_name": "Robert", "last_name": "Brown", "email": "bobbrown432@yahoo.com" }, { "id": 5, "first_name": "Roger", "last_name": "Bacon", "email": "rogerbacon12@yahoo.com" } ] }
启动 JSON 服务器
JSON 服务器以json-server
启动,我们已经在全局安装了它。
$ json-server --watch users.json
--watch
命令用于为服务器指定数据。
$ curl localhost:3000/users/3/ { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "annasmith23@gmail.com" }
使用 curl
命令,我们得到 ID 为 3 的用户。
JSON 服务器 GET 请求
在下一个示例中,我们使用 GET 请求检索数据。
const axios = require('axios'); axios.get('http://localhost:3000/users') .then(resp => { data = resp.data; data.forEach(e => { console.log(`${e.first_name}, ${e.last_name}, ${e.email}`); }); }) .catch(error => { console.log(error); });
使用 axios 模块,我们将所有用户作为 JSON 数组获取,并使用 forEach
循环遍历它。
$ node get_request.js Robert, Schwartz, rob23@gmail.com Lucy, Ballmer, lucyb56@gmail.com Anna, Smith, annasmith23@gmail.com Robert, Brown, bobbrown432@yahoo.com Roger, Bacon, rogerbacon12@yahoo.com
这是示例的输出。我们获取所有用户并打印他们的全名和电子邮件。
JSON 服务器 POST 请求
通过 POST 请求,我们创建了一个新用户。
const axios = require('axios'); axios.post('http://localhost:3000/users', { id: 6, first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@gmail.com' }).then(resp => { console.log(resp.data); }).catch(error => { console.log(error); });
使用 axios 创建了一个新用户。
$ node post_request.js { id: 6, first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@gmail.com' }
服务器响应一个新创建的对象。
$ curl localhost:3000/users/6/ { "id": 6, "first_name": "Fred", "last_name": "Blair", "email": "freddyb34@gmail.com" }
我们使用curl
命令验证新创建的用户。
JSON Server 通过 PUT 请求修改数据
在下面的示例中,我们使用 PUT 请求修改数据。
const axios = require('axios'); axios.put('http://localhost:3000/users/6/', { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com' }).then(resp => { console.log(resp.data); }).catch(error => { console.log(error); });
在示例中,我们修改了用户的电子邮件地址。
$ node put_request.js { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com', id: 6 }
JSON 服务器删除请求
在下面的示例中,我们展示了如何使用 DELETE 请求删除用户。
const axios = require('axios'); axios.delete('http://localhost:3000/users/1/') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); });
在示例中,我们删除了 Id 为 1 的用户。
$ node delete_request.js {}
服务器返回空 JSON 数据。
JSON Server 排序数据
在下一个示例中,我们对数据进行排序。
const axios = require('axios'); axios.get('http://localhost:3000/users?_sort=last_name&_order=asc') .then(resp => { data = resp.data; data.forEach(e => { console.log(`${e.first_name}, ${e.last_name}, ${e.email}`) }); }).catch(error => { console.log(error); });
代码示例按用户姓氏升序对数据进行排序。我们使用_sort
和_order
查询参数。
$ node sort_data.js Roger, Bacon, rogerbacon12@yahoo.com Lucy, Ballmer, lucyb56@gmail.com Fred, Blair, freddyb34@yahoo.com Robert, Brown, bobbrown432@yahoo.com Robert, Schwartz, rob23@gmail.com Anna, Smith, annasmith23@gmail.com
JSON 服务器运营商
我们可以使用_gte
和_lte
来获取特定范围的数据。
const axios = require('axios'); axios.get('http://localhost:3000/users?id_gte=4') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); });
代码示例显示 id 大于或等于 4 的用户。
$ node operators.js [ { id: 4, first_name: 'Robert', last_name: 'Brown', email: 'bobbrown432@yahoo.com' }, { id: '5', first_name: 'Roger', last_name: 'Bacon', email: 'rogerbacon12@yahoo.com' }, { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com', id: 6 } ]
JSON 服务器全文搜索
可以使用q
参数执行全文搜索。
const axios = require('axios'); axios.get('http://localhost:3000/users?q=yahoo') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); });
代码示例搜索雅虎术语。
$ node full_text_search.js [ { id: 4, first_name: 'Robert', last_name: 'Brown', email: 'bobbrown432@yahoo.com' }, { id: '5', first_name: 'Roger', last_name: 'Bacon', email: 'rogerbacon12@yahoo.com' }, { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com', id: 6 } ]
搜索查询返回了这三个用户。
在本文中,我们介绍了 JSON Server JavaScript 库。
列出所有 JavaScript 教程。