SpringとJPAに基づくWebアプリケーション開発#26プロファイルビュー

46339 ワード

SpringとJPAに基づくWebアプリケーション開発#26プロファイルビュー
これらはインフラストラクチャ、Spring、JPAベースのWebアプリケーション開発のコースに基づいて作成されています.

要約は、学習コース、要約ソースのタグ付け、ブログまたはドキュメント形式で公開できるようにする原則の下で公開されます.出典は前述の通り、インフラストラクチャ、Spring、JPAベースのWebアプリケーション開発.
私が勉強しているソースコードはhttps://github.com/n00nietzsche/jakestudy_webappにアップロードされます.私は伝言ごとに講義のどの部分を記録します.

プロファイルビュー

  • 情報の有無に応じて、異なる情報が提示される.
  • では、プロファイルを変更する権限があるかどうかを判断する必要があります.
  • ガイド
  • ListGroup
  • Grid
  • AccountControlコードの変更


    viewプロファイルメソッドの追加

        @GetMapping("/profile/{nickname}")
        public String viewProfile(@PathVariable String nickname, Model model, @CurrentUser Account account) {
            Account byNickname = accountRepository.findByNickname(nickname);
    
            if(byNickname == null) {
                throw new IllegalArgumentException(nickname + "에 해당하는 사용자가 없습니다.");
            }
    
            // 뷰에 내려지는 이름은 생략했을 때, 타입의 이름(Account)의 camelCase 를 따른다.
            model.addAttribute(byNickname);
            model.addAttribute("isOwner", account.getNickname().equals(nickname));
    
            return "account/profile";
    
        }
    これは、pathVariableからnicknameを受け取った後に照会を行い、それに基づいて個人情報ページビューの内容を表示するものである.
    ページを表示しているユーザが現在ログインしているユーザである場合、isOwnerの値がビューに渡されます.

    Profile.htmlの作成

    <!DOCTYPE html>
    <html lang="en"
          xmlns:th="http://www.thymeleaf.org"
          xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
    <head>
        <title>회원가입</title>
        <th:block th:replace="fragments :: headLibraryInjection"></th:block>
    </head>
    
    <body class="bg-light">
    
    <th:block th:replace="fragments :: main-nav"></th:block>
    <div class="alert alert-warning" role="alert" th:if="${account != null && !account?.emailVerified}">
        스터디올래 가입을 완료하려면 <a href="#" th:href="@{/check-email}" class="alert-link">계정 인증 이메일을 확인</a>하세요
    </div>
    
    <div class="container">
        <!-- row의 기본은 col-12만큼의 크기를 갖는다.-->
        <div class="row mt-5 justify-content-center">
            <div class="col-2">
                <!-- Avatar-->
                <svg th:if="${#strings.isEmpty(account.profileImage)}" class="img-fluid float-left rounded img-thumbnail"
                     th:data-jdenticon-value="${account.nickname}" width="125" height="125"></svg>
                <img th:if="${!#strings.isEmpty(account.profileImage)}" class="img-fluid float-left rounded img-thumbnail"
                     th:src="${account.profileImage}" width="125" height="125"/>
            </div>
    
            <div class="col-8">
                <h1 class="display-4" th:text="${account.nickname}">제이크</h1>
                <p class="lead" th:if="${!#strings.isEmpty(account.bio)}" th:text="${account.bio}">자기 소개</p>
                <p class="lead" th:if="${#strings.isEmpty(account.bio) && isOwner}">한 줄 소개를 추가하세요.</p>
            </div>
        </div>
    
        <div class="row mt-3 justify-content-center">
            <div class="col-2">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-intro-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
                       aria-controls="v-pills-profile" aria-selected="true">소개</a>
                    <a class="nav-link" id="v-pills-study-tab" data-toggle="pill" href="#v-pills-study" role="tab"
                       aria-controls="v-pills-study" aria-selected="false">스터디</a>
                </div>
            </div>
            <div class="col-8">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel"
                         aria-labelledby="v-pills-profile-tab">
                        <p th:if="${!#strings.isEmpty(account.url)}">
                            <span style="font-size: 20px;">
                                <i class="fa fa-link col-1"></i>
                            </span>
                            <span th:text="${account.url}" class="col-9"></span>
                        </p>
                        <p th:if="${!#strings.isEmpty(account.occupation)}">
                            <span style="font-size: 20px;">
                                <i class="fa fa-briefcase col-1"></i>
                            </span>
                            <span th:text="${account.occupation}" class="col-9"></span>
                        </p>
                        <p th:if="${!#strings.isEmpty(account.location)}">
                            <span style="font-size: 20px;">
                                <i class="fa fa-location-arrow col-1"></i>
                            </span>
                            <span th:text="${account.location}" class="col-9"></span>
                        </p>
                        <p th:if="${isOwner}">
                            <span style="font-size: 20px;">
                                <i class="fa fa-envelope-o col-1"></i>
                            </span>
                            <span th:text="${account.email}" class="col-9"></span>
                        </p>
                        <p th:if="${isOwner || account.emailVerified}">
                            <span style="font-size: 20px;">
                                <i class="fa fa-calendar-o col-1"></i>
                            </span>
                            <span th:if="${isOwner && !account.emailVerified}" class="col-9">
                                <a href="#" th:href="@{'/check-email?email=' + ${account.email}}">가입을 완료하려면 이메일을 확인하세요.</a>
                            </span>
                            <span th:text="${#temporals.format(account.joinedAt, 'yyyy년 M월 가입')}" class="col-9"></span>
                        </p>
                        <div th:if="${isOwner}">
                            <a class="btn btn-outline-primary" href="#" th:href="@{/setting/profile}">프로필 수정</a>
                        </div>
                    </div>
                    <div class="tab-pane fade show" id="v-pills-study" role="tabpanel"
                         aria-labelledby="v-pills-study-tab">
                        Study
                    </div>
                </div>
            </div>
        </div>
    
        <th:block th:replace="fragments :: footer"></th:block>
    </div>
    
    <script th:replace="fragments :: form-validation"></script>
    </body>
    </html>
    起動ベルトを利用していますが、特に何もありません.