수정 페이지 만들기

상세 페이지에 Edit 버튼 만들기

show.mustache 에서 <a>태그 추가 후 "/articles/{{article.id}}/edit" 작성

{{>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 colspan="1">{{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}}

 

 

서버 실행

 

 

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

edit() 메서드 기본 틀 만들기

AritlceControler.java에서 edit() 메서드 추가, @GetMapping(), URL은 "/articles/{id}/edit"

@GetMapping("articles/{id}/edit")
public String edit() {
    return "articles/edit";
}

 

수정할 데이터 가져오기

DB에 있는 기존 데이터를 불러와야 하기 때문에 repository 사용

articleRepository의 findById(id) 메서드로 데이터를 찾아 가져온다

데이터를 찾지 못하면 null 반환, 찾았다면 Article 타입의 articleEntity로 저장한다

@GetMapping("articles/{id}/edit")
public String edit() {
    Article articleEntity = articleRepository.findById(id).orElse(null);
    return "articles/edit";
}

 

id는 메서드의 매개변수로 받아오고 자료형은 Long

GetMapping() 어노테이션의 URL 주소에 있는 id를 받아 오는 것이므로 @PathVariable 어노테이션 추가

@GetMapping("articles/{id}/edit")
public String edit(@PathVariable Long id) {
    Article articleEntity = articleRepository.findById(id).orElse(null);
    return "articles/edit";
}

 

View 페이지에서 사용할 수 있도록 모델에 데이터 등록

@GetMapping("articles/{id}/edit")
public String edit(@PathVariable Long id, Model model) {
    Article articleEntity = articleRepository.findById(id).orElse(null);
    model.addAttribute("article", articleEntity);
    return "articles/edit";
}

 

수정 form 만들기

src>main>resources>templates>articles에서 edit.mustache 생성

{{>layouts/header}}

<form class="container" action="" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="">Back</a>
</form>

{{>layouts/footer}}

 

수정 페이지에서 Back를 누르면 상세 페이지로 돌아가야 한다

href 속성 값을 "articles/{{article.id}}"로 수정한다

{{>layouts/header}}

<form class="container" action="" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="articles/{{article.id}}">Back</a>
</form>

{{>layouts/footer}}

 

서버 실행 후 데이터 입력

수정 페이지에도 기존에 입력된 데이터 값이 나와야 하는데 나오지 않는다

 

edit.mustache tnwjd

<input> 태그의 value="{{article.title}} 속성을 추가

<textarea> 태그의 value="{{article.content}} 속성을 추가

{{>layouts/header}}

<form class="container" action="" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title" value="{{article.title}}">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content">{{article.content}}</textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <a href="articles/{{article.id}}">Back</a>
</form>

{{>layouts/footer}}

 

중복 제거

article.???라는 것을 ???로만 표현

{{#article}}  {{/article}} 사용

{{>layouts/header}}
{{#article}}
<form class="container" action="" method="post">
    <div class="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">Submit</button>
    <a href="articles/{{id}}">Back</a>
</form>
{{/article}}

{{>layouts/footer}}

 

서버 실행