본 포스팅의 예제는 STS 또는 Eclipse를 사용하지 않고 Intellij를 통해 구현하고 있습니다.
그래서 기존의 STS(Spring Tool Studio)에서 생성된 Spring 프로젝트의 스프링 관련 설정 파일명과
프로젝트 구조가 약간 다를 수 있습니다.Intellij 스프링 mvc 프로젝트 생성 포스팅을 참고해주시면 감사하겠습니다.
Spring-MVC 기본 개념 및 테스트 예제 관련 포스팅 링크
| 순서 | 포스팅 제목 |
| 1 | Intellij에서 Spring MVC Project 생성하기 |
| 2 | Spring MVC - MariaDB 연결테스트 |
| 3 | Spring MVC - Mybatis 설정 및 테스트 |
| 4 | SpringMVC 구조 |
| 5 | SpringMVC + Mybatis |
| 6 | Spring MVC Controller 작성 연습 |
| 7 | Spring Interceptor |
Spring-MVC 게시판 예제 이전 포스팅 링크
1. 아이디 찾기
1.1 아이디 찾기 영속 계층 (Persistence Tier) 구현
기본패키지/user/persistence 패키지 안에 UserDAO 인터페이스와 UserDAOImpl 클래스에 아래와 같이 코드을 추가해주세요
// 아이디 찾기
public HashMap<String, Object> getUserIdByNickNameAndEmail(UserVo param);// 아이디 찾기
@Override
@LogException
public HashMap<String, Object> getUserIdByNickNameAndEmail(UserVo param) {
return sqlSession.selectOne(NAMESPACE + ".getUserIdByNickNameAndEmail", param);
}/resources/mappers/user 패키지안에 UserSQLMapper.xml 에 아래와 같이 내용을 추가해주세요
<!-- 아이디 찾기 -->
<select id="getUserIdByNickNameAndEmail" resultType="map">
select *
from eden_user
where user_nickname = #{user_nickname}
AND user_email = #{user_email}
</select>1.2 아이디 찾기 비지니스 계층 (Business Tier) 구현
src/기본패키지/user/service 패키지 안에 UserService 인터페이스와 UserServiceImpl 클래스에 아래 코드를 추가해주세요
// 아이디 찾기
public HashMap<String, Object> getUserIdByNickNameAndEmail(UserVo param);// 아이디 찾기
@Override
@LogException
public HashMap<String, Object> getUserIdByNickNameAndEmail(UserVo param) {
return userDAO.getUserIdByNickNameAndEmail(param);
}1.3 아이디 찾기 컨트롤러 구현
src/기본패키지/user/controller 패키지 안에 RestUserController 컨트롤에 아래와 같이 코드를 추가해줍니다.
// 아이디 찾기
@PostMapping("getUserIdByNickNameAndEmail")
@LogException
public HashMap<String, Object> getUserIdByNickNameAndEmail(UserVo param) {
HashMap<String, Object> data = new HashMap<>();
HashMap<String, Object> userInfo = userService.getUserIdByNickNameAndEmail(param);
if (userInfo == null) {
data.put("result", "fail");
} else {
data.put("result", "success");
data.put("userInfo", userInfo);
}
return data;
}1.4 아이디 찾기 JSP 구현
web-inf/views/include 패키지안에 user_menu.jsp 파일을 하나 만들어주시고 아래와 같이 내용을 작성해주세요.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="modal fade" id="userLoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">로그인 페이지</h4>
</div>
<div class="modal-body" data-rno>
<div class="row mt-1">
<div class="col">
<div class="row mt-1">
<div class="col">
<label for="inputId">아이디</label>
</div>
</div>
<div class="row mt-1">
<div class="col">
<input type="text" class="form-control" id="inputId" name="user_id"
placeholder="아이디를 입력해주세요">
</div>
</div>
<div class="row mt-1">
<div class="col">
<div class="col">
<input type="password" class="form-control" id="inputPw" name="user_pw"
placeholder="비밀번호를 입력해주세요">
</div>
</div>
</div>
<div class="row mt-1">
<div class="col">
<input type="checkbox" class="form-check-input" id="saveIdBox">ID저장
<input type="checkbox" class="form-check-input" id="userCookie"> 자동로그인
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row mt-1">
<div class="col">
<button type="button" class="btn btn-danger btn-xs pull-left" data-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary btn-xs pull-right infoModBtn" id="loginButton"><i
class="glyphicon glyphicon-log-in"></i>로그인
</button>
</div>
</div>
<div class="row mt-1">
<div class="col pull-right">
<a href="#" class="btn btn-primary btn-xs" data-toggle="modal" onclick="searchId();"><b>아이디 찾기</b></a>
<a href="#" class="btn btn-primary btn-xs" data-toggle="modal" onclick="searchPw();"><b>비밀번호 찾기</b></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="userIdFindModel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">아이디 찾기</h4>
</div>
<div class="modal-body" align="center">
<form action="./user/findIdProcess">
<div class="row">
<div class="col">
<div class="row mt-2">
<div class="col">
<input type="text" class="form-control" name="user_nickname" id="user_nickname"
placeholder="닉네임을 입력해주세요.">
</div>
</div>
<div class="row mt-2">
<div class="col">
<input type="text" class="form-control" name="user_email" id="user_email"
placeholder="이메일을 입력해주세요.">
</div>
</div>
<div class="row mt-2">
<div class="col" id="answerLine"></div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-right" data-dismiss="modal">닫기</button>
<button type="button" class="btn btn-info pull-right" id="findIdButton">검색</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="userPwFindModel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">비밀번호 찾기</h4>
</div>
<div class="modal-body" align="center">
<form id="findPw" action="../user/findPwProcess">
<div class="row">
<div class="row mt-1">
<div class="col">
<label for="findIdInput">아이디</label>
</div>
</div>
<div class="row mt-1">
<div class="col">
<input type="text" class="form-control" name="user_id" placeholder="아이디를 입력해주세요" id="findIdInput">
<button type="button" class="btn btn-info pull-right btn-xs" id="findQuestionButton">힌트조회</button>
</div>
</div>
<div class="row mt-1">
<div class="col">
<input type="text" class="form-control" name="user_findAnswer" placeholder="힌트답을 입력해주세요" id="findAnswerInput">
<button type="button" class="btn btn-info pull-right btn-xs" id="findButton">답변확인</button>
</div>
</div>
<div class="row mt-1">
<div class="col" id="question_content"></div>
<div class="col" id="answerLine2"></div>
</div>
<div class="row mt-1">
<div class="col">
<input type="password" class="form-control" id="findPwInput" name="user_pw" placeholder="사용하실 비밀번호를 입력해주세요" disabled="disabled">
</div>
</div>
<div class="row mt-1">
<div class="col" id="answerLine3"></div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-lg-2"><button type="button" class="btn btn-danger pull-left" data-dismiss="modal">닫기</button></div>
<div class="col-lg-2"><button type="button" class="btn btn-info pull-right" id="updatePW" disabled="disabled">수정</button></div>
</div>
</div>
</div>
</div>
</div>web-inf/views/user 패키지 안에 register.jsp 와 web-inf/views 패키지안에 home.jsp 파일에 아래와같이 내용을 추가해주세요
<%@ include file="include/user_menu.jsp" %>페이지를 이동하여 새로운 페이지에서 아이디와 비밀번호를 찾는것이 아닌 BootStrap 의 Modal 기능을 활용하여 현재 페이지에서 새로운 창을 띄워 검색 할 수 있게끔 처리 하였습니다.
1.5 아이디 찾기 JavaScript 구현
webapp/resources/dist/js/user 패키지안에 relatedUser.js 파일에 아래와 같은 내용을 추가해주세요
/* 아이디 찾기 */
$("#findIdButton").click(function () {
$.ajax({
type: "post",
url: "../user/getUserIdByNickNameAndEmail",
data: {
user_nickname: $("#user_nickname").val(),
user_email: $("#user_email").val()
},
dataType: "json",
// contentType : "application/x-www-form-urlencoded", // post
success: function (data) {
if (data.result == 'fail') {
$("#answerLine").css({
"color": "red",
"text-align": "center",
"text-size" : "10px"
});
$("#answerLine").text("일치하는 아이디가 없습니다. 다시 확인해주세요.");
} else {
$("#answerLine").css({
"color": "green",
"text-align": "center",
"text-size" : "10px"
});
$("#answerLine").text('찾으시는 ID는 "' + data.userInfo.user_id + '" 입니다.');
}
}
});
});1.6 아이디 찾기 화면 테스트
01234
위 화면에서 처럼 로그인 버튼을 누르면 현재 페이지에서 로그인 화면이 출력되고 아이디 찾기 버튼을 클릭하면 아이디 찾기 창이 뜨는데
닉네임과 이메일로 조회하여 아이디가 존재 할 시 아이디 출력 미 존재시 아이디가 없다는 문구가 출력됩니다.
2. 비밀번호 찾기 구현
2.1 비밀번호 찾기 질문 테이블 구현
-- 회원 테이블 (비밀번호 질문, 답변 추가, foreign key 추가 )
alter table eden_user add question_no number;
alter table eden_user add user_findAnswer varchar2(200);
alter table eden_user add constraint user_find_question_no foreign key (question_no) references eden_find_question (question_no);
-- 회원 비밀번호 찾기 질문 테이블
drop table eden_find_question;
create table eden_find_question(
question_no number primary key,
question_content varchar2(200) not null
);
-- 회원 비밀번호 찾기 질문 테이블 시퀸스
drop sequence eden_find_question_seq;
create sequence eden_find_question_seq;
-- 회원 비밀번호 찾기 질문 테이블 데이터 생성
INSERT INTO eden_find_question(question_no, question_content)
VALUES (eden_find_question_seq.nextval, '졸업한 초등학교의 이름은 무엇 입니까?');
INSERT INTO eden_find_question(question_no, question_content)
VALUES (eden_find_question_seq.nextval, '태어난 고향은 어디 입니까?');
INSERT INTO eden_find_question(question_no, question_content)
VALUES (eden_find_question_seq.nextval, '가장 친한 사촌의 이름은 무엇 입니까?');
INSERT INTO eden_find_question(question_no, question_content)
VALUES (eden_find_question_seq.nextval, '어렷을적의 별명은 무엇 입니까?');
INSERT INTO eden_find_question(question_no, question_content)
VALUES (eden_find_question_seq.nextval, '부모님의 고향은 어디 입니까?');
INSERT INTO eden_find_question(question_no, question_content)
VALUES (eden_find_question_seq.nextval, '가장 좋아하는 색깔은 무엇 입니까?');
INSERT INTO eden_find_question(question_no, question_content)
VALUES (eden_find_question_seq.nextval, '가장 좋아하는 음식은 무엇 입니까?');위 코드에서 중요하게 볼 점은 alter table eden_user add question_no number 과 alter table eden_user add constraint user_find_question_no foreign key (question_no) references eden_find_question (question_no); 두 부분입니다.
먼저 add question_no number 명령어는 eden_user 테이블에 qestion_no 컬럼명을 가진 데이터 타입 number의 컬럼을 추가하는 명령어 이고
add constraint 명령어는 eden_user 테이블에 forign key 제약 조건을 추가 한다는 의미 입니다.
2.2 비밀번호 찾기 질문 클래스 생성
기본패키지/user/domain 패키지 안에 QuestionVo 클래스를 생성하고 아래와같이 작성해주세요
public class QuestionVo {
private int question_no;
private String question_content;
public QuestionVo() {
super();
}
public QuestionVo(int question_no, String question_content) {
this.question_no = question_no;
this.question_content = question_content;
}
public int getQuestion_no() {
return question_no;
}
public void setQuestion_no(int question_no) {
this.question_no = question_no;
}
public String getQuestion_content() {
return question_content;
}
public void setQuestion_content(String question_content) {
this.question_content = question_content;
}
@Override
public String toString() {
return "QuestionVo{" +
"question_no=" + question_no +
", question_content='" + question_content + '\'' +
'}';
}
}2.3 비밀번호 찾기 영속 계층 (Persistence Tier) 구현
기본패키지/user/persistance 패키지 안에 UserDAO 인터페이스와 UserDAOImpl 클래스의 내용을 아래와 같이 추가 해주세요
// 비밀번호 질문 조회
public List<QuestionVo> getJoinQuestionList();
// 비밀번호 찾기 질문 조회
public HashMap<String, Object> getUserQuestionById(UserVo param);
// 비밀번호 질문 답변
public UserVo getUserPwByfindAnswer(UserVo param);
// 임시비밀번호 발급
public void getUserUpdatePw(UserVo param);
}// 비밀번호 찾기 질문
@Override
@LogException
public List<QuestionVo> getJoinQuestionList() {
return sqlSession.selectList(NAMESPACE + ".getJoinQuestionList");
}
// 비밀번호 찾기 질문 조회
@Override
@LogException
public HashMap<String, Object> getUserQuestionById(UserVo param) {
return sqlSession.selectOne(NAMESPACE + ".getUserQuestionById", param);
}
// 비밀번호 찾기 질문 답변
public UserVo getUserPwByfindAnswer(UserVo param) {
return sqlSession.selectOne(NAMESPACE + ".getUserPwByfindAnswer", param);
}
// 임시 비밀번호 발급
@Override
@LogException
public void getUserUpdatePw(UserVo param) {
sqlSession.update(NAMESPACE + ".getUserUpdatePw", param);
}resources/mappers/user 패키지안에 UserSQLMapper.xml 에 아래와 같이 내용을 추가해주세요
<!-- 비밀번호 찾기 질문 -->
<select id="getJoinQuestionList" resultType="QuestionVo">
select * from eden_find_question
</select>
<!-- 비밀번호 찾기 질문 조회 -->
<select id="getUserQuestionById" resultType="map">
SELECT nf.question_content
FROM eden_user nu,
eden_find_question nf
WHERE nu.question_no = nf.question_no
AND nu.user_id = #{user_id}
</select>
<!-- 비밀번호 찾기 질문 답변 -->
<select id="getUserPwByfindAnswer" resultType="UserVo">
SELECT *
FROM eden_user
WHERE user_findAnswer = #{user_findAnswer}
AND user_id = #{user_id}
</select>
<!-- 임시 비밀번호 발급 -->
<update id="getUserUpdatePw">
UPDATE eden_user
SET user_pw = #{user_pw}
WHERE user_id = #{user_id}
</update>2.3 비밀번호 찾기 비지니스 계층 (Business Tier) 구현
src/기본패키지/user/service 패키지 안에 UserService 인터페이스와 UserServiceImpl 클래스에 아래 코드를 추가해주세요
// 비밀번호 질문 조회
public List<QuestionVo> getJoinQuestionList();
// 비밀번호 찾기 질문 조회
public HashMap<String, Object> getUserQuestionById(UserVo param);
// 비밀번호 질문 답변
public UserVo getUserPwByfindAnswer(UserVo param);
// 임시비밀번호 발급
public void getUserUpdatePw(UserVo param);// 비밀번호 찾기 질문
@Override
@LogException
public List<QuestionVo> getJoinQuestionList() {
return userDAO.getJoinQuestionList();
}
// 비밀번호 찾기 질문 조회
@Override
@LogException
public HashMap<String, Object> getUserQuestionById(UserVo param) {
return userDAO.getUserQuestionById(param);
}
// 비밀번호 질문 답변
public UserVo getUserPwByfindAnswer(UserVo param) {
return userDAO.getUserPwByfindAnswer(param);
}
// 임시 비밀번호 발급
public void getUserUpdatePw(UserVo param) {
userDAO.getUserUpdatePw(param);
}2.4 비밀번호 찾기 컨트롤러 구현
src/기본패키지/user/controller/ UserController 클래스와 RestUserController 클래스 두개의 파일에 아래와 같이 내용을 추가해주세요
// 회원가입 페이지
@GetMapping(value = "register")
@LogException
public String register(Model model, @ModelAttribute("userVo") UserVo param) {
model.addAttribute("data", userService.getJoinQuestionList());
return "user/register";
}
// 회원가입 프로세스
@PostMapping(value = "insertUserProcess")
@LogException
public String insertUserProcess(Model model, @Valid UserVo param, BindingResult result) {
if (result.hasErrors()) {
model.addAttribute("data", userService.getJoinQuestionList());
return "user/register";
}
userService.insertUser(param);
return "redirect:../main/main";
}// 비밀번호 찾기 질문 조회
@PostMapping(value = "getUserQuestionById")
@LogException
public HashMap<String, Object> getUserQuestionById(UserVo param) {
HashMap<String, Object> data = new HashMap<>();
HashMap<String, Object> userInfo = userService.getUserQuestionById(param);
if (userInfo == null) {
data.put("result", "fail");
} else {
data.put("userInfo", userInfo);
}
return data;
}
// 비밀번호 질문 답변 조회
@PostMapping(value = "getUserPwByfindAnswer")
@LogException
public HashMap<String, Object> getUserPwByfindAnswer(UserVo param) {
HashMap<String, Object> data = new HashMap<>();
UserVo userInfo = userService.getUserPwByfindAnswer(param);
if (userInfo == null) {
data.put("result", "fail");
} else {
data.put("result", "success");
}
return data;
}
// 비밀번호 찾기 - 수정
@PostMapping("getUserUpdatePw")
@LogException
public HashMap<String, Object> getUserUpdatePw(UserVo param) {
HashMap<String, Object> data = new HashMap<String, Object>();
boolean exist = userService.isExistId(param.getUser_id());
if (exist) {
data.put("result", "success");
String password = BCrypt.hashpw(param.getUser_pw(), BCrypt.gensalt());
param.setUser_pw(password);
userService.getUserUpdatePw(param);
} else {
data.put("result", "fail");
}
return data;
}2.5 비밀번호 찾기 JSP 파일 작성
web-inf/views/user 패키지 안에 register.jsp 파일을 내용을 아래와 같이 교체해주세요
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../include/head.jsp" %>
<%@ include file="../include/user_menu.jsp" %>
<html>
<body class="hold-transition skin-green-light sidebar-mini" oncontextmenu="return false" oncopy="return false"
oncut="return false" onpaste="return false" onselect="return false">
<div class="wrapper">
<%@ include file="../include/top_menu.jsp" %>
<%@ include file="../include/left_menu.jsp" %>
<div class="content-wrapper">
<section class="content container-fluid">
<div class="register-box-body">
<p class="login-box-msg">회원가입 페이지</p>
<form:form action="${path}/user/insertUserProcess" modelAttribute="userVo" id="insertForm" method="post">
<div class="row mt-2">
<div class="col">
<div class="row mt-1">
<div class="col-lg-5">
<label for="joinIdInput">아이디</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:input type="text" id="joinIdInput" class="form-control" path="user_id"
placeholder="아이디를 입력하세요"/>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alertId"><form:errors path="user_id" id="error_message"/></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<label for="changePassword">비밀번호</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:input type="password" id="changePassword" class="form-control"
placeholder="비밀번호를 입력하세요" path="user_pw"/>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alterPassword"><form:errors path="user_pw" id="error_message"/></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<label for="confirmPassword">비밀번호 확인</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<input type="password" id="confirmPassword" class="form-control"
placeholder="비밀번호를 한번 더 입력해주세요">
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alterPassword2"></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<label for="userNickName">닉네임</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:input type="text" id="userNickName" class="form-control" path="user_nickname"
placeholder="닉네임을 입력해주세요"/>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alertNickName"><form:errors path="user_nickname" id="error_message"/></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<label for="userGender">성별</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:radiobutton id="userGender" path="user_gender" value="M"/>남
<form:radiobutton id="userGender" path="user_gender" value="W"/>여
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alertGender"><form:errors path="user_gender" id="error_message"/></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<label for="userBirth">생년월일</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:input type="date" id="userBirth" class="form-control" path="user_birth"
placeholder="생년월일을 선택해주세요"/>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alertBirth"><form:errors path="user_birth"/></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<label for="userPhone">휴대폰번호</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:input type="text" id="userPhone" class="form-control" path="user_phone"
placeholder="휴대폰번호를 입력해주세요"/>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alertPhone"><form:errors path="user_phone" id="error_message"/></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<label for="userEmail">이메일</label>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:input type="text" id="userEmail" class="form-control" path="user_email"
placeholder="이메일주소를 입력해주세요"/>
</div>
</div>
<div class="row mt-1">
<div class="col d-grid">
<button type="button" id="checkEmailButton"
class="btn btn-primary" style="height:36px;" disabled='disabled'>인증번호 발송
</button>
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alertEmail"><form:errors path="user_email" id="error_message"/></div>
</div>
<div class="row mt-1">
<div class="col bi bi-exclamation-square-fill deepblue">
인증번호 발송은 서버 상황에따라 5초에서 10초정도 시간이 걸릴 수 있습니다.
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<input class="form-control" id="checkEmail" type="text"
placeholder="인증번호를 입력해주세요." aria-label="default input example"
disabled="disabled">
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5" id="alertCertified"></div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<form:select path="question_no" class="form-select" id="userQuestion">
<c:forEach items="${data}" var="question">
<form:option value="${question.question_no}">
${question.question_content}
</form:option>
</c:forEach>
</form:select>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-5 fs-5"><form:input class="form-control" id="userFindAnswer" path="user_findAnswer"
type="text" placeholder="비밀번호 찾기 정답을 입력해주세요" aria-label="default input example" />
</div>
</div>
<div class="row mt-3">
<div class="col my-auto"><form:errors path="user_findAnswer" id="error_message" /></div>
</div>
<div class="row mt-3">
<div class="col-7 bi bi-exclamation-square-fill orange" style="font-size : 10px;">
비밀번호 찾기 답변은 고객님의 비밀번호 분실시 이용됩니다. 신중하게 기입해주시기 바랍니다.
</div>
</div>
<div class="row mt-1">
<div class="col-lg-5">
<a type="button" class="btn btn-default pull-left" href="../main/main">취소</a>
<button type="button" class="btn btn-primary infoModBtn pull-right" id="joinButton">가입하기
</button>
</div>
</div>
</div>
</div>
<input type="hidden" id="user_image" name="user_image" value="default-user-image.jpg">
</form:form>
</div>
</section>
</div>
<%@ include file="../include/footer.jsp" %>
</div>
<%@ include file="../include/plugin_js.jsp" %>
</body>
</html>
2.6 비밀번호 찾기 JavaScript 작성
webapp/resources/dist/js/user 패키지안에 relatedUser.js 파일에 아래와 같은 내용을 추가해주세요
/* 비밀번호 찾기 질문 조회 */
$("#findQuestionButton").click(function () {
$.ajax({
type: "post",
url: "../user/getUserQuestionById",
data: {
user_id: $("#findIdInput").val(),
},
dataType: "json",
//contentType : "application/x-www-form-urlencoded", // post
success: function (data) {
if (data.result == 'fail') {
$("#question_content").css({
"color": "red",
"font-size": "10px",
"text-align": "center"
});
$("#question_content").text("일치하는 아이디가 없습니다. 다시 확인해주세요.");
} else {
$("#question_content").css({
"color": "green",
"font-size": "10px",
"text-align": "center"
});
$("#question_content").text('' + data.userInfo.question_content + '');
}
}
});
});
$("#findButton").click(function () {
$.ajax({
type: "post",
url: "../user/getUserPwByfindAnswer",
data: {
user_id: $("#findIdInput").val(),
user_findAnswer: $("#findAnswerInput").val(),
},
dataType: "json",
//contentType : "application/x-www-form-urlencoded", // post
success: function (data) {
if (data.result == 'fail') {
$("#answerLine2").css({
"color": "red",
"font-size": "10px"
});
$("#answerLine2").text("답이 올바르지 않습니다. 다시 확인해주세요.");
} else {
$("#answerLine2").css({
"color": "green",
"font-size": "10px"
});
$("#answerLine2").text("올바른 답을 입력 하셧습니다. 사용하실 비밀번호를 입력해주세요");
$("#question_content").text('');
$("#findPwInput").attr("disabled", false);
}
}
});
});
$("#findPwInput").keyup(function() {
var value = $(event.target).val();
var num = value.search(/[0-9]/g);
var eng = value.search(/[a-z]/ig);
var spe = value.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);
if (value.length < 8 || value.length > 30) {
$("#answerLine3").css({
"color": "red",
"font-size": "10px"
});
$("#answerLine3").text("! 비밀번호는 8자리이상 30자리 이하여야 합니다.")
} else if (value.replace(/\s| /gi, "").length == 0) {
$("#answerLine3").css({
"color": "red",
"font-size": "10px"
});
$("#answerLine3").text("! 비밀번호에 공백은 사용할 수 없습니다.")
} else if (num < 0 || eng < 0 || spe < 0) {
$("#answerLine3").css({
"color": "red",
"font-size": "10px"
});
$("#answerLine3").text("! 비밀번호는 영어+숫자+특수문자로 이루어져야 합니다.")
} else {
$("#answerLine3").css({
"color": "green",
"font-size": "10px"
});
$("#answerLine3").text("✔ 사용가능한 비밀번호입니다.");
$("#updatePW").attr("disabled", false);
}
});
$("#updatePW").click(function () {
$.ajax({
type: "post",
url: "../user/getUserUpdatePw",
data: {
user_id: $("#findIdInput").val(),
user_pw: $("#findPwInput").val()
},
dataType: "json",
success: function (data) {
if (data.result == 'fail') {
alert("해당하는 아이디가 존재 하지 않습니다.");
} else {
alert("비밀번호 변경에 성공 하였습니다.");
location.reload();
}
}
});
});2.7 비밀번호 찾기 화면 확인
0123456
3. 정리
이렇게 아이디 찾기 기능과 비밀번호 찾기 기능을 만들어 보았습니다.
다음에는 내 프로필 기능을 구현 해 보도록 하겠습니다.
'스프링 프레임워크 > 스프링 MVC' 카테고리의 다른 글
| # Spring MVC 게시판 예제 11 : 인터셉터를 활용한 권한체크 (0) | 2023.03.05 |
|---|---|
| # Spring MVC 게시판 예제 10 : 내 프로필 페이지 구현하기 (0) | 2023.02.25 |
| # Spring MVC 게시판 예제 08 - HttpSession을 이용한 로그인 (2) | 2023.02.24 |
| # Spring MVC 게시판 예제 07 - 회원 가입 유효성 검사 (Feat. Validation) (0) | 2023.02.23 |
| # Spring MVC 게시판 예제 06 - 회원가입 유효성 검사 (Feat. JavaScript) (0) | 2023.02.23 |
댓글