[21.10.28] 글쓰기와 목록(

Mybatis - Java와 SQL 분리 목적

 

 

mybatis-config.xml 은 모든 환경설정을 취급하는 xml파일이며, singleton으로 잡아놨기 때문에 딱 한번만 읽는다

 

memberMapper.xml / boardMapper.xml

실질적으로 DB에 연결되는 건 바로 이 Mybatis에서 연결된다.

SQL은 xml에서 작성하게 되는 것이다.

 

 

 

 

주의할 점! 

command.properties에 경로를 미리 써놓으면 해당하는 파일이 반드시 필요하다.

환경설정 파일이기 때문에 파일이 없는 상태에서 경로를 미리 적어주면 안된다.

 

 

 

그럼 순서에 따라 천천히 흐름을 읽어가보도록 하자.

 

 

1) 글쓰기

 

////////index.jsp

 

<header> 와 <container>, <footer>를 담고 있는 메인 홈이 되는 index.jsp에서

글쓰기와 목록을 담고 있는 main 폴더의 menu.jsp를 호출한다.

 

여기서 쓰인 <jsp:include>를 잠깐 살펴보면,

include 하는 방법은 2가지가 있는데, 

첫 번째는 '지시어'로 쓰이는 경우이고, 두번째는 '액션'으로 쓰이는 경우이다.

 

1. directive (지시어)

'지시어'는 스크립틀릿을 사용하는 방식이며 directive 방식은 해당 소스를 포함시킨 후 컴파일을 실시한다.

ex)

<%@ include file="/WEB-INF/views/mine.jsp"/ %>

 

2. active (액션)

'action' 방식은 실행시점에 해당 파일을 수행하여 결과를 포함시킨다.

page속성은 포함시키고자 하는 문서의 위치를 명시하며, 상대경로 절대경로 모두 가능하다.

get방식으로 파라미터를 전달할 수 없으며 동적으로 페이지 할당이 가능하다.
ex)

<jsp:include page="/WEB-INF/views/mine.jsp"/>

 

 

 

////////menu.jsp

menu.jsp에서 글쓰기와 목록을 호출하는데, 이때 글쓰기는 아이디를 입력했을 때만 뜨도록 설정해둔다.

 

 

 

////////BoardWriteFormService.java

display에 boardWriteForm.jsp를 띄워주는 클래스이다.MVC패턴에서는 요청을 jsp페이지에 직접하지 않고 자바파일을 실행하는데, 이 자바 파일에서 로그인, 데이터 가져오기, 세션처리, 유효성 검사 등을 수행한다. 그렇기 때문에 요청을 .jsp가 아닌 .do와 같은 방식으로 URL을 요청한다.

컨트롤러에서는 이 요청을 해당 자바파일에 맵핑시키기 위해 맵핑정보가 들어있는 properties파일을 읽고, 해당 클래스를 사용할 수 있게 해준 뒤 클래스를 실행한다.

 

 

 

////////boardWriteForm.jsp

boardWriteForm.jsp에서 #boardWriteBtn이라는 글쓰기 버튼을 클릭 시 ajax에서 boardWrite.do를 요청한다.

이때, jQuery를 통해 유효성 검사를 하여 제목과 내용 미입력 시 넘어가지 않도록 설정한다.

초기화 과정인 $('#subjectDiv').empty(); , $('#contentDiv').empty(); 를 거치지 않으면 내용을 입력 후에도 계속 유효성 검사 메시지가 뜨기 때문에 반드시 입력해준다.

 

 

 

////////BoardWriteService.java

 

 

 

 

////////boardWrite.jsp

 

 

 

 

////////boardWriteForm.jsp

 

다시 boardWriteForm.jsp의 ajax로 돌아와서 boardList.do?pg=1을 요청한다

클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있는 것이 ajax 이므로BoardWriteService.java에서 데이터를 요청하고

 

 

 

 

1) 목록

 

 

////////BoardListService.java

 

 

 

////////boardList.jsp

 

 

 

////////boardList.js

