[78일차] REST 방식 / gson 라이브러리 추가 / 게시판에 댓글 기능 구현 (ex04)

20221114(월)

• 목차
  - REST 방식
  - gson 라이브러리 추가
  - 게시판에 댓글 기능 구현
  
  

---

< REST 방식 >

• Representational State Transfer
  하나의 URI는 하나의 고유한 리소스(Resource)를 대표하도록 설계된다는 개념
• 전송방식을 결합해서 원하는 작업을 지정
• 데이타베이스 기반에 의한 자원(Resource)
• 자원 : 클라이언트와 서버간의 통신환경에서 보내고 받는 개념속에서 실질적인 대상
  
  
• CRUD

작업 상태		전송 방식
Create	SQL insert	POST
Read	SQL select	GET
Update	SQL update	PUT
Delete	SQL delete	DELTE

     get, post 방식으로 CRUD 작업을 다 처리했다. ➡ 정확한 표현이 아니다.. ㅠ
     ✨ get, post, put, delete 요청방식을 사용.(더 정확하게 표현하기 위함)
     이제 요청방식만 봐도 어떤 작업인지 개발자가 이해할 수 있다! GET? 아~ READ구나~

 

• 자원관리 주소에도 차이가 있다.
  - get 기본주소 http://www.abc.com/board?idx=1
  - REST 주소  http://www.abc.com/board/1 

---

• @RestController
  해당 Controller의 모든 메서드의 리턴 타입을 기존과 다르게 처리한다는 것을 명시
  @RestController는 메서드의 리턴 타입으로 사용자가 정의한 클래스 타입을 사용할 수 있고, 
  이를 JSON이나 XML로 자동으로 처리
• @RestController = @Controller + @ResponseBody

    ✨ REST 설계구현 
    1) @RestController
    2) ResponseEntity 클래스? 1)결과값(리턴값) 2)헤더작업 3)HTTP상태코드
    3) 주소 : 자원을 나타내는 의미로 정의
    4) 데이타 생성 주소 : Post, 데이타 조회 주소 : Get, 데이타 삭제 주소 : Delete, 데이타 수정 주소 : Put
    5) JSP와 같은 뷰를 리턴하는 것이 아니라, 데이타 그 자체를 리턴.
      ➡ 다양한 클라이언트 기기에 표준 데이타를 제공하여 서비스함.

 

---

< gson 라이브러리 추가 >

• 데이터의 처리는 XML과 JSON을 이용할 것이므로 pom.xml을 변경 
• jackson-databind와 Jackson-dataformat-xml 라이브러리 활용 
• Java객체를 JSON으로 쉽게 변환할 수 있는 gson 라이브러리   

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
 <!-- 
<dependency>
    <groupId>com.fasterxml.jackson.dataformat</groupId>
    <artifactId>jackson-dataformat-xml</artifactId>
    <version>2.14.0</version>
</dependency>
 -->
 
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<!-- 
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.10</version>
</dependency>
 -->

 

---

< 게시판에 댓글 기능 구현 >

• 게시물은 고정이고 아래 댓글 목록 들이 따로 페이징되어 내용과 함께 부분 업데이트 되는 것

 

---

---

1. ReplyVO.java 코드

package com.demo.domain;
 
import java.util.Date;
 
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
 
@Getter
@Setter
@ToString
public class ReplyVO {
 
	/*
	 CREATE TABLE TBL_REPLY (
    RNO     NUMBER(10,0),
    BNO     NUMBER(10,0) NOT NULL,
    REPLY   VARCHAR2(1000)  NOT NULL,
    REPLYER VARCHAR2(50)    NOT NULL,
    REPLYDATE   DATE    DEFAULT SYSDATE,
    UPDATEDATE  DATE    DEFAULT SYSDATE
);
	 */
	
	// rno, bno, reply, replyer, replydate, updatedate
	
	private Long rno;
	private Long bno;
	
	private String reply;
	private String replyer;
	private Date replydate;
	private Date updatedate;
}

---

2. ReplyController.java 코드

