SPRING [#10] 게시판목록 기능 구현 - 1

목표

 

1. Master.java 작성

2. main1.xml 인터페이스 추가

3. main1.xml 검색 메서드

 

게시글 목록 -2 

 

1. NoticeDto 작업

2. Controller 작업

3. Jsp 작업

 

 

작가 목록 - 3

 

1. PageDTO 클래스 작성

2. 전체 데이터 개수(total)

3. Controller 작업

4. View 처리

 

작가 목록 - 4

 

1. 검색 인터페이스 추가(authorManage.jsp)

2. 검색 결과 없을 경우 처리

 

 

포스팅 해야 할 것

 

공지사항 게시판

 

 먼저 게시글 등록시 노출되는 게시글 목록을 구현한 뒤, 사용자가 마우스를 통해 페이지 이동을 할 수 잇도록 페이지 이동 을 구현할 것입니다.

 

 이번 포스팅에서는 지정한 수만큼 게시글 목록을 출력시키는데 필요로 한 쿼리 작성과 해당 쿼리를 호출하는 Mapper 작서을 할 것입니다.

 

 

Notice DTO 클래스 작성

 

 

com.web.dto 패키지에 Notice 클래스를 생성 후 아래의 코드를 작성합니다. 해당 클래스는 지정한 개수와 검색조건에 따라서 게시글 데이터를 출력하는 쿼리를 실행하는데 필요로 한 데이터들의 집합입니다.

 

먼저 해당 클래스를 생성합니다.

 

 

 

 

 작성한 변수들에 대한 getter/setter 메서드를 선언해줍니다.

 

 

 

 

 

 

Master.java 인터페이스 

 

 

게시글 데이터 목록 쿼리를 실행하는 메서드를 선언합니다.  여러 게시글 데이터를 반환받아야 하기 때문에 리턴 타입으로 List 자료 구조를 지정하였습니다.List는 배열과 비슷한 자료구조입니다. 배열과는 다르게 삽입되는 데이터에 따라 크기가 동적으로 변합니다.

 

 

 

private List<Notice> listNotice;

 

 

 

 

 

main1.xml 인터페이스 추가

 

 

Master.java 인터페이스에서 선언한 메서드가 실행할 쿼리 코드를 작성합니다. <select> 태그의 resultType 속성 값은 Integer입니다. resultType을 클래스로 지정하였지만 메서드의 리턴 타입을 List로 선언하였기 때문에 MyBatis가 지정된 클래스 인스턴스를 요소를 가지는 List를 변환해줍니다.

 

 

 

<select id="select_notice_total" resultType="Integer">
		select count(*) from
		NOTICE
</select>

<select id="select_notice_detail" parameterType="Integer"
		resultType="main.java.com.web.dto.Notice">
		select * from NOTICE
		where seq = #{seq}
</select>

 

 

 

 

MySQL

 

 

 

main1.xml 검색 메서드 

 

 

 검색어를 입력한 경우에도 쿼리가 정상적으로 동작하는지를 확인하기 위해서 keyword 변수에 데이터를 부여한 후 작성

 

 

<select id="select_notice"
		resultType="main.java.com.web.dto.Notice">
		select * from NOTICE
		<!-- 페이징 검색 추가 -->
		where 1=1
		<if test="keyword != null and !keyword.equals('')">
			and title like concat('%', #{keyword}, '%')
		</if>
		order by date desc
		limit #{st_num}, #{ed_num}
</select>

 

 

 

 

 

 

1을 검색 시 검색 완료 

 

 

 

DTO 작업

 

 

저번 포스팅에서 작성한 Mapper 메서드를 호출하는 Service단계의 메서드를 작성하겠습니다. MasterDto.java 인터페이스에 아래의 메서드를 선언합니다.

 

 

private List<Notice> listNotice;

 

 

 

 

 

Service 인터페이스에서 선언한 메서드를 오버라이딩 하여 구현합니다. 해당 메서드는 Mapper의 noticeGetList() 메서드를 호출하고 List를 반환받아야 하기 때문에 return에 Mapper의 메서드를 호출합니다. 

 

 

 

public List<Notice> getListNotice() {
		return listNotice;
}

 

 

 

 

 

 

Controller 작업 

 

 

 

게시글 관리 페이지(notice.jsp)에서 게시글 목록을 출력할 수 있도록 서버에서 게시글 목록 데이터를 넘겨주는 작업을 해주어야 합니다.

 

 "ajax_notice" url 매핑 메서드인 POST()에 파라미터로 Master 클래스를 부여해줍니다. Master는 사용자가 요청하는 몇 페이지(pageNum), 검색(search)을 원하는지에 대한 데이터를 전달받기 위한 수단입니다. 전달받은 Master데이터를 활용하여 '게시글 목록' 데이터를 반환하는 쿼리를 실행하게 됩니다. 

 

 Master는 쿼리의 실행 결과 반환받은 '게시글 목록' 데이터를 notice.jsp에 넘겨주기 위해 파라미터로 부여했습니다.

 

 

 

 

 

구현 부에는 Master의 noticeGetList() 메서드를 호출하여 반환받은 결과를 "list" 속성명에 저장하여 전달해주는 코드를 작성합니다.

 

 

 

master.setListNotice(listNotice);
		
//master.setListNotice(mainService.select_notice(master.getNotice()));
return new Gson().toJson(master);

 

 

 

 

 

 

Jsp 작업

 

 

 

 전달받은 '게시글 목록' 데이터("list")를 활용하여 ajax 게시판 표의 형태로 출력시키고자 합니다. id 속성명이 'notice_searchkeyword'인 <div> 태그 다음 순서에 아래의 코드를 추가해줍니다.

 

 

 

function ajax_notice(next_page){
		
		var str = ''; //str은 공백제거 
		$.LoadingOverlay("show");
        $.ajax({
            type : "POST",
            url : "/main1/ajax_notice",
            data : 'notice.st_num='+st_num+'&notice.ed_num=10&notice.keyword='+$("#notice_searchkeyword").val(),
            success : function(res){
        		$.LoadingOverlay("hide");
            	var master = $.parseJSON(res);
            	for (var i = 0; i < master.listNotice.length; i++) {
            		var noticeItem = master.listNotice[i];
            		var content = noticeItem.content;
            		var date = noticeItem.date;
            		var title = noticeItem.title;
            		var seq = noticeItem.seq;
            		
            		//검색 
            		var keyword = noticeItem.keyword;
            		
            		
            		str+='<li data-v-0067a928="" linkseq="'+seq+'">';
            		str+='	<div data-v-0067a928="" class="dropdown">';
            		str+='		<div data-v-0067a928="" class="dropdown_head">';
            		str+='			<div data-v-0067a928="" class="title_box">';
            		str+='				<p data-v-0067a928="" class="title">'+title+'</p>';
            		str+='			</div>';
            		str+='		</div>';
            		str+='	</div>';
            		str+='</li>';
				}
            	
            	//게시글 목록에 저장 
            	$('.dropdown_list').html(str);
            	
            	//게시글 클릭시 글 보여줌 
            	$('.dropdown_list > li').click(function(){
            		var seq = $(this).attr('linkseq');
            		window.location = '/main1/notice_detail?notice.seq='+seq;
            	});
            },
            error : function(XMLHttpRequest, textStatus, errorThrown){ // 비동기 통신이 실패할경우 error 콜백으로 들어옵니다.
                alert("통신 실패.")
            }
        });
	}

 

 

 

 

 

 

 서버로부터 전달받은 "list"에 담긴 데이터들을 input태그를 활용하여 출력시켰습니다.

더하여 ajax str을 이용하여 계속 밑으로 붙였습니다. 

 

 

<style>

#searchBox{
    display: inline-block;
    margin-top: 30px;
    margin-left: 360px;
  }
#notice_searchkeyword{
    height: 30px;
    width: 250px;
    border:1px solid ;
  }
#notice_search{
    width: 100px;
    height: 60px;
    border:1px solid ;
  }
</style>

 

 

style css

 

 

 

 

 

 

---

 

Appendix