1月6日(火)3コマ目
今日、やったこと
[おさらい]REST APIアプリケーション作成（前回のつづき）
今日のホワイトボード
[おさらい]REST APIアプリケーション作成
前回はサーバー側（API作成）を作成。
今日からクライアント側を作成。
サーバー側APIの確認
GETコマンドはWebブラウザのアドレス欄にURLを入力してリクエストすれば確認できる。
POST、PUT、DELETEコマンドはChromeに追加した「Talend API Tester」で確認。
〇POSTコマンド
登録用データはボディ部にJavaScriptのオブジェクト形式で送信。
キーはEmployeeクラスのフィールド名と一致させる。
 |
| 図 サーバーAPI確認 POST |
〇PUTコマンド
POSTコマンドと同じように、変更用データはボディ部にJavaScriptのオブジェクト形式で送信。
 |
| 図 サーバーAPI確認 PUT |
〇DELETEコマンド
削除対象のIDだけ送信すればいいので、クエリパラメータで送信。
 |
| 図 サーバーAPI確認 DELETE |
クライアント側
HTMLファイル、JavaScriptファイルを下図のように配置。
 |
| 図 HTML、CSS、JavaScriptの配備 |
段階をおって作成。
| 第1段階 | 従業員情報を全件検索して、表形式で表示。 |
|---|---|
| 第2段階 | 従業員一覧表の各行に選択ボタンを追加。選択ボタンをクリックすると、該当従業員の情報が画面下部に表示される。 |
| 第3段階 | 削除ボタンをクリックすると、選択された従業員が削除される。 |
クライアント 第1段階
まずは、全件検索した結果を表形式で表示。
HTMLファイル(index.html)
JavaScriptファイル(employee.js)
クライアント 第2段階
従業員一覧表の各行に選択ボタンを追加。
選択ボタンクリック時に、選択された行の従業員情報を画面下部に表示。
選択ボタンは以前作成したサンプルの削除でも同じようなものを作成済み。
 |
| 図 選択ボタン |
HTMLファイル(index.html)
JavaScriptファイル(employee.js)
クライアント 第3段階
削除ボタンをクリックすると、選択された従業員が削除される。
HTMLファイル(index.html)
JavaScriptファイル(employee.js)
次回は
登録、変更。
