[Spring][커뮤니티 사이트]로그인 &로그아웃

로그인 부분

Mapper.XML(Oracle DB)

<!-- 로그인 -->
<select id="login" resultType="MemberVO">
	<![CDATA[
		select * from member
		where id = #{id} and pw = #{pw}
	]]>
</select>

로그인 시 id 와 pw 둘다 조건에 맞으면 로그인 하도록 쿼리 작성

---

Controller

	//로그인
	@GetMapping("/login")
	public void login() {
		
	}
	@PostMapping("/login")
	public String login(@ModelAttribute MemberVO member, 
			RedirectAttributes rttr, HttpServletRequest request) {
		
		HttpSession http = request.getSession();
		MemberVO vo = service.login(member);
		
		//존재하는 id일경우
		if(vo != null) {
			http.setAttribute("member", vo);
			return "redirect:/board/lists";
		}else {
			//존재하지 않을경우
			rttr.addFlashAttribute("result",0);
			return "redirect:/member/login";
		}
	}

로그인도 화면부분 데이터부분 나눠서 구현하였다.

post 부분에서 Httpsession을 사용하여 로그인 하였을때 session을 통해 아이디 비번을 db에 있는 값과 비교를 한다.

---

Service&DAO

Service
	//로그인
	@Override
	public MemberVO login(MemberVO member) {
		return dao.login(member);
	}
 
 DAO
 	//로그인
	@Override
	public MemberVO login(MemberVO member) {
		return session.selectOne("mapper.member.login",member);
	}

---

JSP

<a href="${path}/board/lists">
<strong><h1>시끌벅적 커뮤니티</h1></strong>
</a>
</div>
<div class="loginbox">
		<h1>Login</h1>
	<form id="login_form" method="post">
	    <div class="textForm">
            <input type="text"  name="id" id="id" class="id_input" placeholder="아이디">
        </div>
      		
      	<div class="textForm">
            <input type="password"  name="pw" id="pw" class="pw_input" placeholder="비밀번호">
        </div>
		
		<c:if test="${result == 0 }">
			<div class="login_warn"> ID 또는 비밀번호를 잘못 입력하셨습니다.</div>
		</c:if>
		
		<div class="btnwrap">
			&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" class="btn" value="로그인" style='cursor:pointer;'/>
			<a href="${path}/member/join">회원가입</a><br>
		</div>
	</form>
</div>

ID 와 PW 둘중 하나 또는 둘다 틀릴 경우 글씨를 띄우게 하였습니다. Controller 에서 존재하지 않을경우 변수 result 선언 한 것을 if문 조건에 넣어줍니다.

뒤로가기 버튼을 만드는것 대신 로그인창 맨위에 홈페이지 이름을 누르면 메인 화면으로 가게 하였습니다.

---

CSS

.login_warn{
  color:red;
  font-size: 0.9em;
  text-align: center;
}

메시지에 대한 CSS 입니다.

---

JS

$(".btn").click(function(){
	$("#login_form").attr("action", "${path}/member/login");
	$("#login_form").submit();
});

버튼 클릭시 로그인 매핑 값을 통해 submit 하도록 하였습니다.

결과화면

id 또는 pw 가 틀리면 저렇게 글씨가 나옵니다. 만약 성공한다면 controller 에서 선언한 redirect 주소 값으로 이동합니다~