프로젝트(3)-게시물 조회

게시물의 조회에서는 첨부파일을 다운로드 하거나, 원본 이미지의 파일을 볼 수 있는 기능을 사용한다.

게시물의 조회에서 고민해야 하는 내용은 첨부파일을 한번에 볼것이닞, Ajax을 이용해서 별도로 처리할 것인지 결정해야한다.

게시물의 정보는 tbl_board 테이블에 기록되어있고, 첨부파일의 정보는 tbl_attach에 기록되어 있기때문에 화면에

두 테이블이 있는 정보를 사용하기 위해서는 다음과 같은 방식을 고려해야 한다.

-BoardVO 객체를 가져올 때 join을 처리해서 한꺼번에 게시물과 첨부파일의 정보를 같이 처리하는 방식
DB를 한번만 호출 하게 되므로 효율적이지만 MyBatis쪽에서 처리해야 하는 일이 많아진다.

-JSP에서 첨부파일의 정보를 AJax를 이용해서 처리하는 방식
다시 쿼리를 처리해야 하는 불편함이 있지만 난이도가 낮고 화면에서 처리는 JS가 복잡하다

전통적인 방식은 쿼리를 이용해서 두개의 테이블을 join해서 처리하는 방식이다.

쿼리를 한번만 실행하기 때문에 DB의 부하를 줄여줄 수 있다. 

그러나 지금 Ajax를 이용해서 구성하겠다. 가장 큰 이유는 기존에 개발해 둔 코드를 최소한으로 수정해서 사용하는 것이 

가능하다. 

댓글의 처리 역시 Ajax를 이용했으니까 동작방식에 일관성을 유지하려고한다.

BoardService와 BoardController수정

게시물을 조회할 때 첨부파일을 Ajax로 처리하기로 했다면 우선적으로 서버 측에서 Json데이터를 만들어서 화면에

올바르게 전송하는 작업을 먼저 처리하자.

BoardAttachMapper에서는 이미 게시물의 번호를 이용해서 BoardAttachVO 타입으로 변환하는 메서드 findByBno()메서드가 완성된 상태이므로, BoardService와 BoardServiceImple 클래스를 수정한다.

public List<BoardAttachVO> getAttachList(Long bno);

그리고 BoardServiceImpl 클래스에서 

	@Override
	public List<BoardAttachVO> getAttachList(Long bno) {
		// TODO Auto-generated method stub
		log.info("get Attach list by bno" + bno);
		return attachMapper.findByBno(bno);
	}

findByBno() 메서드를 통해 첨부파일목록을 가져오는 기능을 수행하도록 하는 것을 추가한다.

그럼 해당 게시물의 첨부파일들의 목록을 가져온다.

BoardController의 변경과 화면처리

