안녕하세요 놀이방 사장입니다.
이번 포스팅에서는 블로그화면상의
보러가기 버튼을 누르면 블로그 글이 보이도록 블로그 글 뷰 구현을 할 예정입니다.
엔티티에 생성시간, 수정 시간을 추가하고 컨트롤러 메서드를 만든 다음 HTML뷰를 만들고 확인하는 과정으로 개발합니다.
엔티티에 생성, 수정시간 추가하기
Article파일을 열어 필드 추가
package me.joyeonggyu.springbootdeveloper.domain;
import lombok.AccessLevel;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;
import org.springframework.data.annotation.CreatedDate;
import org.springframework.data.annotation.LastModifiedDate;
import javax.persistence.*;
import java.time.LocalDateTime;
@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class Article {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id", updatable = false)
private Long id;
@Column(name = "title", nullable = false)
private String title;
@Column(name = "content", nullable = false)
private String content;
@CreatedDate //엔티티가 생성될 때 생성 시간 저장
@Column(name="created_at")
private LocalDateTime createdAt;
@LastModifiedDate //엔티티가 수정될 때 수정 시간 저장
@Column(name = "updated_at")
private LocalDateTime updatedAt;
@Builder
public Article(String title, String content) {
this.title = title;
this.content = content;
}
public void update(String title, String content) {
this.title = title;
this.content = content;
}
}@CreatedDate
@Column(name="created_at")
private LocalDateTime createdAt;
@LastModifiedDate
@Column(name = "updated_at")
private LocalDateTime updatedAt;@CreatedDate 는 엔티티가 생성될 때 생성시간을 create_at 컬럼에 저장한다.
@LastModifiedDate는 엔티티가 수정될 때 마지막으로 수정된 시간을 updated_at컬럼에 저장한다.
엔티티를 생성하면 생성시간과 수정시간이 자동으로 저장되지만 스프링부트 서버를 실행할 때 마다 SQL문으로 데이터를 넣는 import.java 파일을 두 컬럼을 바꾸지 않기 때문에 SQL문을 추가해준다.
INSERT INTO article(title, content, created_at, updated_at) VALUES ('title 1', 'content 1', NOW(), NOW())
INSERT INTO article(title, content, created_at, updated_at) VALUES ('title 2', 'content 2', NOW(), NOW())
INSERT INTO article(title, content, created_at, updated_at) VALUES ('title 3', 'content 3', NOW(), NOW())
이제 서버를 부팅하는 SpringBootDeveloperApplication파일을 열어 엔티티의 두 컬럼을 자동으로 업데이트 하기 위한 애너테이션 추가
package me.joyeonggyu.springbootdeveloper;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.data.jpa.repository.config.EnableJpaAuditing;
@EnableJpaAuditing
@SpringBootApplication
public class SpringBootDeveloperApplication {
public static void main(String[] args)
{
SpringApplication.run(SpringBootDeveloperApplication.class, args);
}
}
@EnableJpaAuditing이 애너테이션이 자동으로 두 컬럼을 업데이트 해준다.
컨트롤러 메서드 작성하기
뷰에서 사용할 DTO를 만든다.
ArticleViewResponse.java를 만든다.
package me.joyeonggyu.springbootdeveloper.dto;
import lombok.Getter;
import lombok.NoArgsConstructor;
import me.joyeonggyu.springbootdeveloper.domain.Article;
import java.time.LocalDateTime;
@NoArgsConstructor
@Getter
public class ArticleViewResponse {
private Long id;
private String title;
private String content;
private LocalDateTime createdAt;
public ArticleViewResponse(Article article){
this.id = article.getId();
this.title = article.getTitle();
this.content = article.getContent();
this.createdAt = article.getCreatedAt();
}
}
BlogViewController.java
블로그 글을 반환할 컨트롤러의 세더를 작성하겠습니다.
BlogViewController 자바 파일을 열어 getAricle()메서드를 추가한다.
@GetMapping("/articles/{id}")
public String getArticle(@PathVariable Long id, Model model){
Article article = blogService.findById(id);
model.addAttribute("article", new ArticleViewResponse(article));
return "article";
}getArticle() 메서드는 인자 id에 URL로 넘어온 값을 받아 findById() 메서드로 넘겨 글을 조회하고 화면에서 사용할 모델에 데이터를 저장한 다음 보여줄 화면의 템플릿 이름을 반환한다.
resource/templates 디렉터리에 article.html을 만들어 화면을 작성
코드작성
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>블로그 상세보기</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
<h1 class="mb=3">My Blog</h1>
<h4 class="mb-3">블로그 상세보기 창</h4>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<article>
<header class="mb-4">
<h1 class="fw-bolder mb-1" th:text="${article.title}"></h1>
<div class="text-muted fst-italic mb-2" th:text="|Posted on
${#temporals.format(article.createdAt, 'yyyy-MM-dd')}|"></div>
</header>
<section class="mb-5">
<p class="fs-5 mb-4" th:text="{article.content}"></p>
</section>
<button type="button" class="btn btn-primary btn-sm">수정</button>
<button type="button" class="btn btn-secondary btn-sm">삭제</button>
</article>
</div>
</div>
</div>
</body>
</html><div class="text-muted fst-italic mb-2" th:text="|Posted on
${#temporals.format(article.createdAt, 'yyyy-MM-dd')}|"></div>
위에 코드는 날짜형식을 yyyy-mm-dd HH:mm으로 포매팅한다.
|| 기호를 통해 Posted on이라는 텍스트도 함께 나온다.
글 상세화면은 글 리스트 화면에서 보러갈 수 있어야 한다.
글 리스트에 있는 [보러 가기] 버튼을 수정한다.
<a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러 가기</a>html 파일 바꿔주기
이렇게 상세보기 창이 나옵니다.
이상으로 포스팅 마치겠습니다
'웹 > Spring' 카테고리의 다른 글
| 스프링부트3 회원가입 로그인, 로그아웃 구현하기 - 사전지식 스프링 시큐리티 (0) | 2023.10.23 |
|---|---|
| 스프링부트3 블로그 글 삭제 기능 추가하기 (0) | 2023.10.22 |
| 스프링부트3 블로그 목록 뷰 구현하기 (0) | 2023.10.21 |
| 스프링부트3 - 블로그 화면 구성하기 알고 갈 사전지식 - 타임리프 (1) | 2023.10.21 |
| 스프링부트3 블로그 만들기 - 블로그 글 수정 API 구현하기 (0) | 2023.10.17 |
