1. 전체 조회 화면 만들기
1) index.mustache UI 변경
{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스 Ver.2</h1>
<div class="col-md-12">
...
</div>
<br>
<!-- 목록 출력 영역-->
<table class="table table-horizontal table-bordered">
<thead class="thead-strong">
<tr>
<th>게시글 번호</th>
<th>제목</th>
<th>작성자</th>
<th>최종 수정일</th>
</tr>
</thead>
<tbody id = "tbody">
{{#posts}}
<tr>
<td>{{id}}</td>
<td><a href="/posts/update/{{id}}">{{title}}</a></td>
<td>{{author}}</td>
<td>{{modifiedDate}}</td>
</tr>
{{/posts}}
</tbody>
</table>
{{>layout/footer}}
</body>
</html>
(1) {{#posts}}
- posts라는 List를 순회
- java의 for문과 동일하게 생각
(2) {{id}} 등의 {{변수명}}
- List에서 뽑아낸 객체의 필드를 사용
2) PostsRepository 인터페이스에 쿼리 추가
- PostsRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
public interface PostsRepository extends JpaRepository<Posts, Long> {
@Query("SELECT p FROM Posts p ORDER BY p.id DESC")
List<Posts> findAllDesc();
}
SpringDataJpa에서 제공하지 않는 메소드는 @Query를 사용하여 작성
3) PostsService.java에 코드 추가
import java.util.List;
import java.util.stream.Collectors;
@RequiredArgsConstructor
@Service
public class PostsService {
private final PostsRepository postsRepository;
...
@Transactional(readOnly = true)
public List<PostsListResponseDto> findAllDesc() {
return postsRepository.findAllDesc().stream()
.map(PostsListResponseDto::new)
.collect(Collectors.toList());
}
}
(1) readOnly
- @Transactional의 옵션
- 트랜잭션 범위는 유지하되, 조회기능만 남겨두어 조회속도가 개선
- 등록, 수정, 삭제 기능이 전혀 없는 서비스 메소드에서 사용하는 것을 추천
(2) .map(PostsListResponseDto::new)
= map(posts -> new PostsListsResponseDto(posts))
- postsRepository 결과로 넘어온 Posts의 Stream을 map을 통해 PostsListsResponseDto변환 -> List로 반환하는 메소드
4) PostsListResponseDto.java 생성
import com.jojoldu.book.springboot.domain.posts.Posts;
import lombok.Getter;
import java.time.LocalDateTime;
@Getter
public class PostsListResponseDto {
private Long id;
private String title;
private String author;
private LocalDateTime modifiedDate;
public PostsListResponseDto(Posts entity) {
this.id = entity.getId();
this.title = entity.getTitle();
this.author = entity.getAuthor();
this.modifiedDate = entity.getModifiedDate();
}
}
5) Controller 변경
@RequiredArgsConstructor
@Controller
public class IndexController {
private final PostsService postsService;
@GetMapping("/")
public String index(Model model){
model.addAttribute("posts", postsService.findAllDesc());
return "index";
}
}
(1) Model
- 서버 템플릿 엔진에서 사용할 수 있는 객체를 저장
- 여기서는 postsService.findAllDesc()로 가저온 결과를 posts로 index.mustache에 전달
6) 테스트
2. 게시글 수정화면 만들기
게시글 수정 API는 이미 만들어 놨다.
public class PostApiController {
private final PostsService postsService;
...
@PutMapping("/api/v1/posts/{id}")
public Long update(@PathVariable Long id, @RequestBody PostsUpdateRequestDto requestDto) {
return postsService.update(id, requestDto);
}
}
해당 API로 요청하는 화면을 개발해야 한다.
1) posts-update.mustache
{{>layout/header}}
<h1>게시글 수정</h1>
<div class="col-md-12">
<div class="col-md-4">
<form>
<div class="form-group">
<label for="title">글 번호</label>
<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>
<button type="button" class="btn btn-danger" id="btn-delete">삭제</button>
</div>
</div>
{{>layout/footer}}
(1) {{posts.id}}
- 객체 필드 접근시 점으로 구분
- Post 클래스의 id에 대한 접근은 posts.id로 사용
(2) readonly
- input 태그에 읽기 기능만 허용하는 속성
- id와 author는 수정할 수 없도록 읽기만 허용하도록 추가
2) index.js 파일에 update function 추가
btn-update 버튼을 클릭하면 update 기능을 호출할 수 있도록
var main = {
init : function () {
var _this = this;
...
$('#btn-update').on('click', function () {
_this.update();
});
},
save : function () {
...
});
},
update : function () {
var data = {
title: $('#title').val(),
content: $('#content').val()
};
var id = $('#id').val();
$.ajax({
type: 'PUT',
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();
(1) $('#btn-update').on('click')
- btn-update란 id를 가진 HTML 엘리먼트에 click 이벤트가 발생할 때, update function을 실행하도록 이벤트를 등록
(2) type: 'PUT'
- PostsApiController에 있는 API에서 이미 @PutMapping으로 선언했기 때문에, PUT을 사용해야 한다.
- 생성(Create) : POST, 읽기(Read) : GET, 수정(Update) : PUT, 삭제(Delete) : DELETE
(3) url: '/api/v1/posts/'+id
- 어느 게시글을 수정할 지 URL Path로 구분하기 위해 Path에 id를 추가한다.
4) index.mustache 수정
전체 목록에서 수정페이지로 이동할 수 있게 페이지 이동 기능 추가
...
<tbody id = "tbody">
{{#posts}}
<tr>
<td>{{id}}</td>
<td><a href="/posts/update/{{id}}">{{title}}</a></td>
<td>{{author}}</td>
<td>{{modifiedDate}}</td>
</tr>
{{/posts}}
</tbody>
...
5) IndexController.java
수정화면을 연결하기 위해서 Controller 수정
...
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";
}
}
6) 테스트
3. 게시글 삭제
1) posts-update.mustache 추가
<div class="col-md-12">
<div class="col-md-4">
...
<a href="/" role="button" class="btn btn-secondary">취소</a>
<button type="button" class="btn btn-primary" id="btn-update">수정 완료</button>
<button type="button" class="btn btn-danger" id="btn-delete">삭제</button>
</div>
</div>
2) index.js 추가
삭제 이벤트 진행
var main = {
init : function () {
...
$('#btn-delete').on('click', function () {
_this.delete();
});
},
...
delete : function () {
var id = $('#id').val();
$.ajax({
type: 'DELETE',
url: '/api/v1/posts/'+id,
dataType: 'json',
contentType:'application/json; charset=utf-8'
}).done(function() {
alert('글이 삭제되었습니다.');
window.location.href = '/';
}).fail(function (error) {
alert(JSON.stringify(error));
});
}
};
main.init();
3) 삭제 API 생성
- PostsService.java
@RequiredArgsConstructor
@Service
public class PostsService {
...
@Transactional
public void delete(Long id) {
Posts posts = postsRepository.findById(id)
.orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id = " + id));
postsRepository.delete(posts);
}
}
(1) postsRepository.delete(posts)
- JpaRepository에서 이미 delete 메소드를 지원하고 있음
- 엔티티를 파라미터로 삭제할 수도 있고, deleteById 메소드를 이용하면 id로 삭제할 수도 있다.
- 존재하는 Posts인지 확인을 위해 엔티티 조회 후 그대로 삭제
- PostsApiController.java
서비스에서 만든 delete 메소드를 Controller가 사용하도록 코드를 추가
...
@RequiredArgsConstructor
@RestController
public class PostApiController {
...
@DeleteMapping("/api/v1/posts/{id}")
public Long delete(@PathVariable Long id) {
postsService.delete(id);
return id;
}
}
4) 테스트
'스프링부트와 AWS로 혼자 구현하는 웹서비스' 카테고리의 다른 글
Part11. 로그인 기능 구현 (2) (1) | 2024.01.16 |
---|---|
Part 10. 로그인 기능 구현 (1) (1) | 2024.01.15 |
Part 8. 게시글 화면 만들기 (1) (2) | 2024.01.13 |
Part 7. JPA Auditing으로 생성시간/수정시간 자동화하기 (1) | 2024.01.11 |
Part 6. 등록/수정/조회 API 만들기 (0) | 2023.12.17 |