posts-update.mustache 생성 : id와 author은 수정할 수 없으며 제목, 내용만 수정 가능
// posts-update.mustache
{{>layout/header}}
<h1>게시글 수정</h1>
<div class="col-md-12">
<div class="col-md-4">
<form>
<div class="form-group">
<label for="id">글 번호</label>
/* {{post.id}} : 머스테치는 객체의 필드 접근 시 점으로 구분
즉, Post 클래스의 id에 대한 접근은 post.id로 사용
readly : Input 태그에 읽기 가능만 허용하는 속성
id와 author는 수정할 수 없도록 읽기만 허용하도록 추가 */
<input type="text" class="form-control" id="id" value="{{post.id}}" readonly>
</div>
<div class="form-group">
<label for="title">제목</label>
<input type="text" class="form-control" id="title" value="{{post.title}}">
</div>
<div class="form-group">
<label for="author"> 작성자 </label>
<input type="text" class="form-control" id="author" value="{{post.author}}" readonly>
</div>
<div class="form-group">
<label for="content"> 내용 </label>
<textarea class="form-control" id="content">{{post.content}}</textarea>
</div>
</form>
<a href="/" role="button" class="btn btn-secondary">취소</a>
<button type="button" class="btn btn-primary" id="btn-update">수정 완료</button>
</div>
</div>
{{>layout/footer}}
index.js 코드 수정 : btn-update 버튼을 클릭하면 update 기능을 호출할 수 있는 update function 추가
REST에서 CRUD의 HTTP Method 매핑 : 생성 - POST, 읽기 - GET, 수정 - PUT, 삭제 - DELETE
// index.js
var main = {
init : function () {
var _this = this;
...
/* btn-update란 id를 가진 HTML 엘리먼트에 click 이벤트가 발생할 때
update function을 실행하도록 이벤트 등록 */
$('#btn-update').on('click', function () {
_this.update();
});
},
save : function () {
...
},
// 신규로 추가될 update function
update : function () {
var data = {
title: $('#title').val(),
content: $('#content').val()
};
var id = $('#id').val();
$.ajax({
// PostsApiController에서 REST 규약에 맞게 @PutMapping으로 선언했으므로 PUT 사용
type: 'PUT',
// 어느 게시글을 수정할지 URL Path로 구분하기 위해 Path에 id를 추가
url: '/api/v1/posts/'+id,
dataType: 'json',
contentType:'application/json; charset=utf-8',
data: JSON.stringify(data)
}).done(function() {
alert('글이 수정되었습니다.');
window.location.href = '/';
}).fail(function (error) {
alert(JSON.stringify(error));
});
}
};
main.init();
index.mustache 코드 수정 : 전체 목록에서 수정 페이지로 이동할 수 있게 페이지 이동 기능 추가
// index.mustache
<tbody id="tbody">
{{#posts}}
<tr>
<td>{{id}}</td>
// title에 a tag를 추가해 타이틀을 클릭하면 해당 게시글의 수정 화면으로 이동
<td><a href="/posts/update/{{id}}">{{title}}</a></td>
<td>{{author}}</td>
<td>{{modifiedDate}}</td>
</tr>
{{/posts}}
</tbody>
수정 화면을 연결할 IndexController 코드에 메소드 추가
// IndexController.java
public class IndexController {
...
@GetMapping("/posts/update/{id}")
public String postsUpdate(@PathVariable Long id, Model model) {
PostsResponseDto dto = postsService.findById(id);
model.addAttribute("post", dto);
return "posts-update";
}
}
