오늘은 로그인 옆에 항상 붙어있는 아이디/비밀번호 찾기를 구현하였다.
아이디/비밀번호 찾기는 어떤 데이터를 꺼내오느냐 차이지 기능적인 부분은 거의 비슷하다
memberVo는 2021.12.02 - [Spring/로그인&회원가입] - [spring/mybatis] 로그인 기능 여기 참고!!!
searchId.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 찾기</title>
<link rel="stylesheet" href="/resources/css/member/searchId.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<jsp:include page="/WEB-INF/views/common/header.jsp" />
<div class="search_wrap">
<div class="search_container">
<div class="logo">
<div class="mateLogo" >
<a href="/">Oh-Mate!</a>
</div>
<div class="search_cont">
<h4 class="searchIdMiddle">아이디 찾기</h4>
<div class="searchId-wrap">
<div class="searchId-tab">
<a href="/searchIdFrm.do">아이디 찾기</a>
</div>
<div class="searchId-tab">
<a href="/searchPwFrm.do">비밀번호 찾기</a>
</div>
<form action="/searchId.do" method="post">
<table class="searchId-table">
<tr style="border-bottom: 35px solid #fff;">
<td colspan="2">
</td>
</tr>
<tr>
<td id="searchName">
<h5>이름</h5>
<input type="text" name="memberName" id="memberName" placeholder="이름을 입력해주세요" class="searchId-input">
</td>
</tr>
<tr>
<td id="searchEmail">
<h5>이메일 주소</h5>
<input type="text" name="email" id="email" placeholder="이메일을 입력해주세요" class="searchId-input">
</td>
</tr>
<tr>
<th colspan="2" class="searchId-button">
<input type="submit" value="아이디 찾기" id="searchId" >
</th>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
searchId.css
@charset "UTF-8";
.search_wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f8f8fa;
overflow-y: scroll;
}
.search_wrap .search_container{
width: 600px;
margin: 150px auto 210px;
}
.search_wrap .search_cont{
background: #fff;
padding: 50px 45px 60px;
}
.btn_wrap{
padding: 30px 0 0;
}
.btn_wrap a{
display: block;
line-height: 60px;
border-radius: 5px;
background: #D35460;
text-align: center;
font-size: 15px;
color: #fff;
font-weight:bold;
letter-spacing:-0.5px;
text-decoration: none;
}
.search_wrap .search_cont>p{
font-size: 15px;
color: #828282;
letter-spacing: -0.5px;
line-height: 1.5;
}
.searchId-wrap{
width:500px;
border: 2px solid rgba(155, 89, 182, 0.81);
margin:0 auto;
}
.searchId-table{
margin:0 auto;
width:400px;
height:500px;
margin-top:40px;
}
.searchIdMiddle{
color:rgba(155, 89, 182, 0.81);
font-size:30px;
text-align:center;
padding-bottom:15px;
font-weight:bolder;
}
.searchId-button{
text-align:center;
padding-bottom: 30px;
}
.searchId-button>input{
color:white;
width:250px;
height:50px;
border: 0;
border-radius: 10px;
background-color: rgba(155, 89, 182, 0.81);
font-size: 20px;
}
.searchId-input{
height:55px;
width:100%;
font-size:18px;
}
.searchId-tab{
height:50px;
width:50%;
text-align:center;
float:left;
border-bottom: 1px solid rgba(155, 89, 182, 0.81);
}
.searchId-tab > a{
text-decoration: none;
font-size: 23px;
line-height: 50px;
}
.searchId-tab:nth-child(1){
background-color:rgba(155, 89, 182, 0.81);
}
.searchId-tab:nth-child(1)>a{
color:#fff;
}
.searchId-tab:nth-child(2)>a{
color:rgba(155, 89, 182, 0.81);
}
#searchName, #searchEmail{
height:130px;
}
.mateLogo a{
font-size:40px;
font-family: "logo";
color: #956bfc;
}
.mateLogo{
text-align: center;
padding-bottom: 10px;
}
searchPw.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비밀번호 찾기</title>
<link rel="stylesheet" href="/resources/css/member/searchPw.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<jsp:include page="/WEB-INF/views/common/header.jsp" />
<div class="search_wrap">
<div class="search_container">
<div class="logo">
<div class="mate_logo" >
<a href="/">Oh-Mate!</a>
</div>
<div class="search_cont">
<h4 class="searchIdMiddle">비밀번호 찾기</h4>
<div class="searchId-wrap">
<div class="searchId-tab">
<a href="/searchIdFrm.do">아이디 찾기</a>
</div>
<div class="searchId-tab">
<a href="/searchPwFrm.do">비밀번호 찾기</a>
</div>
<form action="/searchPw.do" method="post">
<table class="searchId-table">
<tr style="border-bottom: 35px solid #fff;">
<td colspan="2">
</td>
</tr>
<tr>
<td id="searchName">
<h5>아이디</h5>
<input type="text" name="memberId" id="memberId" placeholder="아이디를 입력해주세요" class="searchId-input">
</td>
</tr>
<tr>
<td id="searchEmail">
<h5>이메일 주소</h5>
<input type="text" name="email" id="email" placeholder="이메일을 입력해주세요" class="searchId-input">
</td>
</tr>
<tr>
<th colspan="2" class="searchId-button">
<input type="submit" value="비밀번호 찾기" id="searchId" >
</th>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
searchPw.css
@charset "UTF-8";
.search_wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f8f8fa;
overflow-y: scroll;
}
.search_wrap .search_container{
width: 600px;
margin: 150px auto 210px;
}
.search_wrap .search_cont{
background: #fff;
padding: 50px 45px 60px;
}
.btn_wrap{
padding: 30px 0 0;
}
.btn_wrap a{
display: block;
line-height: 60px;
border-radius: 5px;
background: #D35460;
text-align: center;
font-size: 15px;
color: #fff;
font-weight:bold;
letter-spacing:-0.5px;
text-decoration: none;
}
.search_wrap .search_cont>p{
font-size: 15px;
color: #828282;
letter-spacing: -0.5px;
line-height: 1.5;
}
.searchId-wrap{
width:500px;
border: 2px solid rgba(155, 89, 182, 0.81);
margin:0 auto;
}
.searchId-table{
margin:0 auto;
width:400px;
height:500px;
margin-top:40px;
}
.searchIdMiddle{
color:rgba(155, 89, 182, 0.81);
font-size:30px;
text-align:center;
padding-bottom:15px;
font-weight:bolder;
}
.searchId-button{
text-align:center;
padding-bottom: 30px;
}
.searchId-button>input{
color:white;
width:250px;
height:50px;
border: 0;
border-radius: 10px;
background-color: rgba(155, 89, 182, 0.81);
font-size: 20px;
}
.searchId-input{
height:55px;
width:100%;
font-size:18px;
}
.searchId-tab{
height:50px;
width:50%;
text-align:center;
float:left;
border-bottom: 1px solid rgba(155, 89, 182, 0.81);
}
.searchId-tab > a{
text-decoration: none;
font-size: 23px;
line-height: 50px;
}
.searchId-tab:nth-child(2){
background-color:rgba(155, 89, 182, 0.81);
}
.searchId-tab:nth-child(2)>a{
color:#fff;
}
.searchId-tab:nth-child(1)>a{
color:rgba(155, 89, 182, 0.81);
}
#searchName, #searchEmail{
height:130px;
}
.mate_logo a{
font-size:40px;
font-family: "logo";
color: #956bfc;
}
.mate_logo{
text-align: center;
padding-bottom: 10px;
}
MemberController
Controller에 아이디/비밀번호 찾기를 클릭 시 폼으로 이동시키기 위한 코드를 추가하였다.
그리고 getter로 아이디/비밀번호 정보를 가져와 alert으로 띄워주었다.
//아이디찾기 이동
@RequestMapping(value="/searchIdFrm.do")
public String searchIdFrm() {
return "member/searchId";
}
//아이디찾기
@RequestMapping(value="/searchId.do")
public String searchId(Member member, Model model) {
Member m = service.searchId(member);
if(m != null) {
model.addAttribute("msg","아이디는 ["+m.getMemberId()+"] 입니다.");
}else {
model.addAttribute("msg","회원정보가 없습니다.");
}
model.addAttribute("loc","/");
return "common/msg";
}
//비밀번호찾기 이동
@RequestMapping(value="/searchPwFrm.do")
public String searchPwFrm() {
return "member/searchPw";
}
//비밀번호 찾기
@RequestMapping(value="/searchPw.do")
public String searchPw(Member member, Model model) {
Member m = service.searchPw(member);
if(m != null) {
model.addAttribute("msg","비밀번호는 ["+m.getMemberPw()+"] 입니다.");
}else {
model.addAttribute("msg","회원정보가 없습니다.");
}
model.addAttribute("loc","/");
return "common/msg";
}
MemberService
//아이디찾기
public Member searchId(Member member) {
return dao.searchId(member);
}
//비밀번호찾기
public Member searchPw(Member member) {
return dao.searchPw(member);
}
MemberDao
//아이디찾기
public Member searchId(Member member) {
return sqlSession.selectOne("member.searchId",member);
}
//비밀번호찾기
public Member searchPw(Member member) {
return sqlSession.selectOne("member.searchPw",member);
}
memberSQL.xml
<!-- 아이디 찾기 -->
<select id="searchId" parameterType="m" resultType="m">
select
member_no as memberNo,
member_id as memberId,
member_pw as memberPw,
member_name as memberName,
phone,
email,
enroll_date as enrollDate,
member_filepath as filepath,
member_level as memberLevel,
gender,
age,
profile_status as profileStatus
from member where member_name=#{memberName} and email=#{email}
</select>
<!-- 비밀번호 찾기 -->
<select id="searchPw" parameterType="m" resultType="m">
select
member_no as memberNo,
member_id as memberId,
member_pw as memberPw,
member_name as memberName,
phone,
email,
enroll_date as enrollDate,
member_filepath as filepath,
member_level as memberLevel,
gender,
age,
profile_status as profileStatus
from member where member_id=#{memberId} and email=#{email}
</select>
반응형
'spring > 로그인&회원가입' 카테고리의 다른 글
| [spring/mybatis] 회원가입 (0) | 2022.01.17 |
|---|---|
| [spring/mybatis] 로그인/ 로그아웃 기능 (0) | 2021.12.02 |
