[20.09.24 HTML, SpMVC_ReadBook] PathVariable 방식, 고정된 레이아웃(제이쿼리 사용)

$(function () {
	// 화면에 scroll이 일어나면
	$(window).scroll(function () {
		let headerHeight = $("header").height(); // header tag의 높이 값
		// 화면을 세로 방향으로 스크롤 할 때 윈도우 화면의 최 상단 좌표 가져오기
		let windowTop = $(window).scrollTop();
	if (windowTop > headerHeight) {
		$("#main-nav").css("position", "fixed");
		$("#main-nav").css("top", "0");
	} else {
		$("#main-nav").css("position", "relative");
	}
	console.log(headerHeight, windowTop);
	});
});

네비게이션이 고정된 레이아웃이 생성된다.

 

>> Project_HTML / ReadBook / index.html

---

SpMVC_ReadBook

/*
* spring form taglib를 사용하여 write form을 만들었을 경우에는
* VO 클래스, 객체를 매개변수로 사용할 때
* @ModelAttribute("VO")를 필수로 사용하자
*/
// 스프링 폼태그를 쓸 때는 @ModelAttribute("bookVO") 반드시 이  값을 써주자!
@RequestMapping(value = "/input", method=RequestMethod.POST)
public String input(@ModelAttribute("bookVO") BookVO bookVO) {
	log.debug(bookVO.toString());
	return "redirect:/books";
}

 

>> BooksController

---

let isbn = bookVO.isbn; // 일단 하나 뽑아내고
// isbn 변수에 들어있는 문자열 중에서 html tag구조를 가진 단어가 있으면
// 무조건 제거하라
isbn = isbn.replace(/(<([^>]+)>)/gi, "");
$("#isbn").val(isbn); // 담기

>> book-write.js

---

// path Varriable 방식
document.location.href = `${rootPath}/books/detail/${seq}`;

>> book-list.js

BooksController

localhost:8080/read/books/detail/3 이라고 Request가 오면

맨 끝의 숫자 3을 Mapping 주소의 {book_seq} 위치에 Mapping 한다

매개변수에 설정된 PathVariable에 따라 String id 변수에

3의 값이 할당되어 method에 전달된다.

이방식을 PathVariable방식이라고 한다!

 

book-list.js 와 BooksController 체크!