[스프링 부트 입문] 14 수정 폼 만들기

본 내용은 홍팍 스프링부트 강좌를 참고하였습니다.

Mission

• 데이터 수정을 위한 폼을 만드시오.

{{id}} 글을 수정하는 a태그 링크 만들고, 링크에 맞는 컨트롤러 만들기

{{id}}의 글을 보여주는 showArticle.mustache에서 만든 수정 버튼

{{>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>
        <th scope="row">{{id}}</th>
        <td><a href="/articles/{{id}}">{{title}}</a></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}}

수정 버튼을 누르면 동작하는 컨트롤러

    @GetMapping("/articles/{id}/edit")
    public String eidt(@PathVariable Long id, Model model){
        //수정할 데이터를 가져오기!
        Article articleEntity = articleRepository.findById(id).orElse(null);

        // 뷰 페이지 설정
        model.addAttribute("article",articleEntity);

        return "articles/edit";
    }

@PathVariable 어노테이션을 통해 글의 id값을 받고 JPA를 통해 DB의 데이터를 불러와서 Entity에 저장하고 model에 등록해주어서 뷰에서 사용하도록 함.
마지막으로 뷰페이지로 return

뷰페이지에서는 model에 등록한 article을 다시 form 태그에서 보여주도록함

{{>layouts/header}}

{{#article}}
<form class = "container" action="" method="post">
    <div clss = "mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title" value="{{title}}">
    </div>

    <div class = "mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content" >{{content}}</textarea>
    </div>
    <button type="submit" class="btn btn-primary">제출</button>
    <a href="/articles/{{id}}">Back</a>
</form>
{{/article}}
{{>layouts/footer}}

 

input 태그에서  value = {{title}}과 textarea에서 {{content}}로 값 설정