[Golang/React]~MovieApp6: Form処理3(削除)を実装しよう!

こんにちは、KOUKIです。

GolangとReactでMovie Appの開発をしています。

前回に引き続き、Movie Formの処理を実装します。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

Movieデータの保存や更新を行うMovie Formの実装を行いました。

事前準備

モジュール

削除処理

FormからMovieデータを削除できるように機能を追加します。

Cancelボタン

CancelボタンをEditMovieコンポーネントに追加します。

LinkでCancelボタンを追加しました。これで、管理画面に遷移できます。

Deleteボタンの設置

続いて、Deleteボタンを設置します。

URLにidが渡された場合は、Deleteボタンを表示します。

「http://localhost:3000/admin/movie/0」

「http://localhost:3000/admin/movie/1」

削除アラートの実装

react-confirm-alertを併用しつつ、削除アラートを実装しましょう。

削除処理 API(golang)

Golangで削除処理APIを実装します。

まずは、DBへDELETE文を発行し、データを削除する処理です。

続いて、ハンドラーを実装します。

最後に、ルートを追加します。

削除処理(React)

React側で削除処理を完成させましょう。

先ほど実装した削除APIへ向けてリクエストを送る処理を追加しました。

検証1

検証のため「http://localhost:3000/admin/movie/1」のデータを削除したいと思います。

「pq: update or delete on table “movies” violates foreign key constraint “fk_movie_genries_movie_id” on table “movies_genres”」エラーが出てしまいましたね。。

idが1のデータは、movies_genresと関連を持っているので削除できません。

id2のデータで試してみましょう。

OKですね!

Admin画面の作成

削除処理とは関係ないのですが、Admin画面の作成についても触れておきます。

現状は、以下のようになっています。

「http://localhost:3000/admin」

Admin画面の実装

これまで実装してきた内容とほぼ同じなので、さっくりいきます。

これで、Admin画面から編集画面に遷移することができるようになりました。

ページ遷移

EditMovieコンポーネントを修正します。

Saveボタンを押下したときに、Admin画面に遷移するようにしました。

検証

検証しましょう。ブラウザから「http://localhost:3000/admin」にアクセスしてください。

次回

次回は、バックエンド側でルーティング処理のセキュアな実装について触れていきます

記事まとめ

参考書籍

ソースコード

movie-handlers.go

movies-db.go

routes.go

Admin.tsx

EditMovie.tsx

コメントを残す