Instagramクローン計画-(10)

人気ページとプロフィールページの賛実現

1)人気ページ実施
いいねのある写真を順番に出力し、いいねの多い順に
なぜapiコントローラを使用しないのですか?apiはデータを返すサーバです.(ajaxを使用する必要がある場合はapiを使用します.)人気ページでは、必ずしもサーバにデータを返す必要はありません.データを携帯するだけです.
apiで実現したら?ブラウザリクエストではなくandroid,iosリクエストの場合、データを提供する必要があるため、api実装を使用する必要があります.
(1) Controller

33行目:モデルに人気写真を入れるが、人気写真を含むサービスを作ってリストに載せる.
35行目:モデルに身を包み、画像/流行ページに入る.
(2) Service

(3) Repository
mPopular()でクエリーを使用して関数を作成します.(DBで試してから作成)

10行目:imageIdおよびlikeCountは、コードの実行中にエラーが発生する可能性があるため、画像テーブルの値のみを作成できます.
11行かっこ内:likeCountという仮想コラムを作成し、「いいね」の付いたimageIdをカウントし、それをGROUP BY imageIdに組み合わせ、各imageIdが「いいね」の個数を計算できる.それをORDER BY DESCにするとたくさんの順番に並びます
クエリー付きRepository

(4) JSP
ドア出力を回転させるために使用します.

2)個人情報ページを実現する
profile.jspでlikeCountをアップロードする必要がある部分>>dtoのユーザーが選択した場合、その中の画像にlikeCountがあり、利用できます.>>データベースにデータはありませんが、ImageServiceによって作成されます.
(1)内部演算の方法
ImageServiceがやったように.


dtoに入力したuserEntityを変更して演算します.
(2)外部から演算を行う.

内部からdtoに値を割り当てるよりも外部からの演算が簡単ですが、内部で演算を完了してデータのみを取得することが望ましいです.

プロファイル写真変更実施

1)アイコンの変更のみ許可

display:noneと表示されません.
22～23行の画像をクリックすると、モードが表示されます.

114行目:モデールで写真アップロードボタンを押すとprofile.jsのprofileImageUpload()関数を呼び出します.

ProfileImageUpload()を実行すると、ウィンドウが開き、イベント発生>>写真の添付を強制的にクリックできます.
画面に写真をアップロードし、サーバ側に入力してデータベースの変化を反映します.
(1)画面


JSはpageUserIdとPrincipiId(ログインしたユーザーが現在のページのユーザーと同じかどうかを知る必要がある)を取得する必要があるため、JSPはこの値を受信して渡します.
確認すると、以下に示すように、ログイン・ユーザーとプロファイル・ページのユーザーが異なります.この場合、添付の写真ウィンドウが表示されないようにすると、その出現が阻止されます.


現在のページのユーザーIDとログインしているユーザーIDが異なる場合は、ウィンドウメッセージと返信を通知することで何も開かれません.
画像をサーバに送信するには、formラベルから写真データを取得します.写真なので、複数のファイルで受信します.

let profileImageForm=$("#userProfileImageForm");

これをロードすると、コンソールで確認すると、次のように配列形式で抽出されるため、配列の0番目の順序が読み込まれます.

ProfileImageFormタグのキー/値ペアのみがFormDataオブジェクトを使用し、Ajaxを使用してサーバに送信されます.

111行:画像URLが変更されるので、タイプは「put」です.
112行:特定のユーザのプロファイル画像のみが変更されたことを示します.
114行目:contentType>>別途指定しない場合、デバッガはx-www-form-urlcoded値になります.このタイプでは写真を転送できないためfalseに変更します.(必須)
115行:processData>>contentTypeがfalseの場合、自動的にQuest Stringに設定され、falseとして分解されます.(ajaxピクチャ転送は必須)
116行:encType>>複数のフォームデータを設定して写真を転送します(JSPの対応するタグに設定されている場合、JSは設定する必要はありません)
(2) api
Controller

39行:データ(写真)を送信し、複数のファイルをパラメータとします.正しい名前で送信する必要があります>>JSPとしてラベルのname値を入力します.
※Image Uploadを実装する場合はajaxではなくdto(内蔵多部)でデータを送信します.(理由:タイトルも一緒に送る)
40行:アバターを変更した後、セッション値も変更する必要がありますので、入れてください.
43行:変更を受けたユーザーエンティティをセッション値に挿入します.>>セッションの変更
45行:応答がないため、CMRespdtoに空の値が含まれます.
Service

35行:PUT変更DB>@Transactional(読み取り専用ではありません)
37行目から48行目:UUIDを使用する方法は、ImageServiceからImageUploadのコードを取得し、一部修正することです.
38,45行:複数のファイル自体がファイルなのでgetFile()を削除します.
41行目:アップロードパスのアップロードフォルダDIを設定するため、この部分もImageServiceから取得する.(32～33行)
これで写真はサーバーに保存されます.
50行:次に、データベースに値を付けるために、ユーザーRepositoryにIDでユーザーを検索させます.このとき,プレイヤーがいない場合のためにorElseThrow()で導出処理を行った.
53行:ImageFileNameを検索と更新>>セットに保存(保存不要)
54行:セッションを保存するために戻ります.(汚体王に更新.)
※serialize()はkey/valueデータを投げ出す際に使用します.(フォームデータ転送写真.区別!!)