package com.demo.controller;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import com.demo.domain.ReplyVO;
import com.demo.dto.Criteria;
import com.demo.dto.PageDTO;
import com.demo.service.ReplyService;
 
import lombok.extern.log4j.Log4j;
 
//댓글기능 : Ajax방식과 REST방식으로 구현.
//   /board/get.jsp 파일에서 모든작업이 진행(댓글목록, 쓰기, 수정, 삭제)
 
@RequestMapping("/replies/*")
// 메서드의 리턴타입은 jsp파일명으로 해석되는 것이 아니라, 리턴 값 . 그자체 데이터로 클라이언트에게 보내진다.
// 리턴값이 문자열이면 그냥 보내지고, 객체면 json으로 변환되어 보내진다.
@RestController  // @Controller + @ResponseBody
@Log4j
public class ReplyController {
 
	/*
	 REST 설계구현 
	 1)@RestController
	 2)ResponseEntity클래스? 1)결과값(리턴값) 2)헤더작업 3)HTTP상태코드
	 3)주소 : 자원을 나타내는 의미로 정의
	 4) 데이타 생성 주소 : Post, 데이타 조회 주소 : Get, 데이타 삭제 주소 : Delete, 데이타 수정 주소 : Put
	 5) JSP와 같은 뷰를 리턴하는 것이 아니라, 데이타 그 자체를 리턴. -> 다양한 클라이언트 기기에 표준 데이타를 제공하여 서비스함.
	 
	  3,4,5 REST 이론.
	 */
	@Autowired
	private ReplyService replyService;
	
	
	//특정게시물에 의한 댓글목록.   bno :게시물번호, page :페이지번호
	// @Controller 방식으로 리턴값을 jsp로 할 경우
	/*
	@GetMapping("/replyList")
	public void replyList(Long bno, Criteria cri, Model model) {
		
	}
	*/
	
	// @RestController 방식으로 메서드의 리턴값을 그 데이타를 클라이언트에 반환
	// 1)클라이언트쪽에 댓글 목록과 2)댓글페이징정보. 2개의 정보를 Map컬렉션으로 작업하여, 클라이언트에게 보낸다.
	// 작업정보가 1개 인경우는 List컬렉션으로 작업하여, 클라이언트에게 보낸다.
	// 일반주소  /replies/pages/?bno=2562&page=1
	// REST주소  http://localhost:8888/replies/pages/2562/1.json
	@GetMapping(value = "/pages/{bno}/{page}", produces = {MediaType.APPLICATION_XML_VALUE, MediaType.APPLICATION_JSON_UTF8_VALUE})
	public ResponseEntity<Map<String, Object>> getList(@PathVariable("bno") Long bno, @PathVariable("page") int page ) {
		
		ResponseEntity<Map<String, Object>> entity = null;
		Map<String, Object> map = new HashMap<String, Object>();
		
		//1)댓글 목록
		Criteria cri = new Criteria(page, 5);
		// mapper인터페이스에 파라미터 전달시 cri, bno 파라미터 2개 전달
		List<ReplyVO> reList = replyService.getListWithPaging(cri, bno);
		
		map.put("replyList", reList);  //작업1
		
		//2)댓글페이징작업
		int total = replyService.getCountByBno(bno);
		PageDTO pageDTO = new PageDTO(total, cri);
		
		map.put("pageMaker", pageDTO); //작업2
		
		
		//최종 리턴되는 데이타작업
		entity = new ResponseEntity<Map<String,Object>>(map, HttpStatus.OK);
		
		
		return entity; // jsp파일명으로 해석되는 것이 아니라, json으로 변환되어 클라이언트에게 보내진다.
		
	}
}

---

3. ReplyMapper.java 코드

package com.demo.mapper;
 
import java.util.List;
 
import org.apache.ibatis.annotations.Param;
 
import com.demo.domain.ReplyVO;
import com.demo.dto.Criteria;
 
/*
 Mapper Interface의 메서드 파라미터가 2개 이상일 경우에는 @Param 어노테이션을 사용해야 한다. (중요)
 */
 
