[20.09.23 SpMVC_ReadBook] Modal, RequestParam, ajax, 동적html에서 사용 혹은 사용하지 말아야할 코드, RestController, produces

/naver/serch : 이러한 주소들은 RequestMapping으로 이루어진 것

 

api를 다루다보면 실제 데이터와 type이 다를 수 있음

네이버의 isbn처럼

 

 

>> naver-list.jsp

---

id와 name은 있어야함

name은 서버로 보낼때 필요한 친구!

vo  + db 컬럼명과 동일해야함 (연동되어야 하니까)

id는 js에서 쓸때 필요함!

 

button의 type을 button으로 하는 이유는 이걸 눌렀을때 submit을 실행하지 말라 하는 이야기

이건 실무에서 사용하지 않음!!제일 최근 버전

 

이런 버전을 사용한다. 이렇게 버전을 맞춰서 사용한다 ~ 가장 최근 버전을 해버리면 안맞아버릴수도 있기 때문엥

 

 

// 클릭했을때 modal기법이 나타나게
$("#book-modal").css("display","block");
});

// x 표시를 클릭했을 때 modal 창 닫기
$("div#modal-header span").click(function(){
$("#book-modal").css("display","none");
});

일종의 모달창을 사용함

팝업을 띄우지 않고 그 전체 페이지에서 뒷배경 투명하게

: Modal 창 기법!! 오늘의 핵심

 

ajax도 사용함

 

 

// ajax를 사용하여 서버에 네이버 검색 요청
// 에이잭스는 디버깅이 어려워서
// 반드시 콘솔에 나와있는 걸 봐야함
$.ajax({
    // ajax로 서버의 /naver/search URL에 POST로  요청을 하면서
    // search_text 변수에 title 변수에 담긴 값을  담아서 전달하고
    url: "${rootPath}/naver/search",
    method: "POST",
    data: { "search_text": title },
    // 서버가 데이터 조회를 수행한 후 view(HTML  코드) 코드를
    // return 하면 그 결과를 search-result div box에  채워서 보여달라
    success: function(result){
    $("#search-result").html(result)//전체화면에 보이지말고  search-result라는 div박스 안에다가 채워주라는 이야기
    // div박스에 html파일로 결과를 담아서  위치해주라
    },
    error: function(error){
    alert("서버 통신 오류 :(")
    }
});

 

<span>&times;</span> // 엑스표시 기호

 

자바스크립트를 이용해 나중에 임의로 사후에 그려진 영역을

동적 html 이라 한다 그래서

 

 

$("div.book-select").click(function(){
	let isbn = $(this).data("isbn");
	alert(isbn);
});

이 코드가 안먹은거 이 코드를 아래 처럼 변경 해주어야 한다.

 

// 클릭할 문자열 하고 이벤트 핸들러를 한꺼번에 괄호에 포함
// 문서 전체에 이벤트 핸들러를 그려준것
// div.book-select를 click하면 function이러이러한 코드를 실행해라
$(document).on("click", "div.book-select", function(){
	let isbn = $(this).data("isbn");
	alert(isbn);
});

 

동적으로 구현된 HTML에 event 핸들링 설정하기

현재 document(HTML 문서)가 생성되는 동안에 없던 tag를 
JS(JQ) 코드에서 동적으로 생성했을 경우 화면에 그려지는 것은
아무런 문제가 없으나, 

JS 에서 event 핸들러를 설정할 때 아직 화면에 없는 tag에 연결을 하면
무시해버리고, 없던 일로 만들어버린다.

사후에(HTML 문서가 완성된 후) JS 코드로 생성할 tag(id,class)에 
event를 설정하려면 자체에 설정하지 않고
가장 상위 객체인 document에 on 함수를 사용하여 event를 설정한다.
$(document).on("event", "대상", function(){ })

 

주의사항

$(selector).click(function(){})
만약 기존에 selector에 click event가 설정되어 있으면
기존의 이벤트를 덮어쓰기 한다.

$(document).on("event","selector")
만약 기존에 selector에 대한 click event가
설정되어 있더라도 중복 정의 된다.

동적으로 여는 곳에서는 $(document).on()을 사용하여
event 핸들러를 설정 하고,

동적으로 열린 곳에서는 절대 $(document).on() 을 사용하면 안된다!!
동적으로 열린 곳에서는 $("selector").clic() 를 사용하자


얘는 동적 페이지를 오픈하는 곳에 넣는거는 상관없는데
동적 페이지에서!! 사용하는거는 계속 클릭할 때마다 코드가 실행이 돼서
동적 페이지에서는 절대 넣으면 안됌
넣고싶으면
$(function(){
	$("div.book-select").click(function(){
	let isbn = $(this).data("isbn");
	alert(isbn);
	});
});
이거를 넣자

 

ajax를 사용하여 서버에 네이버 검색 요청 

