JSONサーバ(json-server)

11180 ワード

Today we will look into a very handy tool json-server, which can give you a mock rest json server in a minute.
今日は、残りのjsonサーバを1分以内にシミュレートできる便利なツールjson-serverを検討します.
In a regular enterprise application, you work with many teams and third party APIs. Imagine you have to call a third party restful web service that will get you JSON data to work on. You are in a tight schedule, so you can’t wait for them to finish their work and then start your own. If you wish to have a mockup Rest Web service in place to get the demo data for you, then json-server is the tool you are looking for.
一般的なエンタープライズアプリケーションでは、多くのチームとサードパーティのAPIを使用する必要があります.サードパーティ製の静的Webサービスを呼び出す必要がある場合は、JSONデータを使用できます.あなたのスケジュールはきついので、彼らが仕事を終えてから自分の仕事を始めるのを待つことはできません.プレゼンテーションデータを取得するためにプロトタイプRest Webサービスが必要な場合は、json-serverが探しているツールです.

JSONサーバー（JSON Server）

JSON Server is a Node Module that you can use to create demo rest json webservice in less than a minute. All you need is a JSON file for sample data.
JSON Serverは、1分未満でプレゼンテーションの残りのjsonネットワークサービスを作成するためのノードモジュールです.サンプルデータを取得するには、JSONファイルを1つだけ必要とします.

JSONサーバーのインストール（Installing JSON Server）

You should have NPM installed on your machine. If not, then refer this post to install NPM.
コンピュータにNPMをインストールする必要があります.ない場合は、この記事を参考にNPMをインストールしてください.
Below shows the one liner command to install json-server with output on my machine.
以下に、json-serverとその出力を私のマシンにインストールするライニングコマンドを示します.

$ npm install -g json-server
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
/usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/bin/index.js
- [email protected] node_modules/json-server/node_modules/raw-body/node_modules/bytes
/usr/local/lib
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  ├─┬ [email protected]
  │ └─┬ [email protected]
  │   └── [email protected]
  ├─┬ [email protected]
  │ └─┬ [email protected]
  │   ├── [email protected]
  │   └─┬ [email protected]
  │     └── [email protected]
  └─┬ [email protected]
    ├─┬ [email protected]
    │ └─┬ [email protected]
    │   └── [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └─┬ [email protected]
          └── [email protected]

$

jsonサーバのバージョンとオプションを確認します(Checking json-server version and options)

$ json-server -v
0.8.10

$ json-server -help
/usr/local/bin/json-server [options] 

Options:
  --config, -c       Path to config file           [default: "json-server.json"]
  --port, -p         Set port                                    [default: 3000]
  --host, -H         Set host                               [default: "0.0.0.0"]
  --watch, -w        Watch file(s)                                     [boolean]
  --routes, -r       Path to routes file
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                           [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing             [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding                     [boolean]
  --snapshots, -S    Set snapshots directory                      [default: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)         [default: "id"]
  --quiet, -q        Suppress log messages from output                 [boolean]
 
$

JSONサーバの実行（Run JSON Server）

Now it’s time to start our json-server. Below is a sample file with my employees json data.
今は私たちのjsonサーバーを起動する時です.以下は、従業員jsonデータを含むサンプルファイルです.

{
  "employees": [
    {
      "id": 1,
      "name": "Pankaj",
      "salary": "10000"
    },
    {
      "name": "David",
      "salary": "5000",
      "id": 2
    }
  ]
}

Important point here is the name of array i.e employees. JSON server will create the REST APIs based on this. Let’s start our json-server with above file.
ここでのポイントは配列の名前、すなわちemployeesです.JSONサーバはこれに基づいてREST APIを作成します.上記のファイルでjsonサーバを起動しましょう.

$ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  https://localhost:3000/employees

  Home
  https://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Don’t close this terminal, otherwise it will kill the json-server. Below are the sample CRUD requests and responses.
この端末を閉じないでください.そうしないと、json-serverを殺します.以下に、CRUDリクエストおよびレスポンスの例を示します.

JSON Server GET–全従業員を読む(JSON Server GET–Read All Employees)

$ curl -X GET -H "Content-Type: application/json"  "https://localhost:3000/employees"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "David",
    "salary": "5000",
    "id": 2
  }
]
$

json-serverのIDから従業員を取得する(Get Employee based on ID from json-server)

$ curl -X GET -H "Content-Type: application/json"  "https://localhost:3000/employees/1"
{
  "id": 1,
  "name": "Pankaj",
  "salary": "10000"
}
$

JSONサーバーPOST-従業員の作成（JSON Server POST–Createan Employee）

$ curl -X POST -H "Content-Type: application/json" -d '{"name": "Lisa","salary": "2000"}' "https://localhost:3000/employees"
{
  "name": "Lisa",
  "salary": 2000,
  "id": 3
}
$

JSON Server PUT–従業員データの更新（JSON Server PUT–Update Employee Data）

$ curl -XPUT -H "Content-Type: application/json" -d '{"name": "Lisa", "salary": "8000"}' "https://localhost:3000/employees/3"
{
  "name": "Lisa",
  "salary": 8000,
  "id": 3
}
$

JSONサーバーDELETE–従業員の削除（JSON Server DELETE–Delete an Employee）

$ curl -X DELETE -H "Content-Type: application/json"  "https://localhost:3000/employees/2"
{}
$ curl -GET -H "Content-Type: application/json"  "https://localhost:3000/employees"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "Lisa",
    "salary": 8000,
    "id": 3
  }
]
$

