[jQuery] MVC

mvc

  1. 요청페이지(html, jsp) - front end
  2. controller - service - dao - mapper
  3. 수행결과를 view페이지로 forward
  • model
    VO - view와 controller 사이에 교환되는 데이터
    Service- 일반 비즈니스 로직을 처리하거나 CRUD처리시 DAO와 Controller사이의 연결해주는 역할
    Dao(Data Access Object) - table데이터에 접근하는 객체. SqlMapClient객체가 필요
    view - jsp - 클라이언트(브라우저)에 보여지는 결과 페이지
    controller - java문장을 이용하여 기술되는 비즈니스 로직
    servlet - 웹을통해서 실행되는 작은 자바 프로그램
    jsp - html을 기반으로 하고 java언어를 기술가능한 페이지

인터페이스역할: 설계도 = 표준

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src = "../js/jquery-3.6.0.min.js"></script>

<script>
$(function(){
	
	$('#member').on('click', function(){
		$.ajax({
			url: 'MemberServlet',
			type: 'get',
			success : function(res){ // res- 서블릿에서 수행된 결과를 받는변수
				
			},
			error : function(xhr){
				alert("상태: "+ xhr.status);
				//500-코딩에러 404-파일업뜽 url이름 확인 200-json데이터 형식오류
			}
			
		})
	})
	
})
</script>

</head>

<body>

<div class="box">
	
	<br>
	<button id="member" type="button">MemberList</button>
	<div id="result1"></div>
	
</div>
<div class="box">
	
	<br>
	<button id="lprod" type="button">LprodList</button>
	<div id="result1"></div>
	
</div>
</body>
</html>

IService

package kr.or.ddit.member.service;

import java.util.List;

import kr.or.ddit.member.vo.MemberVO;

public interface IMemberService {

	// 메서드 선언
	public List<MemberVO> selectAll();
	
}

ServiceImpl

package kr.or.ddit.member.service;

import java.util.List;

import MemberDaoImpl.MemberDaoImpl;
import kr.or.ddit.member.dao.IMemberDao;
import kr.or.ddit.member.vo.MemberVO;

// dao객체 필요
// 자신의 객체를 생성해서 리턴하는 메서드
public class MemberServiceImpl implements IMemberService{

	private IMemberDao dao;
	private static IMemberService service;
	
	private MemberServiceImpl() {
		dao = MemberDaoImpl.getMemberDao();
	}
	
	public static IMemberService getMemberService(){
		if(service==null) service = new MemberServiceImpl(); 
		
		return service;
	}
	
	
	@Override
	public List<MemberVO> selectAll() {
		List<MemberVO> list = null;
		list = dao.selectAll();
		
		return list;
		// return dao.selectAll();
	}

}

IDao

package kr.or.ddit.member.dao;

import java.util.List;

import kr.or.ddit.member.vo.MemberVO;

public interface IMemberDao {
	
		// 메서드 선언
		public List<MemberVO> selectAll();
}

DaoImpl

package MemberDaoImpl;

import java.sql.SQLException;
import java.util.List;

import com.ibatis.sqlmap.client.SqlMapClient;

import kr.or.ddit.ibatis.config.SqlMapClientFactory;
import kr.or.ddit.member.dao.IMemberDao;
import kr.or.ddit.member.vo.MemberVO;

// Mapper수행: SqlMapClient객체 필요
// 자신의 객체를 생성하고 리턴하는 메서드

public class MemberDaoImpl implements IMemberDao {
	private SqlMapClient smc;
	
	// 인터페이스와 클래스로 받는것 차이? 
	private static IMemberDao dao; 
	
	private MemberDaoImpl() {
		smc = SqlMapClientFactory.getSqlMapClient();
	}
	
	public static IMemberDao getMemberDao(){
		if(dao==null) dao = new MemberDaoImpl(); // 인터페이스로받은 클래스로받든 객체 생성은 클래스로
		
		return dao;
	}
	
	@Override
	public List<MemberVO> selectAll() {
		List<MemberVO> list = null;
		
		//mapper수행 , try/catch
		
		try {
			list = smc.queryForList("Mymember.getAllMember");
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}
     
}

Servlet

package kr.or.ddit.member.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import kr.or.ddit.member.service.IMemberService;
import kr.or.ddit.member.service.MemberServiceImpl;
import kr.or.ddit.member.vo.MemberVO;

/**
 * Servlet implementation class MemberServlet
 */
@WebServlet("/MemberServlet")
public class MemberServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public MemberServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		// 0. 클라이언트 요청시 전송되는 데이터를 받는다.
		
		// 1. service 객체를 얻는다.
	 		IMemberService service = MemberServiceImpl.getMemberService();
		// 2. 필요한 service 메서드 호출 - 결과: List<MemberVO>
	 		List<MemberVO> list = service.selectAll();
		// 3. 수행결과를 request에 저장한다.
	 		request.setAttribute("listk", list);
	 	// 4. jsp:viewpage에 위임하여 출력한다. - jsonobject배열로 응답데이터를 생성한다.
		// jsp로 forward 
	 		RequestDispatcher disp = request.getRequestDispatcher("1201/members.jsp");
	 		disp.forward(request, response);
	 		
		
	 	
	 		
	}

}

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src = "../js/jquery-3.6.0.min.js"></script>

<script>
$(function(){
	
	$('#member').on('click', function(){
		$.ajax({
			url: '/jqpro/MemberServlet',
			type: 'get',
			success : function(res){ // res- 서블릿에서 수행된 결과를 받는변수
				 str = "<table border = '1'>";
				 str += "<tr class='title'><td>아이디</td>";
				 str += "<td>이름</td>";
				 str += "<td id='addr'>주소</td>";
				 str += "<td>전화번호</td></tr>";
				 
				 $.each(res, function(i, v){
					 str += "<tr><td>" + res[i].id + "</td>";
					 str += "<td>" + v.name + "</td>";
					 str += "<td>" + v.addr + "</td>";
					 str += "<td>" + v.tel + "</td></tr>";
					 
				 })
				 str += "</table>";
				 
				 $('#result1').html(str);
				 $('.title').css('background', 'gray')
			},
			error : function(xhr){
				alert("상태: "+ xhr.status);
				//500-코딩에러 404-파일업뜽 url이름 확인 200-json데이터 형식오류
			},
			dataType : 'json'
			
		})
	})
	
})
</script>

</head>

<body>

<div class="box">
	
	<br>
	<button id="member" type="button">MemberList</button>
	<div id="result1"></div>
	
</div>
<div class="box">
	
	<br>
	<button id="lprod" type="button">LprodList</button>
	<div id="result1"></div>
	
</div>
</body>
</html>

좋은 웹페이지 즐겨찾기