# 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/)。