1. 상단 메뉴에 버튼 추가
header.mastache
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/board">Metacoding</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/join-form">회원가입</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/login-form">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">로그아웃</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/board/save-form">글쓰기</a>
</li>
</ul>
</div>
</div>
</nav>
회원가입, 로그인, 로그아웃, 글쓰기 버튼을 추가해줍니다.
2. UserRepository 만들기
user패키지에 UserRepository를 만든다.
@Repository
public class UserRepository {
@Autowired
private EntityManager em;
public User findByUsernameAndPassword(String username, String password) {
Query query = em.createQuery("select u from User u where u.username =:username and u.password=:password", User.class);
query.setParameter("username", username);
query.setParameter("password", password);
return (User) query.getSingleResult();
}
@Transactional
public void save(User user) {
em.persist(user);
}
}findByUsernameAndPassword 메서드가 로그인 시도할 때 아이디/비밀번호를 확인한다.
3. UserController 만들기
user패키지에 UserController를 만든다.
@Controller
public class UserController {
@Autowired
private UserRepository userRepository;
//HttpSession은 스프링 시작시에 Ioc에(빈 컨테이너) 생성돼서 대기중이다. @Autowired로 주입
@Autowired
private HttpSession session;
@PostMapping("/login")
public String login(UserRequest.LoginDTO loginDTO) {
User sessionUser = userRepository.findByUsernameAndPassword(loginDTO.getUsername(), loginDTO.getPassword());
session.setAttribute("sessionUser", sessionUser);
return "redirect:/board";
}
@PostMapping("/join")
public String join(UserRequest.JoinDTO joinDTO) {
userRepository.save(joinDTO.toEntity());
return "redirect:/login-form";
}
@GetMapping("/join-form")
public String joinForm() {
return "user/join-form";
}
@GetMapping("/login-form")
public String loginForm() {
return "user/login-form";
}
}
4. UserRequest 만들기
user패키지에 UserRequest를 만들어서 User관련 request요청에 사용할 DTO를 만들어준다.
DTO(Data Transfer Object) : 데이터를 안전하고 명확하게 관리하기 위해 사용한다.public class UserRequest {
@Data // @Getter, @Setter, @ToString.. 등 기능 포함
public static class JoinDTO {
private String username;
private String password;
private String email;
//이 메서드의 책임은 DTO -> UserObject로 바꿔주는 책임
//toEntity()는 insert 할 때만 필요. select 할 때는 만들어줄 필요 없다.
public User toEntity() {
return User.builder().username(username).password(password).email(email).build();
}
}
@Data
public static class LoginDTO {
private String username;
private String password;
}
}내부에 DTO클래스를 static으로 만들어서 사용
JoinDTO : 회원가입 요청시 필요한 정보인 username, password, email의 정보를 전달
LoginDTO : 로그인 요청시 필요한 정보인 username, password 정보를 전달
toEntity()는 insert할 때 필요한 정보를 id(PK)값 빼고 전달하기 위해 만든 메서드이다.
UserRepository가 save(User user) 에서 id값만 빠진 User객체를 받아서 em.persist() 하면
영속성 컨텍스트에 저장하고 트랜잭션이 끝나고 쿼리가 insert 나가서 db에 넣는다.
Share article
