Spring 게시글 CRUD

InfiniteScrollProject.zip

1. 게시글의 TITLE을 클릭하면 해당 게시글을 조회할 수 있도록 링크를 걸어준다.

1-1. 그러면 컨트롤러에서 @RequestParam을 이용해서 요청으로 들어온 bno를 읽어온다. 그리고 해당하는 게시글을 DB에서 가져와 Model객체에 담아준다.

2. 그러면 화면에 해당 게시글 정보를 뿌려주면 되는데, 이때 조회 페이지다보니까 읽기 전용이어야 한다. 따라서
   각 <input>에 readonly속성을 추가해준다.

이때 중요한게 조회페이지에서 추후 삭제나 수정을 처리할 때 bno값을 넘겨주어야 한다. 근데 딱히 조회페이지에서는 bno를 보여줄 필요는 없기 때문에 hidden 타입으로 갖고 있고 버튼을 누를 때 이 값이 보내지도록 from 태그로 감싸놓는다.

수정, 삭제, 그리고 다시 모든 리스트조회 페이지로의 이동 버튼들을 만들어 놓는다. 이제 이 각 버튼들에 대한 클릭 이벤트 핸들러를 적절히 구현해야한다.

수정이나 삭제 모두 현재 조회하고 있는 게시글의 bno를 서버에 넘겨줘야한다. (그래야 이 bno를 가지고 DB에서 해당 게시글을 찾아서 삭제를 하던 수정을 위해 값을 가져오던 할 수 있을테니) 그래서 조회페이지에서 hidden타입으로 bno를  form 태그로 갖고 있었던 것이다. 

따라서 수정버튼을 클릭했을때 해당 form태그를 찾고, 여기에 action속성을 수정처리하는 컨트롤러의 uri로 지정해주면 된다.
그리고 submit이벤트를 발생시켜서 form태그 데이터를 서버로 날려주면 되는데 이걸 submit()으로 하면된다. ( 삭제의 경우도 마찬가치 패턴으로 처리해주면 된다.)

참고로 그냥 다시 모든 리스트조회 페이지로 갈때는 현재페이지의 url을 /board/listAll로 바꿔주면 되는데, 이걸 아래와 같이 self.loaction을 이용하면 된다.

3. 이제 수정, 삭제 처리를 해주면 되는데 삭제가 더 간단해서 먼저 처리한다.
삭제는 그냥 서버 단에서 삭제하고, 다시 모든 리스트조회 페이지로 오면 되니까 화면처리 해줄 건 없다. 굳이 하자면 RedirectAttributes.addFlashAttribute()로 삭제 성공 메시지를 넘겨주는 정도를 해주면 된다.

4. 수정 처리는 조회페이지에서 수정 버튼을 눌렀을 때는 일단 해당 bno에 해당하는 게시물을 수정할 수 있는 페이지를 새로 띄워줘야하니까

get방식으로 서버에 요청해서 화면처리를 해주면된다. 화면이 조회페이지랑 거의 비슷하긴 한데, 수정을 해야하니까 readonly를 없애고 또 수정한 상태로 저장하려면 수정된 내용들을 서버로 보내야하니까 form태그로 모두 감싸주어야 한다. 그리고 여전히 bno값은 hidden타입으로 갖고 있는다.

마찬가지 수정페이지에서 저장/취소 버튼을 갖고 있는다.

각 버튼에 대한 클릭이벤트 핸들러는 먼저 저장버튼의 경우 그냥 form태그를 선택하고 submit해주면 된다. 이때 action 속성을 따로 지정해주지 않았는데, 이렇게 하면 현재 경로의 uri에서 처리하게된다. 즉 /board/update에서 form태그 데이터를 받아서 수정결과를 저장하는 처리를 하게된다.

취소버튼의 경우에는 컨트롤러를 거칠필요가 딱히 없으니까 event.preventDefault()로 form데이터가 submit되는 것을 막고, 그냥 바로 현재 창의 uri를 self.location을 이용해서 모든게시물 조회페이지로 이동 해주면된다. 

이렇게 기본적인 crud까지는 된 상태이지만,

수정이나 삭제처리 후 다시 모든 게시물 조회페이지로 돌아갈 때, 이전에 보고 있던 해당 페이지로 돌아가야 하는데, 그 부분이 처리되지 않은 상태이다.. 무한스크롤 방식은 ajax로 새로운 데이터를 가져오기 때문에 페이지 url이 바뀌지 않는데 어떻게 해야할까