Mybatis를 활용한 CRUD 구현(회원가입, 로그인, 수정, 삭제)

항상 발전하는 개발자 2023. 11. 4. 11:34

728x90

Mybatis를 활용하여 CRUD를 구현해보겠습니다.

Mybatis가 무엇인지 궁금하신 분들은 아래 글을 참조해주세요.

2023.11.02 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] MyBatis 사용(with h2)

[포스코x코딩온] MyBatis 사용(with h2)

MyBatis https://mybatis.org/mybatis-3/ko/index.html MyBatis – 마이바티스 3 | 소개 마이바티스는 무엇인가? 마이바티스는 개발자가 지정한 SQL, 저장프로시저 그리고 몇가지 고급 매핑을 지원하는 퍼시스턴스

dongho-kang.tistory.com

이 글에서는 간단하게 구현하는 로직에 대해서만 설명하겠습니다. 전체 소스 코드는 깃허브를 참조 해주세요.

파일 구조

파일 구조를 보고 흘러가는 로직 파악

로그인을 예시로 보여드리겠습니다.

URI/ View (login.html)
- axios을 통해 데이터를 보냅니다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>Login</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<form id="form_login">
  <input type="text" placeholder="아이디" name="id" /> <br />
  <input type="password" placeholder="비밀번호" name="pw" /> <br />
  <button type="button" onclick="login();">로그인</button>
</form>
<script>
  function login() {
      const form = document.getElementById('form_login');
      const data = {
          userid: form.id.value,
          password: form.pw.value,
      };
      axios({
          method: 'POST',
          url: '/login',
          data,
      }).then((res) => {
          console.log(res);
          if (res.data) {
              alert('로그인 성공!');
              document.location.href = `/data/${res.data.id}`
          } else {
              alert('로그인 실패!');
              form.reset();
          }
      });
  }
</script>
</body>
</html>

Controller (PersonController.java)
- @RequestBody를 통해 html에서 보내는 데이터를 PersonDTO로 받아옵니다.
- 받아온 데이터를 활용하여 personService.getPerson에 보내서 받아온 결과를 다시 View로 보냅니다.

    //로그인

    @GetMapping("/login")
    public String getLogin(){
        return "login";
    }
    @PostMapping("/login")
    @ResponseBody
    public PersonDTO postLogin(@RequestBody PersonDTO personDTO){
        return  personService.getPerson(personDTO);
    }

Service (PersonService.java)
- Controller에서 받아온 데이터를 personMapper.getPerson으로 보내고 결과를 새로운 PersonDTO에 저장하고 Controller로 보냅니다.

  //로그인
    public PersonDTO getPerson(PersonDTO personDTO){

     Person person =  personMapper.getPerson(personDTO.getUserid(), personDTO.getPassword());
     //반환 타입으로 변경
     PersonDTO data = new  PersonDTO();
     //로그인 후 회원정보 조회를 위한 db id값 필요
     data.setId(person.getId());
     return data;

Mapper (PersonMapper) (인터페이스)
- Service에서 받아온 데이터로 SQL문을 실행합니다.

    //로그인
    @Select("SELECT * FROM person WHERE (userid=#{userid} and password=#{password})")
    Person getPerson(String userid, String password);

https://github.com/DongHo-Kang/CRUD_with_Mybatis.git

728x90