投稿

2月20日(金)1、2コマ目

イメージ
今日、やったこと Spring Securityで認証アプリケーション作成(前回からのつづき) 今日のホワイトボード 前回は 前回 は 認証を使えるようにした（ユーザーはデフォルトの”user”のみ） 認証が必要なページ、不要なページを分けた まで作成。  DBのユーザー情報を使って認証 DBに作ったSEC_ユーザーマスタテーブルを使って認証をする。 いくつかクラスを作ったが、以下の関係。 図　DBでユーザー認証を行うためのクラスたち entity/User.java SEC_ユーザーマスタ情報受け渡し用クラス。 repository/UserRepository.java JpaRepositoryインタフェースを継承したSEC_ユーザーマスタテーブルアクセス用クラス。 ログイン名列(User.javaではloginnameフィールド)で検索するためのfindByLoginname()メソッドを追加。 JpaRepositoryでは、 　findBy + 列名 で、指定列を引数で検索するメソッドを生成してくれる。 config/LoginUserDetails.java UserDetailsクラス継承クラス。 SpringSecurityはユーザー情報をUserDetails型で扱う。 config/LoginUserDetailsService.java UserDetailsServiceクラス継承クラス。 SpringSecurityはユーザー情報の取得をUserDetailsService型のインスタンスで行う。 config/SecurityConfig.java DBに格納されているパスワードはBCryptでハッシュ化されている。 認証時に入力パスワードをハッシュ化する際に利用するpasswordEncoderを用意。 ログイン名からユーザー情報を取得 LoginUserDetailsServiceクラスでは、findByLoginname()でログイン名か...
続きを読む

2月19日(木)1コマ目

イメージ
今日、やったこと REST APIでエラーを通知する（前回のつづき） 今日のホワイトボード 前回はサーバー側の途中まで作成。今日はそのつづき。 GlobalExceptionHandler.java コントローラーでエラー(例外)が発生した際の処理をまとめてここに。 コントローラ(ItemControllerクラス)で例外DuplicateIDExceptionがスローされたら、ステータスコード400でこのメソッドの戻り値をボディ部に格納して返信する。 図　ID重複時のサーバーからの返信 これでサーバー側は完成。 API Testerで確認 Chromeの拡張機能API Testerでレスポンスを確認。 〇リクエスト送信 図　API Testerでリクエスト送信 〇登録成功の場合 見ずらいけど、以下のようにID=12の書籍が登録され、全件検索結果が返ってくる。 図　レスポンス(登録成功) 〇登録失敗の場合 IDが重複するデータを送信。 ステータスコード400、ボディ部にエラー情報が返ってくる。 図　レスポンス(登録失敗) クライアント側 index.html メッセージ表示用<p>タグ追加。 insert.js insert()メソッドを改造。エラー時(response.okがfalse)に、エラーメッセージを取り出して、例外スローするために、同期処理を行っている点に注意。 今日が最終回 もしかしたら再試験があるかもしれません。
続きを読む

2月6日(金)3、4コマ目

今日、やったこと [評価用課題] REST API登録・変更・削除 今日のホワイトボード 今日は課題作成だけでした。 次回は REST APIのエラー通知。
続きを読む

2月16日(月)1コマ目

イメージ
きょう、やったこと REST APIでエラーを通知する 今日のホワイトボード 今までつくったREST APIはサーバー側でエラーが発生しても、クライアントに伝えていなかった。 エラー発生をHTTPのステータスコードを使って、クライアントに通知する。 作成するアプリケーション 全件検索結果表示＋新規登録。 新規登録時に、IDがすでに登録済みならエラーを表示したい。 図　作成するアプリケーション サーバーからクライアントにエラーを通知する HTTPのステータスコードを使って通知する 。 今までは、サーバーでエラーが発生しても、クライアントにはステータスコード200を通知していた。 図　HTTPのステータスコードでエラーを通知する クライアントから新規登録データを送信されたが、その内容に問題がある場合は、ステータスコード400("Bad Request")を返信する。 そのほかのステータスコード 300番代はリダイレクトメッセージ。 ページ遷移をこの300番代のステータスコードで実現できる。 図　300番代のステータスコードでリダイレクト 400番代はクライアントからのリクエスト内容に問題があるときに送信する。 500番代はサーバーのエラー。 未完成のソースコード 今日、つくったところまで。 Book.java 書籍情報受け渡し用クラス。 BookDAO.java 書籍情報アクセス用クラス。 insert()メソッドに注意！！ BookController.java コントローラクラス。 insert()はIDが重複している場合は、DuplicateIDExceptionがスローされる. index.html とくになんてことはないかと。 insert.js クライアントの登録データに問題ありの場合の処理 クライアントから送信された新規登録データのうち、IDがすでに利用中の場合は、エラーにしたい。 エラー時の処理のために追加したクラス等。 DuplicateIDException.java 登録時にIDが重複しているときにスローされる実行時例外。 ErrorResponse.java エラー情報をまとめ...
続きを読む

1月29日(木)1コマ目

イメージ
今日、やったこと JavaScriptの同期・非同期処理 今日のホワイトボード サンプル 以前作成したサンプル(書籍情報)に以下を追加。 test.htmlを表示すると、ID=1の書籍を検索して、表示する。 test.html test.js test.htmlを表示すると、以下のようになる。 図　サンプル表示結果 fetch()関数は fetch()関数は非同期処理。 サーバーにリクエストを送信後、レスポンスを待たずに次の処理を行う。 test.jsのgetBook()関数は以下のように、①->②->③->④の順に動く。 図　fetch()関数は非同期処理 レスポンスを受け取るまで待つ fetch()関数がリクエストを送信後、レスポンスを受け取るまで次の処理を行わないようにしたい。 キーワード await をつけると、非同期処理->同期処理になる。 キーワードawaitを含む関数には、キーワードasyncを付与する。 test.js 表示すると、下図のようにちゃんと結果が表示される。 図　非同期処理->同期処理　表示結果 非同期処理のままで動くようにしたい レスポンスを受け取ったタイミングで表示すればいい。 test.js これでもちゃんと結果が表示される。 図　非同期処理改造版　表示結果 次回は 評価用課題をまた作ってもらいます。
続きを読む

1月22日(木)1コマ目

今日、やったこと [評価用課題作成]気象データ検索サイト 今日のホワイトボード 今日はひたすら課題作成でした。 次回は JavaScriptの同期・非同期処理について 
続きを読む

1月15日(木)1コマ目

今日、やったこと [練習問題] ニュース検索・編集サイト 今日のホワイトボード [練習問題] ニュース検索・編集サイト 正解例をあげておきます。 dto/Content.java 配布ファイルどおり。 dao/ContentDAO.java 配布ファイルどおり。 controller/NewsController.java index.html 配布ファイルとおり。 css/style.css 配布ファイルとおり。 js/news.js 次回は 評価用課題を作ってもらいます。
続きを読む