12. 링크와 리 다이렉트

# 링크와 리 다이렉트를 활용한 페이지 연결

새글작성 링크 만들기

index 페이지에 새글작성 링크 만들기

아래와 같이 페이지 끝부분에 a 태그를 통해 새글작성 링크를 만들었다.

그리고 링크 이름을 New Article 이라고 지정해 준다.

href 속성값은 요청을 보낼 링크 주소를 가지고 있다.

{{>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>
    {{#articleList}}
        <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td>{{content}}</td>
        </tr>
    {{/articleList}}
    </tbody>
</table>

<a href="/articles/new">New Article</a>

{{>layouts/footer}}

뒤 돌아가기 링크 추가하기

새글을 입력하는 new.mustache 파일에 뒤 돌아가기 링크를 추가한다.

a 태그로 이전 index 페이지로 돌아가는 /articles/ 경로를 추가해 준다.

그리고 링크 이름을 Back 이라고 입력해 준다.

{{>layouts/header}}

<form class="container" action="/articles/create" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control"rows="3" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Sumbit</button>
    <a href="/articles/">Back</a>
</form>

{{>layouts/footer}}

리 다이렉트 수행하기

새글을 작성하고, 작성한 데이터를 볼 수 있도록 페이지를 이동한다.

새글을 입력하고 그 입력 값을 받는 메소드가 바로 ArticleController에 Post 방식으로 데이터가 전달 됐을때,  /articles/create 가 수행되는 방식이다.

여기의 리턴값을 수정하여 리 다이렉트를 구현한다.

@PostMapping("/articles/create") //form에서 던진 action 주소이다.
    public String createArticle(ArticleForm form) {
        System.out.println(form.toString());

        //1. Dto를 Entity로 변환해야 한다.
        Article article = form.toEntity();

        log.info(form.toString());
//        System.out.println(form.toString()); → 로깅 기능으로 대체한다.

        //2. Repository에게 Entity를 DB안에 저장하게 한다.
        Article saved = articleRepository.save(article); // articleRepository가 save라는 메소드를 호출할 것인데
        // 위에서 생성한 article을 save 하게 할 것이다. 그리고 save 된 데이터를 최종적으로 반환하게 한다.
        // Article saved 라는 타입으로 반환한다.
        log.info(saved.toString());
//        System.out.println(saved.toString()); → 로깅 기능으로 대체한다.

        return "redirect:/articles/" + saved.getId();
    }

위의 코드에서 return "redirect:/articles/" + saved.getId(); 내용만 보면 saved.getId();는 현재 존재히지 않으므로 빨갛게 표시가 될것이다. 해당 문구에 마우스를 오버하고 create method를 호출하여 entity 패키지 폴더의 Article 파일에 새로운 메소드를 생성한다.

아래와 같이 코드를 직접 만들어줘도 되나 우리는 lombok을 사용하여 좀더 간편하게 작업 할 수 있다.

public Long getId() {

     return id;

}

아래와 같이 모든 Getter를 추가하는 어노테이션을 추가한다.

폼에서 데이터를 등록하고 이동하는 상세보기 페이지에서 글 리스트를 확인할 수 있는 링크를 추가한다.

articles/{id}를 받는 Controller의 메소드를 찾으면 아래와 같이 show라는 메소드 이다.

 show라는 메소드는 아래와 같이 articles/show 라는 값을 반환하기 때문에 show.mustache 파일에 링크를 추가해 주면 된다.

return "articles/show";

show.mustache 파일에 아래와 같이 a 태그를 활용하여 링크를 추가해 준다.

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

{{>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>
    {{#article}}
        <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td>{{content}}</td>
        </tr>
    {{/article}}
    </tbody>
</table>

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

{{>layouts/footer}}

입력한 값의 상세 페이지로 접근하기

아래와 같이 값을 입력하고, 입력한 값을 클릭하여 값의 상세페이지로 이동하는 링크 만들기

각각의 리스트에 링크를 걸어주면 된다.

목록 페이지는 index.mustache 파일에 생성 하였으므로, 해당 파일로 이동하여 작업한다.

해당 값을 표현하는 것은 title 이므로 해당 값에 링크를 걸어준다.

<a href="/articles/1">{{title}}</a></td> 인데 해당 링크값중에 id값을 기준으로 해당 페이지를 반환해야 하는데 id 값이 매번 변화하므로 바로 윗줄에 있는 {{id}} 값을 넣어주면 된다.

<a href="/articles/{{id}}">{{title}}</a></td>

{{>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>
    {{#articleList}}
        <tr>
            <td>{{id}}</td>
            <td><a href="/articles/{{id}}">{{title}}</a></td>
            <td>{{content}}</td>
        </tr>
    {{/articleList}}
    </tbody>
</table>

<a href="/articles/new">New Article</a>

{{>layouts/footer}}

지금까지 작업내용