CRUD 썸네일형 리스트형 [코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 8 https://bobo12.tistory.com/324 7. 댓글 페이지의 화면 처리 ▷ 게시물을 조회하는 페이지에 들어오면 기본적으로 가장 오래된 댓글들을 가져와서 1페이지에 보여줌 ▷ 1페이지의 게시물을 가져올 때 해당 게시물의 댓글의 숫자를 파악해서 댓글의 페이지 번호를 출력함 ▷ 댓글이 추가되면 댓글의 숫자만을 가져와서 최종 페이지를 찾아서 이동함 ▷ 댓글의 수정과 삭제 후에는 다시 동일 페이지를 호출함 (1) 댓글 페이지 계산과 출력 ▷ Ajax로 가져오는 데이터가 replyCnt와 list라는 데이터로 구성되므로 이를 처리하는 reply.js의 내용 역시 이를 처리하는 구조로 수정함 ◎ reply.js 내용 수정 ... (생략) ... function getList(param, callback.. 더보기 [코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 6 (이벤트 처리, HTML 처리) https://bobo12.tistory.com/322 5. 이벤트 처리와 HTML 처리 ▷ Ajax 처리까지는 완료, 남은 작업은 화면에서 버튼 등에서 발생하는 이벤트 감지하고 Ajax 호출 결과 반영 (1) 댓글 목록 처리 ▷ 별도의 를 생성해서 댓글의 목록 처리를 해야 함. ▷ 게시글과 관련된 화면 아래쪽에 를 추가 후 나중에 화면의 모습을 파악할 수 있도록 간단한 텍스트 구성 ... (생략) ... Reply //확인필요 user00 2023-03-30 11:30 Good job! ... 생략 ... ▷ 댓글의 목록은 태그 내에서 태그를 이용해서 처리 ▷ 각 태그는 하나의 댓글을 의미하므로 수정이나 삭제 시 이를 클릭함 ▷ 수정이나 삭제 시에는 반드시 댓글 번호(rno)가 필요하므로 data-rn.. 더보기 [코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 5 (댓글의 목록, 삭제 및 갱신, 수정, 조회 처리) https://bobo12.tistory.com/320 (3) 댓글의 목록 처리 ▷ http://localhost:8080/replies/pages/2005745/1, http://localhost:8080/replies/pages/2005745/1.json 형태로 데이터 먼저 확인 가능 ◎ getJSON() 사용 ▷ reply.js에서는 Ajax 호출을 담당하므로, jQuery의 getJSON()을 이용해서 처리할 수 있음 ◎ reply.sp 수정 console.log("Reply Module........"); var replyService = (function(){ ...(생략)... function getList(param, callback, error){ var bno = param.bno; v.. 더보기 [코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 4 (JavaScript의 모듈화) https://bobo12.tistory.com/319 4. JavaScript 준비 ▷ JSP 내에서 댓글에 대한 처리는 하나의 페이지 내에서 모든 작업이 이루어지기 때문에 복잡하게 느껴짐 ▷ 기존과 달리 JavaScript와 동적으로 만들어지는 HTML로 처리하므로 각 단계를 주의해서 작성해야 함 (1) JavaScript의 모듈화 ▷ 화면에서 사용되는 jQuery는 막강한 기능과 다양한 플러그인을 통해 많은 프로젝트에서 기본으로 사용 ▷ Ajax를 이용하는 경우 jQuery의 함수를 이용해 쉽게 처리할 수 있기 때문에 많이 사용 ▷ 화면 내 JavaScript 처리를 하다보면 이벤트 처리, DOM 처리, Ajax 처리 등이 섞여 유지보수 하기 힘든 코드가 생김 ▷ JavaScript를 하나의 모듈처.. 더보기 [코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 3 (ReplyController를 이용한 CRUD) https://bobo12.tistory.com/318 3. 서비스 영역과 Controller 처리 ▷ 서비스 영역과 Controller 처리는 기존의 BoardService와 동일하게 ReplyService 인터페이스, ReplyServiceImpl 클래스 작성 ◎ ReplyService 인터페이스 생성 package org.codehows.service; import java.util.List; import org.codehows.domain.Criteria; import org.codehows.domain.ReplyVO; public interface ReplyService { public int register(ReplyVO vio); public ReplyVO get(Long rno); publ.. 더보기 [코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 2 (조회, 수정, 삭제) https://bobo12.tistory.com/317 ◎ 조회(read) 1. ReplyMapper 인터페이스 내용 추가 public interface ReplyMapper { public int insert(ReplyVO vo); public ReplyVO read(Long rno); // 특정 댓글 읽기 } 2. ReplyMapper.xml 내용 추가 select * from tbl_reply where rno = #{rno} 3. ReplyMapperTests 클래스 @Test public void testRead() { Long targetRno = 5L; ReplyVO vo = mapper.read(targetRno); log.info(vo); } 실행시 아래와 같은 결과가 나타나는 것.. 더보기 [코드로 배우는 스프링 웹 프로젝트] ch10 프레젠테이션(웹) 계층의 CRUD 구현 2 https://bobo12.tistory.com/300 (3) 조회 처리와 테스트 ▷ 등록 처리와 유사하게 조회 처리도 BoardController를 이용해 처리 가능 ▷ 특별한 경우가 아니라면 조회는 GET 방식으로 처리하므로, @GetMapping을 이용 ◎ src/main/java → org.codehows.controller → BoardController 클래스 수정 ...(생략)... @GetMapping("/get") public void get(@RequestParam("bno") Long bno, Model model) { log.info("get"); model.addAttribute("board", service.get(bno)); } } ▷ BoardController의 get() .. 더보기 [코드로 배우는 스프링 웹 프로젝트] ch10 프레젠테이션(웹) 계층의 CRUD 구현 1 ◎ 프레젠테이션 계층 ▷ 비즈니스 계층의 구현까지 모든 테스트가 진행되었다면 남은 작업은 프레젠테이션 계층인 웹의 구현 1. Controller의 작성 ▷ 스프링 MVC의 Controller는 하나의 클래스 내에서 여러 메소드를 작성하고 @RequestMapping 등을 이용해 URL을 분기하는 구조로 작성할 수 있음 ▷ 하나의 클래스에서 필요한 만큼 메소드의 분기를 이용하는 구조로 작성 ▷ WAS(Tomcat)을 실행하지 않고 Controller 테스트할 수 있는 방법 학습 필요 (1) BoardController 분석 ▷ 작성 전 현재 원하는 기능 호출 방식에 대해 테이블로 정리한 후 코드를 작성하는 것이 좋음 From 항목은 해당 URL을 호출하기 위해서 별도의 입력화면이 필요하다는 것을 의미 2... 더보기 이전 1 2 다음
