#11_[spring boot] 게시판 조회 (mybatis 사용) :: 개발/일상_Mr.lee

#11_[spring boot] 게시판 조회 (mybatis 사용)

Posted by Mr.mandu.
2017. 12. 26. 19:31 개발/spring boot, gradle, mybatis Project

안녕하세요.

이번 포스팅은 게시물 조회 관련 포스팅입니다.

사실 게시판에 있어서

목록의 페이징 처리, 게시물 등록을 하고 나면

수정, 조회, 삭제는 다 따라오는거라서 포스팅을 안하려고 했지만

조회를 먼저 포스팅하고 시간이 되면 댓글 등록까지 포스팅할 예정입니다.

먼저 저의 게시물 목록 화면 입니다.


게시물 목록 화면은 이전에 포스팅을 진행하였습니다.

[개발/spring boot, gradle, mybatis Project] - #8_[spring boot] 게시판 목록 출력(페이징 처리, 부트스트랩)




제가 하고자 하는 것은 게시물의 제목을 클릭하여 상세조회 화면으로 이동하고자 합니다.

밑의 사진은 조회화면 입니다.

간단하게 제목, 내용, 첨부파일, 댓글(코멘트)가 보입니다.




이제 바로 소스로 알아보겠습니다.


저의 boardList.jsp의 body 입니다.

<div class="board_div">

          <h2 class="page-header">Notice</h2>
          
          <div class="search_div">
	          <form class="form" id="boardSearchVO" name="boardSearchVO">
	          <input type="hidden" id="pageIndex" name="pageIndex" value="${boardSearchVO.pageIndex}"/>
	          <input type="hidden" id="pageSize" name="pageSize" value="${boardSearchVO.pageSize}"/>
	          <input type="hidden" id="bbs_sno" name="bbs_sno" value="${boardSearchVO.bbs_sno}"/>
	          <input type="hidden" id="blt_rsrc_sno" name="blt_rsrc_sno" value="0"/>
	          
	         
	          <div class="row"> 
		          <div class="col-xs-2"> 
		          		<!-- <label for="usr_id">글쓴이(ID)</label> -->
					    <input type="text" class="form-control" id="usr_id" name="usr_id" value="${boardSearchVO.usr_id}" placeholder="input writer..."/>
		          </div> 
		          <div class="col-xs-4"> 
		          		<!-- <label for="title">제목</label> -->
					    <input type="text" class="form-control" id="title" name="title" value="${boardSearchVO.title}" placeholder="input title..."/>  
		          </div> 
				  <button type="submit" class="btn btn-default" id="searchBtn">Search</button> 
	          </div>
	          </form>
			</div>
        
          
          <h4>total : ${count}</h4>
          
          <div class="table-responsive">
            <table class="table table-striped"> <!-- table-hover -->
              <thead>
                <tr>
                  <th class="col-xs-1">번호</th>
                  <th class="col-xs-6">제목</th>
                  <th class="col-xs-2">글쓴이(ID)</th>
                  <th class="col-xs-1">조회수</th>
                  <th class="col-xs-2">등록일</th>
                </tr>
              </thead>
              <tbody>
               <c:choose>
					<c:when test="${not empty articleList}">
						<c:forEach items="${articleList}" var="vo" varStatus="idx">
	
							<tr class="${idx.count % 2 == 1 ? 'trOdd' : 'trEven'}">
								<td><c:choose>
										<c:when test="${count > pageSize}"> <!-- ex) count= 11, pageSize=10 -->
											<c:out
												value="${count - pageSize*(pageIndex-1) - idx.count +1}" /> <!-- 11,10,9,8.......... -->
										</c:when>
										<c:otherwise>
											<c:out value="${count  - idx.count +1}" />
										</c:otherwise>
	
									</c:choose>
								</td>

								<td>
								
								<a id="${vo.blt_rsrc_sno}" class="boardView" data-toggle="modal" href="#;" data-target="#modal-testNew" role="button" data-backdrop="static">
								<span data-tooltip-text="<c:out value='${vo.bbs_title}'/>">${vo.bbs_title}</span>
								</a>
								</td>
								<td><c:out value="${vo.usr_id}"/></td>
								<td><c:out value="${vo.bbs_cnt}"/></td>
								<td><c:out value="${vo.reg_date}"/></td>
							</tr>
						</c:forEach>
					</c:when>
					<c:otherwise>
						<tr>
							<td colspan="7">조회된 자료가 없습니다.</td>
						</tr>
					</c:otherwise>
				</c:choose>
              </tbody>
            </table>
            </div>
           	<div class="pull-right"><a href="#" class="btn btn-primary btn-success boardAddBtn"><span class="glyphicon glyphicon-pencil"></span> Write</a></div>
            <!-- Paging : S -->
			<c:if test="${count > 0}">
				<c:set var="pageCount" value="${count / pageSize + ( count % pageSize == 0 ? 0 : 1)}" />
				<c:set var="startPage" value="${pageGroupSize*(nowPageGroup-1)+1}" />
				<c:set var="endPage" value="${startPage + pageGroupSize-1}" />
				
				<c:if test="${endPage > pageCount}">
					<c:set var="endPage" value="${pageCount}" />
				</c:if>

				<div class="jb-center" >
			
		            <ul class="pagination">
		            
		            	<c:if test="${nowPageGroup > 1}">
							<li><a href="#;" onclick='paging_script(${(nowPageGroup-2)*pageGroupSize+1 },${pageSize},"boardSearchVO","/board/notice/boardList");' ><span class="glyphicon glyphicon-chevron-left"></span></a></li>
						</c:if>
						
						<c:if test="${nowPageGroup == 1}">
							<!-- <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li> -->
						</c:if>
		
						<c:forEach var="i" begin="${startPage}" end="${endPage}">
							<li <c:if test="${pageIndex == i}"> class="active" </c:if>><a href="#;" onclick='paging_script(${i},${pageSize},"boardSearchVO","/board/notice/boardList");'>${i}</a></li>
						</c:forEach>
		              
		             	 <c:if test="${nowPageGroup < pageGroupCount}">
		             	 
							<li><a href="#;" onclick='paging_script(${nowPageGroup*pageGroupSize+1},${pageSize},"boardSearchVO","/board/notice/boardList");'><span class="glyphicon glyphicon-chevron-right"></span></a></li>
						</c:if>
		            </ul>
         	 </div>
          
			</c:if>
			<!-- Pageing : E -->
          </div>
        <!-- </div> --> 

