(Spring /Java) SNS 스타일 게시판 만들기(4)😁

저번에 리스트 만들기 에서 좀 막힌 부분은 좀 더 공부가 필요해 보인다. 

이번에는 상세보기 모달을 작성해 보려고 한다. 

 

---

1. 모달창 JSP 제작

.modal-body {
      padding: 0px;
   }
   
   .modal-content>.row {
      margin: 0px;
   }
   
   .modal-body>.modal-img {
      padding: 0px;
   }
   
   .modal-body>.modal-con {
      padding: 15px;
   }
   
   .modal-inner {
      position: relative;
   }
   
   .modal-inner .profile {
      position: absolute; /*부모기준으로 위치지정 릴레이티브*/
      top: 0px;
      left: 0px;
   }
   
   .modal-inner .title {
      padding-left: 50px;
   }
   
   .modal-inner p {
      margin: 0px;
   }

 

   <div class="modal fade" id="snsModal" role="dialog">
         <div class="modal-dialog modal-lg">
         <div class="modal-content">
            <div class="modal-body row">
               <div class="modal-img col-sm-8 col-xs-6" >
                  <img src="../resources/img/img_ready.png" id="snsImg" width="100%">
               </div>
               <div class="modal-con col-sm-4 col-xs-6">
                  <div class="modal-inner">
                  <div class="profile">
                     <img src="../resources/img/profile.png">
                  </div>
                  <div class="title">
                     <p id="snsWriter">테스트</p>
                     <small id="snsRegdate">21시간전</small>
                  </div>
                  <div class="content-inner">
                     <p id="snsContent">다람쥐 헌 쳇바퀴에 타고파. sns Content 내용입니다.</p>
                  </div>
                  <div class="link-inner">
                     <a href="##"><i class="glyphicon glyphicon-thumbs-up"></i>좋아요</a>
                     <a href="##"><i class="glyphicon glyphicon-comment"></i>댓글달기</a> 
                     <a href="##"><i class="glyphicon glyphicon-share-alt"></i>공유하기</a>
                  </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

클릭했을때 작동 될 모달창

 

리스트에 그림을 클릭했을때 모달을 열어준다!

 

 

2. JS 작성

 

$('#contentDiv').on('click', '.image-inner a', function(e) {
         e.preventDefault();
         
         //글 번호 얻어오기
         const bno = $(this).attr('href');
         
         $.getJSON(
            "<c:url value='/snsBoard/getDetail/' />" + bno,
            function(data) {
               console.log(data);
               
               const img = 'display?fileLoca=' + data.fileloca + '&fileName=' + data.filename;
               $('#snsImg').attr('src', img); //이미지 경로 처리
               $('#snsWriter').html(data.writer); //작성자 처리
               $('#snsRegdate').html(timeStamp(data.regdate)); //날짜 처리
               $('#snsContent').html(data.content); //내용 처리
               $('#snsModal').modal('show'); //모달 열기
            }
         );
         
      });

클릭이벤트함수를 설정한뒤

E의 이벤트를 preventDefault()함수로 기능을 상실시킨다. 

 

그뒤 번 번호를 가져온 후 

 

getJson 방식으로 컨트롤러와 통신하여 DB의 데이터를 가져온다. 

 

 

컨트롤러 제작

 

@GetMapping("/getDetail/{bno}")
	@ResponseBody
	public SnsBoardVO getDetail(@PathVariable int bno) {
		return service.getDetail(bno);
	}

getJson에서 요청된 파라미터의 값을

@pathVariable의 값으로 받는다 .

이때 변수의 값이 동일하다면 pathVariable의 annotation을 생략해도 된다. 

방식은 모든 정보를 담고 있는 객체인 VO 객체로 리턴한다. 

 

 

서비스 및 매퍼 작성

 

 

	@Override
	public SnsBoardVO getDetail(int bno) {
		// TODO Auto-generated method stub
		return mapper.getDetail(bno);
	}

 

리턴한 매퍼를 작성해주자!

 

	<select id="getDetail" resultType="com.spring.myweb.command.SnsBoardVO">
		select * from snsboard
		where bno = #{bno}
	</select>

 

이제 getJson에서 요청된 정보를 컨트롤러에서 파라미터를 받아 서비스로 리턴 후 매퍼에서 주어 

매퍼에서 쿼리문을 작성해 가져온 데이터를 js 모달에 뿌려주면 된다.

 

         $.getJSON(
            "<c:url value='/snsBoard/getDetail/' />" + bno,
            function(data) {
               console.log(data);
               
               const img = 'display?fileLoca=' + data.fileloca + '&fileName=' + data.filename;
               $('#snsImg').attr('src', img); //이미지 경로 처리
               $('#snsWriter').html(data.writer); //작성자 처리
               $('#snsRegdate').html(timeStamp(data.regdate)); //날짜 처리
               $('#snsContent').html(data.content); //내용 처리
               $('#snsModal').modal('show'); //모달 열기
            }
         );
         
      });

이런식으로 Jqurey .html 및 attr 함수로 추가해주었다. 

 

---

동작확인

 

모달창이 아주 잘 뜨는걸 확인 할 수 있다. 

 

 

주인장 GIt : https://github.com/MoonSeokHyun