[SpringMVC/MyBatis] Ajax 적용해보기 (jQuery) + Session 세션 관리

728x90

문제

> 푸는 순서

SQL 쿼리 확인 → mapper.xml → DAO → jUnit Test → Controller → View

0번. 전체 사원정보 목록 조회 - 동기적 방식

member-list.jsp에서 사원명단을 제공한다. (table)

1번. 아이디로 회원 조회 1 - 동기적 방식

MemberController의 findMemberById메서드에서 요청에 대한 응답을 처리

/WEB-INF/views/findbyid-ok.jsp에서 사원정보 제공하고,

사원정보가 존재하지 않으면,

/WEB-INF/views/findbyid-fail.jsp에서 '아아디 [id]에 해당하는 사원정보가 없습니다' alert 후,

home.jsp로 이동

2번. 아이디로 회원 조회 2 - Ajax 방식 응답하기 (비동기 방식)

> Ajax 선언부

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

home.jsp에서 '아이디'에 입력 후, 'Ajax 검색'을 누르면,

'아이디'에 입력한 값이 url 경로(findMemberByIdAjax.do)로 MemberController로 이동한다.

아이디에 해당하는 회원정보가 있으면 respObject에 회원정보가 반환되고,

없으면 Map으로 반환한다.

이 때, 둘다 JSON Object로 응답한다.

3_1번. 주소를 이용해 회원검색 페이지로 이동 - 동기적 방식

views/member/findbyaddress.jsp에서

select/option으로 주소의 종류만 생성해서 보여준다.

(페이지가 전환되므로 일반적인 동기적 방식으로 처리)

3_1번. 해당 주소에 사는 회원 정보 조회 - Ajax 방식

views/member/findbyaddress.jsp에서

사용자가 주소를 선택할 때에는 비동기적 방식으로

해당 주소에 사는 회원의 아이디와 이름을 테이블 형태로 제공한다.

(findMemberListByAddessAjax.do)

4번. 로그인 기능 - session 생성 및 유지

home.jsp에서

session에 로그인 정보가 있으면,

session에 로그인 정보가 없으면, 로그인 폼을 보여준다.

로그인은 "login.do"를 통해 MemberController에서 @PostMapping("login.do")로 동작하여,

세션을 생성하고 보내준다.

5번. 로그아웃 기능 - session 소멸

home.jsp에서

"logout.do"를 보내주면, MemberController에서 @RequestMapping("logout.do")로 동작하여,

세션을 소멸하고, redirect 방식으로 home으로 보내준다.

6번. 회원 가입 시, 아이디 중복 확인 - Ajax 방식

reigster-form.jsp에서 회원가입 폼이 제공되고,

jquey ajax 로 아이디를 입력하면 keyup 이벤트를 처리해서,

아이디 사용가능 여부를 <span id="checkIdView">에 제공한다.

아이디가 사용 가능할 때만 회원가입이 되도록 javascript에서 처리한다.

아래의 설정 정보는 아래 포스팅을 참고하세요!

Maven pom 설정
DD (Deploytment Descriptor) 설정
Spring configure 설정
Log4j 설정

> SpringMVC 환경설정 Template

[SpringMVC/MyBatis] SpringMVC Template Project 환경설정