여기에서 제목 부분에 a 태그를 걸어 주는것이 포인트 입니다.

저의 코드를 보시면

<a id="${vo.blt_rsrc_sno}" class="boardView" data-toggle="modal" href="#;" data-target="#modal-testNew" role="button" data-backdrop="static">

<span data-tooltip-text="<c:out value='${vo.bbs_title}'/>">${vo.bbs_title}</span></a>


이렇게 있는데 간략하게 이렇게 써주시면 됩니다.

<a id="${vo.blt_rsrc_sno}" class="boardView" data-toggle="modal" href="#;" data target="#modal-testNew" role="button" data-backdrop="static">${vo.bbs_title}</a>


그리고 a태그의 id 값에 게시물 일련번호를 입력하였습니다.

게시물 일련번호는 유니크한 값이어야 합니다.

저는 시퀀스를 이용했습니다.


게시물 제목을 클릭하면 발생되는 이벤트 입니다.

	$(".boardView").click(function(){
		var blt_rsrc_sno = $(this).attr('id');
		$("#boardSearchVO").find("#blt_rsrc_sno").val(blt_rsrc_sno);
		$("#boardSearchVO").attr('action', '/board/notice/boardView').submit();
		return false;
	});

id값을 가져와서 전송할 form에 일련번호를 대입해 줍니다.





boardController.java

@RequestMapping(value = "/board/**/boardView")
    public String boardView(HttpServletRequest req, ModelMap modelMap, @ModelAttribute("boardSearchVO") BoardSearchVO boardSearchVO) {
		String jspPath =req.getRequestURI();
		BoardVO boardVO= boardService.boardView(boardSearchVO);
		
		
		//List<FileVO> atchFileList = atchFileService.fileList(boardVO.getAtch_file_sno());
		
		//modelMap.put("atchFileList", atchFileList);
		modelMap.put("boardSearchVO", boardSearchVO);
		modelMap.put("boardVO", boardVO);
		
		return jspPath;
	}

