SpringBoot | CRUD 구현 - 회원가입(Create),Fetch

| 회원가입(Create)

fetch

fetch를 활용하여 POST로 데이터 전달

fetch는 기본적으로 비동기방식이다.

.then() 을 사용하면 동기식으로 처리가능하다

 

JS

function submittest(){
    var RegExp = /^[a-zA-Z0-9]{4,15}$/; //id와유효성 검사 정규식
    var n_RegExp = /^[가-힣a-zA-Z]{2,15}$/; //이름 유효성검사 정규식

    if(user_id.value==''){
        msgbox.innerHTML='아이디를 입력해주세요';
        user_id.focus();
        return false;
    }
    if(!idck){
        msgbox.innerHTML='아이디 중복확인을 해주세요'
        return false;
    }
    if(user_pw.value==''){
        msgbox.innerHTML='비밀번호를 입력해주세요';
        user_pw.focus();
        return false;
    }
    if(user_pw_re.value==''){
        msgbox.innerHTML='비밀번호확인을 입력해주세요'
        user_pw_re.focus();
        return false;
    }
    if(user_pw.value!=user_pw_re.value){
        user_pw.classList.add('nonpass');
        user_pw_re.classList.add('nonpass');
        msgbox.innerHTML='비밀번호를 확인해주세요'
        return false;
    }else{
        user_pw.classList.remove('nonpass');
        user_pw_re.classList.remove('nonpass');
        user_pw.classList.add('pass');
        user_pw_re.classList.add('pass');
    }
    if(!chkPW()){
        return false;
    }
    if(user_name.value==''){
        msgbox.innerHTML='이름을 입력해주세요'
        user_name.focus();
        return false;
    }
    if(!n_RegExp.test(user_name.value)){
        msgbox.innerHTML='이름은 2~15 한/영자만 가능합니다'
        return false;
    }

    fetch('/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            "data":{
                userId:user_id.value,
                userPw:user_pw.value,
                userName:user_name.value,
            }
        }),
    })
        .then((response) => response.json())
        .then((data) => {
            console.log(data)
            if (data.status == 'OK') {
                alert('회원가입완료');
                location.href = "login"
            } else {
                alert('등록에 실패하였습니다. 다시한번 확인해주세요')
            }
        });


}

 

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);
    }

    @Override
    public Header<RegisterApiResponse> create(@RequestBody Header<RegisterApiRequest> request) {
        System.out.println(request.getData());
        return registerApiLogicService.create(request);
    }
}

create에 매핑 어노테이션(@PostMapping(""))이 없는 이유는 상속받은 CrudController에 있기때문

 

스프링은 클래스의 상속 관계를 고려하여 컨트롤러의 매핑 정보를 결정한다. 즉, RegisterApiController에는 @PostMapping("") 어노테이션이 붙어 있지 않지만, 상속 관계를 통해 CrudController의 create 메소드에 있는 @PostMapping("") 어노테이션을 상속받아 사용하게 된다.

@Component
// 컨트롤러 추상화
// 추상클래스 이용해 컨트롤러 정의, API컨트롤러에 상속해줌으로써 중복코드사용 줄일수있음
public abstract class CrudController<Req,Res,Entity> implements CrudInterface<Req,Res> {

    // 상속받는 클래스만 접근가능
    @Autowired(required = false)
    protected BaseService<Req,Res,Entity> baseService;

    @Override
    @PostMapping("")
    public Header<Res> create(@RequestBody Header<Req> request) {
        return baseService.create(request);
    }

    @Override
    @GetMapping("{id}")
    public Header<Res> read(@PathVariable Long id) {
        return baseService.read(id);
    }

    @Override
    @PutMapping("")
    public Header<Res> update(@RequestBody Header<Req> request) {
        return baseService.update(request);
    }

    @Override
    @DeleteMapping("{}")
    public Header delete(@PathVariable Long id) {
        return baseService.delete(id);
    }
}

 

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) {
        RegisterApiRequest body = request.getData();
        MoneyMember moneyMember = MoneyMember.builder()
                .userId(body.getUserId())
                .userPw(body.getUserPw())
                .userName(body.getUserName())
                .profileImage("/image/index/defaultProfileImg.jpeg")
                .build();
        MoneyMember newMoneyMember = baseRepository.save(moneyMember);
        return response(newMoneyMember);
    }

    @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("데이터 없음"));
    }
}

hibernate