[Spring] 쇼핑몰 만들기 4. 로그인/로그아웃 기능 구현하기

오늘 일 1. 로그인 구현 2. 로그아웃 구현 페이지를 새로 만들까 고민 끝에 팝업을 사용해 구현하기로 했다.Let’s Starto! 1. 로그인 구현 로그인을.. 새로 팝업창을 열까, modal을 쓸까, 인터셉터를 사용할까 오전 내내 고민하다 결국 인터셉터로 로그인 구현하는 방법을 선택했다.. 인터셉터로 로그인 구현하는 방법은 아래 포스트에 대략적으로 적혀있기 때문에 오늘은 그냥 쭉쭉 구현할 것이다.https://blog.naver.com/hon0760/222261951384Interceptor에서 Login 기능 구현 1. Member 테이블 생성 2. MemberVO 클래스를 생성한다.3. Login DTO를 생성한다.4. 4. 4. my···blog.naver.com메인페이지에서 로그인 버튼을 누르면 /member/login으로 갈 수 있도록 main.jsp를 수정하였다.iv id=”gnb”>iv class=”text-right”>:choose>:when test=”${value.userid!=null}”>/*트위이의 userid+”userid”/트위페의 지다로필 사진*/pan class=”panicon glyphicon-heart-empty”style=”color:whide=”true”><><><><><><><>”pan userid.userid”</span>pan class=”cryptophicon glyphicon-heart-empty”style=”color:white;”aria-hidden=”true”></span>cryptosp;"""""""putonclick=”장소. href=clickmember/read/${click.userid}'”””>click=”의 위치에 있는 단추를 클릭합니다.href=member/logout’>로</button>:when>:when>:when>:when>/*로에게 보내는 답영 gnb면에게/원에게 보내는 답다*/utton onclick=”장소. href=clickmember/click’>click=”의 위치에 있는 단추를 클릭합니다.href=contextmember/insert’>”context”</button>:context>:choose>iv>iv>핸들러를 만들러 가자RequestMapping(value = “/method”, method = RequestMethod)。GET)ublic void loginGet() {login.jsp를 만들자. 똑똑똑똑똑똑딱login.jsp를 만들자. 똑똑똑똑똑똑딱(기본 틀을 조금씩 수정하니 코드 변동이 많다;) 프로젝트에 kr.co .interceptor라는 패키지를 하나 만든 후 LoginInterceptor 클래스를 생성했다.저번 강의에서 배운 것을 복사했기 때문에..별다른 설명은 없다저번 강의에서 배운 것을 복사했기 때문에..별다른 설명은 없다로그인 성공→이전에 봤던 페이지가 있으면 그 페이지로 보내고, 아니면 메인 페이지 로그인 실패→다시 로그인 화면에 인터셉터를 적용하려면 환경설정 파일을 조금 수정해야 한다.servlet-context.xml를 열고 이하의 코드를 추가한다.eans:beanid=”loginterceptor” class=”kr.co .interceptor.LoginInterceptor”> </bean> 빈의 id, 인터셉터에서 지정되어 있는 클래스 주소*/nterceptor> nterceptor > appingpath=”/member/loginPost”/>/* 어떤 요청에 대해 인터셉터를 적용하는가?:uri */eans:ref bean=”loginterceptor”/>/*어떤 인터셉터를 적용하는가?: 인터셉터 클래스의 ID */nterceptor>nterceptors >login.jsp의 form에서 action=”/member/loginPost”라고 지정해 주었기 때문에 해당 주소로 들어오는 요청을 받기 위해 핸들러를 만다라 한다RequestMapping(value = “/loginPost”, method = RequestMethod)。POST) ublic void loginPost(LoginDTODto, Model model) {ember}VO vo = memberService.login(dto);odel.addAttribute(“login”, vo);실제로 DB에서 데이터를 찾아 view에 전달하는 역할을 한다.서비스 인터페이스 → 서비스 인터페이스 구현 클래스 → DAO 인터페이스 → mapper → DAO 인터페이스 구현 클래스 순으로 빠르게 점점 더 만들어 보자/* 회원서비스*/회원VO로그인(LoginDTODto);/* 회원서비스*/회원VO로그인(LoginDTODto);/* /* MemberServiceImpl*/OverrideパブリックメンバーVO login(LoginDTOdto) {eturn memberDAO.login(dto);/* /* MemberServiceImpl*/OverrideパブリックメンバーVO login(LoginDTOdto) {eturn memberDAO.login(dto);/* 멤버DAO */멤버VO로그인(DTO dto로그인);/* 멤버DAO */멤버VO로그인(DTO dto로그인);/* memberMapper*/electid=”member” 결과=”kr.co .domain” 이라고 입력합니다.MemberVO”>ELECT * from member where userid = #{userid} and userpw = #{userpw}elect> /* userid”userpw” userpw” 은같가터면으를나라져와*//* memberMapper*/electid=”member” 결과=”kr.co .domain” 이라고 입력합니다.MemberVO”>ELECT * from member where userid = #{userid} and userpw = #{userpw}elect> /* userid”userpw” userpw” 은같가터면으를나라져와*//* 멤버 DAOImpl*/오버라이드 퍼블릭 멤버 VOLogin(LoginDTOdto) {eturnsqlSession}.selectOne(NS+.login”, dto);로그인이 잘 되는지 확인해 볼 시간.로그인 버튼 쿡id와 패스워드를 입력하다로그인 성공! 2. 로그아웃 구현 로그아웃 버튼을 누르면 컨펌 창을 열고 “확인” 버튼을 누르면 로그아웃이 가능하도록 구현 로그아웃 버튼에 id 속성을 부여하여<buttonid=”logout_btn”> 로그아웃</button><buttonid=”logout_btn”> 로그아웃</button>(“#logout_btn”).click(function(event) {vent.preventDefault();ar logout = confirm()로그아웃하시니까겠습(“(“assign”)시?);f (logout) {ocation.html/member/logout”;;제이쿼리 부분에 쿼리 문장을 추가했다. 컨펌창에서 “로그아웃하시겠습니까?”라고 물은 후 확인버튼이 눌리면 로그아웃 취소를 누르면 현재 페이지의 잔류 컨트롤러로 가자 세션값만 없애버리면 로그아웃이 끝난다.RequestMapping(value = “/logout”, method = RequestMethod)。GET)ublic void logout(HttpServletRequest request, HttpServletResponse) は IOException {ttpSession = request.getSession();session.invalidate();esponse をスローします。sendRedirect(“/”);invalidate()를 사용하여 세션 값을 지워 버리고 로그아웃이 끝나면 redirect 방식으로 메인 페이지로 보내는 코드를 짰다.로그아웃이 잘 되는지 확인해 보자나의 웹사이트에 로그인 해준 m001 페님 로그아웃 시켜보자확인을 누르면펜씨 안녕히 계세요 + gnb 영역에 마이페이지 버튼을 만들어 로그인한 후 마이페이지 버튼을 클릭하면 마이페이지로 갈 수 있도록 코드를 수정했다.아이디속성을 부여해줘서<buttonid=”mypage_btn”> 마이페이지</button><buttonid=”mypage_btn”> 마이페이지</button>/* 지금 로그인한 userid정보를 쿼리문으로 쓰기위해 hiddentype의 input태그에 value값 지정*/<inputtype=”hidden” value=”${login.userid}” id=”login_userid”>/* 지금 로그인한 userid정보를 쿼리문으로 쓰기위해 hiddentype의 input태그에 value값 지정*/<inputtype=”hidden” value=”${login.userid}” id=”login_userid”>(“#mypage_btn”).click(function(event) {vent.preventDefault();ar userid = $(“#mypage_userid”).val();ocation.mypage/member/read/” + userid);쿼리문장만 조금 추가.마이페이지도 잘 될까?마이페이지 버튼 쿡굿잡 내일 주말이라 게으름 피운다..굿잡 내일 주말이라 게으름 피운다..

인기글