본문 바로가기

Java & Spring/SpringBoot

[스프링 부트 입문 13]링크와 리다이렉트

728x90
* 학습목표
링크와 리다이렉트를 사용하여, 페이지 간 이동을 연결하시오.

- 지난시간 Review
MVC Controller + Model + View
JPA Repository + Entity
DB Data

- 웹 게시판 흐름
시작점이
index(목록 페이지) ↔ show(상세 페이지)<이전, 수정, 삭제>
  ↓↑
new(글 작성 페이지)
    Link                    Redirect
for Request(요청)        for Response(응답)

Link : <a>, <form> 작성
- 미리 정해놓은 요청을 간편하게 전달
Redirect : 클라이언트에게 재요청을 지시함.
- 재요청 -> 업무를 위해 A로 전화했는데
           남은 없는 B에서 처리하니깐
           B로 연락해주시겠습니까?
           다시 B로 전화함.

클라이언트가 /articles/create -> 요청
서버가 redirect:/articles/{id} -> 응답
클라이언트가 /articles/{id} -> 요청
서버가 show 페이지로 응답

1. 링크의 부재
페이지가 연결이 되어있지 않음. 연결고리가 없음.
그래서 Link와 Redirect를 통해 이어줄꺼임.

2. 새 글작성 링크
/articles/index.mustache
<a href="/articles/new">New Article</a>
요청을 보낼 Link주소를 갖고있음. -> 글 작성 페이지로 이동.

3. 목록 돌아가기 링크
/articles/new.mustache
<a href="/articles">back</a>
글 작성페이지에서 뒤로 돌아감. -> 목록 페이지로 이동

4. 리다이렉트
새 글작성 시 아무런 페이지도 나오지 않음
왜? 재요청을 해주는 리다이렉트 기능이 없기 때문임.
/controller/ArticleController.java
@PostMapping("/articles/create")
public String createArticle(ArticleForm form){
    log.info(form.toString());
    // System.out.println(form.toString()); -> 로깅기능으로 대체!

    // 1. Dto를 변환! Entity!
    Article article = form.toEntity();
    log.info(article.toString());
    //System.out.println(article.toString());

    // 2. Repository에게 Entity를 DB안에 저장하게 함!
    Article saved = articleRepository.save(article);
    log.info(saved.toString());
    //System.out.println(saved.toString());

    return "redirect:/articles/" + saved.getId();
                          1번이면 1번 2번이면 2번 이런 상세 목록 데이터가 보고싶음
                          그래서 article 목록으로 받아온 saved의 Id값을 리다이렉트 id값으로 받아와
}

return "redirect:/articles/" + saved.getId();
                               getId()를 사용하기 위해
/entity/Article.java 파일에
@getter 어노테이션 추가해도 되는 이유는 롬복을 사용하고 있기 때문에.
Getter는 인스턴스 변수를 반환하기 위해 사용한다.

5. 목록으로 돌아가기.
/articles/show.mustache
<a href="/articles">Go to Article List</a>
{id} 값을 받은 상세 페이지에서 뒤로 돌아감. -> 목록 페이지로 이동

목록 페이지에서 -> 상세페이지로 넘어가고 싶을때
/articles/index.mustache
파일의 td 타이틀 부분에
<td><a href="/articles/{{id}}">{{title}}</a></td>
a태그 사용해서 링크 걸어줌.
{{#articleList}}
{{/articleList}}
이 사이에서 출력되니깐
{{id}} 해당되는 게시글 목록에 값을 링크에 자동으로 넣어줌.

https://github.com/Giltaehyeong/firstproject/commit/7f39674aac6c86310d399ec46693d75b5de69bda

 

[스프링 부트 입문 13]링크와 리다이렉트 · Giltaehyeong/firstproject@7f39674

* 학습목표 링크와 리다이렉트를 사용하여, 페이지 간 이동을 연결하시오. - 지난시간 Review MVC Controller + Model + View JPA Repository + Entity DB Data - 웹 게시판 흐름 시작점이 index(목록 페이지) ↔ show(상

github.com

소스코드참고.

728x90