6장 게시판 내 페이지 이동하기

링크와 리다이렉트란?

• 링크
  • 미리 정해놓은 요청을 간편히 전송 하는 기능으로 보통 페이지 이동을 위해 사용됨
  • HTML 의 <a> , <form> 태그로 작성
  • 클라이언트가 링크를 통해 어느 페이지로 이동하겠다고 요청하면 서버는 결과 페이지를 응답

간단한 링크 개념

 

• 리다이렉트
  • 클라이언트가 보낸 요청을 마친 후 계속해서 처리할 다음 요청 주소를 재지시 이를 통해 분리된 기능을 하나의 연속적인 흐름으로 연결 가능
  • 리다이렉(재요청)를 지시받은 클라이언트는 해당 주소로 다시 요청을 보내고 서버는 이에 대한 결과 응답

간단한 리다이렉트 개념

 

 

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

1. 새 글 작성 링크 만들기 
   1. 목록 페이지의 뷰 파일인 templates 아래  articles 아래 index.mustache 파일을 열고 </table> 아래에 <a>태그를 추가 . <a> 태그의 href 속성 값으로는 요청을 보낼 링크 주소인 "/articles/new"를 입력후 텍스트에는 New Article을 작성

테이블 아래에 <a>태그 생성

<a> 태그가 잘 표시됨

 

 

1. <입력 페이지>  →  <목록 페이지> 돌아가기
   1. 1. 입력 페이지의 뷰 파일인 new.mustache 파일을 열고 submit 버튼 아래에 index.mustache 파일과 마찬가지고 <a> 태그의 href 속성 값으로 "/articles" 을 넣어 <목록 페이지> 로 갈수 있도록 하고 텍스트는 Back으로 작성 

<button> 아래 <a>태그 생성

버튼 옆에 <a> 태그가 잘 표시

 

1.  <입력 페이지> → <상세 페이지> 이동하기
   1. 리다이렉트 적용하기
      1. 입력 페이지에서 데이터를 전송하면 ArticleController의 createArticle() 메서드에서 폼 데이터를 받음
      2. createArticle() 메서드는 포스트(Post) 방식으로 "/articles/create"라는 URL 요청을 받아 폼 데이터를 처리
      3. 이제 return  값에 리다이렉트를 정의
         • 리다이렉트의 형식은 return "redirect:URL_주소"; 이런식으로 작성 
      4. 상세 페이지로 이동하기 위해서는 articles/(글ID) 이런식으로 적어야되기 때문에  + 연산자를 사용해서 적음
      5. article을 saved 객체에 저장했기 때문  saved.getId()를 호출하면 id값을 가져올수 있음
      6. 게터 메서드를 정의하기 위해서 Article.java 파일을 열고 게터 메서드를 생성
         • 직접 게터 메서드를 만드는 방법                                                                           public Long getId() { // 주의! 데이터 타입을 String → Long 변경해야 함 return id; }
         • 롬복을 사용해서 @Getter 어노테이션 추가  (여기서는 이 방법을 채택)

하지만 아직 게터메서드가 정의되지않아서 오류가 발생

@Getter 어노테이션을 추가하면 오류가 사라짐

 

1.   <상세 페이지>  → <목록 페이지>
   1. articles/id를 받는 컨트롤러의 메서드는 show()메서드임
   2. show() 메서드는 show.mustache 파일을 반환
   3.  show.mustache파일을 열고 </table>아래에 속성값 href="/articles" 인 <a> 태그를 추가하고 텍스트로  Go to Article List 을 적음

show.mustache 파일에 <a>태그 추가

상세 리스트에 <a> 태그 추가

 

1. <목록 페이지>   → <상세 페이지>
   1. 목록 페이지의 뷰 파일인 index.mustache파일을 열기
   2. 게시글 제목(title)부분에 링크을 걸기
   3. {{title}} 부분을 <a> 태그로 감싸고 href 속성값으로 "/article/{{id}}"를 입력 

index.mustache파일에 <a>태그 추가

전체 리스트에 titie 부분에 <a>태그 추가