스프링다시시작(3)

페이징처리

페이징 처리를 위해서 현재페이지와 한페이지에 나올개수를 미리 VO를 만들어 놓는다. 위에서는 Criteria로 만들어 놓음

페이징 처리에 대한 DTO를 만들어 해당 Pre 와 next여 부를 판단하고 현재 페이지의 공고물이 몇번부터 몇번인지 체크한다(startpage~endpage)

그후, 컨트롤러에 적용

해당번호를 눌렀을떄 href 로 num 값만 넘기고

해당번호의 버튼이 눌렸을때 href 의 값을 이용하여 form 태그 에서 pageNum에 num값을 적용하여 sumbit을 한다.

$().find(A) → 해당 태그에서 A를 찾아라
A.val(B) → A의 값을 B로 넣어라

실제 총 데이터 구하기

boardMapper.java Interface에 함수 구현

count 값 구하는 쿼리 적용

boardService에 해당 함수를 추가

Implement에서 해당 mapper 함수 사용

controller에서 해당 서비스를 이용하여 total 함수에 넣고 model에 적용시킨다.

검색처리

검색처리 mybatis 처리를 편리하게 하기 위해서는 우선 mybatis에서 제공하는 <trim></trim>이라는 녀석을 알면 좋다.
mybatis의 가장 강력한 기능 중 하나는 동적 SQL을 처리하는 방법이다.
그처리를 trim이 처리해준다.

<trim>태그
<trim prefix=”AND (“ suffix=”)” prefixOverrides=”OR”><trim></trim> 안에 쿼리가 존재한다면 AND( 와 ) 가 자동으로 만들어지게됩니다.
prefixOverrides=”OR”은 맨앞에 OR연산자가 존재한다면 OR 연산자를 지워버리게 됩니다.

trim 적용 해보기

*주의 사항*
MyBatis의 기본 동작은 엄격한 자바빈처럼 setter/getter가 아니라.. setter/getter이름을 기준으로 해서 동작합니다.
따라서 typeArr이라고 하면 getTypeArr( ) 혹은 setTypeArr( )과 같이 이름만 맞으면 동작합니다.

해당 xml 에서 trim collection 값을 변수명과 맞춰야하는데
해당 getter의 이름값이 getTypeArr임으로 TypeArr로 지정하여 사용 한다.
고 생각할수 있지만 get을 지우고 앞에 글자는 소문자로 변경하여 사용하낟.

keyword값과 적용 type 을 만들어주고 getter인 String[] getTypeArr()을 사용한다.

이 getter를 trim collection에서 적용 시켜 사용한다. < sql>태그는 다른 sql문 안에 include를 통해서 적용 시킬수 있다.

include를 통해서 해당 trim 태그 적용 모습

검색 부분 구현

javascript로 처리 하여 해당 form 태그를 눌렀을시 페이지 첫 값을 1로 두고 form 태그안에 있는 모든 input 값들을 submit 처리 하였다.

페이징 처리하는 form 태그 역시 type 과 keyword를 유지 시켰다.

REST방식

-REST방식에서 가장 기억해야할 점은 서버에 전송하는 것이 순수한 데이터라는 점
-스프링4이후 부터는 @Controller 외에 @RestController 라는 어노테이션이 있다.

JSON/XML변환하기 위한 디펜던시 추가

@RestController 는 순수한데이터를 반환하는 형태이므로 다양한
포맷의 데이터를 전송할수 있다.

controller에 @RestController 어노테이션으로 rest 방식을 사용할것이라고 지정후 원하는 controller함수에 produces로 지정 하여 return

하지만, produces에 지정을 굳이 안해도 기본적으로는 xml이고 뒤에 .json을 붙이면 json형식으로 전달된다.

collection 형태로도 전송가능

controler에서 List형태로 반환

rest방식은 데이터 자체를 전송하기 떄문에 데이터에 대한 정상데이터 인지
원하는 데이터 값인지 확인해 주어야한다. ResponseEntity를 이용하여 확인
가능

first의 길이가 1이 아니면 bad gateway인 502상태를 전송 아니면 200상태 전송

first를 kdfdfd 라고 길게 적게 되면 502값이 확인된다.

ajax로 댓글 기능 만들기

댓글에 대한 테이블 생성 게시물의 bno와 pk fk 관계를 만들어 사용한다.

게시판 crud와 마찬가지고 댓글도 crud 구현

CRUD구현에 대한 Mybatis 쿼리 작성

게시판과 마찬가지로 servcie 인터페이스 만들고 impl로 상속 받아서 구현

controller에 service를 주입 시켜서 사용 / restAPI를 사용하기 위해서 RestController 어노테이션 사용.\..또한, @RequestBody 를 이용하여 JSON 데이터를 ReplyVo 타입으로 변환

