この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
node.js:jsonserver [2019/12/05 00:09] ips |
node.js:jsonserver [2019/12/31 08:07] (現在) ips ↷ node:jsonserver から node.js:jsonserver へページを移動しました。 |
||
|---|---|---|---|
| ライン 5: | ライン 5: | ||
| モック用のAPIサーバーが簡単に作成できる。 | モック用のAPIサーバーが簡単に作成できる。 | ||
| + | ===== Getting started ===== | ||
| + | |||
| + | ==== 1.ディレクトリ作成 ==== | ||
| <code bash> | <code bash> | ||
| - | // 1.ディレクトリ作成 | ||
| $ mkdir jsonsever | $ mkdir jsonsever | ||
| $ cd jsonserver | $ cd jsonserver | ||
| + | </code> | ||
| - | // 2.グローバルインストール | + | ==== 2.グローバルインストール ==== |
| + | もしグローバルインストールでなければnode_modules/.bin/ にあるモジュールを実行する...面倒です。 | ||
| + | <code bash> | ||
| $ npm install -g json-server | $ npm install -g json-server | ||
| + | </code> | ||
| - | // 3.レスポンス元となるjsonファイル作成 | + | ==== 3.レスポンス元となるjsonファイル作成 ==== |
| - | // /jsonserver/db.json | + | <code bash /jsonserver/db.json> |
| { | { | ||
| "users": [ | "users": [ | ||
| ライン 20: | ライン 26: | ||
| { "id": 2, "name": "hana"} | { "id": 2, "name": "hana"} | ||
| ] | ] | ||
| - | } | + | } |
| + | |||
| + | </code> | ||
| - | // 4.json-serverを実行する | + | ==== 4.routeファイル作成 ==== |
| - | >json-server --watch db.json | + | <code bash /jsonserver/routes.json> |
| + | { | ||
| + | "/users/:id": "/users/?id=:id" | ||
| + | } | ||
| + | </code> | ||
| - | \{^_^}/ hi! | + | ==== 5.json-serverを実行する ==== |
| + | <code> | ||
| + | >json-server --watch db.json --routes routes.json | ||
| + | |||
| + | \{^_^}/ hi! | ||
| Loading db.json | Loading db.json | ||
| + | Loading routes.json | ||
| Done | Done | ||
| Resources | Resources | ||
| http://localhost:3000/users | http://localhost:3000/users | ||
| + | |||
| + | Other routes | ||
| + | /users/:id -> /users/?id=:id | ||
| Home | Home | ||
| ライン 38: | ライン 58: | ||
| Type s + enter at any time to create a snapshot of the database | Type s + enter at any time to create a snapshot of the database | ||
| Watching... | Watching... | ||
| - | | + | </code> |
| - | // 5.http://localhost:3000にアクセスするだけ | + | |
| + | === 6.アクセス === | ||
| + | |||
| + | <code> | ||
| + | // http://localhost:3000 | ||
| + | // スタートアップ画面 | ||
| + | |||
| + | Congrats! | ||
| + | You're successfully running JSON Server | ||
| + | ✧*。٩(ˊᗜˋ*)و✧*。 | ||
| + | |||
| + | </code> | ||
| + | |||
| + | <code> | ||
| + | // http://localhost:3000/users | ||
| + | [ | ||
| + | { | ||
| + | "id": 1, | ||
| + | "name": "safa" | ||
| + | }, | ||
| + | { | ||
| + | "id": 2, | ||
| + | "name": "hana" | ||
| + | } | ||
| + | ] | ||
| + | </code> | ||
| + | |||
| + | <code> | ||
| + | // http://localhost:3000/users/2 | ||
| + | // routesで設定しているので /users/?id=2 となる | ||
| + | { | ||
| + | "/users/:id": "/users/?id=:id" | ||
| + | } | ||
| </code> | </code> | ||