인터셉터로 user 가입하기 만들기

 

DB user 만들고

 

유저 클래스 만들기

@Data
@AllArgsConstructor
public class User {
	private String email;
	private String password;
	private String name;
}

 

DB의 user객체들을 가져올때 mapper가 필요  xml파일 없이 쿼리를 바로 적는다

 

 

[ 유저 mapper ]

@Mapper
public interface UserMapper {

    //유저 입력
    @Insert("INSERT INTO user VALUES(#{email}, #{password}, #{name})")
    public int insert(User user);

    //유저 비번 업데이트
    @Update("UPDATE user SET password = #{password} WHERE email = #{email}")
    public int update(User user);

    //유저 삭제
    @Delete("DELETE from user WHERE email = #{email}")
    public int delete(String email);

    //유저 총 수
    @Select("SELECT count (*) FROM user")
    public int count();

    //유저 리스트 검색
    @Select("SELECT * FROM user")
    public List< User > selectAll();

    //유저 조회
    @Select("SELECT  * FROM user WHERE email = #{email} ")
    public User selectByEmail(String email);
}

 

 

[ 유저 Controller ]

@Controller
public class UserController {

	@Autowired
	private UserMapper userMapper;
	
	@GetMapping("/register")
	public Object getUsersView(@ModelAttribute User user) {
		return "register";
	}
		
}

 

User 객체를 @ModelAttrubute 써서 모델로 전달한다.

 

 

[ register.html 뷰페이지 ]

<!-- 메인 컨텐트 시작 -->
<main class="main-content mt-0">
  <section>
    <div class="page-header min-vh-100">
      <div class="container">
        <div class="row">
          <div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column">
            <div
              class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center"
              style="background-image: url('../assets/img/illustrations/illustration-signup.jpg'); background-size: cover"
            ></div>
          </div>
          <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
            <div class="card card-plain">
              <div class="card-header">
                <h4 class="font-weight-bolder">가입하기</h4>
                <p class="mb-0" th:text="${message} ?: '가입양식을 작성해주세요'"></p>
              </div>
              <div class="card-body bg-white">
                <form role="form" th:action="@{/register}" method="post" th:object="${user}">
                  <div class="input-group input-group-outline mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control" th:field="*{name}" minlength="2" maxlength="5" required />
                  </div>
                  <div class="input-group input-group-outline mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" th:field="*{email}" required />
                  </div>
                  <div class="input-group input-group-outline mb-3">
                    <label class="form-label">Password</label>
                    <input type="password" class="form-control" th:field="*{password}" minlength="4" maxlength="10" required />
                  </div>
                  <div class="form-check form-check-info text-start ps-0">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked />
                    <label class="form-check-label" for="flexCheckDefault"> I agree the <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a> </label>
                  </div>
                  <div class="text-center">
                    <button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">가입하기</button>
                  </div>
                </form>
              </div>
              <div class="card-footer bg-white text-center pt-0 px-lg-2 px-1">
                <p class="mb-2 text-sm mx-auto">
                  이미 계정이 있습니까?
                  <a th:href="@{/login}" class="text-primary text-gradient font-weight-bold">로그인</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

 

제목 부분에  메세지가 있으면 A: 없으면B

<p class="mb-0" th:text="${messag} ?: '가입양식을 작성해주세요'"></p>

☆주의!!   ?:  붙여줘야함

 

 

<form role="form" th:action="@{/register}" method="post" th:object="${user}">

ModelAttrubute 를 통해 유저객체(name,email,password)가 ${user}에 전달되면 form안에서 사용할수 있도록

th:field="*{name}"

th:field="*{email}"

th:field="*{password}"

 

 

 

※ 마지막 가입하기 버튼 누를때 submit 으로 해야 넘어감.

 

 

 

 

[ 유저 Controller ]

@PostMapping("/register")
public String postUser(User user, Model model, HttpSession session, RedirectAttributes attr) {
    // 클라이언트 단 또는 서버 단에서 데이터 유효성 체크를 적용하는 것을 권장한다.
    User duplicatedUser = userMapper.selectByEmail(user.getEmail());
    if (duplicatedUser == null) {
        userMapper.insert(user);
        attr.addFlashAttribute("message", "가입되었습니다");
        return "redirect:/login";
    } else {
        attr.addFlashAttribute("message", "이메일 중복입니다");
        return "redirect:/register";
    }				
}

 

이메일이 같은 유저가 있는지

userMapper.selectByEmail(user.getEmail()); 

 

 if (duplicatedUser == null )

이메일이 중복이 아니면 가입처리 후 로그인 페이지로

 else 

이메일 중복이면 메세지와 함께 다시 redirect 가입하기 페이지

 

 

 

---

이름은 2자 이상 →  minlength="2"

비밀번호 4자 이상 →   maxlength="4"

이메일은 필수 →   required

 

 

css효과

<style>
    input:invalid:focus {
      background-image: linear-gradient(pink, lightgreen) !important;
    }
</style>

 

invalid 유효성 검사가 맞지 않을때 CSS효과

 

 

!important  : 부트스트랩보다 우선순위를 높게하고 무조건 실행되도록 함.