Spring MVC와 JPA 사용
Spring MVC와 JPA
Spring MVC
Form에서 전송한 Data를 POST Controller에서 받기
순서
- 프로젝트 빌드(mustache, web)
- new.mustache 만들기
- new.mustache로 가는 GET controller만들기
- new.mustache에서 submit누르면 요청과 내용을 받은 POST controller만들기 - 로그에 출력
1.프로젝트 빌드
스프링으로 이름과 자신이 사용할 자바 버전 스프링등을 설정해주고 next를 누른다.
자신이 사용할 스택들을 정하고 프로젝트를 빌드해준다.
2.new.mustache 만들기
<form action="/articles" method="post">
<input type="text" name="title" />
<input type="submit" />
</form>submit을 누르면 포스트방식으로 /articles한테 전송이된다.
📌폼 태그 동작방법
1.폼이 있는 웹페이지를 방문합니다.
2.폼 내용을 입력합니다.
3.폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.
4.웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.
5.웹 프로그램은 폼 데이터를 처리합니다.
6.처리결과에 따른 새로운 html페이지를 웹 서버에 보냅니다
7.웹 서버는 받은 html페이지를 브라우저에 보냅니다.
8.브라우저는 받은 html페이지를 보여줍니다.
📌폼 태그 속성
- action: 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.
- name: 폼을 식별하기 위한 이름을 지정합니다.
- accept - charset: 폼 전송에 사용할 문자 인코딩을 지정합니다
- target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.
- method: 폼을 서버에 전송할 http메소드를 정합니다(GET or POST)
3.new.mustache로 가는 Get Controller 만들기
@RequestMapping("/articles")
@Controller
@Slf4j // 로깅하기 위해
public class ArticleController {
private final ArticleRepository articleRepository;
public ArticleController(ArticleRepository articleRepository){
this.articleRepository = articleRepository;
}
@GetMapping("/new")
public String createPage(){
return "articles/new";
}
@PostMapping("")
public String add(ArticleDto articleDto){
log.info(articleDto.getTitle());
Article saveArticle = articleRepository.save(articleDto.toEntity());
return "";
}
}@RequestMapping("/articles")html에서 /articles로 들어오는 데이터들을 모두 여기 클래스에서 받겠다는 뜻
/new 로 get방식으로 연결이오면 이페이지에서 이메서드가 실행이 되라 그 후에
return "articles/new"을 사용하여 저기로 가라
4.new.mustache에서 submit누르면 요청과 내용을 받은 POST controller만들기
@PostMapping("")
public String add(ArticleDto articleDto){
log.info(articleDto.getTitle());
Article saveArticle = articleRepository.save(articleDto.toEntity());
return "";
}/article html 에서 post방식으로 data를 주면 이 메서드가 정리해서 db에 추가하겠다.
데이터가 들어오면 ArticleDto articleDto 이것으로 데이터를 받아주겠다.
데이터베이스 연동과 기능추가 순서!
- mustache form에서 전송한 데이터 POST controller에서 받기
- 조회 기능 만들기
- 다른 페이지로 이동 처리
- list 화면 만들기
- findAll() 결과 list로 넘기기
- 각각의 단계에서 bootstrap 적용하기!!
1.mustache form에서 전송한 데이터 POST controller에서 받기
@PostMapping("")
public String add(ArticleDto articleDto){
log.info(articleDto.getTitle());
Article saveArticle = articleRepository.save(articleDto.toEntity());
return "";
}post방식으로 /articles와 매핑된 데이터를 dto를 만들어 받아주고 받은 데이터를 이용해
entity로 만들고 articleReposity를 이용하여 저장시키겠다.
application.yml에 서버 설정과 스프링 환경변수와 jpa 사용방식을 결정할 설정들을 세팅해준다.
package com.mustache.bbs2.domain.entity;
import lombok.Getter;
import lombok.NoArgsConstructor;
import javax.persistence.*;
@Table(name = "atricle3")
@Entity
@Getter
@NoArgsConstructor
public class Article {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String content;
public Article(String title, String content) {
this.title = title;
this.content = content;
}
}dto를 entity로 변환시켜줄 entity → article을 만들어준다. @Entity 설정 데이터베이스에 들어갈 형식
@Table(name = "atricle3") 데이터베이스 테이블의 이름을 정해준다.
@Getter
@NoArgsConstructor 롬복의 어노테이션으로 변수 하나당 게터 하나를 만들어주고 기본 생성자도 만들어준다.
@GeneratedValue(strategy = GenerationType.IDENTITY) 는 db에 id 생성을 맡기겠다
@Id는 이 변수가 기본키 pk라는 설정을 알려준다.
package com.mustache.bbs2.repository;
import com.mustache.bbs2.domain.entity.Article;
import org.springframework.data.jpa.repository.JpaRepository;
public interface ArticleRepository extends JpaRepository<Article,Long>{
}ArticleRepository는 interface지만 그 구현제(ArticleDao)를 SpringBoot가 넣어줍니다.
DI하기
private final ArticleRepository articleRepository;
public ArticleController(ArticleRepository articleRepository){
this.articleRepository = articleRepository;
}💡JpaRepository<Article,Long>란?
org.springframework.data.jpa.repository 패키지의 "JpaRepository"라는 인터페이스를 상속하여 만든다. 이 인터페이스는 범용적으로 사용한다.
public interface 이름 extends JpaRepository <엔티티, ID 유형><>안에는 엔티티 클래스 이름과 ID 필드 타입이 지정된다. 주의할 점은 "기본형의 경우, 래퍼 클래스를 지정한다는 점이다. 샘플 SampleEntity 클래스는 long 형을 ID를 지정하고 있기 때문에, 여기에서는 <SampleEntity, Long>라고 작성을 한다.
2.조회 기능 만들기
@GetMapping("/{id}")
public String selectSingle(@PathVariable Long id, Model model){
Optional<Article> optArticle = articleRepository.findById(id);
if(!optArticle.isEmpty()){
model.addAttribute("article", optArticle.get());
return "articles/show";
} else {
return "error";
}
}💡findById() : 엔티티 테이블에서 기본키 필드 값이 id인 레코드를 조회한다
3.다른 페이지로 이동 처리
{{>layouts/header}}
<div class="card" style="width: 18rem;">
{{#article}}
<div class="card-body">
<h5 class="card-title">{{title}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{id}}</h6>
<p class="card-text">{{content}}</p>
<a href="/articles/new" class="card-link">new article</a>
<a href="/articles" class="card-link">article list</a>
</div>
{{/article}}
</div>
{{>layouts/footer}}💡 new article a태그를 주고 그안에 하이퍼링크를 붙여 이 버튼을 클릭하면 어디로갈지 위치를 정해준다 href 가 하이퍼링크 역활을 하는 법
@PostMapping("")
public String add(ArticleDto articleDto){
log.info(articleDto.getTitle());
Article saveArticle = articleRepository.save(articleDto.toEntity());
return String.format("redirect:articles/%d", saveArticle.getId());
}💡redirect:서버가 클라이언트에서 요청한 URL에 대한 응답에서 다른 URL로 재접속하라고 명령을 보내는 것이다.
리다이렉토를 함으로써 articles/{id}로 다시 들어간다.
@GetMapping("/{id}")
public String selectSingle(@PathVariable Long id, Model model){
Optional<Article> optArticle = articleRepository.findById(id);
if(!optArticle.isEmpty()){
model.addAttribute("article", optArticle.get());
return "articles/show";
} else {
return "error";
}
}결국이 메서드로 들어와 조회결과를 출력하는 show 화면을 view에 띄운다.
4.list화면 만들기
{{>layouts/header}}
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
</tr>
</thead>
<tbody class="table-group-divider">
{{#articles}}
<tr>
<th>{{id}}</th>
<td><a href="/articles/{{id}}">{{title}}</a></td>
<td>{{content}}</td>
</tr>
{{/articles}}
</tbody>
</table>
{{>layouts/footer}}href 하이퍼링크로 이 버튼을 누르면 지정한 페이지로 가게 만든다.
5.findAll() 결과 list로 넘기기
@GetMapping("/list")
public String list(Model model){
List<Article> articles = articleRepository.findAll();
model.addAttribute("articles", articles);
return "articles/list";
}💡findAll() : 엔티티 테이블에서 레코드 전체 목록을 조회한다
rowmapper같은 역활 모든 데이터를 가지고와 엔티티인 article로 받아주고 그걸을 list로 만들어 클래스하나씩 저장을 한다. 그 이후 model.addAttribute로 articles을 가지곳에 하나씩 자동 반복문으로 계속 꼳힌다.
@GetMapping("")
public String index() {
return "redirect:/articles/list";
}article/에 아무것도 오지 않는다면 return 문에 있는 페이지로 이동을한다.
