수정 폼 만들기

유튜브

데이터 수정을 위한 수정 폼을 만들자

데이터 상세 페이지에 수정하기 링크를 만들자

{{>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/{{article.id}}/edit" class="btn btn-primary">Edit</a>

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

{{>layouts/footer}}

show.mustache가 상세 페이지인데 여기다 edit 을 a태그로 링크해준다.
articles/id/edit 으로 보낼건데 id를 사용하기 위해 {{article.id}}ㄹ 사용했다. #를 이용해서 특정 범위 안에서 article을 사용하겠다고 하면 그냥 id로 써도 되지만 아닐 경우는 article.id로 사용한다.

그리고 bootStrap css를 줘서 버튼 모양을 넣어줬다.

이렇게 /articles/id/edit으로 가는 링크를 만들었고 해당 요청을 받을 컨트롤러를 만들어야 한다.

    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id, Model model){
        //수정할 데이터 가져와야한다
        Article articleEntitiy = articleRepository.findById(id).orElse(null);

        //모델에 데이터 등록
        model.addAttribute("article",articleEntitiy);

        return "articles/edit";
    }

ArticleController에 edit 메소드를 만들어준다.
"/articles/{id}/edit" 에 대한 요청을 처리하는 메소드다.
article의 id를 얻어오기 위해 {}로 감싸서 표현해준다.
그리고 findById로 엔티티를 얻어온다. 이 때 id를 사용하기 위해 매개변수로 id를 선언해줬고 @PathVariable 어노테이션으로 url에서 가져온다는 것을 알려준다.
이렇게 PathVariable로 매개변수를 가져올 때는 항상 어노테이션에 있는 이름과 매개변수의 이름이 같아야 한다.
모델에 addAtribute로 등록한다.
이제 edit.mustache를 만들면 된다.

{{>layouts/header}}
{{#article}}
<form action="" method="post">

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

</form>
{{/article}}
{{>layouts/footer}}

edit.mustache는 이렇게 만들었다.
form 태그 바깥을 {{#article}} 로 감싸서 안에서 바로 article의 필드에 접근할 수 있게 하고 value 속성을 이용해서 폼에 수정할 데이터가 보이게 했다. input은 value 속성값으로 넣어줬고 textArea는 그냥 요소의 내용에 넣어줬다.

이렇게 edit 창에 들어가면 글을 쓸 때 작성했던 내용이 표시된다.