残すところPUTメソッドとDELETEメソッドの実装となりました
まずはサーバー側の処理を確認しましょう
サーバー側の処理の確認
前回DELETEのサーバー側の処理を確認しましたが念のため再度確認をしておきます
今回更新したサーバーサイドのコードです
上から順番に本体のapp.js
とルーティング処理のwishlist.jsです
app.jsに加えたのは26行目の
app.use(‘/wishlist/edit’, wishlistRouter);
の部分だけです
これによって/wishlist/editにアクセスがあった時の処理をwishlistRouterで実行するようにしています
その処理はwishlist.jsに書いています
64行目から90行目までがPUTの処理です
92行目以降がDELETEの処理です
PUTリクエストに対するサーバーでの処理
UIは
localhost:3000/wishlist/edit/:id です
GETでアクセスするとedit.ejsをレンダリングしてPUTようのテンプレートを表示します
PUTは更新になります
CRUDのU（＝UPDATE)の処理です
fetchメソッドとは
前回の記事で、HTMLのformではGETとPOSTしか指定できないとお伝えしました
そこで、PUTメソッドとDELETEの指定をしてリクエストを送る方法を探し回りました
もう、家中さがしました
みつかりました
Javascriptのfetchメソッドを使ったらできました
fetchメソッドとはAPIを叩くときなどに非同期処理でHTTPリクエストを送ることができるメソッドです
書き方は覚えてしまえば結構シンプルです
fetch(“URL”,{オプション})
まずはリクエストの送り先のURLを第1引数にいれて指定します
第2引数にはオプションが指定できます
オプションでHTTPメソッドの指定やbody、ヘッダーなどを設定できます
編集ページのEJSを作成
あとは、編集ボタンからのリンク先である編集ページを実装して
そこで上記のfetchメソッドを実行するスクリプトを発動するトリガーをbuttonで作成すればOK
deleteWish(uid)とupdateWish(uid)がfetchメソッドを含む関数です
それぞれbuttonのonclick（46行目と49行目）で実装しています
実装の様子はYouTubeでも確認いただけます
コメント