링크와 리다이렉트를 이용해 페이지 연결하기

1. 새 글 작성 링크 만들기

(생략)

</table>

<a href="/articles/new">New Article</a>
// localhost:8080/articles 페이지에 새 글을 작성할 수 있는 링크를 추가 

{{>layouts/footer}}

2. <입력 페이지> → <목록 페이지> 돌아가기

    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="/articles">Back</a>
    // 〈입력 페이지〉에서 다시〈목록 페이지〉로 돌아가는 링크 추가
</form>

3. <입력 페이지> → <상세 페이지> 이동하기

• 리다이렉트 적용

@PostMapping("/articles/create")
    public String createArticle(ArticleForm form) {
        log.info(form.toString());
        // System.out.println(form.toString());

        // 1. DTO를 엔티티로 변환
        Article article = form.toEntity();
        log.info(article.toString());
        // System.out.println(article.toString());

        // 2. 리파지터리로 엔티티를 DB에 저장
        Article **saved** = articleRepository.save(article);
        log.info(saved.toString());
        // System.out.println(saved.toString());

        return "redirect:/articles/" + **saved**.getId();
				// 리다이렉트 작성
				// id 값을 가져오기 위해 saved 객체 사용
    }

public class Article {
    (중략)
		// 방법 1: 직접 getter 메소드 추가
    public Long getId() { // 주의! 데이터 타입을 String -> Long으로 변경
			  return id;
		}
}

@Getter // 방법2. 롬복으로 게터 추가
public class Article {
    (중략)
    ~~private String getId() {~~ // getId() 메소드 삭제
		~~}~~
}

4. <상세 페이지> → <목록 페이지> 돌아가기

@GetMapping("/articles/{id}")
    public String show(@PathVariable Long id, Model model) {
        (중략)
        return "articles/show"; // 목록으로 돌아가기 링크를 넣을 뷰 파일 확인
    }

</table>

<a href="/articles">Go to Article List</a> // 추가

{{>layouts/footer}}

5. <목록 페이지> → <상세 페이지> 이동하기

{{#articleList}}
        <tr>
            <th>{{id}}</th>
            <td><a href="/articles/{{id}}">{{title}}</a></td>
						// 1번인 게시글의 제목을 클릭하면 /articles/1 페이지로,
						// 2번인 제목을 클릭하면 /articles/2 페이지로 이동
            <td>{{content}}</td>
        </tr>
    {{/articleList}}

마무리

1. 링크
   • 미리 정해 놓은 요청을 간편히 전송하는 기능
   • 보통 페이지 이동을 위해 사용
     • HTML의 <a> 태그 혹은 <form> 태그로 작성
     • 클라이언트가 링크를 통해 어느 페이지로 이동하겠다고 요청하면 서버가 결과 페이지 응답
2. 리다이렉트
   • 클라이언트가 보낸 요청을 마친 후 계속해서 처리할 다음 요청 주소를 재지시
     • 분리된 기능을 하나의 연속적인 흐름으로 연결할 수 있음
     • 리다이렉트(재지시)를 받은 클라이언트는 해당 주소로 다시 요청을 보내고, 서버는 이에 대한 결과를 응답
3. 뷰 파일에 링크 걸기
   • <a href=”URL_주소”>링크를 걸 대상</a>