(6)블로그만들기 Ajax - 로그인 ,회원 탈퇴, 업데이트

로그인 만들기

1. Jsp 파일 Form태그 수정 및 Ajax 작성

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

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<form>
		<div class="mb-3 mt-3">
			<input id = "username" type="text" class="form-control" placeholder="Enter username">
		</div>
		<div class="mb-3">
			<input id="password"type="password" class="form-control" placeholder="Enter password">
		</div>
		<button id="btnLogin"type="button" class="btn btn-primary">로그인</button>
	</form>
</div>
<script>
	$("#btnLogin").click(()=>{
		let data ={
				username : $("#username").val(),
				password : $("#password").val()
		};
		
		$.ajax("/login",{
			type: "POST",
			dataType: "JSON",// 응답 타입
			data: JSON.stringify(data),// 전달 타입 
			headers: { 
				"Content-Type" : "application/json; charset=utf-8"
			}
		}).done((res)=>{
			if(res.code ==1){
				location.href = "/";
			}
			else{
				alert("로그인 실패, 아이디 패스워드를 확인해주세요");
			}
		});
	});
	

</script>
<%@ include file="../layout/footer.jsp"%>

2. Controller수정

	@PostMapping("/login")
	public @ResponseBody CMRespDto<?> login(@RequestBody LoginDto loginDto) {
		Users principal = usersService.로그인(loginDto);
		if(principal == null) {
			return new CMRespDto<>(-1, "로그인 실패", null);
		}
		session.setAttribute("principal", principal);
		return new CMRespDto<>(1, "로그인 성공", null);
	}

결과

---

업데이트 만들기

id 바인딩 시켜서 가져오기(hidden 타입 때문에 클라이언트에겐 보여지지 않는다.)

위와 같이 하는 이유
jsp 파일 내부에서는 ${id}로 가져올 수 있다. 
하지만 이후 script부분을 js로 빼낼 예정이다 그럼 그때 js에서는 알아 듣지 못한다. 그러므로 id는 바인딩 시킨후 가져오자

1. Form태그 내부 필요 값들 만들어주기

2. Ajax작성

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

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<br />
	<button id="btnDelete" class="btn btn-danger">회원 탈퇴</button>
	<form>
		<input id="id" type="hidden" value="${users.id}">
		<div class="mb-3 mt-3">
			<input type="text" class="form-control" placeholder="Enter username" value="${users.username }"
				readonly="readonly">
		</div>
		<div class="mb-3">
			<input id="password" type="password" class="form-control" placeholder="Enter password"
				value="${users.password}">
		</div>
		<div class="mb-3">
			<input id="email" type="email" class="form-control" placeholder="Enter email"
				value="${users.email}">
		</div>
		<button id="btnUpdate" type="button" class="btn btn-primary">수정완료</button>
	</form>
</div>
<script>

$("#btnUpdate").click(()=>{
	let data = {
			password: $("#password").val(),
			email: $("#email").val()
	};
	
	
	let id = $("#id").val();
	
	$.ajax("/users/"+id,{
		type: "PUT",
		dataType: "json", // 응답 데이터
		data: JSON.stringify(data), // http body에 들고갈 요청 데이터
		headers : { // http header에 들고갈 요청 데이터
		      "Content-Type" : "application/json; charset=utf-8"
		}
	}).done((res)=>{
		if(res.code == 1){
			alert("회원 수정 완료");
			location.reload(); // f5
		}else{
			alert("업데이트에 실패하였습니다"); 
		}
	});
});
</script>
<%@ include file="../layout/footer.jsp"%>

3. Controller 작성

세션 동기화

세션동기화 하는 이유 ->  동기화를 해주지 않으면 세션은 현재 세션은 계속 userPS를 가지고있고, 기존의 데이터를 수정하지 않는다.

Service부분 수정

	@PutMapping("/users/{id}")
	public @ResponseBody CMRespDto<?> update(@PathVariable Integer id, @RequestBody UpdateDto updateDto) {
		Users usersPS = usersService.회원수정(id, updateDto);
		session.setAttribute("principal", usersPS);// 세션 동기화 
		return new CMRespDto<>(1, "회원 수정 성공", null);
	}

결과

---

삭제 만들기(DELETE)

1. 버튼 만들어주기 id는 btnDelete

2. Ajax 작성

DELETE는 Body에 데이터가 없기 때문에 통신 오브젝트는 따로 만들어주지 않는다.

<script>
$("#btnDelete").click(()=>{		
	let id = $("#id").val();
	
	$.ajax("/users/"+id,{
		type: "DELETE",
		dataType: "json" // 응답 데이터
	}).done((res)=>{
		if(res.code == 1){
			alert("회원탈퇴 완료");
			location.href = "/";
		}else{
			alert("회원탈퇴 실패"); 
		}
	});
});
</script>

3. Controller

	// 회원 탈퇴는 updateForm 아래에 버튼을 만들기 
	@DeleteMapping("/users/{id}")
	public @ResponseBody CMRespDto<?> delete(@PathVariable Integer id) {
		usersService.회원탈퇴(id);
		session.invalidate(); // 세션 초기화 
		return new CMRespDto<>(1, "회원 탈퇴 성공", null);
	}

Delete는 유저가 탈퇴 하면 해당 유저가 쓴 글이 모두 null로 바뀌게 코드를 작성했다. 잘 확인

결과

 

DB도 확인해보면 정상적으로 지워졌다.