JSON 服务器教程 · ZetCode 中文系列教程

# JSON 服务器教程 > 原文： [http://zetcode.com/javascript/jsonserver/](http://zetcode.com/javascript/jsonserver/) JSON 服务器教程介绍了 JavaScript `json-server`库，该库可用于创建伪造的 REST API。 ## JSON 服务器 json 服务器是一个 JavaScript 库，用于创建测试 REST API。 ## JSON 服务器安装首先，我们创建一个项目目录并安装`json-server`模块。 ```js $ mkdir json-server-lib $ cd json-server-lib $ npm init -y $ npm i -g json-server ``` JSON 服务器模块与`npm`一起全局安装。 ```js $ npm install axios ``` 此外，我们安装了`axios`模块，这是一个基于`Promise`的 JavaScript HTTP 客户端。 ```js $ 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` ```js { "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`启动，该服务器已在全球范围内安装。 ```js $ json-server --watch users.json ``` `--watch`命令用于指定服务器的数据。 ```js $ curl localhost:3000/users/3/ { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "annasmith23@gmail.com" } ``` 使用`curl`命令，我们为用户提供 ID 3。 ## JSON 服务器 GET 请求在下一个示例中，我们使用 GET 请求检索数据。 `get_request.js` ```js 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()`遍历它。 ```js $ 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 请求，我们创建了一个新用户。 `post_request.js` ```js 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 创建一个新用户。 ```js $ node post_request.js { id: 6, first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@gmail.com' } ``` 服务器以新创建的对象作为响应。 ```js $ curl localhost:3000/users/6/ { "id": 6, "first_name": "Fred", "last_name": "Blair", "email": "freddyb34@gmail.com" } ``` 我们使用`curl`命令验证新创建的用户。 ## JSON 服务器使用 PUT 请求修改数据在以下示例中，我们使用 PUT 请求修改数据。 `put_request.js` ```js 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); }); ``` 在示例中，我们修改了用户的电子邮件地址。 ```js $ node put_request.js { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com', id: 6 } ``` 这是输出。 ## JSON 服务器 DELETE 请求在下面的示例中，我们显示了如何通过 DELETE 请求删除用户。 `delete_request.js` ```js const axios = require('axios'); axios.delete('http://localhost:3000/users/1/') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); }); ``` 在示例中，我们删除 ID 为 1 的用户。 ```js $ node delete_request.js {} ``` 服务器以空 JSON 数据响应。 ## JSON 服务器排序数据在下一个示例中，我们对数据进行排序。 `sort_data.js` ```js 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`查询参数。 ```js $ 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`获取特定范围的数据。 `operators.js` ```js 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 的用户。 ```js $ 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`参数执行全文搜索。 `full_text_search.js` ```js const axios = require('axios'); axios.get('http://localhost:3000/users?q=yahoo') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); }); ``` 该代码示例搜索 yahoo 术语。 ```js $ 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 } ] ``` 搜索查询返回了这三个用户。在本教程中，我们介绍了 JSONServer JavaScript 库。您可能也对以下相关教程感兴趣：[数据表 JSON 服务器教程](/articles/datatablesjsonserver/)， [Axios 教程](/javascript/axios/)，[笑话教程](/javascript/jest/)， [faker.js 教程](/javascript/fakerjs/)， [`Document.querySelector()`教程](/javascript/queryselector/)，[从 JavaScript 中的 URL 读取 JSON](/articles/javascriptjsonurl/) ， [JavaScript 贪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [jQuery 自动完成教程](/articles/jqueryautocomplete/)或 [Node Sass 教程](/javascript/nodesass/)。