![220322 [화] Pager 클래스 , AJAX로 게시판 형태 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcZ6izu%2FbtrwLg5JqWI%2FtwmaCZNmDK4aKtsIhI2vo0%2Fimg.png)
세션 조 안겹치게 짜는 알고리즘?
[오늘의 계획]
1. 수업내용 복습
2. spring 게시판 어떻게 할지 구상해보기 ( 오늘배운 내용으로 가능함 )
[궁금한것]
Q. 매개변수에 어노테이션을 붙여줄때 이 네개의 차이점? 어떨때 뭐를 붙여야하는지 정리가 안됨..
@RequestParam
@PathVariable
@RequestBody
@ModelAttribute
[오늘의 공부]
[모델이 게시글을 어떻게 처리하는지 컨트롤러클래스를 만들어보자]
[RestBoardController]
Rest_board 테이블에 저장된 게시글 목록을 검색하여 JSON 형식의 텍스트로 응답하는 요청처리 메소드
ㅡ 게시글 목록을 페이징 처리하기 위해 요청 페이지 번호의 게시글 목록과 페이지 번호 관련 정보를 Map 객체의 엔트리에 저장하여 JSON 형식의 텍스트로 응답.
[Pager 클래스]
: 페이징 처리 관련 값을 제공하는 Pager 클래스로 객체를 생성하여 저장한다(VO클래스)
package xyz.itwill10.util;
//페이징 처리 관련 값을 저장하기 위한 클래스
public class Pager {
//생성자 매개변수에 전달된 값으로 필드값 저장
private int pageNum;//요청 페이지 번호
private int totalBoard;//전체 게시글의 갯수
private int pageSize;//하나의 페이지에 출력될 게시글의 갯수
private int blockSize;//하나의 페이지 블럭에 출력될 페이지 번호의 갯수
//생성자 매개변수에 전달된 값을 계산하여 필드값 저장
private int totalPage;//전체 페이지의 갯수
private int startRow;//요청 페이지에 출력될 게시글의 시작 행번호
private int endRow;//요청 페이지에 출력될 게시글의 종료 행번호
private int startPage;//페이지 블럭에 출력될 시작 페이지 번호
private int endPage;//페이지 블럭에 출력될 종료 페이지 번호
private int prevPage;//이전 페이지 블럭에 출력될 시작 페이지 번호
private int nextPage;//다음 페이지 블럭에 출력될 시작 페이지 번호
public Pager(int pageNum, int totalBoard, int pageSize, int blockSize) {
super();
this.pageNum = pageNum;
this.totalBoard = totalBoard;
this.pageSize = pageSize;
this.blockSize = blockSize;
calcPager();
}
private void calcPager() {
totalPage=(int)Math.ceil((double)totalBoard/pageSize);
if(pageNum<=0 || pageNum>totalPage) {
pageNum=1;
}
startRow=(pageNum-1)*pageSize+1;
endRow=pageNum*pageSize;
if(endPage>totalBoard) {
endPage=totalBoard;
}
startPage=(pageNum-1)/blockSize*blockSize+1;
endPage=startPage+blockSize-1;
if(endPage>totalPage) {
endPage=totalPage;
}
prevPage=startPage-blockSize;
nextPage=startPage+blockSize;
}
//+getter, setter메소드
}
requestBody -> post방식으로 전달받은값은 object객체에 전달이 될거고 그걸 requestbody에 전달받을거임 (이름=값&이름=값...)형태로.. dto 필드에 저장이되어서 전달됨
ajax 요청할땐 앞으로
이런 꼴로 요청할 예정이다.
-> @requestBody 어노테이션을 이용하여 모든 전달값을 [이름=값&이름=값&..] 형식으로 전달받아 값요청받을예정
-> 매개변수의 자료형이 JavaBean(DTO) 클래스인 경우 전달값은 같은 이름의 필드에 저장된다.
[Ajax 기능을 이용하여 웹프로그램 요청에 대한 요청 방식]
- 요청 처리 메소드의 @RequestMapping 어노테이션의 method 속성값
- GET(검색), POST(저장), PUT(전체 변경), PATCH(부분 변경), DELETE(삭제)
@RequestMapping 어노테이션의 value 속성값으로 매핑된 url 주소에 {변수명}형식으로 값을 표현한다.
- @PathVariable 어노테이션을 사용하여 URL 주소를 값으로 제공받아 매개변수에 저장
- 식별자를 전달받아 단일행을 검색하거나 삭제 처리시 사용한다.
@PathVariable : 요청 url 주소로 표현된 값을 매개변수에 저장하는 어노테이션
- 요청 url 주소로 표현된 이름과 매개변수의 이름이 같아야만 값을 전달받아 저장
- 요청 url 주소로 표현된 이름과 매개변수의 이름이 다른경우 value 속성값으로 url 주소의 이름을 설정하여 url 주소로 표현된 값을 매개변수에 저장 가능하다.
*요청방식이 여러개인 경우 method 속성을 배열로 작성하여 요소로 표현한다.
**Handlebars 라이브러리 : JSON 형식으로 표현된 JavaScript 객체를 전달받아 HTML 태그로 변환하는 기능을 제공하는 자바스크립트 템플릿 라이브러리
<handlebars> 템플릿코드 작성법 >> HTML
- {{#each}} 표현식을 사용하여 Array객체에 대한 반복 처리
- {{propertyName}} 표현식을 사용하여 Object 객체의 속성값 표현
[ajax]
*headers: 요청 자원의 헤더정보를 변경하기 위한속성
-> contentType 속성으로 전달값에 대한 형식(MimeType) 변경
*JSON.stringify(Object object) : 자바스크립트 객체를 JSON형식의 문자값으로 반환하는 메소드
*실제 요청할때 json 형식의 text 데이터로 보내야만 @requestbody라는 어노테이션을갖고 값을 받아서 전달할 수 있다.
contentType:"application/json"
<script type="text/javascript">
var page=1;//현재 요청 페이지 번호를 저장하기 위한 전역변수
boardDisplay(page);
//게시글 목록을 검색하여 JSON 텍스트로 응답하는 웹프로그램을 AJAX로 요청하여 처리하는 함수
function boardDisplay(pageNum) {
page=pageNum;
$.ajax({
type: "get",
url: "board_list?pageNum="+pageNum,
dataType: "json",
success: function(json) {
if(json.restBoardList.length==0) {
$("#restBoardListDiv").html("검색된 게시글이 존재하지 않습니다.");
return;
}
//응답된 게시글 목록을 HTML로 변환하도록 Handlebars 자바스크립트 라이브러리 이용
var source=$("#template").html();//템플릿 코드를 반환받아 저장
//템플릿 코드를 전달받아 템플릿 객체로 생성하여 저장
var template=Handlebars.compile(source);
//템플릿 객체에 JavaScript 객체(게시글 목록)를 전달하여 HTML 태그로 변환하여 출력
$("#restBoardListDiv").html(template(json.restBoardList));
//페이지 번호를 출력하는 함수 호출
pagerDisplay(json.pager);
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
}
//페이지 번호를 출력하는 함수
function pagerDisplay(pager) {
var html="";
if(pager.startPage>pager.blockSize) {
html+="<a href='javascript:boardDisplay(1);'>[처음]</a>";
html+="<a href='javascript:boardDisplay("+pager.prevPage+");'>[이전]</a>";
} else {
html+="[처음][이전]";
}
for(i=pager.startPage;i<=pager.endPage;i++) {
if(pager.pageNum!=i) {
html+="<a href='javascript:boardDisplay("+i+");'>["+i+"]</a>";
} else {
html+="["+i+"]";
}
}
if(pager.endPage!=pager.totalPage) {
html+="<a href='javascript:boardDisplay("+pager.nextPage+");'>[다음]</a>";
html+="<a href='javascript:boardDisplay("+pager.totalPage+");'>[마지막]</a>";
} else {
html+="[다음][마지막]";
}
$("#pageNumDiv").html(html);
}
//[글쓰기]를 클릭한 경우 호출되는 이벤트 처리 함수 등록
$("#writeBtn").click(function() {
//변경 게시글 입력 영역 초기화
$(".update").val("");
$("#updateDiv").hide();
//신규 게시글 입력 영역 출력
$("#insertDiv").show();
});
//[저장]를 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 사용자가 입력한 게시글 정보를 REST_BOARD 테이블에 저장하는 웹프로그램을 AJAX로 요청하여
//결과를 응답받아 처리
$("#insertBtn").click(function() {
var writer=$("#insertWriter").val();
var content=$("#insertContent").val();
if(writer==null) {
alert("작성자를 입력해 주세요.");
return;
}
if(content==null) {
alert("내용을 입력해 주세요.");
return;
}
$.ajax({
type: "post",
url: "board_add",
//headers : 요청 자원의 헤더정보를 변경하기 위한 속성
// => contentType 속성으로 전달값에 대한 데이타 형식(MimeType) 변경
//headers: {"contentType","application/json"},
//contentType : 전달값에 대한 데이타 형식(MimeType) 변경
contentType: "application/json",
//JSON.stringify(Object object) : 자바스크립트 객체를 JSON 형식의 문자값으로 변환하는 메소드
data: JSON.stringify({"writer":writer,"content":content}),
dateType: "text",
success: function(text) {
if(text=="success") {
//신규 게시글 입력 영역 초기화
$(".insert").val("");
$("#insertDiv").hide();
//게시글 목록을 검색하여 출력하는 함수 호출
boardDisplay(1);
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
//[취소]를 클릭한 경우 호출되는 이벤트 처리 함수 등록
$("#cancelInsertBtn").click(function() {
//신규 게시글 입력 영역 초기화
$(".insert").val("");
$("#insertDiv").hide();
});
//게시글의 [변경]을 클릭한 경우 호출되는 이벤트 처리 함수
function modify(num) {
//alert("num = "+num);
//신규 게시글 입력 영역 초기화
$(".insert").val("");
$("#insertDiv").hide();
//변경 게시글 입력 영역 출력
$("#updateDiv").show();
$.ajax({
type: "get",
url: "board_view/"+num,
dataType: "json",
success: function(json) {
$("#updateNum").val(json.num);
$("#updateWriter").val(json.writer);
$("#updateContent").val(json.content);
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
}
//[변경]을 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 사용자가 입력한 게시글 정보를 REST_BOARD 테이블에 저장된 게시글로 변경하는 웹프로그램을
//AJAX로 요청하여 결과를 응답받아 처리
$("#updateBtn").click(function() {
var num=$("#updateNum").val();
var writer=$("#updateWriter").val();
var content=$("#updateContent").val();
if(writer==null) {
alert("작성자를 입력해 주세요.");
return;
}
if(content==null) {
alert("내용을 입력해 주세요.");
return;
}
$.ajax({
type: "put",
url: "board_modify",
contentType: "application/json",
data: JSON.stringify({"num":num,"writer":writer,"content":content}),
dateType: "text",
success: function(text) {
if(text=="success") {
$(".update").val("");
$("#updateDiv").hide();
//게시글 목록을 검색하여 출력하는 함수 호출
boardDisplay(page);
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
//[취소]를 클릭한 경우 호출되는 이벤트 처리 함수 등록
$("#cancelUpdateBtn").click(function() {
//변경 게시글 입력 영역 초기화
$(".update").val("");
$("#updateDiv").hide();
});
//게시글의 [삭제]을 클릭한 경우 호출되는 이벤트 처리 함수
function remove(num) {
if(confirm("게시글을 삭제 하시겠습니까?")) {
$.ajax({
type: "delete",
url: "board_remove/"+num,
dateType: "text",
success: function(text) {
if(text=="success") {
boardDisplay(1);
}
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
}
}
</script>
내일 할것 : 권한설정 , 예외처리하는 방법. 사용자로부터 파일을 업로드 받아서 사용하는법..
'일기장 > 하루 정리' 카테고리의 다른 글
| 220324 [목] 보안, file 업로드 환경설정 (0) | 2022.03.24 |
|---|---|
| 220323 [수] ExceptionHandler , 암호화처리 (0) | 2022.03.23 |
| 220321 [월] Transaction Manager , REST (0) | 2022.03.21 |
| 220319 [토] 폴더,파일 정리 / 부트스트랩 마무리를 향해.. (2) | 2022.03.19 |
| 220318 [금] Mybatis 환경설정 2 , JUnit (0) | 2022.03.18 |