소개팅 애플리케이션 '그대 만 보기' 의 첫 화면과 회원 가입 부분에 대해서 정리해보겠습니다.
index.html 페이지 화면입니다.
이 페이지에 대한 코드입니다.
<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<head>
<link rel="stylesheet" href="css/login.css"/>
<meta charset="UTF-8">
<title>게시글 리스트 페이지</title>
</head>
<div class="container">
<form>
<img th:src="|/images/manbogi.jpg|" width="175" height="175" style="display: block; margin: 0 auto;"/>
<span class="app-name">그대 만 보기</span>
<input type="text" placeholder="Email" name="email" id="email">
<input type="password" placeholder="Password" name="password" id="password">
<button type="button" onclick="login()" class="login-btn">로그인</button>
<button type="button" onclick="location.href='/member/save'" class="signup-btn">회원가입</button>
</form>
</div>
<script>
const login = () => {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const params = {
"email" : email,
"password" : password
}
$.ajax({
// 요청방식: post, url: "email-check", 데이터: 이메일
type: "post",
url: "/member/login",
data: JSON.stringify(params),
contentType: "application/json",
success: function(res) {
console.log("요청성공", res);
if(res === "ok") {
location.href = "/board/list";
} else {
alert("아이디나 비밀번호가 일치하지 않습니다.");
}
},
error: function(err) {
console.log("에러발생", err);
}
});
}
</script>
</html>
Ajax 함수를 사용해서 api 방식으로 비동기 통신을 하도록 했습니다.
로그인 버튼을 클릭시 Json 데이터 타입을 Post 방식으로 MemberController에서 Url이 /member/login인 매핑된 곳으로 요청을 하게됩니다.
@PostMapping("/member/login")
public @ResponseBody String login(@RequestBody Member member, HttpServletRequest request){
Member loginMember = memberService.login(member);
if(loginMember != null) {
// 로그인 성공
HttpSession session = request.getSession();
session.setAttribute(SessionConst.LOGIN_MEMBER, loginMember);
return "ok";
}
else {
// 실패
return null;
}
}
그럼 MemberController에서 MemberService의 로직을 통해 로그인 여부를 판단합니다.
로그인이 되면 세션에 로그인 정보를 설정하고 "ok"를 리턴하면서 로그인이 되고 실패하면 null을 리턴하여 실패 처리를 합니다.
다음은 회원 가입 버튼을 눌렀을 경우의 화면입니다.
일반적인 회원가입화면과 유사하지만 중요한 부분은 소개팅 어플에 맞게 자신의 대략적인 위치를 검색하거나 지도에서 마우스로 클릭해서 기입하도록 했습니다. 이때 주소는 회원 객체에 위도와 경도로 저장되고 이 정보는 후에 매칭기능에서 내 주변에 있는 사람과 거리를 계산할때 사용됩니다. 지도 Api는 네이버에서 제공하는 맵 Api를 사용하고 제공된 javascript를 수정해서 사용했습니다.
https://navermaps.github.io/maps.js/
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
회원 가입중에 DB에 동일한 이메일이 있는지는 Ajax를 통해 비동기식으로 Repository를 확인해보는 과정을 거쳤습니다.
다음글에는 게시판 기능에 대해서 리뷰해보겠습니다.
'프로그래밍 > 소개팅 웹 애플리케이션' 카테고리의 다른 글
| 소개팅 웹 애플리케이션(5)_최종 (1) | 2023.06.10 |
|---|---|
| 소개팅 웹 애플리케이션(4)_매칭 기능과 부가 기능 (0) | 2023.06.10 |
| 소개팅 웹 애플리케이션(3)_게시판 (0) | 2023.06.08 |
| 소개팅 웹 애플리케이션(1)_설계도 (0) | 2023.06.05 |