BoardController는 특정한 게시물 번호를 이용해서 첨부파일과 관련된 데이터를 JSON으로 반환하도록 처리한다.

	@GetMapping(value = "/getAttachList", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
	@ResponseBody
	public ResponseEntity<List<BoardAttachVO>> getAttachList(Long bno) {
		log.info("getAttachList " + bno);
		return new ResponseEntity<>(service.getAttachList(bno), HttpStatus.OK);
	}

해당 url을 호출하면 니타나도록 했다.

http://localhost:8080/board/getAttachList?bno=126 를 톰캣으로 실했다.

126번글에 첨부파일 테스트하면서 사진을 올렸었기때문에...

정상적으로 json 형태로 나타는걸 확인 할 수 있다.

---

게시물 조회 화면의 처리

게시물을 조회하는 화면은 get.jsp 파일을 수정해야한다.

가장 먼저 해당 게시물의 댓글을 가져오는 부분이 자동으로 동작하게 처리하는 작업부터 시작한다.

그리고 똑같이 첨부파일들을 나타날 수 있게

<script>태그를 추가하고, $(document).ready()를 이용해서 첨부파일의 데이터를 가져오는 부분을 즉시

실행하는 함수를 이용해서 처리시킨다.

<!--댓글처리 기능밑에 하나더 추가-->
<script>
$(document).ready(function(){
  (function(){
    var bno = '<c:out value="${board.bno}"/>';
     $.getJSON("/board/getAttachList", {bno: bno}, function(arr){
      console.log(arr);
     });
  })();
});
</script>

브라우저에서 첨부파일이 추가된 게시물을 선택하면 아래 그림과 같이 콘솔창에 해당 게시물의 첨부파일의 목록이

나타난다.

http://localhost:8080/board/get?bno=126 를 통해 이동했더니 JSON형태로 콘솔창으로 잘나타나는 것을 확인했다.

이제 이 데이터를 잘 정제해서 올려주어야 한다.

파일들을 보여줄 수 있도록 <div>태그를 생성해주자.

<!-- 첨부파일올라올곳 -->
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-heading">Files</div>
      <div class="panel-body">
        <div class='uploadResult'> 
          <ul>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 첨부파일올라올곳 끝-->

그럼 

이렇게 댓글과 본문 사이에 첨부파일들이 자리잡게 된다.

---

첨부파일 보여주기

JSON으로 가져온 첨부파일 데이터는 작성된 <div>안에 보이도록 처리해주어야 한다.

전달된 JSON의 데이터는 BoardAttachVO객체이다.

JS에서 화면에 보여주는 부분을 작성해주자

이렇게 나온다. 흠 그런데 너무 안이쁘다 ... CSS를 다룰줄은 잘 모르지만 인터넷에서 배껴가면서 작업해보았다.

개인적으로 사진이나 파일마다 흰색테두리를 넣어주고싶었는데 아쉬운결과이긴하다.

<style>
.uploadResult {
  width:100%;
  background-color: gray;
}
.uploadResult ul{
  display:flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}
.uploadResult ul li {
  list-style: none;
  padding: 10px;
  align-content: center;
  text-align: center;
}
.uploadResult ul li img{
  width: 100px;
}
.uploadResult ul li span {
  color:white;
}
.bigPictureWrapper {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  top:0%;
  width:100%;
  height:100%;
  background-color: gray; 
  z-index: 100;
  background:rgba(255,255,255,0.5);
}
.bigPicture {
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
}

.bigPicture img {
  width:600px;
}
</style>

첨부파일 클릭 시 이벤트 처리

첨부파일의 목록이 보인다.면 이미지파일의 경우 화면에서 원본이미지, 일반파일의 경우에는 다운로드 처리를 해주자

<!-- 이미지 원본보기 -->
<div class='bigPictureWrapper'>
  <div class='bigPicture'>
  </div>
</div>
<!-- 이미지 원본보기 끝 -->

를 추가해준다. 이곳은 이미지를 클릭했을때 원본이미지가 보여지는 곳이다.

  $(".uploadResult").on("click","li", function(e){
    console.log("view image");
    var liObj = $(this);
    var path = encodeURIComponent(liObj.data("path")+"/" + liObj.data("uuid")+"_" + liObj.data("filename"));
    if(liObj.data("type")){
      showImage(path.replace(new RegExp(/\\/g),"/"));
    }else {
      //download 
      self.location ="/download?fileName="+path
    }
  });
  function showImage(fileCallPath){
    alert(fileCallPath);
    $(".bigPictureWrapper").css("display","flex").show();
    $(".bigPicture")
    .html("<img src='/display?fileName="+fileCallPath+"' >")
    .animate({width:'100%', height: '100%'}, 1000);
  }
  $(".bigPictureWrapper").on("click", function(e){
    $(".bigPicture").animate({width:'0%', height: '0%'}, 1000);
    setTimeout(function(){
      $('.bigPictureWrapper').hide();
    }, 1000);
  });
});

그리고 사진 또는 파일을 클릭했을때 사진이 나타나거나 다운로드가 되도록했다.

중간에 경고창을 통해 클릭이 되는것을 확인하였고 그것에서 확인을 누르면 원본사진이 나타나도록 했다.

추가로 원본사진을 눌렀을때 높이 0, 너비 0으로 돌아가도록 1초간 애니메이션을 넣어주었고 사라지도록 했다.

대신 다시 누르면 나타날수 있게 hide처리를 해주었다.

---

이제 남은건 게시물의 삭제와 첨부파일에 대한 처리다. 

그리고 수정, 첨부파일엔 올려놓고 그냥 창을 닫는다던지, 제출을 하지않고 돌아간다던지 한는 것에 대한 조치를

취해보겠다.