[Spring] 홈페이지_로그인

 

 

로그인

 

MemberController

//로그인 폼 이동
@GetMapping("loginForm")
public String loginForm() {
	return "member/loginForm";
}

로그인 메뉴 클릭하면 loginForm.jsp 뷰페이지 매핑

 

loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<style>
	#log{width:400px; margin:0 auto;}
	#log>h1{text-align:center;}
	#logform>ul>li{
		float:left;
		width:30%;
	}
	#logform>ul>li:nth-child(2n){width:70%;}
	#logform>ul>li:last-of-type{width:100%; text-align:center; margin-top:30px;}
</style>
<script>
	function logFormCheck(){
		//id, pw 입력 유무 확인, 모두 입력되면 action 파일 요청
		//하나라도 입력 안 되면 현재 페이지에 머무름
		var id = document.getElementById("userid");
		if(id.value==""){
			 alert("아이디를 입력하세요.");
			 id.focus;	//커서를 아이디 객체로 이동
			 console.log("실행?");
			 return false;
		}
		if(document.querySelector("#userpwd").value==""){
			alert("비밀번호를 입력하세요.");
			document.querySelector("#userpwd").focus();
			return false;
		}
		//id,pw 모두 입력한 경우 submit 발생시키기
		document.getElementById("logform").submit();
			
	}
</script>
<div class="container">
	<div id="log">
	  <h1>로그인</h1>
	  <hr/>
	<form method="post" action="/myapp/member/loginOk" id="logform">
	  <ul>
	  	<li>아이디</li>
	  	<li><input type="text" name="userid" id="userid"/></li>
	  	<li>비밀번호</li>
	  	<li><input type="password" name="userpwd" id="userpwd"/></li>
		<li><input type="button" value="로그인" onclick="logFormCheck()"/>
			<input type="reset" value="취  소"/></li>
	  </ul>
	  </form>
	</div>
</div>

 

 

MemberDAO, MemberService

//로그인
public MemberVO loginCheck(MemberVO vo);

 

 

MemberServiceImpl

@Override
public MemberVO loginCheck(MemberVO vo) {
	return dao.loginCheck(vo);
}

 

 

memberMapper

<select id="loginCheck" resultType="com.campus.myapp.vo.MemberVO">
    select userid, username from member
    where userid=#{userid} and userpwd=${userpwd}
</select>

#{userid}, #{userpwd}는 로그인 시 입력한 아이디와 비밀번호이다.

select가 성공하면 해당 아이디와 비밀번호를 MemberVO로 반환한다. (vo2에 담김)

 

 

top.jspf

<div class='top'>
	<c:if test="${logStatus!='Y'}">
		<a href="${url}/member/loginForm">로그인</a>
		<a href="${url}/member/memberForm">회원가입</a>
	</c:if>
	
	<c:if test="${logStatus=='Y'}">
		${logId}님<a href="">로그아웃</a>
		<a href="">회원정보수정</a>
	</c:if>
</div>

logStatus가 Y이면 로그인 성공한 상태이므로 로그아웃, 회원 정보 수정 메뉴를 보여준다.

 

 

 

로그인 전

 

 

로그인 후

 

---

 

로그아웃

 

 

MemberController

//로그아웃
@GetMapping("logout")
public ModelAndView logout(HttpSession session) {
	//세션 객체를 지우면 세션에 저장된 로그인 정보 등 모든 데이터가 삭제됨
	//새로운 세션 할당 
	session.invalidate();
	ModelAndView mav = new ModelAndView();
	mav.setViewName("redirect:/");
	return mav;
}

session.invalidate();를 통해 세션에 저장된 logId, logname, logStatus가 모두 삭제되고,

새로운 세션이 자동으로 할당된다.

 

 

---

 

회원정보 수정(폼)

 

 

MemberController

@GetMapping("memberEdit")
public ModelAndView memberEdit(HttpSession session) {
	//object이므로 string으로 변환
	String userid = (String)session.getAttribute("logid");

	MemberVO vo = service.memberSelect(userid) ;
	ModelAndView mav = new ModelAndView();
	mav.addObject("vo", vo);

	mav.setViewName("member/memberEdit");
	return mav;
}

 

 

MemberDAO, MemberService

//회원정보수정 폼
public MemberVO memberSelect(String userid);

 

 

MemberServiceImpl

@Override
public MemberVO memberSelect(String userid) {
	return dao.memberSelect(userid);
}

 

 

memberMapper_회원정보 select

<select id="memberSelect" resultType="com.campus.myapp.vo.MemberVO">
    select userid, username, tel, email from member
    where userid=#{param1}
</select>

 

 

---

회원정보 수정(DB)

 

MemberService, MemberDAO

//회원정보수정(DB)
public int memberUpdate(MemberVO vo);

 

 

MemberServiceImpl

@Override
public int memberUpdate(MemberVO vo) {
	return dao.memberUpdate(vo);
}

 

 

memberMapper_회원정보 update

    <update id="memberUpdate">
    	update member set username=#{username}, tel=#{tel}, email=#{email}
    	where userid=#{userid} and userpwd=#{userpwd}
    </update>

 

username 코코1에서 코코야로 변경