티스토리 뷰

Web/Spring boot

[Spring] 스프링부트 + JPA + thymeleaf + Spring Security로 회원가입 + 게시판(수정, 삭제, 등록, 조회, 댓글, 좋아요) + 로그인 구현하기 #6 메인 화면

poopooreum 2024. 8. 29. 20:20
반응형

✏️ 메인화면 로직

  1. 보통 로그인을 하게 되면 ~님 환영합니다를 띄어줌, 여기서도 로그인을 하면 화면에 ~님 환영합니다를 띄어줌
  2. 사람들이 쓴 게시글들을 모두 볼 수 있음
  3. 글쓰기 버튼을 누르면 게시글 등록화면으로 이동
  4. 로그인만 하면은 모든 사람들의 게시물에 댓글을 달거나 좋아요를 누를 수 있고, 게시물의 댓글도 볼 수 있음
  5. 삭제하기와 수정하기는 자신이 쓴 게시물만 가능하며 다른 사람이 쓴 게시물은 건들 수 없음

✏️ list.html 생성

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>게시판 리스트</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/css/main.css}">
</head>
<body>
<h1><span th:text="${id }"></span>님 환영합니다.</h1>
<table class="table">
    <thead class="thead-light">
    <tr class="text-center">
        <th scope="col">글번호</th>
        <th scope="col">글제목</th>
        <th scope="col">내용</th>
        <th scope="col">작성자</th>
        <th scope="col">좋아요</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="board : ${boardList}">
        <td scope="row" width="10%">
            <div th:text="${board.idx}" th:name="idx"></div>
        </td>
        <td scope="row" width="20%">
            <div th:text="${board.title}"></div>
        </td>
        <td scope="row" width="10%">
            <div th:text="${board.content}"></div>
        </td>
        <td scope="row" width="10%">
            <div th:text="${board.member.id}"></div>
        </td>
        <td scope="row" width="10%">
            <div th:text="${board.likeCount}"></div>
        </td>
        <td>
            <a th:href="@{/member/comment/{idx}(idx=${board.idx})}">댓글달기</a>
        </td>
        <td>
            <a th:href="${'/member/comment/' + board.idx + '/view'}">댓글보기</a>
        </td>
        <td>
            <form th:method="post" th:action="${'/member/board/' + board.idx + '/like'}">
                <input type="submit" name="like" value="좋아요 누르기">
            </form>
        </td>
        <span th:if="${id==board.member.id}">
            <td>
                <form method="post" action="/member/delete">
                    <input type="submit" name="delete" value="삭제하기">
                    <input th:type="hidden" th:name="idx" th:value="${board.idx}">
                </form>
            </td>
            <td>
                <a th:href="${'/member/modify/' + board.idx}">수정하기</a>
            </td>
        </span>
    </tr>
    </tbody>
</table>
<table>
    <tr>
        <form method="post" action="/member/logout">
            <input type="submit" name="로그아웃" value="로그아웃">
        </form>
    </tr>
    <tr>
        <a href="/member/post">글쓰기</a>
    </tr>
</table>
</body>
</html>

이 화면은 자바 파일은 거의 존재하지 않고 list.html 파일이 중요함 . WebController에서 넘겨받은 boardlist와 id를 사용하여 게시물을 화면에 나타내고 로그인 한 아이디와 게시물의 작성자 아이디가 동일하면 삭제하기와 수정하기 버튼을 화면에 출력. 추가로 댓글보기, 댓글달기, 좋아요 누르기 버튼의 링크에는 게시물의 번호를 추가로 url에 삽입해주어서 url에 혼선이 생기지 않도록 하였음

✏️ WebController 클래스

@GetMapping("/member/list")
public String memberList(Model model, HttpServletRequest httpServletRequest) {

    HttpSession session = httpServletRequest.getSession();
    Optional<Object> idOptional =Optional.ofNullable(session.getAttribute("userId"));
    if(idOptional.isEmpty()){
        log.error("권한 없음");
        return "redirect:/login";
    }
    String id = idOptional.get().toString();
    List<Board> boardList = boardService.getAllBoardList();
    model.addAttribute("boardList", boardList);
    model.addAttribute("id", id);
    log.info("리스트 출력완료");
    return "list";
}

list.html에서 사용할 boardList와 id를 model.addAttribute 메소드를 사용하여 넘겨주었다.

반응형
저작자표시 비영리 변경금지

'Web > Spring boot' 카테고리의 다른 글

[Spring] 스프링부트 + JPA + thymeleaf + Spring Security로 회원가입 + 게시판(수정, 삭제, 등록, 조회, 댓글, 좋아요) + 로그인 구현하기 #8 게시물 수정하기  (0) 2024.08.29
[Spring] 스프링부트 + JPA + thymeleaf + Spring Security로 회원가입 + 게시판(수정, 삭제, 등록, 조회, 댓글, 좋아요) + 로그인 구현하기 #7 게시물 등록  (0) 2024.08.29
[Spring] 스프링부트 + JPA + thymeleaf + Spring Security로 회원가입 + 게시판(수정, 삭제, 등록, 조회, 댓글, 좋아요) + 로그인 구현하기 #5 로그인  (0) 2024.08.29
[Spring] 스프링부트 + JPA + thymeleaf + Spring Security로 회원가입 + 게시판(수정, 삭제, 등록, 조회, 댓글, 좋아요) + 로그인 구현하기 #4회원 가입  (0) 2024.08.29
[Spring] 스프링부트 + JPA + thymeleaf + Spring Security로 회원가입 + 게시판(수정, 삭제, 등록, 조회, 댓글, 좋아요) + 로그인 구현하기 #3 Spring Security 설정  (0) 2024.08.29
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함