$.ajax({
	// ajax로 서버의 /naver/search URL에 POST로 요청을 하면서
	// search_text 변수에 title 변수에 담긴 값을 담아서 전달하고
	url: "${rootPath}/naver/search",
	method: "POST",
	data: { "search_text": title },
	// 서버가 데이터 조회를 수행한 후 view(HTML 코드) 코드를
	// return 하면 그 결과를 search-result div box에 채워서 보여달라
	success: function(result){
	$("#search-result").html(result) //전체화면에 보이지말고 search-result라는 div박스 안에다가 채워주라는 이야기
	// div박스에 html파일로 결과를 담아서 위치해주라
	},
	error: function(error){
	alert("서버 통신 오류 :(")
	} 
}); // >> 지금은 이 코드를 권장하지는 않음 1.8까지 함 이고는 호환성 코드

/*********************************************/

$.ajax({
	url : "${rootPath}/api/isbn",
	method : "POST",
	data : {"search_text" : isbn}
	})
	.done(function(result){
	alert(result)
	})
	.fail(function(xhr,textStatus,error){
	//원래는 이렇게 세개의 매개변수가 있음 (xhr,textStatus,error)
	alert("서버 통신 오류")
}) //>> 2.x 이상에서는 이 코드를 사용 하자

에이잭스는 디버깅이 어려워서 
반드시 콘솔에 나와있는 걸 봐야함

 

>>book-write.jsp

 

 

---

 

name과 같은 search_text라는 변수에 세팅해주도록 

우리가 쓰는 버전은 선택사항인데

 

// @RequestParam의 용도
// 단 변수이름하고 쿼리이름하고 같아야함
// 두개 이름이 같으면 쓰지 않아도 되는데
// 카테고리를 보내기 싫고
// book이라고 도서검색을 해줬으면 좋겠어 할 때 @RequestParam을 쓴다.
// .../query?num1=30&num2=40
@ResponseBody // 테스트 하기 위해서 ResponseBody를 사용
@RequestMapping(value = "/query", method=RequestMethod.GET)
public String query(int num1, 

	@RequestParam(name = "num2", required = false, defaultValue = "500") int num2) {

		return (num1 + num2) + "";
}

여기에서 @RequestParam을 작성하지 않고 

http://localhost:8080/read/naver/query?num1=30 라고 주소창에 입력했을 때

500코드가 나타나게 된다.

 

@RequestParam을 작성하면

http://localhost:8080/read/naver/query?num1=30 라고 주소창에 입력했을 때

결과 값이 보이게 된다!!

required = false 는 값이 오지않아도 무시하고 진행하라는 명령

defaultValue = 500으로 값을 지정해놨기 때문에 결과 값이

이렇게 나오게 된다!!

 

그래서

@RequestMapping(value = "/search", method=RequestMethod.POST)
public String search(
	// 카테고리라는 변수에 값이 실려서 오지않아도 무시하라는 이야기
	// 필요할때는 카테고리를 실어서 보낼 수 있고 필요 없을 때는 search_text만 보낼 수 있음
	@RequestParam(name = "category",required = false, defaultValue = "BOOK") String category,
			
	@RequestParam(name = "search_text") String search_text, Model model) {
		

search_text만 입력 받았을 때 category가 없어도 무시하고

BOOK이라는 문자열로 대체를 하겠다는 코드

 

 

이름이 다르게 쓰고싶을때 이때도 RequestParam 을 사용!

클라이언트에 보낼때는 num2로 보내면 됌

num2가 num_2에 들어간다고 생각하면 된다.

 

 

>> NaverController

 

---

@Slf4j
@RestController
@RequestMapping("/api")
public class BookApiController {

 

RestController
 view를 return response하지 않고
 객체, 문자열 등을 직접 JSON 형태로
 Response하는 Controller
 
 (메서드위에 ResponseBody와 똑같음)

 

produces
- 클라이언트에게 데이터를 보내는 형식을 지정하는 속성
- 기본값이 application/json 형태인데 만약
- 클라이언트에서 json 데이터를 제대로 수신 하지 못하면
- 강제로 값을 지정해 주자

- 우리는 프로젝트에서 의무적으로 해주자!!
- 실무에서도 어차피 기본으로 들어간당

@RequestMapping(value = "/isbn", method=RequestMethod.POST,
	produces = "application/json;charset=utf8") // 클라이언트로 요청할 때 제이슨 형태로 강제로 변환 시켜줌
public BookVO naverSearch(String search_text){

 

/*
* getNaverList(query) Method는 도서명, ISBN으로 조회를 하여
* 도서 리스트를 return 해주는 method이다
* 도서명으로 검색을 하면 당연히 1개이상의 데이터가 return 되어
* List 형이 될 것이다.
* 만약 ISBN으로 검색을 하면 ISBN은 중복값이 없으므로
* 당연히 1개만 return이 될것이다.
* 하지만 이 method는 태생이 List를 return 하도록 만들어져 있기 때문에
* 1개의 데이터라도 List<BookVO>에 담겨서 return된다.
* ISBN으로 조회를 했을 때는 다른 데이터는 있더라도 무시하고
* 첫번째(0)데이터만 필요하므로 ~~.get(0)으로 첫번째 데이터만 추출한다.
*/
BookVO bookVO = naverService.getNaverList(queryURL).get(0);

>> BookApiController