文字

CRA+Json Server開発覚え書き
公開:2020.10.25 更新:2020.10.25

こんちはお久しぶりです。夜の書き書きのお時間です。

今回はCRAことCreate React App(Reactアプリのテンプレート)でCRUDアプリを作る際に書いてるものです。

主にjson-serverについて、コマンドや文法などをメモすることとします。

CRAデバッグ起動

CRAインストールした後なら、開発環境のフォルダに[cd]で移動して、

npm start

Json-Serverデバッグ起動

CRAの監視?でコマプロを使っちゃっているのでもう一つコマプロを開く。

開いたら、また開発環境フォルダに移動し、

npm run json-server

と言いたかったが、これは設定済みなので動くが、設定してないならpackage.jsonのscriptプロパティ?に記述を追加しないとだめです。

と、いろいろやって、二つの開発を動かしたらようやく連携して動かせますね。

お次は

Json-ServerのCRUD手法について

Craete(作成)

fetch('http://localhost:3001/tasks', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        'title': 'react',
        'author': 'facebook'        
    })
}).then(res => res.json()).then(console.log);

localhost:3000はCRAが使っているのでずらして3001にしている。

body部分に書くデータはID以外を書き込む。(IDは自動振り分け)

Read(読み込み)

fetch('http://localhost:3001/tasks/3', {method: 'GET'})
    .then(res => res.json()).then(console.log)

tasks/3でデータID3を指定しているのでID=3のデータが読み込まれる

Update(編集)

fetch('http://localhost:3001/tasks/3', { // IDに3を指定
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        'title': 'angular',
        'author': 'google'        
    })
}).then(res => res.json()).then(console.log);

Delete(削除)

fetch('http://localhost:3001/tasks/3', {method: 'DELETE'}).then(console.log);

ID=3のデータを削除。

終わり

全部ここに書いてあります。

JSON Server使いこなし第1回 モックサーバーの起動とリソース処理

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。