06/14
2015
[블로그개발_11] 글 수정, 삭제... (+Date 부분 변경)
블로그개발 시리즈 - 다른글 : http://millky.com/@origoni/folder/30/post/list
- [블로그개발_01] STS로 Spring Boot 웹 프로젝트 시작하기
- [블로그개발_02] Spring Boot 와 Spring Data (JPA) 를 이용한 간단한 DB 입출력
- [블로그개발_03] STS에서 GitHub에 있는 메이븐 프로젝트 받아서 시작해보기. (+ gradle to maven)
- [블로그개발_04] 스프링 부트(Spring Boot)의 세가지 뷰 (JSP, Velocity, Thymeleaf)
- [블로그개발_05] STS에서 GitHub에 있는 메이븐 프로젝트 받아서 시작해보기. (for Windows User)
- [블로그개발_06] webjars를 이용한 bootstrap, jquery 적용해보기 (Spring Boot)
- [블로그개발_07] Blog theme 적용해보기 (+bower, +webjars)
- [블로그개발_08] 블로그 글 저장 및 표시 해보기 (Spring Boot + Spring Data JPA + H2)
- [블로그개발_09] WYSIWYG 에디터 붙이기
- [블로그개발_10] 글에 부제목 추가 (Post Entity 모델링 +lombok, @Valid)
- [블로그개발_11] 글 수정, 삭제... (+Date 부분 변경)
- [블로그개발_12] 소셜 로그인 붙이기 (spring-social-facebook)
- [블로그개발_13] 글 목록 페이징 및 정렬 (SpringData Pageable, Page)
- [블로그개발_14] 스프링 WebMvc 설정 (Interceptor, ArgumentResolver)
- [블로그개발_15] 카테고리 추가 (@ManyToOne, stream())
라이브 데모 : http://blog.millky.com/post/list
자바 웹 개발 시작하기 : http://www.slideshare.net/origoni/presentations
오늘은 글 수정, 삭제를 해 볼 것이다.
사실 글 목록 페이징 부분을 먼저해야 하나 했었는데..
데모 페이지에 http://blog.millky.com/post/list 이런 글이 올라와서..
바로 시작한다 ^^
삭제
우선. 간단해 보이는 삭제를 먼저 해보자.
주소는
/post/{id}/delete 로 하겠다.
그럼 컨트롤러에 해당 부분을 추가해 보자.
@RequestMapping("/{id}/delete")
public String delete(@PathVariable int id) {
postDao.delete(id);
return "redirect:/post/list";
}역시 매우 단순하다.
프로젝트를 돌리고..
이제 테스트를 해보자.
잘 동작하는것을 확인했으니 UI도 수정해보자.
post.jsp 에 버튼을 넣자.
<div class="pull-right">
<a href="/post/${post.id}/delete" onclick="if(!confirm('진심이에요?')){return false;}">
<button type="button" class="btn btn-danger">Delete</button>
</a>
</div>
버튼이 잘 동작하나 확인해보자. (자바스크립트 부분은 커밋 직전에 넣었다 ^^;)
수정
그럼 이번에는 수정을 추가해보자.
주소는
/post/{id}/edit 로 하겠다.
역시 컨트롤러 먼저 추가해보자.
@RequestMapping(value = "/{id}/edit", method = RequestMethod.GET)
public String editor(Model model, @PathVariable int id) {
Post post = postDao.findOne(id);
model.addAttribute("post", post);
return "form";
}
@RequestMapping(value = "/{id}/edit", method = RequestMethod.POST)
public String edit(@Valid Post post, BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
return "form";
}
return "redirect:/post/" + postDao.save(post).getId();
}간단하게 살펴보면.
GET으로 들어오면 findOne 으로 해당 글을 가지고 와서.
Model에 담아서 보낸다.
그리고 POST방식으로 들어오면 저장을 한다.
write와 다른점은 날짜를 추가하지 않는다는것이다.
수정은 UI 수정이 먼저 진행되어야 테스트 할 수 있어서 같이 수정해 보자.
<c:if test="${post.id == 0}"><c:url var="actionUrl" value="/post/write"/></c:if>
<c:if test="${post.id != 0}"><c:url var="actionUrl" value="/post/${post.id}/edit"/></c:if>
<form:form action="${actionUrl}" commandName="post" onsubmit="if($('#pen').html()!='<p><br></p>')$('#content').val($('#pen').html()); pen.destroy();" method="post">
<c:if test="${post.id != 0}"><form:input type="hidden" path="regDate" /></c:if>
... 이전과 동일 ...
</form:form>
<script type="text/javascript">
...
$('#pen').html($('#content').val());
...
</script>좀 살펴보면 form의 action 부분이 글을 작성할때와 수정할때가 달라서 폼 위에 미리 정의 하였다.
판단 기준은 post의 id가 0일때와 아닐때로 했는데.. 이는 스프링 폼 태그를 사용하다보니. 글쓰기 폼 생성시에도 post인스턴스가 넘어가야 해서 그렇다.
그리고. 글쓰기에는 필요하지 않던 <form:input type="hidden" path="regDate" /> 가 추가되었다.
글 수정한다고. 작성일이 바뀌면 곤란하니까..
마지막으로
위지윅 에디터를 사용하기에. 에디터 데이터 초기화 해주는 부분을 자바스크립트에 적어두었다.
이렇게 폼은 수정이 끝났고.
post.jsp에 버튼을 추가 해보자.
아까 delete버튼 앞에
<a href="/post/${post.id}/edit">
<button type="button" class="btn btn-warning">Edit</button>
</a>이부분을 추가 했다~
그럼 테스트를 해보자.
수정이 잘 되었다.
이렇게 수정, 삭제가 추가 되었다.
날짜
사실 요부분 개발하다가. 날짜부분 없데이트가 안되고. 데이터가 누락되는 현상이 발생해서 Date 타입을 Java8 타입으로 변경하였다.
@DateTimeFormat(iso = ISO.DATE_TIME)
LocalDateTime regDate;
설명도 없이 코드를 바꾸기는 그래서.. 다시 롤백해서 확인해보자 (스샷을 안찍었서 ㅠㅠ)
수정을 하려 하면.. 요렇게 나온다.
그래서 타입을 변경 하였다.
먼저
Date regDate;
를
LocalDateTime regDate;
로 변경하였다.
이부분을 변경하니.
컨트롤러에서 글쓴 날짜를 생성하던 부분이..
post.setRegDate(new Date());
에런가 난다.
Java8 올라오면서 날짜 부분이 많은 부분이 변경되었다. 이미 좋은 글들이 많으니 검색해보길 권장한다. (나중에 이야기 해볼 시간이 있을지도 모르겠다 ^^;)
이번시간 범위에는 벗어나니
post.setRegDate(LocalDateTime.now());
일단 요렇게 변경하자~
음 잘 수정은 되었다.. 그런데 이상한 부분이...
시:분 이후로 잘려 있다 ㅠ
그래서
@DateTimeFormat(iso = ISO.DATE_TIME)
어노테이션을 추가하였다.
참고 : http://blog.codeleak.pl/2014/06/spring-4-datetimeformat-with-java-8.html
최종 이런 모습이 되었다.
끝!
다음시간은..
페이징을 해야 할까?
로그인을 해야 할까?
지금 글을 아무나 수정 삭제 할 수 있는데;
이부분을 개선을 해야 할 것 같다.
사실 로그인 부분은 나중에 댓글 부분 만들면서 진행하려 했는데.
이렇게 만들다 보니. 먼저 진행을 해야 할 것 같다;;
오늘은 여기까지 ^^
오늘 작업한 코드는 https://github.com/origoni/Spring-Blog/releases/tag/v0.0.11 여기를 참고 부탁드린다.
변경사항은 : https://github.com/origoni/Spring-Blog/commit/6ff28200b0498e8b8cfce17f9dd98f0814acf13d
깃헙 : https://github.com/origoni/Spring-Blog
프로젝트 시작하는 방법은(for Windows User)? http://millky.com/@origoni/post/1145
블로그개발 시리즈 - 다른글 : http://millky.com/@origoni/folder/30/post/list
keechi 2015-06-19 17:40:12
정말 잘보고 있습니다.spring이 점점 복잡해져서 개인홈페이지는 mean쪽을 보고 있었는데,
Spring Boot 정말 편하고 좋네요!
강의 정말 잘 보고 있습니다.
좋은 강좌 써 주셔서 정말 감사합니다!!!!
항상 건강하세요~
keechi 2015-06-19 17:40:33
오늘까지 해서 여기까지 따라해 봤네요 ㅎㅎ
origoni 2015-06-20 07:41:18
이렇게 방문해주시고 댓글까지 주셔서 감사합니다 ^^이번 주말동안 12번 글도 올리도록 해보겠습니다!!
