Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- charAt
- 탐색
- java
- Top-down
- hasNext
- binarysearch
- MySQL
- 플로이드워셜
- 보텀업
- 순차탐색
- ERD 설계
- EOF
- 알고리즘
- 소프트스퀘어드
- 이것이 취업을 위한 코딩 테스트다
- 관계형 데이터베이스
- DynamicProgramming
- quickDBD
- Python
- ERD Tool
- 백준
- 작동순서
- 그리디
- binary_search
- 탑다운
- 라이징캠프
- Algorithm
- 퀵 정렬 # quciksort # 정렬
- 다이나믹프로그래밍
- greedy
Archives
- Today
- Total
Seok_In
SpringBoot로 Web만들기(3) 본문
HappyHouse 만들기 - 로그인/로그아웃
1. index.html에 적당한 곳에 로그인 ID / PW 를 입력할 곳을 만들어준다.
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<div id="loginDiv" style='color:white; font-size:17px; margin-right:35px'>ID<input id="id">
PW<input id="pw">
<button class="btn btn-outline-light" id="loginBtn">로그인</button>
2. my.js에 로그인을 요청을 보낼 이벤트를 만들어준다.
$("#loginBtn").click(function(){
const id = $("#id").val();
const pw = $("#pw").val();
$.post('login', {id, pw}, function(data){
if(data == "ok"){
alert("로그인성공!");
$("#loginDiv").html(id +"님 환영합니다.");
}
else{
alert("로그인 실패!");
}
});
3. MemberController에 login기능 추가
@PostMapping("login")
public String login(HttpServletRequest request, HttpServletResponse response) {
String id = request.getParameter("id");
String pw = request.getParameter("pw");
MemberVO vo = new MemberVO(id, pw, "");
String name = memberService.login(vo);
if(name!=null) {
HttpSession session = request.getSession();
session.setAttribute("member", vo);
return "ok";
}
else {
return "fail";
}
}
4. MemberService에 login 메서드 추가
public String login(MemberVO vo) {
return memberDAO.login(vo);
}
5. MemberDAO에 login 메서드 추가
6. mybatis/mappers/member.xml에 login sql 추가
<select id="login" parameterType="memberVO" resultType="String">
select name from member where id=#{id} and pw=#{pw}
</select>
7. 결과 확인
8. 로그아웃 기능을 만들기 위해 my.js에 로그아웃 버튼 생성 / 로그아웃 버튼 기능을 만들어준다.
$("#loginBtn").click(function(){
const id = $("#id").val();
const pw = $("#pw").val();
$.post('login', {id, pw}, function(data){
if(data == "ok"){
alert("로그인성공!");
$("#loginDiv").html(id +"님 환영합니다. <input type='button' value='logout' id='logoutBtn' class='btn btn-outline-light'>");
$.cookie("logined", id);
}
else{
alert("로그인 실패!");
}
});
});
- 동적생성되는 logout버튼 이벤트 처리
$(document).on("click", "#logoutBtn", function(){
$.post("logout",{},function(data){
$.removeCookie("logined");
alert("로그아웃 되었습니다.");
location.reload();
});
});
9. 로그아웃 기능을 처리하기 위한 MemberController에 logout기능을 추가한다.
@PostMapping("logout")
public String logout(HttpServletRequest request, HttpServletResponse response) {
HttpSession session = request.getSession(false);
session.invalidate();
return "";
}
10. 결과 확인
'Spring > Spring으로 Web연습하기' 카테고리의 다른 글
SpringBoot로 Web만들기(5) (0) | 2022.04.27 |
---|---|
SpringBoot로 Web만들기(4) (0) | 2022.04.23 |
SpringBoot로 Web만들기(2) (0) | 2022.04.20 |
SpringBoot로 Web 만들기(1) (0) | 2022.04.20 |
Spring으로 Web 프로젝트 만들기(5) (0) | 2022.04.18 |