$(function() {
	$.ajax({
		url: '/MQBProject/board/getBoardList.do',
		type: 'post',
		data: 'pg=' + $('#pg').val(),
		dataType: 'json',
		success: function(data) {
			//alert(JSON.stringify(data));

			$.each(data.list, function(index, items) {
				$('<tr>').append($('<td/>', {
					align: 'center',
					text: items.seq

				})).append($('<td/>', {

					// 제목에 링크 걸기
				}).append($('<a/>', {
					href: '#',
					text: items.subject,
					class: 'subjectA',
					id: 'subject_'+items.seq

				}))

				).append($('<td/>', {
					align: 'center',
					text: items.id

				})).append($('<td/>', {
					align: 'center',
					text: items.hit

				})).append($('<td/>', {
					align: 'center',
					text: items.logtime

				})).appendTo($('#boardListTable'));

				//로그인 여부
				$('#subject_' + items.seq).click(function() { 
					if(data.memId==null){
					alert('먼저 로그인 하세요.');
					}else{
						location.href='/MQBProject/board/boardView.do?seq='+items.seq+'&pg='+$('#pg').val();
					}
				});
			}); //each
		},
		error: function(err) {
			console.log(err);
		}
	});
});
// 자바스크립트에서는 세션이 없다.

 

 

 

////////GetBoardListService.java

package board.service;

import java.text.SimpleDateFormat;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.control.CommandProcess;

import board.bean.BoardDTO;
import board.dao.BoardDAO;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetBoardListService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd");
		
		// 데이터
		int pg = Integer.parseInt(request.getParameter("pg"));

		// DB
		// 1페이지당 5개씩
		int endNum = pg * 5;
		int startNum = endNum - 4;

		Map<String, Integer> map = new HashMap<String, Integer>();
		map.put("startNum", startNum);
		map.put("endNum", endNum);

		BoardDAO boardDAO = BoardDAO.getInstance();
		List<BoardDTO> list = boardDAO.getBoardList(map);
		
		//세션
		HttpSession session = request.getSession();
		String memId = (String)session.getAttribute("memId");
		
		// List -> JSON 변환
		JSONObject json = new JSONObject();
		if (list != null) {
			JSONArray array = new JSONArray();

			for (BoardDTO boardDTO : list) {
				JSONObject temp = new JSONObject();
				temp.put("seq", boardDTO.getSeq());
				temp.put("id", boardDTO.getId());
				temp.put("name", boardDTO.getName());
				temp.put("email", boardDTO.getEmail());
				temp.put("subject", boardDTO.getSubject());
				temp.put("content", boardDTO.getContent());
				temp.put("ref", boardDTO.getRef());
				temp.put("lev", boardDTO.getLev());
				temp.put("step", boardDTO.getStep());
				temp.put("pseq", boardDTO.getPseq());
				temp.put("reply", boardDTO.getReply());
				temp.put("hit", boardDTO.getHit());
				temp.put("logtime", sdf.format(boardDTO.getLogtime()));

				array.add(temp);

			} // for
			
			json.put("list", array);
			
			// 세션 -> JSON 변환
			json.put("memId", memId);
			
		} // if

		request.setAttribute("list", json);
		return "/board/getBoardList.jsp";
	}
}

 

 

 

////////getBoardList.jsp

 

 

////////mybtis-config.xml

 

Map은 

Type(자료형)을 원한다.

 

 

최종적으로 a.jax({})를 쓴 writeForm으로 돌아온 뒤 

 

 

※ 문제 발생!! 

로그인 → 로그아웃 → 로그인 시 로그인이 되지 않는 문제가 일어났다.

어디서 문제가 발생한 것일까?

 

• index -> nav -> 세션 있을 때 loginOK.jsp
  logoutBtn -> ajax 안에서 logout.do 요청 -> LogoutService.java -> logout.jsp -> ajax로 돌아와서 index.jsp
  
  
• index -> nav -> 세션 없을 때 loginForm.jsp
  loginBtn -> member.js -> ajax 안에서 login.do 요청 -> LoginService.java -> login.jsp (ok, fail) -> ajax로 돌아와서 index.jsp

 

 

endnum startnum

배 사과

 

 

writeForm.jsp

zipcodeBtn 으로 가면 member.js에서 zipcodeBtn으로 간다 .

우편번호 체크

/~//member/checkPost.do

 

 

 

 

boardList에 있는 이 부분을 지우고 동적으로 DB에 가서 데이터 끌어다가 뿌려주려고 한다

<c:if test="${list!=null }">
		<c:forEach var="boardDTO" items="${list }">
			<tr>
				<td align="center">${boardDTO.seq }</td>
				<td>
					<a href="boardView.jsp?seq=${boardDTO.seq }&pg=${pg}" id="subjectA">${boardDTO.subject }
				</td>
				<td align="center">${boardDTO.id }</td>
				<td align="center">${boardDTO.hit }</td>
				<td align="center">${boardDTO.logtime }</td>
			</tr>
		</c:forEach>
	</c:if>