Spring Boot2でWebアプリ構築[データ編集]

投稿者: | 2019年2月20日

こちらの記事で、Sprint Boot2を使って文書をポストするだけの簡単なWebアプリケーションを構築しましたが、

今回はそれに編集機能を付けてみたいと思います。

 

動作イメージはこちら。

既にエントリされている各行に[編集]ボタンが存在しています。例えば三番目の行のボタンをクリックすると・・・

 

編集画面に遷移します。フォームには既存のデータが表示されています。

 

内容を書き換え、[送信]ボタンをクリック。

 

内容が書き変わった状態でトップページに戻ります。

 

前回のプログラムからの変更点は以下です。

 

edit.htmlの作成

編集用ページとして、[編集]ボタンを押下して遷移するedit.htmlを新規に作成します。

「名前」「投稿内容」そして「送信」ボタンを設けます。

 

index.htmlの修正

index.htmlに[編集]ボタンを付けていきます。

ボタンと共に、新たにformタグも追加します。

 

Repositoryの修正

次にSampleDataRepositoryに編集メソッドを追加します。

RepositoryにはCRUDメソッド自動生成機能があるので、findByIDを定義するだけで、IDをキーにデータベースのテーブルを検索する機能を実装することができます。

 

Controllerの修正

最後にControllerクラスを修正します。

トップページから[編集]ボタン押下で送られてくるパラメータはPOST送信することにし、実装済みのformメソッドで条件分岐することにしました。

IDがセットされていなければ新規登録、セットされていれば編集というように場合分けを行っています。

また、edit.htmlで編集したデータを処理するのにupdateメソッドを新規作成しました。データ編集後、トップページにリダイレクトしています。