코딩/Spring 쇼핑몰 프로젝트

Spring [쇼핑몰프로젝트] - GNB 영역 구현[22]

유미._. 2023. 5. 4. 16:59
728x90

 

 

오늘은 GNB 영역 구현에 대한 두번째포스팅을 해보겠습니다 ✍(◔◡◔) 2

 

이번 포스팅은 세션 제거를 요청하는 방식을 비동기 방식으로 구현하고자 합니다. 

 

 

구현 순서

 

1. 전체 흐름

2. Javascript 처리

3. 서버 메서드 작성

4. 테스트

 

 

1. 전체 흐름

 

첫번째 포스팅에선 로그아웃 시, 메인페이지로 redirect 되도록 구현했습니다. 로그아웃 버튼의 경우 모든페이지에 속해있어야 하는데 이럴경우 많은 페이지에 로그아웃 메서드를 추가해 주어야 합니다. 그래서 이번 포스팅은 특정 화면으로 이동없이 현재 페이지가 새로고침 됨으로써 화면의 구성이 바뀌도록 하는것이 목표입니다.

로그아웃 버튼을 자바스크립트를 통해서 동작하게 만들고 ajax 를 통해서 서버에서 로그아웃 메서드를 요청하도록 구현할 것입니다. 로그아웃 버튼 클릭시 다른화면으로 이동 없이 요청한 페이지에서 새로고침 되어 로그아웃이 되도록 구현하겠습니다. 

 

 

2. Javascript 처리

 

메인페이지 상단에 Jquery url 태그를 추가해 줍니다.

 

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
</script>

 

 

gnb 영역 안의 로그아웃 부분을 a 태그로 감싸 줍니다.

id 값만 설정해 줍니다.

 

<a id="gnb_logout_button">로그아웃</a>

 

 

 

body 태그 내부 제일 하단에 script 태그를 만들어 줍니다.

gnb_area의 로그아웃 버튼이 작동 될 수 있도록 메서드를 작성해 줍니다.

코드가 잘 작동 되는지 확인하기 위해 alert 함수를 넣어 줍니다.

 

<script>
	//gnb_area 로그아웃 버튼 작동
	$("#gnb_logout_button").click(function(){
		alert("버튼 작동");
	});
</script>

 

 

 

테스트 ↓↓↓

 

 

로그아웃을 POST 방식으로 요청하는 ajax 코드를 작성해 줍니다. 

정상적으로 수행이 되면 alert창이 뜨도록 작성해 줍니다.

새로고침을 해주어야 세션의 변경사항이 화면에 반영되기 때문에 현재의 페이지가 새로고침 되도록 작성해 줍니다.

 

<script>
 
    //gnb_area 로그아웃 버튼 작동
    $("#gnb_logout_button").click(function(){
        //alert("버튼 작동");
        $.ajax({
        	type:"POST",
        	url:"/member/logout.do",
        	success:function(data){
        		alert("로그아웃 성공");
        		document.location.reload();
        	}
        }); //ajax 끝
    });
    
</script>

 

 

 

 

3. 서버 메서드 작성

 

MemberController에 비동기 방식 로그아웃 메서드를 작성해 줍니다.

ajax를 통해 서버에 요청하는 방식이기 때문에 @ResponseBody 를 꼭 붙여주어야 합니다.

 

	//비동기방식 로그아웃 메서드
	@RequestMapping(value="logout.do", method=RequestMethod.POST)
	@ResponseBody
	public void logoutPOST(HttpServletRequest request) throws Exception{
		log.info("비동기 로그아웃 메서드 진입");
		HttpSession session = request.getSession();
		session.invalidate();
	}

 

 

 

 

4. 테스트

 

로그아웃 버튼 클릭시 ↓↓↓

 

 

정상적으로 로그아웃 된 화면  ↓↓↓

 

 

 

 

 

 

 

이상입니당 (∩^o^)⊃━☆

 

 

 

 

 

 

 

 

 

참고 : Kim VamPa (tistory.com) 👍

 

728x90
반응형