- index.html
메인 화면
여기서 Login 클릭하면 Login 화면이 나타난다.
- login.html
id, pwd입력 후 로그인을 클릭하면 이걸 Login 컨트롤러가 받는다.
받아서 id와 pwd가 맞는지 판단한다.
맞으면 userInfo.html -> id와 pwd가 보여지게함
안맞으면 다시 로그인 화면으로
* 프로그램을 짜기 전에 흐름을 그려보는게 중요하다 !! *
<HomeController>
package com.fastcampus.ch2;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
// 1. 원격 프로그램으로 등록
@Controller
public class HomeController { // 원격 프로그램
// 2. URL과 메소드를 연결
@RequestMapping("/")
public String main() {
return "index"; // templates/index.html
}
}
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>index.html</h1>
<a href="/login/login">Login</a>
</body>
</html>
Login을 누르면 로그인 화면으로 이동한다.(/login/login)
<LoginController>
package com.fastcampus.ch2;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping ("/login")// 클래스 앞에 @RequestMapping("/login") 써주면 /login/login -> /login으로 생략 가능
public class LoginController {
// @RequestMapping(value = "/login/login", method = RequestMethod.GET) // 아래와 같다. 기본은 GET
// @RequestMapping("/login/login") // 더 짧게 아래 문장과 같이 사용 가능
@GetMapping("/login")
public String showLogin() {
return "login"; // login.html
}
// 하나의 메소드로 GET, POST 둘 다 처리하는 경우
// @RequestMapping(value = "/login/login", method = {RequestMethod.POST,RequestMethod.GET})
// @RequestMapping(value = "/login/login", method = RequestMethod.POST) // 아래와 같다.
@PostMapping("/login")
public String login(String id, String pwd, Model model) {
// 1. id, pwd를 확인
if(loginCheck(id,pwd)) {
// 2. 일치하면, userInfo.html
model.addAttribute("id", id);
model.addAttribute("pwd", pwd);
return "userInfo"; // userInfo.html
} else {
// 일치하지 않으면, login.html로 이동
return "redirect:/login/login"; // redirect는 GET요쳥 -> GetMapping("/login") 받음
}
}
private boolean loginCheck(String id, String pwd) {
return id.equals("asdf") && pwd.equals("1234");
}
}
GET 요청을 받아 showLogin() 메소드가 login.html을 보여준다.
<login.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/login/login" method="post">
id<br>
<input type="text" name="id"><br>
pwd:<br>
<input type="password" name="pwd"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>아이디와 패스워드를 입력하고 로그인을 누르면, form의 action에 지정된 곳으로 입력한 데이터가 post로 보내진다.
그러면 /login/login 주소로 post 요청이 가게 되는 것이다.
LoginController에서 post요청을 받아서 id, pwd가 일치하는지 확인한 후 일치하면 userInfo.html로 이동한다.
<userInfo.html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="|id=${id}|">asdf</h1 >
<h1 th:text="|pwd=${pwd}|">asdf</h1 >
</body>
</html>단항 문자열이 들어갈 때는 | |를 앞 뒤에 붙여줘야한다. (${id} 이렇게 쓸 때는 에러 안남)
이 때 패스워드를 다른걸 입력하면 다시 로그인 화면으로 돌아가는 것을 확인할 수 있다. (GET 방식으로 돌아감)
@PostMapping("/login")
public String login(String id, String pwd, Model model) throws Exception{
// 1. id, pwd를 확인
if(loginCheck(id,pwd)) {
// 2. 일치하면, userInfo.html
model.addAttribute("id", id);
model.addAttribute("pwd", pwd);
return "userInfo"; // userInfo.html
} else {
// 일치하지 않으면, login.html로 이동
String msg = URLEncoder.encode("id 또는 패스워드가 일치하지 않습니다.", "utf-8");
return "redirect:/login/login?msg=" + msg; // redirect는 GET요쳥 -> GetMapping("/login") 받음
}
}패스워드가 일치하지 않을 경우 메시지를 출력해주는 코드를 추가해보자.
URL 인코딩을 통해 한글이 깨지지 않도록 설정해주고, 해당 메시지를 보여주기 위해서는 login.html도 수정이 필요하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text = "${param.msg}"></h1>
<form action="/login/login" method="post">
id<br>
<input type="text" name="id"><br>
pwd:<br>
<input type="password" name="pwd"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>&{msg} 로 사용하면 쿼리 스트링에 들어가기 때문에 &{param.msg} 이렇게 사용해여 모델에 저장된다.
이렇게 해야 쿼리스트링에서 msg를 찾아서 보여주게 된다.
이렇게 잘 나오면 성공이다.
'SpringBoot' 카테고리의 다른 글
| ch2 12. Thymeleaf로 레이아웃 적용하기 (0) | 2023.07.07 |
|---|---|
| ch2 11. @RequestMapping과 URL인코딩 (0) | 2023.07.07 |
| ch2 08. @RequestParam과 @ModelAttribute - 이론 (0) | 2023.07.07 |
| ch2 08. @RequestParam과 @ModelAttribute - 실습 (0) | 2023.07.07 |
| ch2 07. MVC로 관심사를 분리하기(2) - 이론 (0) | 2023.07.06 |
