21 스프링부트(블로그만들기) 검색해도 페이징 될 수 있게 V3 3.10

윤주헌

Sep 23, 2024

21 스프링부트(블로그만들기) 검색해도 페이징 될 수 있게
V3 3.10

Contents

List 테스트 제대로 하려고 더미 데이터 이동 보드 컨트롤러 이동 보드 서비스 이동 책임이 DTO 여기까지니까 list

List

불리언타입 if문 가능하다

여기서 first는 현제 페이지면 true

true면 disable걸면 된다


{{>layout/header}}

<form action="/text/form" method="post">

    <input type="text" name="username">
    <button>고고</button>
</form>

<div class="container p-5">

    <div class="d-flex justify-content-end mb-2">
        <form action="/" method="get" class="d-flex col-md-3">
            <input class="form-control me-2" type="text" placeholder="Search" name="title">
            <button class="btn btn-primary">Search</button>
        </form>
    </div>

    {{#model.contents}}
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title mb-3">{{title}}</h4>
                <a href="/board/{{id}}" class="btn btn-primary">상세보기</a>
            </div>
        </div>
    {{/model.contents}}
    <ul class="pagination d-flex justify-content-center">
        <li class="page-item {{#model.first}}disabled{{/model.first}}"><a class="page-link" href="?page={{model.prev}}">Previous</a></li>
        {{#model.numbers}}
            <li class="page-item"><a class="page-link" href="?page={{.}}">{{.}}</a></li>
        {{/model.numbers}}
        <li class="page-item"><a class="page-link" href="?page={{model.next}}">Next</a></li>
    </ul>
</div>

{{>layout/footer}}

라스트로 바꿔주기


{{>layout/header}}

<form action="/text/form" method="post">

    <input type="text" name="username">
    <button>고고</button>
</form>

<div class="container p-5">

    <div class="d-flex justify-content-end mb-2">
        <form action="/" method="get" class="d-flex col-md-3">
            <input class="form-control me-2" type="text" placeholder="Search" name="title">
            <button class="btn btn-primary">Search</button>
        </form>
    </div>

    {{#model.contents}}
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title mb-3">{{title}}</h4>
                <a href="/board/{{id}}" class="btn btn-primary">상세보기</a>
            </div>
        </div>
    {{/model.contents}}
    <ul class="pagination d-flex justify-content-center">
        <li class="page-item {{#model.first}}disabled{{/model.first}}"><a class="page-link" href="?page={{model.prev}}">Previous</a></li>
        {{#model.numbers}}
            <li class="page-item"><a class="page-link" href="?page={{.}}">{{.}}</a></li>
        {{/model.numbers}}
        <li class="page-item {{#model.last}}disabled{{/model.last}}"><a class="page-link" href="?page={{model.next}}">Next</a></li>
    </ul>
</div>

{{>layout/footer}}

테스트 제대로 하려고 더미 데이터 이동

제 검색하면 10개 다 뜨니까 변경

5개만 -a 넣기


insert into board_tb(title, content, created_at, user_id)
values ('제목1-a', '내용1', now(), 1);
insert into board_tb(title, content, created_at, user_id)
values ('제목2-a', '내용2', now(), 1);
insert into board_tb(title, content, created_at, user_id)
values ('제목3-a', '내용3', now(), 2);
insert into board_tb(title, content, created_at, user_id)
values ('제목4-a', '내용4', now(), 2);
insert into board_tb(title, content, created_at, user_id)
values ('제목5-a', '내용5', now(), 2);

-a누르면

하지만 next누르면

변경됨


 <li class="page-item {{#model.first}}disabled{{/model.first}}"><a class="page-link" href="?page={{model.prev}}&title=">Previous</a></li>

이렇게는 바로 못적는다 왜? 사용자가 뭐를 적을지 모르니까

DTO에 타이틀 값 넣기

보드 컨트롤러 이동

보드 서비스 이동 책임이 DTO 여기까지니까

null이 들어가는 것을 공백으로 여기서 만들 수 있지만

서비스에서 어자피 게시글 안 들어가는 곳에 “”으로 처리 가능하다!


 @Data
    public static class PageDTO {
        private Integer number; // 현재페이지
        private Integer totalPage; // 전체페이지 개수
        private Integer size; // 한페이지에 아이템 개수
        private Boolean first;
        private Boolean last;
        private Integer prev; // 현재페이지 -1
        private Integer next; // 현재페이지 +1
        private List<Content> contents = new ArrayList<>();
        private List<Integer> numbers = new ArrayList<>();
        private String title;// DTO에는 null을 주지 않는다 공백은 줄지라도 그래서 공백줘야함

        public PageDTO(Page<Board> boardPage, String title) {
            if(title == null){
	            this.title = ""
            }else{
	            this.title = title;
            }
            this.number = boardPage.getNumber();
            this.totalPage = boardPage.getTotalPages();
            this.size = boardPage.getSize();
            this.first = boardPage.isFirst();
            this.last = boardPage.isLast();
            this.prev = boardPage.getNumber()-1;
            this.next = boardPage.getNumber()+1;
            int temp = (number / 3)*3;  // 0-> 0, 3->3, 6->6

            for(int i = temp; i<temp+3; i++){
                this.numbers.add(i);
            }

            //for로 id title만 있으면 확인이 가능하다
            //어디서 값을 가지고 와야 하지?
            for(Board board : boardPage.getContent()) {
                contents.add(new Content(board));
            }
        }
        //생성자를 만들어서

        @Data
        class Content {
            private Integer id;
            private String title;

            public Content(Board board) {
                this.id = board.getId();
                this.title = board.getTitle();
            }
        }
    }
    @Data // getter, setter, toString
    public static class ListDTO {
        private Integer id;
        private String title;
        private Long count;

        public ListDTO(Integer id, String title, Long count) {
            this.id = id;
            this.title = title;
            this.count = count;
        }
    }
}



    //이것도 pageable로 리팩토링해줘야 한다!
    public BoardResponse.PageDTO 게시글목록보기(String title, int page) {
        //전체 결과
        Pageable pageable = PageRequest.of(page, 3, Sort.Direction.DESC, "id");
        Page<Board> boardList;
        if (title == null) {
            // 게시글 순서 거꾸로 만드려고
            Sort sort = Sort.by(Sort.Direction.DESC, "id");
            boardList = boardRepository.findAll(pageable);
            //어자피 공백이니 null 들어가는 것을 ""로 바꾸면 된다
            return new BoardResponse.PageDTO(boardList, "");
            // 검색된 결과
        } else {
            boardList = boardRepository.mFindAll(title, pageable);
            return new BoardResponse.PageDTO(boardList, title);
        }
    }

보드 리스폰스


    @Data
    public static class PageDTO {
        private Integer number; // 현재페이지
        private Integer totalPage; // 전체페이지 개수
        private Integer size; // 한페이지에 아이템 개수
        private Boolean first;
        private Boolean last;
        private Integer prev; // 현재페이지 -1
        private Integer next; // 현재페이지 +1
        private List<Content> contents = new ArrayList<>();
        private List<Integer> numbers = new ArrayList<>();
        private String title;// DTO에는 null을 주지 않는다 공백은 줄지라도 그래서 공백줘야함

        public PageDTO(Page<Board> boardPage, String title) {
            this.title = title;
            this.number = boardPage.getNumber();
            this.totalPage = boardPage.getTotalPages();
            this.size = boardPage.getSize();
            this.first = boardPage.isFirst();
            this.last = boardPage.isLast();
            this.prev = boardPage.getNumber()-1;
            this.next = boardPage.getNumber()+1;
            int temp = (number / 3)*3;  // 0-> 0, 3->3, 6->6

            for(int i = temp; i<temp+3; i++){
                this.numbers.add(i);
            }

            //for로 id title만 있으면 확인이 가능하다
            //어디서 값을 가지고 와야 하지?
            for(Board board : boardPage.getContent()) {
                contents.add(new Content(board));
            }
        }
        //생성자를 만들어서

        @Data
        class Content {
            private Integer id;
            private String title;

            public Content(Board board) {
                this.id = board.getId();
                this.title = board.getTitle();
            }
        }
    }
    @Data // getter, setter, toString
    public static class ListDTO {
        private Integer id;
        private String title;
        private Long count;

        public ListDTO(Integer id, String title, Long count) {
            this.id = id;
            this.title = title;
            this.count = count;
        }
    }
}

title을 keyword로 바꾸자!


package org.example.springv3.board;

import lombok.Data;
import org.example.springv3.reply.Reply;
import org.example.springv3.user.User;
import org.springframework.data.domain.Page;


import java.util.ArrayList;
import java.util.List;

public class BoardResponse {

    @Data
    public static class DetailDTO {

        private Integer id;
        private String title;
        private String content;
        private Boolean isOwner;
       // private Integer userId;
        private String username;

        //리플라이 엔티티 집이 넣으면 안된다 레이지 로딩 되니까! 똑같이 생긴 DTO만들면 된다 비영속객체 만들어서 응답하게 하는게 좋다!
        private List<ReplyDTO> replies = new ArrayList<>();

        public DetailDTO(Board board, User sessionUser) {
            this.id = board.getId();
            this.title = board.getTitle();
            this.content = board.getContent();
            this.isOwner = false;

            if (sessionUser != null) {
                if (board.getUser().getId() == sessionUser.getId()) {
                    isOwner = true; // 권한체크
                }
            }
           // this.userId = board.getUser().getId();
            this.username = board.getUser().getUsername();

            for(Reply reply : board.getReplies()) {
                replies.add(new ReplyDTO(reply,sessionUser));
            }
        }
    }
    @Data
    public static class ReplyDTO{
        private Integer id;
        private String comment;
        private String username;
        private Boolean isOwner;

        public ReplyDTO(Reply reply, User sessionUser) {
            this.id = reply.getId();
            this.comment = reply.getComment();
            this.username = reply.getUser().getUsername();
            this.isOwner = false;

            if (sessionUser != null) {
                if (reply.getUser().getId() == sessionUser.getId()) {
                    isOwner = true; // 권한체크
                }
            }
        }
    }
    @Data
    public static class DTO {
        private Integer id;
        private String title;
        private String content;

        public DTO(Board board) {
            this.id = board.getId();
            this.title = board.getTitle();
            this.content = board.getContent();
        }
    }
    @Data
    public static class PageDTO {
        private Integer number; // 현재페이지
        private Integer totalPage; // 전체페이지 개수
        private Integer size; // 한페이지에 아이템 개수
        private Boolean first;
        private Boolean last;
        private Integer prev; // 현재페이지 -1
        private Integer next; // 현재페이지 +1
        private List<Content> contents = new ArrayList<>();
        private List<Integer> numbers = new ArrayList<>();
        private String keyword;// DTO에는 null을 주지 않는다 공백은 줄지라도 그래서 공백줘야함
        

        public PageDTO(Page<Board> boardPage, String title) {
            this.keyword = title;
            this.number = boardPage.getNumber();
            this.totalPage = boardPage.getTotalPages();
            this.size = boardPage.getSize();
            this.first = boardPage.isFirst();
            this.last = boardPage.isLast();
            this.prev = boardPage.getNumber()-1;
            this.next = boardPage.getNumber()+1;
            int temp = (number / 3)*3;  // 0-> 0, 3->3, 6->6

            for(int i = temp; i<temp+3; i++){
                this.numbers.add(i);
            }

            //for로 id title만 있으면 확인이 가능하다
            //어디서 값을 가지고 와야 하지?
            for(Board board : boardPage.getContent()) {
                contents.add(new Content(board));
            }
        }
        //생성자를 만들어서

        @Data
        class Content {
            private Integer id;
            private String title;

            public Content(Board board) {
                this.id = board.getId();
                this.title = board.getTitle();
            }
        }
    }
    @Data // getter, setter, toString
    public static class ListDTO {
        private Integer id;
        private String title;
        private Long count;

        public ListDTO(Integer id, String title, Long count) {
            this.id = id;
            this.title = title;
            this.count = count;
        }
    }

}

list


   {{/model.contents}}
    <ul class="pagination d-flex justify-content-center">
        <li class="page-item {{#model.first}}disabled{{/model.first}}"><a class="page-link" href="?page={{model.prev}}&title={{model.title}}">Previous</a></li>
        {{#model.numbers}}
            <li class="page-item"><a class="page-link" href="?page={{.}}">{{.}}</a></li>
        {{/model.numbers}}
        <li class="page-item {{#model.last}}disabled{{/model.last}}"><a class="page-link" href="?page={{model.next}}&title={{model.title}}">Next</a></li>
    </ul>
</div>

title을 keyword로 변경해서 title로 하면 프론트가 보고 헷갈릴 수 있으니까


  {{/model.contents}}
    <ul class="pagination d-flex justify-content-center">
        <li class="page-item {{#model.first}}disabled{{/model.first}}"><a class="page-link" href="?page={{model.prev}}&title={{model.keyword}}">Previous</a></li>
        {{#model.numbers}}
            <li class="page-item"><a class="page-link" href="?page={{.}}">{{.}}</a></li>
        {{/model.numbers}}
        <li class="page-item {{#model.last}}disabled{{/model.last}}"><a class="page-link" href="?page={{model.next}}&title={{model.keyword}}">Next</a></li>
    </ul>

V3 끝

See more posts

21 스프링부트(블로그만들기) 검색해도 페이징 될 수 있게 V3 3.10

List

테스트 제대로 하려고 더미 데이터 이동

보드 컨트롤러 이동

보드 서비스 이동 책임이 DTO 여기까지니까

list

More articles

툴 다운로드

22 스프링부트(블로그만들기) 보안 개념 잡기 V4 4.1

복잡한 쿼리 짜는 법

20 스프링부트(블로그만들기) 페이징 V3 3.9