[v3] springboot 블로그 만들기-8

html 수정

<script>
    // bool 타입은 is 를 붙여 만든다.
    let isSameUsername = true;
    
  function valid(){
        if(isSameUsername){
            alert("중복체크가 필요합니다.");
            return false;
        }else {
            return true;
        }
    }
</script>

중복체크 버튼에 sameCheck() 이벤트 추가

async function sameCheck() {
        // 1. username 가져오기
        let username = $("#username").val();
        console.log(username);
        // 2. fetch로 통신하기
        let response =await fetch(`/user/samecheck?username=${username}`);
        let responseBody = await response.json();
        console.log(responseBody);
        // 3.  중복됐으면 isSameUsername = true 프로미스로 받으면 패치댄 해야함 아니면어웨이트
        if(responseBody.body){
            isSameUsername=true;
            alert("중복된 유저네임이에요");
        }else {
            isSameUsername= false;
            alert("가용가능한 이름입니다");
            $("#username").attr("readOnly", true);
        }
        // 4. 중복 안됐으면 = isSameUsername = false; -> username input 을 read Only 로
    }

서버 구축

  @GetMapping("/user/samecheck")
  public ResponseEntity<?> sameCheck(@RequestParam("username") String username){
      boolean isSameUsername =  userService.유저네임중복되었니(username);
      return ResponseEntity.ok(Resp.ok(isSameUsername, isSameUsername ? "중복되었어요" : "중복되지않았어요"));
  }

@AllArgsConstructor
@Data
public class Resp<T> {
    private Integer status;
    private String msg;
    private T body;

    public static <B> Resp<?> ok(B body){
        return new Resp<>(200, "성공", body);
    }

    public static <B> Resp<?> ok(B body, String msg){
        return new Resp<>(200, msg, body);
    }

    public static Resp<?> fail(Integer status, String msg){
        return new Resp<>(status, msg, null);
    }
}

public boolean 유저네임중복되었니(String username) {
      Optional<User> userOP = userRepository.findByUsername(username);
      if(userOP.isPresent()){
          return true;
      }else{
          return false;
      }
  }

마무리