[Spring Boot 게시판] 19일차

1. 게시물 상세보기 페이지에서 조회수 증가를 ajax로 처리

<script>
	function ArticleDetail__increaseHitCount() {
		$.get('../article/doIncreaseHitCountRd', {
			id : params.id,
			ajaxMode : 'Y'
		}, function(data) {
			$('.article-detail__hit-count').empty().html(data.data1);
		}, 'json');
	}
	
	$(function() {
		// 실전코드
		//ArticleDetail__increaseHitCount();
		// 연습코드
		setTimeout(ArticleDetail__increaseHitCount, 2000);
	})
</script>

• jQuery에서 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메소드사용
• ../article/doIncreaseHitCountRd해당 uri는 이동시 조회수 증가를 시킴
• $('.article-detail__hit-count').empty().html(data.data1) :
• class가 article-detail__hit-count인 태그의 값을 비우고 data.data1로 채움
• data는 doIncreaseHitCountRd uri로 이동시 반환받는 resultData타입의 객체를 json형식으로 받아옴
• 서버에 요청하여 받은 data가선택
• $(function(){ ArticleDetailincreaseHitCount() }) : DOM객체가 생성되는 시점에 ```ArticleDetailincreaseHitCount() 실행```

2. 조회수 증가 성공에 따른 결과에 Id(몇번글인지) 정보 추가

   		@RequestMapping("/usr/article/doIncreaseHitCountRd")
        @ResponseBody
        public ResultData<Integer> doIncreaseHitCount(int id){
            ResultData<Integer> increaseHitCountRd = articleService.increaseHitCount(id);
            if(increaseHitCountRd.isFail()) {
                return increaseHitCountRd;
            }
            int hitCount = articleService.getHitCount(id);
            ResultData<Integer> rd = ResultData.newData(increaseHitCountRd, "hitCount", hitCount);
            rd.setData2("id",id);
            return rd;
        }

• increaseHitCountRd : 조회수 증가에대한 결과
• 조회수 증가 성공시 결과에 rd.setData2("id",id)메소드를 통해 id를 추가

ResultData.class

   		@Getter
        private Object data2;
        @Getter
        private String data2Name;
				~~~ 생략 ~~~		
        public void setData2(String dataName, Object data) {
            data2Name = dataName;
            data2 = data;
        }

• data2 , data2Name 필드 추가
• setData2 : data2, data2Name을 초기화 하는 메소드

3 . 게시물 상세보기시 조회수 증가 요청 중복되지 않도록처리 (로컬스토리지)

	<script>
		function ArticleDetail__increaseHitCount() {
			const localStorageKey = 'article__' + params.id + '__alreadyView';
			
			if(localStorage.getItem(localStorageKey)){
				return;
			}
			
			localStorage.setItem(localStorageKey,true);
					

• 같은 브라우저에서 상세보기 페이지 새로고침시 조회수가 증가되는 것을 방지 하기위해 로컬스토리지에 정보를 남김

$( function(){ } )

• DOM객체가 생성되는 시점에 실행

• $(document).ready(function(){});와 동일한 의미

• $(document).ready(function(){}); 이것이 jQuery를 사용하기 위한 기본 문법

• 정확히는 DOM(Document Object Model) 객체가 생성되어 준비되는 시점에서 호출된다는 의미

• $('document').ready(function(){}) 관련자료

Ajax

• AJAX 사용 이유는 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"

• 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줌

• // 기본 방식
  $.ajax({ //jquery ajax
      type:"get", //get방식으로 가져오기
      url:"data.json", //값을 가져올 경로
      dataType:"json", //html, xml, text, script, json, jsonp 등 다양하게 쓸 수 있음
      success: function(data){   //요청 성공시 실행될 메서드
          console.log("통신성공");
      },
      error:function(){		 //요청 실패시 에러 확인을 위함
          console.log("통신에러");
      }
  })

• ajax 관련 자료 1

• ajax 관련 자료 2

• ajax 관련 자료 3

• ajax 관련 자료 4 ( xml )

예시 1

jQuery.get(  url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

• url : 요청 URL (클라이언트가 HTTP 요청을 보낼 서버의 주소)
• data : 요청과 함께 서버에 보내는 string 또는 map
• success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수
• dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )

예시 2

// 요청 Url 만 , 리턴 결과값 무시 
$.post("http://domain/test/");


// 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시

$.post("http://domain/test/", { fruit1: "apple", fruit2: "banana" } );


// 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시

$.post("http://domain/test/", { 'fruits[]': ["apple", "banana"] });


// 요청 Url + 폼데이터, 리턴 결과값 무시

$.post("http://domain/test/", $("#form1").serialize());


// 요청 Url, xml(또는 html)리턴 결과값

$.post("http://domain/test/", function(data) {  alert("Data Loaded: " + data); });


// 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식

$.post("http://domain/test/", { fruit1: "apple", fruit2: "banana" }, function(data) {  process(data); },  "xml" );


// 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식

$.post("http://domain/test/", { "func": "getFruits" },

   function(data){

           console.log(data.fruit1); // apple

           console.log(data.fruit2); // banana

   }, "json");

로컬스토리지

• 로컬스토리지 관련 자료 1