2024. 5. 22. 15:43ㆍFull Stack Course 풀스택과정
배울 내용 :
스프링부트 페이징
스프링부트 검색
스프링부트 상세검색
스프링부트 조건검색
springboot search
springboot paging
springboot pageable
스프링부트 기능
스프링부트 링크
스프링부트 뷰 페이지 만들기
지난 시간에 여기까지 검색해서 나오는것까진 완성했다
이제는 하나하나 검색된 것에대한 링크를 만들고 링크 클릭시 특정글을 볼수있는 걸
만들어볼것이다
https://sarimus.tistory.com/132
Springboot 상세검색 , 조건검색 및 페이징
배울 내용 :스프링부트 페이징스프링부트 검색스프링부트 상세검색스프링부트 조건검색springboot searchspringboot pagingspringboot pageable스프링부트 기능 먼저 상세 검색을 할 Article (게시글)을
sarimus.tistory.com
이전시간 위에 링크 참고
우선 마지막까지 한부분에서는 아래처럼 아무런 링크가 없는걸 볼수있다
먼저 다른건 건들필요가 없다
서비스에서 페이징 나온것들을 하나하나 찾아서 링크를 걸어줘야하니
서비스에서 하나하나 찾는걸 만들어줘야한다
public Article findById(Long id) { //페이징해서 나온 것들 하이퍼 링크넣어주기
return articleRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("Invalid article ID: " + id));
}
ArticleService 위치에 위에 것을 추가해주고
ArticleController 를 하나만들어서 아래처럼 작성해준다
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
@Controller
@RequiredArgsConstructor
//ArticleService와 ArticleRepository 필드를 생성자 주입 방식으로 초기화하는 생성자를 자동으로 생성.
// 이를 통해 간결하고 명확한 의존성 주입을 구현
public class ArticleController {
private final ArticleService articleService;
//Detail 보여지는 부분에 PathVariable 써서 이경로에
// 각각의 ID 를 기준으로 animalCafe 의 article Table에 값들을 가져와서
// Thymeleaf 를 사용해서 데이터를 불러옴
@GetMapping("/article/{id}")
public String getArticleById(@PathVariable Long id, Model model) {
Article article = articleService.findById(id);
model.addAttribute("article", article);
return "article/detail";
}
}
이 컨트롤러는 /artlcle/1 , /article/2 처럼 게시글(Article) 에대한 값을 DB에서 불러와서 그값을 PathVariable로 넣기만해주고 그 넣어준거를 아까 서비스쪽에서 만든거를 추가해서 실제 DB에 데이터를 넣어 주고 model 에 속성을 추가하여 article에 관련된 모든것들을 article파일안에있는 detail.html 에서 사용할수있게 해준다
그러면 간단하게 detail.html 을 하나 만들어서 아래처럼 써주자
그리고 Thymeleaf 를 사용하여 article을 제목과 내용을 넣어준다
필요하다면 created_at 이나 다른 article 컬럼을 넣을수있다
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Article Detail</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 th:text="${article.title}">Article Title</h1>
<p th:text="${article.content}">Article Content</p>
</div>
</div>
</div>
</body>
</html>
그리고 서버실행한뒤에 확인해보면
이렇게 기존 검정색이던 글이 파란색으로 바뀐걸 알수있다
그리고 이걸 하나하나 클릭하면 아래처럼 보이게 된다
이러면 상세검색 + 페이징 + 뷰페이지 링크까지 해서 완벽하게 검색부분에서는 완성이다