[1] signup.html 생성
<!DOCTYPE html>
<html>
<head>
<title>login page</title>
</head>
<body>
회원가입 page입니다.
<div>
<p>username</p>
<input type = "text" id = "login_username">
</div>
<div>
<p>password</p>
<input type = "text" id = "login_password">
</div>
<div>
<p>name</p>
<input type = "text" id = "login_name">
</div>
<div>
<p>phone</p>
<input type = "text" id = "login_phone">
</div>
<button onclick =check()>아이디 중복 확인</button>
<button onclick="signup()">회원가입</button>
<script>
function signup(){
$.ajax({
url : "/api/user/signup",
type : "GET",
contentType : 'application/json; charset=utf-8',
data : {
username : $("#login_username").val(),
password : $("#login_password").val(),
name : $("#login_name").val(),
phone : $("#login_phone").val(),
},
cache : false,
success : (obj_data, status, xhr) => {
const name = obj_data.username;
if(obj_data.result == "signup_fail_username(duplicated)"){
alert("존재하는 아이디입니다.");
}
if(obj_data.result == "signup_success"){
alert(JSON.stringify(obj_data.username) + "님 환영합니다.");
}
},
error: (obj_data, status, error) => {
alert(obj_data.result);
alert(JSON.stringify(obj_data));
}
})
}
function check(){
$.ajax({
url : "/api/user/check",
type : "GET",
contentType : 'application/json; charset=utf-8',
data : {
username : $("#login_username").val(),
},
cache : false,
success : (obj_data, status, xhr) => {
const name = obj_data.username;
if(obj_data.result == "check_fail_username(duplicated)"){
alert("존재하는 아이디입니다.");
}
if(obj_data.result == "check_success"){
alert("가능한 아이디입니다.");
}
},
error: (obj_data, status, error) => {
alert(obj_data.result);
alert(JSON.stringify(obj_data));
}
})
}
</script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</body>
</html>1) 4개의 입력 form 제작 (사실상 create.html와 비슷)
- username, password, name, phone 네 개의 값을 입력한다.
2-1) check function (아이디 중복 확인)
- /api/user/check 경로로 ajax call을 진행한다.
- 담긴 데이터는 username만 존재한다.
2-2) signup function (회원가입)
- /api/user/signup 경로로 ajax call을 진행한다.
- 담긴 데이터는 입력한 네 개의 값이 존재한다.
3-1) check - success / fail
- 존재하는 아이디인지 체크
- 존재하지 않는 아이디인 경우, 회원가입 성공 및 환영 안내구문까지 경고창.
- 이때 중요한 점은 result의 값이 같아야 한다는 점.
3-2) signup - success / fail
- 존재하는 아이디인지 체크 (생성 불가능ㅠ)
- 존재하지 않는 아이디인지 체크 (생성 가능!)
- 이때 중요한 점은 result의 값이 같아야 한다는 점.
[2] UserService.java 수정
Map<String, Object> signup(Map<String, Object> params);
Map<String, Object> check(Map<String, Object> params);1) signup / check 메소드 선언
[3] UserServiceImpl.java 수정
1) signup 메소드 구현
@Override
public Map<String, Object> signup(Map<String, Object> params) {
String username = (String) params.get("username");
String password = (String) params.get("password");
String name = (String) params.get("name");
String phone = (String) params.get("phone");
User user = userRepository.findByUsername(username);
Map<String, Object> result = new HashMap<String, Object>();
if(user != null){
result.put("result", "signup_fail_username(duplicated)");
return result;
}
return create(params);
}- 사실 유효성 검사 하는게 맞음 (근데 일단 패스함)
- 그냥, username을 통해서 아이디 중복 검사를 통해서 가능한 여부를 바로 판단했음
- but, create에서 한 번 더 아이디 중복 검사를 하므로, 이 부분에 대한 코드 개선이 필요.
2) check 메소드 구현
@Override
public Map<String, Object> check(Map<String, Object> params) {
String username = (String) params.get("username");
User user = userRepository.findByUsername(username);
Map<String, Object> result = new HashMap<String, Object>();
if(user != null){
result.put("result", "check_fail_username(duplicated)");
return result;
}
result.put("result", "check_success");
return result;
}- findByUsername을 통해서 생성 가능한 username인지 판단한.
- user 정보가 null이면 result에 정보를 담고 return
- 이 부분은 true / false로도 구현 가능 (bool값을 return으로 지정 시, return type도 수정해야 함)
[4] UserRestController.java 수정
@GetMapping({"/signup"})
public Map<String, Object> signup(@RequestParam Map<String, Object> params) {
return userService.signup(params);
}
@GetMapping({"/check"})
public Map<String, Object> check(@RequestParam Map<String, Object> params) {
return userService.check(params);
}1) UserService.java에서 선언하고, UserServiceImpl.java에서 구현한 메소드를 사용한다.
[5] 결과 화면
1) 아이디 중복 검사 (존재하는 아이디인 경우)
2) 아이디 중복 검사 (존재하지 않는 아이디인 경우)
3) 회원가입 (존재하지 않는 아이디인 경우)
4) 회원가입 (존재하는 아이디인 경우)
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com