실질적인 AJAX처리를 통한 댓글 생성 및 조회

reply.js를 따로 구현 해 놓고 get.jsp에서 댓글을 사용할거기 때문에
해당 get.jsp 에 reply.js 를 불러온다.

var replyService = (function(){
function add(reply,callback,error)
{
$.ajax({
type : 'post',
url : '/replies/new',
data : JSON.stringify(reply),
contentType : "application/json; charset=utf-8",
success : function(result,status, xhr)
{
if(callback){
callback(result);
}
},
error : function(xhr,status,er)
{
if(error){
error(er);
}
}
})
}
//댓글처리
function getList(param,callback,error)
{
var bno =param.bno;
var page =param.page || 1;
$.getJSON("/replies/pages/"+bno+"/"+page+".json",
function(data){
if(callback){
callback(data);
}
}).fail(function(xhr,status,err){
if(error){
error(err);
}
});
}
return {
add:add,
getList :getList
};
})();

get.jsp에서 자바스크립트 부분

<script type="text/javascript" src="/resources/js/reply.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var bnoValue = '<c:out value="${board.bno}"/>'; //현재 페이지에서 bno의 값을 가져온다. 즉, 게시판 번호를 가져온다.
var replyUR =$(".chat");
showList(1);
function showList(page)
{
console.log("댓글 처리 리스트  ");
replyService.getList({bno:bnoValue,page: page|| 1},function(list){
var str="";
if(list ==null || list.lenght==0){ 
// 댓글이 없으면 해당 화면에 아무것도 안보여준다.
replyUR.html("");
return;
}
//댓글이 있을때
for(var i=0, len =list.length || 0; i< len; i++)
{
str += "<li class='left clearfix' data-rno='"+list[i].rno+"'>";
str +=" <div><div class='header'><strong class='primary-font'>"+list[i].replyer+"</strong></div>";
str+="   <p>"+list[i].reply+"</p></div></li>";
}
replyUR.html(str);
});
}
//show list 끝
//모달 처리
var modal = $(".modal");
var modalInputReply = modal.find("input[name='reply']");
var modalInputReplyer = modal.find("input[name='replyer']");
var modalModBtn =$("#modalModBtn");
var modalRemoveBtn =$("#modalRemoveBtn");
var modalRegisterBtn =$("#modalRegisterBtn");
$('#addReplyBtn').on("click",function(){  // 맨처음 화면에서 newRegister누르면 모달 창  생성
//modal.find("input").val("");
modalRegisterBtn.show();
$(".modal").modal("show");
});
// 모달 처리 끝
//댓글 등록 처리
modalRegisterBtn.on("click",function(){
var reply ={
reply : modalInputReply.val(),
replyer : modalInputReplyer.val(),
bno : bnoValue
};
replyService.add(reply,function(result){
modal.find("input").val("");
modal.modal("hide");
});
});
//댓글등록 처리 끝
});
</script>

사용되는 모달 부분

<!-- 댓글에 대한 모달 창 (수정 삭제 등록) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
<h4 class="modal-title" id="myModalLalbel">REPLY MODAL</h4>
</div>
<div class="modal-body">
<div class="form-group"> <!-- 원하는 내용  -->
<label>Reply</label>
<input class="form-control" name='reply' value='New Rely!!!'>
</div>
<div class="form-group"> <!-- 작성자  -->
<label>Replyer</label>
<input class="form-control" name='replyer' value='replyer'>
</div>
</div>
<div class="modal-footer">
<button id='modalModBtn' type="button" class="btn btn-warning">수정</button>
<button id='modalRemoveBtn' type="button" class="btn btn-danger">제거</button>
<button id='modalRegisterBtn' type="button" class="btn btn-primary">댓글등록</button>
<button id='modalCloseBtn' type="button" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
<!-- 모달 끝 -->

결과 모습

해당되는 replyer와 reply를 작성후에 댓글 등록을 한후 새로고침을 하면 댓글 부분만 리로딩 된다.

정리 :
reply.js 부분에 자바스크립트로 replyservice 변수를 만들고 그 변수 안에
add 와 getList 함수를 구현한다 . 구현하며 그 안에 ajax 형식으로 url을 넘기는데 그 url을 댓글 controller에 맞게 url을 설정한다.
그후, 해당되는 화면(여기서는 get.jsp)에서 자바스크립트를 통해서 replyservice를 사용하고 replyservice.add 와 같이 사용하여 해당 부분을 구현하게 된다.

ajax에서 success 에대한 API 문서 (값, 상태값, 로그를 위한 변수값)