SpringBoot | CRUD 구현 - 아이디중복검사(Read),Ajax

| 회원가입페이지 CRUD구현

 

 

---

| 아이디 중복 검사(Read)

아이디 입려후 focus out을 하면

AJAX POST로 

DB조회 후 중복되는게 없으면 True 없으면 False를 반환

 

async : true = 비동기 (Asynchronous, 요청을 보낸 후 응답결과와는 상관없이 다음방식이 동작하는 방식)
async : false = 동기 (Synchronous, 요청을 보낸 후 응답결과를 받아야지만 다음 동작이 이루어지는 방식)

 

register.js

// 아이디 중복확인
let idck=false;
function overlap(){
    if(user_id.value==''){
        user_id.classList.remove('pass');
    }else{
        $.ajax({
            type : 'GET',           // 타입 (get, post, put 등등)
            url : '/register/search?userid='+user_id.value,           // 요청할 서버url
            async : false,            // 비동기화 여부 (default : true)
            headers : {              // Http header
            "Content-Type" : "application/json",
            "X-HTTP-Method-Override" : "POST"
            },
            success : function(result) { // 결과 성공 콜백함수
                if(result.status=='OK'){
                    user_id.classList.remove('pass');
                    user_id.classList.add('nonpass');
                    msgbox.innerHTML='이미 사용중인 아이디입니다'
                    idck=false;
                }else{
                    user_id.classList.remove('nonpass');
                    user_id.classList.add('pass');
                    msgbox.innerHTML=''
                    idck=true;
                }
            }
        })
    }
}

 

RegisterApiController

@RestController
@RequestMapping("/register")
@RequiredArgsConstructor
public class RegisterApiController extends CrudController<RegisterApiRequest, RegisterApiResponse, MoneyMember> {
    private final RegisterApiLogicService registerApiLogicService;

    @GetMapping("/search")
    public Header<RegisterApiResponse> search(@RequestParam("userid") String userid){
        return registerApiLogicService.searchid(userid);
    }
    
}

 

RegisterApiLogicService

@Service
@RequiredArgsConstructor
public class RegisterApiLogicService extends BaseService<RegisterApiRequest, RegisterApiResponse, MoneyMember> {

    private final MoneyMemberRepository moneyMemberRepository;

    public Header<RegisterApiResponse> response(MoneyMember moneyMember){
        RegisterApiResponse registerApiResponse = RegisterApiResponse.builder()
                .userId(moneyMember.getUserId())
                .userPw(moneyMember.getUserPw())
                .userName(moneyMember.getUserName())
                .build();
        return Header.OK(registerApiResponse);
    }
    @Override
    public Header<RegisterApiResponse> create(Header<RegisterApiRequest> request) {
        return null;
    }
    @Override
    public Header<RegisterApiResponse> read(Long id) {
        return null;
    }
    @Override
    public Header<RegisterApiResponse> update(Header<RegisterApiRequest> request) {
        return null;
    }
    @Override
    public Header<RegisterApiResponse> delete(Long id) {
        return null;
    }
    
    public Header<RegisterApiResponse> searchid(String userid){
        // System.out.println("서비스단 userid:"+userid);
        return moneyMemberRepository.findByUserId(userid)
                .map(item -> response(item))
                .orElseGet(()->Header.ERROR("데이터 없음"));
    }
}

 

MoneyMemberRepository

public interface MoneyMemberRepository extends JpaRepository<MoneyMember,Long> {
    Optional<MoneyMember> findByUserId(String userId);
}

 

RegisterApiRequset

@NoArgsConstructor
@AllArgsConstructor
@Data
@Builder
public class RegisterApiRequest {
    private String userId;
    private String userPw;
    private String userName;
}

 

RegisterApiResponse

@NoArgsConstructor
@AllArgsConstructor
@Data
@Builder
public class RegisterApiResponse {
    private String userId;
    private String userPw;
    private String userName;
}