지금은 첨부파일 관련 소스를 주석처리 하였습니다. 

일단 조회 기능 부터 완료한 후 첨부파일 모듈을 붙이는 것을 추천드립니다.

boardView함수를 활용하기위해


BoardService.java,

BoardServiceImpl.java

BoardMapper.java

board.xml

을 작성하셔야 합니다.

이부분은 간략하게 기재하겠습니다.

궁금하시



BoardService.java

BoardVO boardView(BoardSearchVO boardSearchVO);


BoardVO 객체를 리턴해서 조회 페이지로 보낼 것 입니다.


BoardServiceImpl.java

public BoardVO boardView(BoardSearchVO boardSearchVO) {

return boardMapper.boardView(boardSearchVO);

}


BoardMapper.java

BoardVO boardView(BoardSearchVO boardSearchVO);


board.xml

<select id="boardView" parameterType="lee.board.service.BoardSearchVO" resultType="lee.domain.BoardVO">

select 

from ck_blt_rsrc

where

blt_rsrc_sno = #{blt_rsrc_sno}

</select>


이렇게 데이터 값을 가지고

상세조회 페이지로 갑니다.


boardView.jsp

<form class="form" id="boardSearchVO" name="boardSearchVO">
			<input type="hidden" id="pageIndex" name="pageIndex" value="${boardSearchVO.pageIndex}"/>
			<input type="hidden" id="pageSize" name="pageSize" value="${boardSearchVO.pageSize}"/>
			<input type="hidden" id="bbs_sno" name="bbs_sno" value="${boardSearchVO.bbs_sno}"/>
			<input type="hidden" id="usr_id" name="usr_id" value="${boardSearchVO.usr_id}"/>
			<input type="hidden" id="title" name="title" value="${boardSearchVO.title}"/>
			<input type="hidden" id="blt_rsrc_sno" name="blt_rsrc_sno" value="${boardSearchVO.blt_rsrc_sno}"/>
        </form>

        <form class="form-horizontal"  id="boardForm" name="boardForm" method="post">
        	<input type="hidden" id="bbs_contents" name="bbs_contents" value=""/>
        	<input type="hidden" id="ntc_yn" name="ntc_yn" value="${boardVO.ntc_yn}"/>
        	<input type="hidden" id="atch_file_sno" name="atch_file_sno" value="${boardVO.bbs_sno}"/>
        	<input type="hidden" id="bbs_sno" name="bbs_sno" value="${boardVO.bbs_sno}"/>
        	<input type="hidden" id="blt_rsrc_sno" name="blt_rsrc_sno" value="${boardVO.blt_rsrc_sno}"/>
        	
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">Title</label>
		    <div class="col-sm-10">
		      ${boardVO.bbs_title}
		    </div>
		  </div>
		  
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">contents</label>
		    <div class="col-sm-10">
		      ${boardVO.bbs_contents}
		    </div>
		  </div>
		  
		  
		  <%-- <div class="form-group">
		   	<label for="inputPassword3" class="col-sm-2 control-label">files</label>
		   	<div class="col-sm-10">
		   		 <c:choose> 
					<c:when test="${not empty atchFileList}">
						<c:forEach items="${atchFileList}" var="vo" varStatus="index">
							<a href="/comm/attach/attachDown.do?file_sno=${vo.file_sno}&file_no=${vo.file_no}" id="${vo.file_sno};${vo.file_no}">${vo.file_dsp_nm}</a><br>
						</c:forEach>
					</c:when>
				</c:choose>
		   	</div>
		  </div> --%>
		  
		 	
		</form>

Controller에서 보낸 객체

boardVO를 이용하여 값을 출력하고 있습니다.


boardVO.bbs_title, boardVO.bbs_contents 등


원리는 간단한데 소스가 길어지네요.

너무 길다고해서 포기하지마세요. 

다른 에디터나 이클립스에 소스 가져다가 넣으시면 포기가 한결 편합니다.

궁금한점은 최대한 빠르게 답변 남기겠습니다.

이만 조회 관련 포스팅을 마치겠습니다.

감사합니다.