public interface ReplyMapper {
 
	//댓글목록
	public List<ReplyVO> getListWithPaging(@Param("cri") Criteria cri, @Param("bno") Long bno);
	
	//댓글개수
	public int getCountByBno(Long bno);
}

---

4. ReplyMapper.xml 코드

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.mapper.ReplyMapper">
 
	<select id="getListWithPaging" resultType="com.demo.domain.ReplyVO">
	
	<![CDATA[ 
		SELECT RN, rno, BNO, REPLY, REPLYER, REPLYDATE, UPDATEDATE
FROM (
    SELECT ROWNUM RN, rno, BNO, REPLY, REPLYER, REPLYDATE, UPDATEDATE FROM TBL_REPLY
    WHERE BNO = #{bno} AND rownum <= #{cri.pageNum} * #{cri.amount}
)
where rn > (#{cri.pageNum} -1) * #{cri.amount}
	]]>
	
	</select>
	
	
	<select id="getCountByBno" resultType="int">
		SELECT count(*) FROM TBL_REPLY WHERE BNO = #{bno}
	</select>
 
</mapper>

---

5. ReplyService.java 코드

package com.demo.service;
 
import java.util.List;
 
import com.demo.domain.ReplyVO;
import com.demo.dto.Criteria;
 
public interface ReplyService {
 
	public List<ReplyVO> getListWithPaging(Criteria cri, Long bno);
	
	public int getCountByBno(Long bno);
}

---

6. ReplyServiceImpl.java 코드

package com.demo.service;
 
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import com.demo.domain.ReplyVO;
import com.demo.dto.Criteria;
import com.demo.mapper.ReplyMapper;
 
@Service
public class ReplyServiceImple implements ReplyService {
 
	@Autowired
	private ReplyMapper replyMapper;
 
	@Override
	public List<ReplyVO> getListWithPaging(Criteria cri, Long bno) {
		// TODO Auto-generated method stub
		return replyMapper.getListWithPaging(cri, bno);
	}
 
	@Override
	public int getCountByBno(Long bno) {
		// TODO Auto-generated method stub
		return replyMapper.getCountByBno(bno);
	}
}

 

---

< SQL 코드 >

-- 11/14 댓글 기능
CREATE TABLE TBL_REPLY (
    RNO     NUMBER(10, 0),
    BNO     NUMBER(10, 0)      NOT NULL,
    REPLY   VARCHAR2(1000)  NOT NULL,
    REPLYER    VARCHAR2(50)    NOT NULL,
    REPLYDATE   DATE        DEFAULT SYSDATE,
    UPDATEDATE  DATE        DEFAULT SYSDATE
);
 
CREATE SEQUENCE SEQ_REPLY;
 
ALTER TABLE TBL_REPLY
ADD CONSTRAINT PK_REPLY PRIMARY KEY(RNO);
 
ALTER TABLE TBL_REPLY
ADD CONSTRAINT FK_REPLY_BOARD
FOREIGN KEY(BNO) REFERENCES TBL_BOARD(BNO);
 
-- rno, bno, reply, replyer, replydate, updatedate
 
-- 댓글데이타 작업
 
SELECT * FROM TBL_BOARD ORDER BY BNO DESC;
 
-- 아래 내용 5번 실행
INSERT INTO TBL_REPLY(rno, bno, reply, replyer)
VALUES(SEQ_REPLY.NEXTVAL, 3072, '댓글내용', 'USER01');
 
-- 아래 내용 여러번 실행
INSERT INTO TBL_REPLY(rno, BNO, REPLY, REPLYER)
(SELECT SEQ_REPLY.NEXTVAL, 3072, '댓글내용', 'USER01' FROM TBL_REPLY);
 
INSERT INTO TBL_REPLY(rno, BNO, REPLY, REPLYER)
(SELECT SEQ_REPLY.NEXTVAL, 3071, '댓글내용', 'USER01' FROM TBL_REPLY);
 
INSERT INTO TBL_REPLY(rno, BNO, REPLY, REPLYER)
(SELECT SEQ_REPLY.NEXTVAL, 3070, '댓글내용', 'USER01' FROM TBL_REPLY);
 
COMMIT;
 
 
-- 특정 게시물 번호의 댓글 데이타 조회
SELECT * FROM TBL_REPLY WHERE BNO = 3072;
SELECT * FROM TBL_REPLY WHERE BNO = 3071;
SELECT * FROM TBL_REPLY WHERE BNO = 3070;
 
 
-- 댓글 목록쿼리
SELECT RN, rno, BNO, REPLY, REPLYER, REPLYDATE, UPDATEDATE
FROM (
    SELECT ROWNUM RN, rno, BNO, REPLY, REPLYER, REPLYDATE, UPDATEDATE FROM TBL_REPLY
    WHERE BNO = 게시물번호 AND rownum <= #{pageNum} * #{amount}    
)
where rn > (#{pageNum} - 1) * #{amount};

 

---

< 보드매퍼와 리플라이매퍼 차이점 >

**Mapper Interface의 메서드 파라미터가 2개 이상일 경우에는 @Param 어노테이션을 사용해야 한다.

 

• ReplyMapper.java 의  cri, bno는 ReplyMapper.xml 파일에서 동일하게 사용되어야 한다.

 

• ReplyMapper.xml 

---

8. get.jsp 코드 추가하기

핸들바 작업?

<!-- 핸들바 작업1 -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<!-- 핸들바 템플릿 작업2-->
<script id="replyTemplate" type="text/x-handlebars-template">
  {{#each .}}
  <div class="box-body">
    <div class="form-group row">
      <label for="replyer" class="col-3 col-form-label">작성자</label>
      <div class="col-5">
        <input type="text" name="rno" value="{{rno}}" readonly>
        <input type="text" class="form-control" name="replyer" value="{{replyer}}" readonly>
      </div>
      <label for="reply" class="col-4 col-form-label">등록일: <span>{{replydate}}</span> </label>
    </div>
    <div class="form-group row">
      <div class="col-8">
        <textarea class="form-control" name="reply" rows="3" readonly>{{reply}}</textarea>
      </div>
      <div class="col-4">
        <input type="button" name="btnModalModify" value="수정"><br>
        <input type="button" name="btnModalDelete" value="삭제">
      </div>
    </div>
  </div>
  <hr>
  {{/each}}
</script>
 
<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
  <script>
 
    let bno = ${board.bno };  // 게시물번호
    let replyPage = 1;   // 댓글목록의 첫번째 페이지값.
 
    let url = "/replies/pages/" + bno + "/" + replyPage + ".json";
 
    getPage(url);
 
    // 사용자정의 함수
    function getPage(url) {
      console.log("댓글목록 주소: " + url);
 
      $.getJSON(url, function(replyData) {
        // let printReplyData = function(replyList, target, templateObject)
        printReplyData(replyData.replyList, $("div#replyListStr"), $("#replyTemplate"));
 
        /*
        let str = "";
 
        for(let i=0; i<result.replyList.length; i++) {
          str += result.replyList[i].rno;
          str += result.replyList[i].reply;
          str += result.replyList[i].replyer;
          str += "<button type='button'>delete</button>";
          str += "<hr>";
        }
        
        $("div#replyListStr").append(str);
        */
 
        /* json데이타 접근
        console.log(result.replyList.length);
        console.log("댓글일련번호: " + result.replyList[0].rno);
        console.log("댓글페이지정보: " + result.pageMaker.startPage);
        console.log("댓글페이지정보: " + result.pageMaker.endPage);
        */
 
 
      });
    }
    // 익명함수를 변수로 선언
    // replyList : json로 반환된 댓글데이타
    // target : 댓글목록이 출력될 위치.
    // templateObject : 핸들바 템플릿 참조변수.
    let printReplyData = function(replyList, target, templateObject) {
      //
      let template = Handlebars.compile(templateObject.html());
      let replyListHtml = template(replyList);
      target.empty();
      target.append(replyListHtml);
    }
 
  </script>