Expressで作ったWebAPIをHTMLで叩く PUTとDELETE編

今回はPUT(更新)とDELETE(削除)メソッドをHTMLから実行します

index.htmlが説明で必要になりますので貼っておきます

PUTメソッドの実装について

PUTメソッドはデータの更新を行います

更新する際に、編集画面に移動してからPUTメソッドを実行できるようにしています

ということで編集画面へのリンクの実装にポイントがありますので、wishlist.jsを確認してみましょう

GETメソッドでデータを抽出してテーブルに追加する際に編集画面へのリンクをそれぞれのレコードごとに付け加えています

これが先ほどのfetchAllList()関数のテーブルに追加するデータの10~18行目のbodyの中の

17行目<td id=”edit${i}”><a href=”edit.html?uid=${obj.id}”>編集</td>で加えています

リンクのアドレスの最後にobj.idという形で先ほど読み込んだデータのプライマリーキーであるid番号を加えています

これで編集画面に移動する際にid番号を取得して関数の引数として利用します

またidの”edit${i}”はあとで削除ボタンを追加する場所の目印です

ここを親にして子要素としてセットにして削除ボタンをついかしています

削除ボタンも後程説明します

まだPUTメソッドが出てきていませんが、PUTメソッドはリンク先の編集画面で実装しています

編集画面について

まずは編集画面のhtmlです

最初にedit.jsファイルを読み込んでいます

内容は以下の通りです

ここで特に重要なのが、idの取得方法です

6行目のconst uid = window.location.search.split(‘?uid=’)[1]

の部分でURLの末尾にあるid番号を切り出して配列として変数に格納してそれを2つの関数の引数として利用しています

一つ目が8行目のfetchUpdateWish(uid)の部分です

この関数でPUTメソッドを実行しています

そして、もう一つがfetchGetWish(uid)です

どちらもwishlist.jsのWishListModuleから呼び出せます

ということでもう一度wishlist.jsを見てみましょう

先ほどコードは載せたのでここでは画像で簡単に

33行目からfetchUpdateWish()の処理を書いています

34~36でPUTメソッドでAPIに送信するbodyの中身を準備して39~43行目でbodyに格納しています

そして。44行目でfetchメソッドをつかってPUTメソッドを実行しています

URIの末尾に関数の引数であるuidを+しているのもポイントですね

jsonでやり取りするようにしていますので、json形式に変換して送信しています

51行目からはfetchGetWish()の処理になります

こちらは編集画面を読み込んだ際にあらかじめinputフォームにデータを入れておくために、該当するid番号のデータを抽出するための関数ですね

54~57でDOM操作を行って帰ってきたデータをフォームに表示しています

以上がPUTメソッドの説明になります

DELETEメソッドの実装について

DELETEメソッドは

削除ボタンをトリガーにしています

削除ボタンはwishlist.jsのfetchAllList()の処理のなかで動的に追加をしています

17行目に編集へのリンクを作っていますが、その<td>タグにid=”edit${i}”としてidを振っています

iはfor文の変数です(この記事の上部のwishlist.js参照)

データの数だけ繰り返し処理をしていました

レコードごとに削除ボタンを実装したかったのでこのように、idをバラバラに振るために変数のiの数字を加えて工夫をしています

そして、その子要素としてcreateElementで作成したボタンを追加しています

だから編集のリンクの後ろに削除ボタンが必ず実装されているのです

また、このボタンは値を持たせるようにしました

22行目のbutton_add.value=obj.idの部分です

ここでbuttonの値に該当するデータのid番号を持たせ、後程このボタンにaddEventListenerで加えられるクリックイベントで呼び出される

DeleteListModule.fetchDeleteList()の引数として()内に入れて関数を実行して、該当するデータの削除を実行しています

ということで最後にfetchDeleteList()の確認をしていきます

DELETEメソッドの関数自体は非常に簡単です

特にデータを送る必要がないので、先ほどのボタンの値から関数の引数として受け取ったidをURIの末尾に加えてfetchメソッドを使ってDELETEメソッドで送るだけです

そして画面を更新して処理終了です

あ、ついでですからCSSのコードも置いておきます

以上です!

YouTubeもよろしくです!

コメント

タイトルとURLをコピーしました