데이터 수정 과정

  1. 데이터 수정 1단계

  2. 데이터 수정 2단계

<수정 페이지> 만들기

1. <상세 페이지>에 Edit 버튼 만들기

</table>
<a href="/articles/{{article.id}}/edit">Edit</a>
<a href="/articles">Go to Article List</a>

article의 사용 범위를 지정하는 경우

{{#article}}
        <tr>
            <th>{{id}}</th>
            <td>{{title}}</td>
            <td>{{content}}</td>
        </tr>
{{/article}}

// 부트스트랩 CSS를 적용하여 class="btn btn-primary" 속성 추가
<a href="/articles/{{article.id}}/edit" class="btn btn-primary">Edit</a>

2. Edit 요청을 받아 데이터 가져오기

    @GetMapping("/articles/new")
    public String newArticleForm() {
        return "articles/new";
    }

    (중략)

    @GetMapping("/articles/{id}/edit")
    public String edit() { // 메소드 생성 및 뷰 페이지 설정
        // 뷰 페이지 설정하기
        return "articles/edit";
    }

    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id) { // id를 매개변수로 받아오기
        // 수정할 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null); // DB에서 수정할 데이터 가져오기

        // 뷰 페이지 설정하기
        return "articles/edit";
    }

 public String edit(@PathVariable Long id, Model model) { // model 객체 받아오기
        // 수정할 데이터 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);

        // 모델에 데이터 등록하기
        model.addAttribute("article", articleEntity); // articleEntity를 article로 등록

        // 뷰 페이지 설정하기
        return "articles/edit";
    }

3. 수정 폼 만들기

{{>layouts/header}}

{{#article}} // article 사용 범위 지정
    <form class="container" action="" method="post"> // action 속성 값 삭제
        (중략)
            <input type="text" class="form-control" name="title" value="{{title}}"> // 수정
        (중략)
            <textarea class="form-control" rows="3" name="content">{{content}}</textarea> // 수정
        (중략)
        <a href="/articles/{{id}}">Back</a> // 링크 수정
    </form>
{{/article}} // article 사용 범위 지정

{{>layouts/footer}}

수정 데이터를 DB에 갱신하기