LoginSignup
0

More than 3 years have passed since last update.

json-serverの復習

Last updated at Posted at 2020-06-11

最近SPAと触れ合っているのですが、フロントエンド実装中に連携APIサーバーが(お金的に)用意(出来なく)しきれなくて、ダミーAPIを作成して開発しています。

そこで使うJSON Server について備忘をば。

JSON ServerはダミーAPIツール

JSON ServerはCreate、Read、Update、Deleteといったデータ連携の基本的な操作であるCRUD機能がある。

JSON Serverのインストール

npm install --save-dev json-server

初期データの作成

インストール完了後、db.json というファイル名で以下のようなJSONファイルを作成、pacakage.jsonと同じ階層に配置する。


{"todos":
  [
    {"id":1,"todo":"ID-1のTODO","completed":false},
    {"id":2,"todo":"ID-2のTODO","completed":true}
  ]
}

JSON Serverの起動

npx json-server --watch db.json

JSON Serverが立ち上がるとコンソールに以下の出力がある。

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

  ・・・・・
  ・・・・・
  ・・・・・
  ・・・・・

※db.jsonに既にresourceを作成済みなので、resourcesが表示される

動作確認

Create

POSTでTODOを追加してみる。

terminalからcurlで実行

curl --request POST --header "Content-Type: application/json" --data '{"todo":"IDxxxのTODO","completed":false}' "http://localhost:3000/todos/"

http://localhost:3000/todos にアクセスすると現在のデータがわかる。

idを指定していないのでおそらく、「IDが自動附番」されているはず。
id指定して入れることも可能。(それがいいかどうかはちょっとわからぬ)

Read

http://localhost:3000/todos アクセスすると以下のようなJSONが出力されるのが確認できる。

{"todo":"IDxxxのTODO","completed":false,"id":1}]

Update

UpdateするときはPUT
PUTで更新したいレコードのidをURLに付け、更新したい内容を指定
※該当IDの内容を全部送る

curl --request POST --header "Content-Type: application/json" --data '{"todo":"IDxxxのTODOを変更","completed":true}' "http://localhost:3000/todos/1"

Delete

削除したいレコードのidをURLに付けDELETEメソッドを実行。

curl --request POST "http://localhost:3000/todos/1"

もうちょい高度に

db.jsonファイルの中身を以下の様にしてみる。

{
  "todos": [
    { "id": 1, "todo": "TODO-1", "completed": "false" }
  ],
  "description": [
    { "id": 1, "text": "comment"}
  ],
  "user": { "name": "shihou22" }
}

※ルート直下のkey項目がそのままResource urlとなる

http://localhost:3000/todos
http://localhost:3000/description
http://localhost:3000/user

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0