この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
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> |
- | // 4.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> | ||