[UPDATE] 특정 폼에서 데이터를 업데이트 하는 프로세스

1. 리스트 화면에서 리스트 내용을 클릭하고 들어가면 아래와 같은 화면이 나온다.

2. 여기서 Edit를 클릭했을때의 흐름을 살펴보면 아래와 같다.

3. 코드의 흐름을 보면 아래와 같다.

//    화면에서 Edit 버튼을 눌렀을때 나오는 값이 입력된 화면이다.
    @GetMapping("/articles/{id}/edit")
    public String edit(@PathVariable Long id, Model model) {

        // 수정할 데이터를 가져오기
        Article articleEntity = articleRepository.findById(id).orElse(null);

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

        // 뷰페이지 edit.mustache로 값을 리턴한다.
        return "articles/edit";
    }

- articleEntity 가 어떤 데이터를 받아 오는지 System.out.println()으로 찍어보면 아래와 같다.

값을 확인해보면 articleEntity데이터값은 이것이다Article(id=1, title=가가가가가, content=11111) 와 같은데 이것은 id값을 기준으로 해당 id값의 데이터를 모두 SELECT 하여 가져 왔다.

4. 그리고 가져온값을 모델에 등록하고 등록된 값을 articles/edit로 리턴해준다.

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

        // 뷰페이지 edit.mustache로 값을 리턴한다.
        return "articles/edit";

5. articles/edit의 페이지를 보면 아래와 같다.

/articles/{id}/edit에서 던진값을 아래의 id, title, content에서 받아서 화면에 뿌려준다.

- 아래와 같은 화면이 나타나게 된다. 여기서 데이터를 수정하고 제출을 클릭하면 /articles/update 메소드를 호출하고 해당 메소드로 값을 넘긴다.

6. /articles/update 메소드의 내용을 보면 아래와 같다.

0. PostMapping을 통한 데이터를 INSERT(UPDATE) 작업을 한다. ArticleForm form에서 edit에서 던진값을 받아온다.

1. DB에 저장하기 위해 받아온 form데이터를 entity로 변환한다.

2-1. 그리고 DB에서 기존 데이터를 가져오고,

2-2. 기존 데이터가 존재한다면 save를 통해 값을 갱신한다.

3. 수정된 결과 값을 return "redirect:/articles/" + articleEntity.getId(); 로 리다이렉트 한다.

- 리 다이렉트 된 URL값을 아래와 같다.

http://localhost:8080/articles/2

    @PostMapping("/articles/update") //edit.mustache에서 던진 값
    public String update(ArticleForm form) {
        log.info(form.toString());

        // 1.DTO를 엔티티로 변환한다.
        Article articleEntity = form.toEntity();
        log.info(articleEntity.toString());

        // 2.엔티티를 DB로 저장한다.

        //2-1:DB에서 기존 데이터를 가져온다.
        Article target = articleRepository.findById(articleEntity.getId()).orElse(null);

        //2-2:기존 데이터가 있다면!!, 값을 갱신한다.
        if (target != null) {
            articleRepository.save(articleEntity); //엔티티가 DB로 갱신 된다.
        }

        // 3.수정 결과 페이지로 리 다이렉트 한다.
        return "redirect:/articles/" + articleEntity.getId();
    }

여기까지 특정 폼에 데이터를 받아 해당 데이터를 갱신하고 업데이트 하는 과정을 수행 하였다.