[ 환경 설정 ] 1. Spring Legacy Project 프로젝트 생성 > 'Spring MVC Project' 선택 > 프로젝트 명 작성 (작성한 프로젝트 이름이 실제 브라우저상 보이는 서버프로그램 url 이 된다 *주로 프로젝트 명을 쓴다..

creamilk88.tistory.com

SQL (src/test/resource)

> spring_member 테이블

/src/main/webapp/WEB-INF/views

View

** issue : <c:choose>태그 내에는 주석은 불가능 하다 (<%-- --%>만 가능)

하지만 <c:when>이나 <c:otherwise>에서는 주석도 가능하다.

/home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery 선언부 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Member HOME</title>
<script type="text/javascript">

	/* 페이지가 로딩되고 딱 한번 실행됨
		: 현 웹 문서의 행위(javasript) 또는 이벤트 처리에 대해
		  일괄적으로 등록(binding) */
	$(document).ready(function() {

		// 2. 아이디로 회원 검색을 ajax 방식으로 처리하는 이벤트를 등록
		$("#findMemberBtn").click(function() {
			$("#memberInfo").html(""); //span영역의 적힌 정보 초기화
			$.ajax({
				type:"GET",
				url:"${pageContext.request.contextPath}/findMemberByIdAjax.do",
				dataType: "json",
				data: "id="+$("#memberId").val(),
				success:function(result){
					if (result.message === "fail"){
						alert(result.messageInfo);
						$("#memberId").val(""); //입력한 id 초기화
					} else {
					//span id memberInfo에 이름과 주소를 보여준다.
					$("#memberInfo").html("이름:"+result.name
							+ " | 주소:"+result.address)
					}
				}
			});//ajax
		});//findMemberBtn

	});//ready
</script>
</head>
<body>
	<h4>MEMBER HOME</h4>
	
	<!-- 4. 로그인 기능 (session 생성 및 유지) -->
	<c:choose>
		<%-- 로그인 상태면 다른 정보 보여주기 --%>
		<c:when test="${sessionScope.memberVO != null}">
			<strong>${sessionScope.memberVO.name}님 로그인 상태</strong><hr>

			<!-- 동기적 방식 -->
			<!-- 0. 전체 회원 정보 목록  -->
			<a href="getAllMemberList.do">전체 회원목록 보기</a>
			<hr>
		
			<!--  1. id로 회원정보 검색 (동기적 방식)-->
			<form action="findMemberById.do">
				아이디 <input type="text" name="id"> 
				<input type="submit" value="검색">
			</form>
			<hr>
		
			<!-- 2. id로 회원정보 검색 (비동기적 Ajax 방식)  -->
			<input type="text" id="memberId" placeholder="아이디">
			<input type="button" value="ajax 검색" id="findMemberBtn">
			<span id="memberInfo"></span>
			<hr>
			
			<!-- 3_1. 주소를 이용한 회원검색 페이지로 이동 (동기적 방식) -->
			<a href="getAddressKindList.do">주소로 회원검색하기</a>
			<br><br>
			
			<!-- 5. 로그아웃 -->
			<a href="logout.do">로그아웃</a><br><br>
			
			<!-- 회원정보 수정 및 여러가지 기능을 추가할 수 있다.  -->
		</c:when>
		
		<%-- 로그인 상태가 아니면 로그인 폼 보여주기 --%>
		<c:otherwise>
			<form action="login.do" method="POST">
				아이디 <input type="text" name="id"><br>
				패스워드 <input type="password" name="password"><br>
				<input type="submit" value="로그인"><br>
			</form><br>
			
			<!-- 6. 회원 가입 및 아이디 중복 기능 -->
			<a href="regitser-form.do">회원가입</a>
		</c:otherwise>
	</c:choose>
	
</body>
</html>

/views/member

/findbyid-ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<title>회원정보 검색 결과</title>
</head>
<body>
<div class="container">

  <br><h3>${requestScope.memberVO.name}님의 회원정보</h3><br>
  <table class="table">
    <thead>
      <tr bgcolor="pink">
        <th>아이디</th>
        <th>비밀번호</th>
        <th>이름</th>
        <th>주소</th>
      </tr>
    </thead>
    <tbody>
      <tr align="center">
        <td>${memberVO.id}</td>
        <td>${memberVO.password}</td>
        <td>${memberVO.name}</td>
        <td>${memberVO.address}</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

/findbyid-fail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<script type="text/javascript">
	alert("아이디 ${param.id}에 해당하는 회원이 없습니다.");
	location.href = "${pageContext.request.contextPath}/home.do";
</script>

/member-list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<title>조회 결과</title>
</head>
<body>
<div class="container">
  <br><h3>회원 정보 목록</h3>
  <br>
  <table class="table">
    <thead>
      <tr align="center" bgcolor="#eaffd0">
        <th>아이디</th>
        <th>이름</th>
        <th>주소</th>
      </tr>
    </thead>
    <tbody>
     <c:forEach items="${requestScope.list}" var="mvo">
      <tr align="center">
        <td>${mvo.id}</td>
        <td>${mvo.name}</td>
        <td>${mvo.address}</td>
      </tr>
     </c:forEach>
    </tbody>
  </table>
</div>
</body>
</html>

/findbyaddress.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<!-- Ajax 선언부 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>주소로 회원 검색</title>
<script type="text/javascript">
	
	$(document).ready(function() {
		$("#addressList").on('change', function() {
			//alert($("#addressList").val());
			var addr = $(this).val();
			if (addr === ""){ //주소가 없을 경우에는 서버에 요청하지 않도록 처리한다.
				$("#memberInfo").empty(); //tbody를 초기화
				return; //함수 실행을 중단한다.
			}
			$.ajax({
				type: "GET",
				url: "${pageContext.request.contextPath}/findMemberListbyAddressAjax.do",
				dataType: "json",
				data: "address="+addr,
				success:function(memberList){
					//tbody id=memberInfo 에 정보를 넣어준다
					var tag="";
					for (var i = 0; i < memberList.length; i++) {
						tag += "<tr><td>";
						tag += memberList[i].id;
						tag += "</td><td>";
						tag += memberList[i].name;
						tag += "</td></tr>";
					}
					$("#memberInfo").html(tag);
				}
			});//ajax
		});//findbyaddrBtn
		
	});//ready
	
</script>
</head>
<body>
	<!-- 3_2. 주소에 해당하는 회원정보 조회 -->
	<h4>주소로 회원검색</h4>
	주소를 선택해주세요!<br>
	<select id="addressList">
		<option value="">--주소--</option>
		<c:forEach items="${requestScope.addressList}" var="address">
			<option value="${address}">${address}</option>
		</c:forEach>
	</select>
	
	<br><br>
	<table border="1">
		<thead>
			<tr>
				<th>아이디</th>
				<th>이름</th>
			</tr>
		</thead>
		<tbody id="memberInfo">
				<tr>
					<td></td>
					<td></td>
				</tr>
		</tbody>
	</table>
</body>
</html>

/login-fail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<script type="text/javascript">
	alert("로그인 실패!");
	location.href = "${pageContext.request.contextPath}/home.do"
</script>

/register-form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- jQuery 선언부 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>회원가입</title>
<%--
	jquey ajax 로 아이디를 입력하면 keyup 이벤트를 처리해서,
	아이디 사용가능 여부를 <span id="checkIdView">에 제공한다.
	아이디가 사용 가능할 때만 회원가입이 되도록 javascript에서 처리한다.
 --%>
<script type="text/javascript">
	
	$(document).ready(function() {

		var checkId="";

		$("#memberId").keyup(function() {
			checkId="";//keyup시에 초기화해주기
			var mId = $(this).val();
			
			// jquery ajax 
			// -> 사용가능한 아이디면 blue로 사용가능
			// -> 사용 불가능한 아이디면 red로 중복된 아이디- 사용불가
			$.ajax({
				type: "GET",
				url: "checkId.do",
				data: "id=" + mId,
				success:function(result){
					if (result == "ok"){
						$("#checkIdView").html("사용가능").css("color", "blue");
						checkId = mId;
					} else {
						$("#checkIdView").html("사용불가 - 중복된 아이디").css("color", "red");
					}
				}//success
			});//ajax
		});//keyup

		//회원가입하기 전에 아이디 중복 확인 체크 (사용 가능 여부 확인)
		$("#registerForm").submit(function(){
			if (checkId === ""){
				alert("아이디 중복을 확인하세요!");
				return false;
			} 
		});//submit
		
	});//ready
	
</script>
</head>
<body>
	<!-- 6. 회원가입 및 아이디 중복확인 -->
	<h4>회원가입 form</h4>
	<form action="register-member.do" method="POST" id="registerForm">
		아이디 <input type="text" name="id" id="memberId" required="required">
			<span id="checkIdView"></span><br>
		패스워드 <input type="password" name="password" required="required"><br>
		이름 <input type="text" name="name" required="required"><br>
		주소 <input type="text" name="address" required="required"><br>
		<input type="submit" value="가입하기">
	</form>
</body>
</html>

MyBatis 설정 - mapper

/mybatis.config/member.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Sql Mapper -->
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="member">
 	<sql id="selectMember">
 		SELECT id, password, name, address
 		FROM   spring_member
 	</sql>
 	
 	<!-- 0. 전체 회원 정보 리스트 -->
 	<select id="getAllMemberList" resultType="memberVO">
 		<include refid="selectMember"/>
 	</select>
 	
 	<!-- 1. 아이디로 회원 정보 검색 -->
 	<select id="findMemberById" resultType="memberVO">
 		<include refid="selectMember"/>
 		WHERE id=#{value}
 	</select>
 	
 	<!-- 3_1. 주소 종류 검색 -->
 	<select id="getAddressKindList" resultType="string">
 		SELECT distinct(address)
		FROM   spring_member
 	</select>
 	
	<!-- 3_2. 주소에 해당하는 회원정보 조회 -->
 	<select id="findMemberListbyAddressAjax" resultType="memberVO">
 		<include refid="selectMember"/>
		WHERE address = #{value} 		
 	</select>
 	
</mapper>

Model

/src/main/java/org.kosta.myproject.model

/MemberVO.java

package org.kosta.myproject.model;

public class MemberVO {
	private String id;
	private String password;
	private String name;
	private String address;
	
	public MemberVO() {
		super();
	}

	public MemberVO(String id, String password, String name, String address) {
		super();
		this.id = id;
		this.password = password;
		this.name = name;
		this.address = address;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	@Override
	public String toString() {
		return "MemberVO [id=" + id + ", password=" + password + ", name=" + name + ", address=" + address + "]";
	}
}

/MemberDAO.java <<interface>>

package org.kosta.myproject.model;

import java.util.List;

public interface MemberDAO {

	MemberVO findMemberById(String id);

	List<MemberVO> getAllMemberList();

	List<String> getAddressKindList();

	List<MemberVO> findMemberListbyAddressAjax(String address);

	MemberVO login(MemberVO paramVO);

	int checkId(String id);
}

/MemberDAOImpl.java

package org.kosta.myproject.model;

import java.util.List;

import javax.annotation.Resource;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.stereotype.Repository;

@Repository
public class MemberDAOImpl implements MemberDAO {
	@Resource
	private SqlSessionTemplate template;
	
	// 0. 전체 회원 정보 목록
	@Override
	public List<MemberVO> getAllMemberList(){
		return template.selectList("member.getAllMemberList");
	}
	
	// 1. 아이디로 회원정보 찾기
	@Override
	public MemberVO findMemberById(String id) {
		return template.selectOne("member.findMemberById",id);
	}
	
	// 3_1. 주소 종류 반환
	@Override
	public List<String> getAddressKindList(){
		return template.selectList("member.getAddressKindList");
	}

	// 3_2. 주소에 해당하는 회원정보 검색
	@Override
	public List<MemberVO> findMemberListbyAddressAjax(String address) {
		return template.selectList("member.findMemberListbyAddressAjax", address);
	}

	// 4. 로그인
	@Override
	public MemberVO login(MemberVO paramVO) {
		return template.selectOne("member.login", paramVO);
	}

	// 6. 아이디 중복확인
	@Override
	public int checkId(String id) {
		return template.selectOne("member.checkId", id);
	}
	
}

Controller

/src/main/java/org.kosta.myproject.controller

/HomeController.java

package org.kosta.myproject.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {

	@RequestMapping("home.do")
	public String home() {
		//viewResolver에 의해 WEB-INF/views/home.jsp가 실행
		return "home"; 
	}
	
}

/MemberController.java

package org.kosta.myproject.controller;

import java.util.HashMap;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;

import org.kosta.myproject.model.MemberDAO;
import org.kosta.myproject.model.MemberVO;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class MemberController {
	@Resource
	private MemberDAO memberDAO;
	
	// 0. 전체 회원 정보 목록
	@RequestMapping("getAllMemberList.do")
	public ModelAndView getAllMemberList() {
		return new ModelAndView("member/member-list", 
				"list", memberDAO.getAllMemberList());
	}
	
	// 1. 아이디로 회원정보 찾기
	@RequestMapping("findMemberById.do")
	public String findMemberById(Model model, String id) {
		String viewName="";
		MemberVO memberVO = memberDAO.findMemberById(id);
		if (memberVO != null) {
			model.addAttribute("memberVO", memberVO);
			viewName = "member/findbyid-ok";
		} else
			viewName = "member/findbyid-fail";
		return viewName;
	}
	
	// 2. 아이디로 회원정보 찾기 (Ajax 방식)
	@RequestMapping("findMemberByIdAjax.do")
	@ResponseBody //String, VO or DTO, Map과 같은 정보를 Ajax 방식으로 응답
	public Object findMemberByIdAjax(String id) {
		Object respObject = null;
		MemberVO vo = memberDAO.findMemberById(id);
		if (vo != null) //존재하면 MemberVO로 반환 (JSON Object)
			respObject = vo; 
		else { //존재하지 않으면 Map으로 반환(JSON Object)
			HashMap<String, String> map = new HashMap<String, String>();
			map.put("message", "fail");
			map.put("messageInfo", "회원이 존재하지 않습니다!");
			respObject = map;
		}
		return respObject;
	}
	
	// 3_1. 주소 종류 조회
	@RequestMapping("getAddressKindList.do")
	public ModelAndView getAddressKindList() {
		return new ModelAndView("member/findbyaddress",
				"addressList", memberDAO.getAddressKindList());
	}
	
	// 3_2. 주소에 해당하는 회원정보 검색
	@RequestMapping("findMemberListbyAddressAjax.do")
	@ResponseBody // List를 JSONArray(JSONObject)로 응답
	public Object findMemberListbyAddressAjax(String address) {
		// JSONArray로 반환
		List<MemberVO> memberList = memberDAO.findMemberListbyAddressAjax(address);
		return memberList;
	}
	
	// 4. 로그인 기능
	@PostMapping("login.do")
	public String login(HttpSession session, MemberVO paramVO) {
		String viewName= "";
		MemberVO memberVO = memberDAO.login(paramVO);
		if (memberVO != null) {
			session.setAttribute("memberVO", memberVO);
			viewName = "home";
		} else
			viewName = "member/login-fail";
		return viewName;
	}
	
	// 5. 로그아웃
	@RequestMapping("logout.do")
	public String logout(HttpSession session) {
		session.invalidate();
		return "redirect:home.do";
	}
	
	// 6. 회원가입 폼으로 이동
	@RequestMapping("regitser-form.do")
	public String registerForm() {
		return "member/register-form";
	}
	
	// 6_1. 회원가입 시 아이디 중복확인 (Ajax 방식)
	@RequestMapping("checkId.do")
	@ResponseBody //Ajax 응답! 
	public String checkId(String id) {
		//0이면 사용 가능, 1이면 사용불가
		return (memberDAO.checkId(id)==0)? "ok":"fail";
	}
	
	// 7. 회원가입
	@PostMapping("register-member.do")
	public String register(MemberVO memberVO) {
		memberDAO.register(memberVO);
		return "redirect:register-ok.do";
	}
	
	// 7. 회원가입 완료 창
	@RequestMapping("register-ok.do")
	public String registerOK() {
		return "member/register-ok";
	}
}

Test - 단위 테스트

/src/test/java/org.kosta.myproject

// JUnit에 red or green 결과가 나온다
Assert.assertEquals([기대값], [실제값])

// JUnit에 not null이라 확신되는 것을 적어 red or green 결과를 본다.
Assert.assertNotNull([확신값]);

/TestEmpJUnit.java

package org.kosta.myproject;

import javax.annotation.Resource;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.kosta.myproject.model.MemberDAO;
import org.kosta.myproject.model.MemberVO;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

@RunWith(SpringJUnit4ClassRunner.class)
//객체 테스트이기 때문에, <context:component-scan>이 있는 
//spring-model.xml을 locatios로 지정한다.
@ContextConfiguration(locations = {"file:src/main/webapp/WEB-INF/spring-model.xml"})
public class TestJUnit {
	
	@Resource
	private MemberDAO memberDAO;
	
	@Test
	public void itemCountTest() {
		//Assert.assertEquals([기대값], [실제값])
		//Assert.assertNotNull([기대값]);
		
		//test1. 아이디로 회원검색
		//System.out.println(memberDAO.findMemberById("java"));
		
		//test2. 
		//System.out.println(memberDAO.getAllMemberList());
		
		//test3. 주소 종류 조회
		//System.out.println(memberDAO.getAddressKindList());
		
		//test4. 주소로 회원 리스트 조회
		//List<MemberVO> list =  memberDAO.findMemberListbyAddressAjax("런던");
		//for (MemberVO vo:list)
		//	System.out.println(vo);
		
		//test5. 로그인
		/*MemberVO paramVO = new MemberVO();
		paramVO.setId("java");
		paramVO.setPassword("1");;
		MemberVO loginVO = memberDAO.login(paramVO);
		System.out.println(loginVO);*/
		
		//test6. 아이디 중복 확인
		int count = memberDAO.checkId("java");
		System.out.println(count);
	}
}

[ Template 결과 화면 ]

1. 로그인 아닐 때, home.jsp 화면

2. 0번문제 '전체 회원목록 보기' 링크 클릭하면, 전체 회원 정보 목록이 나온다.

3. 1번문제 DB에 있는 사원 아이디 입력하면, 사원정보가 나온다.

4. 1번문제 DB에 없는 사원 아이디 입력하면, alert후 home으로 이동한다.

5. 2번문제 DB에 있는 사원 아이디 입력하면, 사원정보가 나온다. (ajax 방식)

6. 2번문제 DB에 없는 사원 아이디 입력하면, alert이 뜬다. (ajax 방식)

7. 3번문제 주소 목록 페이지로 이동하여, 주소 목록 보기 (동기방식)

8. 3번문제 주소 선택하여, 해당 주소에 속하는 회원 정보 조회 (ajax 방식)

8. 4번문제 로그인 성공 시, home.jsp 화면 / 5번문제 '로그아웃'을 클릭하면 세션이 만료되고, home.jsp(로그인화면)으로 이동한다.

9. 4번문제 로그인 실패 시, alert 후 home.jsp(로그인화면) 로 이동

10. 6번문제 회원 가입 시, 중복된 아이디를 입력했을 때,

11. 6번문제 회원 가입 시, 중복된 아이디로 회원가입 버튼을 눌렀을 때 submit이 막힘

12. 6번문제 회원 가입 시, 중복되지 않은 아이디를 입력했을 때,

728x90

'Java Web Programming > 6. Spring | MyBatis' 카테고리의 다른 글

[SpringMVC/MyBatis] 회원 게시판 어플리케이션 구현 (Paging 페이징) (0)	2020.11.16
[SpringMVC/MyBatis] 마이바티스에도 Proxy(프록시)를 적용해보자! (0)	2020.11.16
[SpringMVC/MyBatis] SpringMVC 4.0 version 사용해보기 (+ Dynamic SQL - 동적 쿼리, 단위 테스트(JUnit)) (0)	2020.11.12
[SpringMVC/MyBatis] Junit을 이용한 Spring MVC Template - 단위테스트 (0)	2020.11.11
[SpringMVC/MyBatis] SpringMVC Template Project 환경설정 (0)	2020.11.11

Programmer 파프리카의 이야기

[SpringMVC/MyBatis] Ajax 적용해보기 (jQuery) + Session 세션 관리

'Java Web Programming > 6. Spring | MyBatis' 카테고리의 다른 글

티스토리툴바

[SpringMVC/MyBatis] Ajax 적용해보기 (jQuery) + Session 세션 관리

'Java Web Programming > 6. Spring | MyBatis' 카테고리의 다른 글

관련글

티스토리툴바