JSON Server 教程
最后修改于 2023 年 10 月 18 日
JSON Server 教程介绍了 JavaScript json-server 库，该库可用于创建假的 REST API。
JSON server
json-server 是一个 JavaScript 库，用于创建测试 REST API。
JSON Server 安装
首先，我们创建一个项目目录并安装 json-server 模块。
$ mkdir json-server-lib $ cd json-server-lib $ npm init -y $ npm i -g json-server
JSON server 模块使用 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.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 server
JSON server 使用 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 Server GET 请求
在下一个例子中，我们使用 GET 请求检索数据。
get_request.js
const axios = require('axios');
axios.get('https://: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 Server POST 请求
使用 POST 请求，我们创建一个新用户。
post_request.js
const axios = require('axios');
axios.post('https://: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 请求修改数据。
put_request.js
const axios = require('axios');
axios.put('https://: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 Server DELETE 请求
在下面的例子中，我们展示了如何使用 DELETE 请求删除用户。
delete_request.js
const axios = require('axios');
axios.delete('https://:3000/users/1/')
.then(resp => {
console.log(resp.data)
}).catch(error => {
console.log(error);
});
在这个例子中，我们删除了 Id 为 1 的用户。
$ node delete_request.js
{}
服务器以空的 JSON 数据响应。
JSON Server 排序数据
在下一个例子中，我们对数据进行排序。
sort_data.js
const axios = require('axios');
axios.get('https://: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 Server 运算符
我们可以使用 _gte 和 _lte 来获取特定范围的数据。
operators.js
const axios = require('axios');
axios.get('https://: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 Server 全文搜索
可以使用 q 参数执行全文搜索。
full_text_search.js
const axios = require('axios');
axios.get('https://:3000/users?q=yahoo')
.then(resp => {
console.log(resp.data)
}).catch(error => {
console.log(error);
});
代码示例搜索了 yahoo 术语。
$ 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 库。