반응형
폼은 지난번에 만들어둔 loginForm을 활용하고 Ajax 코드도 회원가입 코드를 복사해서 수정 후 활용할 것이다.
1. 로그인 버튼 수정
<html />
<button id="btn-login" class="btn btn-primary">로그인</button>
2. User.js 에 로그인 코드 작성
<javascript />
let index = { init: function(){ $("#btn-save").on("click",()=>{ //function(){} 대신 ()=>{} : this를 바인딩하기 위해서 this.save(); }); $("#btn-login").on("click",()=>{ //function(){} 대신 ()=>{} : this를 바인딩하기 위해서 this.login(); }); }, login: function(){ //alert('user의 save함수 호출됨'); let data = { username: $("#username").val(), password: $("#password").val(), }; $.ajax({ //로그인 수행 요청 type: "POST", url: "/api/user/login", data: JSON.stringify(data), //http body 데이터 contentType: "application/json; charset=utf-8", //body 데이터가 어떤 타입인지(MIME) dataType: "json" //요청을 서버로 해서 응답이 왔을 때 기본적으로 모든 것이 문자열(String)=>javascript 오브젝트로 변경 //응답 결과가 정상일 때 }).done(function(resp){ alert("로그인이 완료되었습니다."); location.href="/"; //실패일 때 }).fail(function(error){ alert(JSON.stringify(error)); }); }
3. 컨트롤러에 로그인 코드 작성
- HttpSession을 사용하여 로그인 정보를 저장하고
- header.jsp에 session이 담긴 principal을 가져와서 아래와 같이 코드를 수정한다.
- 로그인 했을 때와 하지 않았을 때 메뉴바가 다르게 보이도록 구현한다.
4. 로그인 테스트
- 테스트용으로 회원가입을 해서 유저를 생성하고
- 생성한 아이디, 비밀번호로 로그인을 해보면 로그인 성공 메시지가 뜬다.
- 로그인 진행 쿼리문
- 로그인 완료 시 메뉴바
- 로그인하지 않았을 때 메뉴바
반응형
'💻 my code archive > 🏷️JAVA & Spring(Boot)' 카테고리의 다른 글
| 스프링부트 공부기록(22) - 방명록 작성:: 게시물 조회, 수정, 삭제 구현 (0) | 2022.03.18 |
|---|---|
| 스프링부트 공부기록(21) - 방명록 작성 :: 게시물 등록, 페이징 처리 구현하기 (0) | 2022.03.18 |
| [스프링부트 블로그 만들기] DB 격리 수준, 스프링부트 트랜잭션, JPA OSIV란? (0) | 2022.03.17 |
| [스프링부트 블로그 만들기] ajax 통신, 회원가입 구현하기 (0) | 2022.03.17 |
| [스프링부트 블로그 만들기] 부트스트랩 적용하여 메인 화면 구현하기 (0) | 2022.03.17 |
