프로젝트11 [SpringBoot] 게시판 11. 댓글 기능 - 비동기 구현 구현 순서 1. board-detail.html 2. reply.html 3. BoardController 4. BoardService 5. BoardServiceProcess 6. BoardMapper 7. board-mapper.xml 8. 댓글 구현 화면 1. board-detail.html 게시글 상세페이지에 댓글 작성과 조회를 할 영역을 만들어준다. 등록 1-2. board-detail 댓글내용 작성자 작성일 더보기 3. BoardController 댓글 작성 URL매핑 메서드와 댓글 조회 URL 매핑 메서드 생성 //댓글 작성 @PostMapping("/boards/{boardNo}/replies") public ResponseEntity save(ReplyDTO dto) { service.s.. 2023. 8. 13. [SpringBoot] 게시판 10. 페이징 처리 util 클래스 만들기 페이징 처리 중복코드 제거를 위한 페이징 유틸 클래스 만들기 import lombok.Getter; @Getter public class PageData { private int tot; //페이지 총 개수 private int from; //출력되는 페이지 시작번호 private int to; //출력되는 페이지 마지막 번호 //더보기 기능 구현 private boolean hasNext; //다음 페이지가 있는지 여부 private int page; //현재 페이지 번호 //페이지 정보를 생성하는 정적 메서드. PageData 객체를 생성할 수 있다. /** * @param page : 페이지번호 * @param limit : 페이지당 게시글 수 * @param rowCount : 총 게시글 수 * .. 2023. 8. 13. [SpringBoot] 게시판 9. 게시글 검색 기능 - 비동기 구현 구현 순서 1. index.html 2. board-search.html 3. BoardSearchDTO 4. BoardController 5. BoardService 6. BoardServiceProcess 7. BoardMapper 8. board-mapper.xml 9. 게시글 검색 구현 화면 1-1. index.html index에 검색 영역 코드 작성 제목 내용 제목+내용 검색 위 코드를 작성하면 뷰에서 아래 사진처럼 검색할 수 있는 화면이 보인다. 1-2. index 에 자바스크립트 코드 추가 $("form").submit(function(event){ ... })는 페이지 내의 모든 요소가 제출될 때의 기본 동작인 페이지 새로고침을 막는다. 즉, 폼 제출 시 페이지가 새로고침되지 않도록 한다.. 2023. 8. 10. [SpringBoot] 게시판 8. 게시글 수정 기능 구현 구현 순서 1. board-detail.html 2. board-edit.html 3. BoardController 4. BoardService 5. BoardServiceProcess 6. BoardMapper 7. board-mapper.xml 8. 게시글 수정 구현 화면 1. board-detail.html 상세페이지에 수정페이지로 이동할 태그 작성 수정하기 2. board-edit.html 수정페이지 태그 작성 상품 수정 페이지 글번호: 번 수정완료 th:text="${detail.no}" : 컨트롤러에서 전달된 detail.no 값을 표시 th:action="|/board/edit/${detail.no}|" : 폼이 제출될 때 요청이 전송되는 경로를 지정한다. ${detail.no}를 사용하여 .. 2023. 8. 4. [SpringBoot] 게시판 7. 게시글 삭제 기능 구현 구현 순서 1. board-list.html 2. BoardController 3. BoardService 4. BoardServiceProcess 5. BoardMapper 6. board-mapper.xml 7. 게시글 삭제 구현 화면 1. board-list.html board-list에 삭제 태그를 넣어준다 삭제 onsubmit="return delete_event()" 폼이 제출되기 직전에 delete_event() 함수를 실행하고, 그 함수의 반환 값을 폼 제출 여부로 사용 confirm() : 사용자에게 확인 대화 상자를 표시하고 '확인' 또는 '취소' 버튼을 눌렀을 때 true 또는 false 값을 반환한다 '확인'을 선택한 경우에만 아래 코드 블록이 실행된다 히든메서드(@DeleteMap.. 2023. 8. 4. [SpringBoot] 게시판 6. 게시글 입력 기능 구현 구현 순서 1. board-list.html 2. BoardController 3. write.html 4. BoardService 5. BoardServiceProcess 6. BoardMapper 7. board-mapper.xml 8. 게시글 입력 구현 화면 1. board-list.html board-list.html 글쓰기 페이지로 이동할 수 있는 태그를 만들어준다 2. BoardController 글쓰기 페이지 이동 메서드, 게시글 작성 메서드 생성 private final BoardService service; //글쓰기 페이지 이동 @GetMapping("/board/new") public String writePage() { return "board/write"; } //게시글 작성 @P.. 2023. 8. 3. [SpringBoot] 게시판 5. 게시글 상세보기 페이지 구현 구현 순서 1. index.html 2. BoardController 3. BoardService 4. BoardServiceProcess 5. BoardMapper 6. board-mapper.xml 7. board-detail.html 8. 게시글 상세보기 구현 화면 1. index.html 상세보기로 페이지로 이동을 위해 글제목을 태그로 변경 글번호 제목 조회수 수정일 글번호 제목 조회수 수정일 게시글이 존재하지 않습니다. index.html에서 글제목을 글번호 ↓ 제목 로 변경 th:href="|/board/${dto.no}|" : URL을 동적으로 만들어준다 | | => Thymeleaf의 URL표현법. ${} 안의 값들을 서버 측에서 동적으로 계산되어 URL의 일부로 포함되게 함 * 동적이란?.. 2023. 8. 3. [SpringBoot] 게시판 4. 게시글 조회 기능 +페이징 처리 - 비동기 구현 구현 순서 1. index.html 2. controller 3. service 인터페이스 4. service 인터페이스를 구현한 클래스 5. mapper 인터페이스 6. mapper.xml 7. board-list.html 8. 게시글 조회 구현 화면 1. index.html 비동기 처리를 위한 ajax 코드를 작성 게시글 조회 섹션 작성 비동기 게시판 function boardList() : jQuery를 사용하여 비동기 방식으로 서버의 /board-list URL에 GET 요청을 보내고, 서버로부터 받아온 결과를 board-list.html 파일에 넣어서 결과를 보여주는 함수 boardList() 함수가 호출되면 서버로부터 게시판 목록을 가져와서 해당 데이터를 HTML 요소(#board-list)에.. 2023. 8. 2. [SpringBoot] 게시판 3. 게시글 입력 테스트 코드 작성 게시글 조회 테스트를 위해 게시글 100개를 입력할 테스트 코드를 작성 1. 데이터를 전송하고 조회하기 위한 DTO 생성 @Setter @Getter public class BoardDTO { private long no; private String title; private String content; private int readCount; private LocalDateTime createDate; private LocalDateTime updateDate; } DTO란? "Data Transfer Object"의 약자로, 데이터 전송 객체를 의미 Board 객체의 필드를 가지고 있는 BoardDTO라는 클래스를 생성하여 데이터를 담아 전달할 수 있다. 이러한 방식으로 데이터 전송에 사용되는 것이 .. 2023. 8. 1. [SpringBoot] 게시판 2. Spring Starter Project 프로젝트 생성, 데이터베이스 설정(MariaDB, MyBatis) *Spring Tool Suite 4 사용 1. Spring Starter Project 프로젝트 생성 File에서 Spring Starter Project를 클릭해 준다 프로젝트 설정 정보(기본 게시판만 생성할 것이기 때문에 최소로 설정하였다) 자바 17 버전 War패킹 스프링부트 2.7.14 버전 DB는 MariaDB와 MyBatis Thymeleaf 템플릿 엔진 *Spring Starter Project의 장점은 프로젝트 생성 시 Dependency를 선택해주기만 하면 자동으로 설정이 된다는 것이다 Finish를 클릭하면 아래와 같이 프로젝트가 생성된다 build.gradle 파일을 클릭하면 프로젝트 생성 시 선택했던 버전정보와 Dependency들이 자동으로 추가되어 있다. 2. 데이터베이스(Ma.. 2023. 7. 30. [SpringBoot] 게시판 1. MariaDB 테이블 생성(게시글, 댓글) 1. 게시글 테이블 생성 CREATE TABLE board( no BIGINT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, read_count INT DEFAULT 0, create_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP, update_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); AUTO_INCREMENT : 데이터가 추가 될 때 마다 no값이 1씩 증가된다. DEFAULT CURRENT_TIMESTAMP : 데이터를 추가할 때만 현재 시간을 저장한다. DEFAULT CURRENT_TIMES.. 2023. 7. 28. 이전 1 다음
