今日は劉暁愛がジャワ島を独学して106日目。
ご視聴ありがとうございました。
それでは、今日の勉強を始めましょう：
多くのウェブサイトでは、ユーザーが欲しいコンテンツをすぐに見つけられるように、異なるモジュールに対応するナビゲーションバーをホームページに設けています。
次のような特徴があります：
- サイトが読み込まれるとすぐに、ナビゲーションバーのコンテンツを読む必要があります。
- ナビゲーションバーは、ショッピングサイトでは一般的な複数のページに表示されます。
- ナビゲーションバーのデータは固定されており、ほとんど変更されません。
そのため、MySQL データベースを頻繁にクエリする必要があるという問題が発生します。
ためにクエリの効率を改善するために、キャッシュ技術の導入は、ほんの数日前にredisデータベースを学ぶことです。
本日のコアのひとつは、redisデータベースの研究とレビューでもあります。
I. コードの記述
1 フロントエンドの送信要求
まず、最初のステップですが、まずリクエストがあり、サーバーはリクエストに応じた処理を行います：
jQueryのページロードイベントを使用すると、ページが更新されるとすぐに、ウェブサイトはナビゲーションバーのデータをデータベースに照会ます。
リクエストパスはcategoryServletで、methodNameはqueryAllです。
つまり、サーバにCategoryServletが存在し、リクエストを受け付けると同時に、queryAllメソッドで対応する処理を行う必要があります。
2ウェブレイヤーコード
リクエストを受け付けるCategoryServletを作成します：
リクエストにはデータがないので、必要なのはレスポンスデータだけです。
応答する必要があるデータ形式はjsonで、コードを書き始めた最初の2日間はウェブレイヤーでjsonに変換していました。
実際、これをサービス・レイヤーに入れて、ウェブ・レイヤーへのデータ変換を完了させることもできます。
その場合、ウェブ層のコードも非常にクリーンです。
2サービス層コード
サービスは特定のビジネスロジックを処理します：
レディスデータベース
jedisUtilsツールクラスを直接使用することで、redisデータベースの操作を完了させることができます。
使い方は非常に簡単で、そのカプセル化プロセスについては詳しく説明しません。
jedisのgetメソッドでCategory_Listをキーにデータを作成します。
初期設定データ
最初にデータを照会するときは、MySQL からデータを照会する必要があります。
クエリデータはリストコレクション、つまり多くのCategoryオブジェクトで、そのデータ形式をjsonに変換します。
redisにデータを保存
set()メソッドでjsonデータをredisに格納します。
このセットアップでは、データを照会するために毎回mysqlにアクセスする必要はありません。
4Daoレイヤーコード
jdbcTemplateを使用して、tab_categoryテーブルのすべてのデータを照会します。
データの行はCategoryオブジェクトに対応するので、テーブル全体をクエリすることはCategoryオブジェクトのコレクションに対応します。
フロントエンド・レンダリング
1 データ形式
バックエンドがフロントエンドにデータを返信すると、その結果は console.log() で出力され、コンソールで見ることができます。
ブラウザでF12キーを押してコンソールを開きます：
この3つは相互に関連しています：
- フロントエンドの対応するデータ形式はjsonです。
- データベースの対応するデータはデータテーブルです。
- Javaで対応するデータはエンティティ・クラス、正確には複数のエンティティ・クラスを含むコレクションです。
2 フロントエンドページのレンダリング
バックエンドのレスポンスからデータを取得した後、フロントエンドはそれを動的にページにレンダリングする必要があります：
データのトラバース
レスポンスデータは、jQueryのeachメソッドを使って走査することができます：
- indexはデータのインデックスです。
- 要素は、現在のインデックス位置に対応する要素です。
ページ分割
フロントエンドの静的ページのレイアウトは以下の通りです：
しかし、静的なページはデータを死ぬほど書き込むので、トラバースされたデータを動的にフロントエンドのページに追加する必要があります。
タブの2つ、ホームとお気に入りリストは固定されているので、中央の8行だけが動的に継ぎ足されます。
セレクタで対応するタグにコンテンツをレンダリングします。
これは、jQueryのhtmlメソッドを使用して行うことができ、使用されるセレクタはクラスセレクタです。
最後に
ご視聴ありがとうございました。
