링크와 리다이렉트

유튜브

링크 : 보다 편리한 요청
리다이렉트 : 보다 편리한 응답

링크 : 미리 정의된 요청을 간편히 전송, html의 a태그, form 태그를 이용
때떄로 리다이렉트가 응답되기도 한다

리다이렉트 : 클라이언트에게 재 요청을 지시한다
클라이언트는 리다이렉트 주소로 다시 요청을 보낸다

---

현재 /articles 로 들어가면 index.mustache를 보여주는데 글을 작성하기 위한 어떤 버튼이 없다.

작성하려면 직접 /articles/new로 들어가야 하는 번거로움이 있다.

해결하기 위해서 링크와 리다이렉트를 적용하자

{{>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}}

a태그를 이용해서 articles/new로 넘어가는 새글 작성 링크를 만들자.

{{>layouts/header}}

<form action="/articles/create" method="post">

    <input type="text" name="title">
    <br>
    <textarea cols="30" rows="10" name="content"></textarea>
    <button type="submit">제출</button>
    <a href="/articles">Back</a>

</form>

{{>layouts/footer}}

articles/new에도 Back이라는 태크에 다시 목록으로 돌아가도록 해준다.

    @PostMapping("articles/create")
    public String createArticle(ArticleForm form){
//        System.out.println(form.toString());
        // 로깅 기능으로 println 대체하자
        log.info(form.toString());



        // 1. DTO를 Entitiy로 변환해야한다
        Article article = form.toEntitiy();
        //System.out.println(article.toString());
        log.info(article.toString());

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

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

그리고 아티클컨트롤러 클래스에서 리턴값에 리다이렉트를해줘서 articles/아이디 로 리다이렉트 하고 싶은데 ArticleForm 클래스에 게터가 없다. 게터를 만들어주자.

@Getter
@Entity  // 이 어노테이션을 붙여야 DB가 이 객체를 인식한다
@AllArgsConstructor
@NoArgsConstructor //디폴트 생성자 추가
@ToString
public class Article {

    @Id // 각 객체를 식별하기 위한 Id임 (주민번호 같은거)
    @GeneratedValue // id를 1, 2, 3 ,.. 자동생성하기 위함
    private Long id;

    @Column //DB가 필드를 인식할 수 있게 해줌
    private String title;
    @Column
    private String content;

}

Article.java에서 @Getter 어노테이션으로 간편하게 게터를 만들어 준다.

이렇게 하면 new에서 게시글을 작성하고 submit을 누르면 그 게시물의 상세보기로 넘어간다.
이제 상세보기 화면에서 목록으로 돌아갈 수 있게 해주자

{{>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}}

마찬가지로 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>
    {{#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}}

index.mustache에서 title 을 표시하는 부분을 a태그로 감쌌다.
그리고 id는 변수를 사용해야 해서 {{id}}로 작성했다.

이렇게 이름에 링크가 걸린다.