ソフトウェア工学実習(Java) 2025年度後期(2年

今日、やったこと [REST API]更新 [REST API]削除 今日のホワイトボード [REST API]更新 前回のつづき。完成版。 [Java]Controller.java 更新データのリストがボディ部で送信された際のメソッド 　List<Book> update(List<Book> list) を追加。 [JavaScript]update.js 更新用リクエストを送信するupdate()関数を完成。 [HTML]update.html 前回と変わりなし。 [REST API]削除 画面は下図のように、各行に削除ボタンを配置。 このボタンをクリックすると、対象書籍が削除される。 図　削除画面のイメージ [Java]Controller.java 以前、クエリパラメータで削除対象のIDを渡すと削除するdelete()メソッドを作成済み。 これを使う。 [HTML]delete.html 一覧表の作成はJavaScript側で行っているため、HTMLでは特に何もすることはない。 [JavaScript]delete.js 削除はHTTPのDELETEコマンドでリクエスト。 これで検索、追加、変更、削除ができるようになった。 次回は REST APIのアプリケーションを作成してもらいます。  

今日、やったこと [REST API]更新 今日のホワイトボード 画面イメージ 下図のように、全件検索した結果を書籍名、価格が変更できるように、テキストボックスに。 さらに、どのテキストボックスに入力されたデータか分かるようにするために、各<input>タグにidを付与する。   図　更新画面のイメージ 入力内容を取得する JavaScriptにて、<tbody>タグのrowsプロパティで全行が取得できる。 繰り返し処理で、rowsプロパティから1行分ずつ取得し、cellsプロパティで、各セルを取得。 図　入力内容を取得するには update.html update.js あとはupdate()関数にて、サーバーに更新のためのリクエストを送信する。 サーバー側に、更新用メソッドを追加。 次回は 更新の完成。 あと、削除。

今日、やったこと [REST API]価格帯で検索　追加 [REST API]新規登録 今日のホワイトボード [REST API]価格帯で検索　追加 画面を下図のように価格帯で検索できるように追加。 図　価格帯で検索を追加 search.html 検索条件入力用<input>タグ、検索ボタンを追加。 search.js 価格帯で検索ボタンクリック時に、searchByPrice()関数呼び出し。 searchByPrice()関数にて、fetch()でAPIをリクエスト。 Controller.java 価格帯で検索するためのメソッドを追加。 2つの検索条件はクエリパラメータで受け取る。 [REST API]新規登録 新規登録はPOSTコマンドでリクエスト。 登録データはHTTPのボディ部にJSON形式で格納。 これに伴い、HTTPのヘッダ部にContent-typeにapplication/jsonを設定。 図　POSTコマンド送信時のパケット 画面は以下のとおり。 図　新規登録用画面 update.html update.js fetch()でPOSTコマンドでリクエストするには、第2引数で指定する。 （デフォルトはGETコマンド） また、ヘッダ部やボディ部も第2引数で指定。 Controller.java 以前、POSTコマンドリクエスト時に、HTTPのボディ部にJSON形式で格納されたデータを登録するメソッドを追加済み。今回はこれを使う。 次回は 登録機能の確認。 変更、削除機能を追加。