As you can see that with a simple JSON, json-server creates demo APIs for us to use. Note that all the PUT, POST, DELETE requests are getting saved into db.json file.
ご覧のように、json-serverは簡単なJSONで私たちが使用するプレゼンテーションAPIを作成しました.すべてのPUT、POST、DELETEリクエストはdb.jsonファイルに保存されます.
Now the URIs for GET and DELETE are same, similarly it’s same for POST and PUT requests. Well, we can create our custom URIs too with a simple mapping file.
現在、GETとDELETEのURIは同じであり、POSTとPUTが要求するURIは同じである.また、簡単なマッピングファイルを使用してカスタムURIを作成することもできます.

json-serverカスタムルーティング(json-server custom routes)

Create a file with custom routes for our json-server to use.
カスタムルーティングを持つファイルを作成し、jsonサーバで使用します.routes.json routes.json

{
  "/employees/list": "/employees",
  "/employees/get/:id": "/employees/:id",
  "/employees/create": "/employees",
  "/employees/update/:id": "/employees/:id",
  "/employees/delete/:id": "/employees/:id"
}

We can also change the json-server port and simulate like a third party API, just change the base URL when the real service is ready and you will be good to go.
また、jsonサーバポートを変更し、サードパーティのAPIのようにシミュレーションすることもできます.実際のサービスが完了したときに基本URLを変更するだけで、使用できます.
Now start the JSON server again as shown below.
次に、JSONサーバを再起動します.

$ json-server --port 7000 --routes routes.json --watch db.json
(node:60899) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

  \{^_^}/ hi!

  Loading db.json
  Loading routes.json
  Done

  Resources
  https://localhost:7000/employees

  Other routes
  /employees/list -> /employees
  /employees/get/:id -> /employees/:id
  /employees/create -> /employees
  /employees/update/:id -> /employees/:id
  /employees/delete/:id -> /employees/:id

  Home
  https://localhost:7000

  Type s + enter at any time to create a snapshot of the database
  Watching...

It’s showing the custom routes defined by us.
定義したカスタムルートが表示されます.

カスタムルーティングを持つjson-serverの例(json-server example with custom routes)

Below is the example of some of the commands and their output with custom routes.
以下に、いくつかのコマンドとカスタムルーティング付きの出力例を示します.

$ curl -X GET -H "Content-Type: application/json"  "https://localhost:7000/employees/list"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "Lisa",
    "salary": 8000,
    "id": 3
  }
]

$ curl -X GET -H "Content-Type: application/json"  "https://localhost:7000/employees/get/1"
{
  "id": 1,
  "name": "Pankaj",
  "salary": "10000"
}

$ curl -X POST -H "Content-Type: application/json" -d '{"name": "Lisa","salary": "2000"}' "https://localhost:7000/employees/create"
{
  "name": "Lisa",
  "salary": 2000,
  "id": 4
}

$ curl -XPUT -H "Content-Type: application/json" -d '{"name": "Lisa", "salary": "8000"}' "https://localhost:7000/emloyees/update/4"
{
  "name": "Lisa",
  "salary": 8000,
  "id": 4
}

$ curl -XDELETE -H "Content-Type: application/json"  "https://localhost:7000/employees/delete/4"
{}

$ curl -GET -H "Content-Type: application/json"  "https://localhost:7000/employees/list"
[
  {
    "id": 1,
    "name": "Pankaj",
    "salary": "10000"
  },
  {
    "name": "Lisa",
    "salary": 8000,
    "id": 3
  }
]
$

JSON server provides some other useful options such as sorting, searching and pagination. That’s all for json-server, it’s my go to tool whenever I need to create demo Rest JSON APIs.
JSONサーバでは、ソート、検索、ページングなどの他の有用なオプションが用意されています.これがjsonサーバのすべてです.プレゼンテーションRest JSON APIを作成する必要がある場合は、これが私が使用するツールです.
Reference: json-server GitHub
参考:json-server GitHub
翻訳:https://www.journaldev.com/10660/json-server

Day 6-コンテナ-プレゼンテーションモード/props/setStateモーション原理/Nullishマージ

【JavaScript】For文 VS While文　処理速度はどっちが早い？まさかの結果に...