React.js + Spring Boot その２

こんにちは。前回に引き続きReact.js + Spring Bootを動かしていきます。前回は基本的な動きが作成されただけでした。実際に使用する機能を追加していきます。

EmployeeRepository.javaの継承をCrudRepositoryからPagingAndSortingRepositoryに変更するだけで可能です。

データ初期設定を追加して、ページサイズ=2で0ページ目を取得します。UIはまだ実装していないのでサーバー側の確認です。

ページサイズ=2で1ページ目取得。

app.jsにデータ登録用のダイアログを追加します。

handleSubmit()は、submit時の処理を記述します。onCreate()で実際のデータを作成しています。render()は入力用のテキストボックスを準備しています。

OnCreate()はAppの中に実装します。

follow()の箇所でPOSTでデータ登録行っています。then()でPOSTの結果を受け取り、done()でページングの最後のページに遷移します。

上で実装できていなかったページングのUI部分をapp.jsに実装します。OnNavigate()もApp()の中に実装します。

EmployeeListのrender()をページングに対応した実装に変えます。

データ削除ができるように各行にボタンを追加します。Employeeを下記のように変更します。handleDelete()がDeleteボタンクリック時の動作になります。実際にはOnDelete()でDELETEをAPIに送ります。

OnDelete()も同様にApp()の中に実装します。

最後にテキストボックスを配置し、入力したページに遷移する機能を実装します。

updatePageSize()はApp()に実装します。

前回と同様にコマンドプロンプトからmvnw.cmd spring-boot:runを実行し、http://localhost:8080/にアクセスします。

ページサイズを2から4に変更するとAjax処理で画面が更新されます。

ページングもAjax処理で動作します。

Createボタンをクリックするとモーダルで登録画面が表示され、入力してCreateボタンをクリックするとデータが登録されます。

チュートリアルまだ途中ですが、長くなったので今回はここまで。

前回に続いてReact.js+Spring Bootのサンプルアプリケーションを使いながら、POSTでデータ登録、DELETEでデータ削除といったREST APIでよく行われるReact.jsの実装を学習しました。

次回に続くかも。