#7-2 / JPA 2 - 회원가입 중복체크 , insert

https://dev-eunse.tistory.com/274  

요기서 만든 membership 페이지로 insert 해볼거임

 

  👀 아이디 중복체크 => jpa로 로드받은 값을 핸들링  

- jsp파일 name값 db 컬럼명과 맞춰줌 

⭐ thymeleaf 시 경로

⭐ html,jsp를 제외한 css,js 등 파일은 모두 webapp에 들어있어야함!!! ⭐

 

 

- memberjoin.js

//아이디 중복체크 => jpa로 로드받은 값을 핸들링 - get통신
function ajax_idck(uid){
	if(uid==""){
		alert("아이디를 입력하세요");
		frm.uid.focus();
	}else{
		var http,result;
		http = new XMLHttpRequest();
		http.onreadystatechange = function(){
			if(http.readyState==4 && http.status==200){
				result = this.response;
				if(result=="true"){
					alert("해당 아이디는 사용할 수 없습니다.");
					frm.uid.value="";
					frm.uid.focus();	
				}else{
					alert("사용가능한 아이디입니다.");
					frm.uid.readOnly=true;
					
					//중복체크 여부를 확인하기 위한 hidden value 핸들링
					document.getElementById("checklist").value="ok";
				}
			}
		}
		http.open("GET","./idcheck?uid="+uid,true);
		http.send(); //post통신이면 여기에 value 전송
	}
}

 

 

- Controller

@Autowired
web_repo wr; //interface load

//ajax get통신으로 id 중복체크
@GetMapping("/checkout/idcheck")
public String idcheck(
        @RequestParam(value="", required = false) String uid,
        HttpServletResponse res
        ) {
    boolean result = wr.findByUid(uid).isPresent();
    wr.flush(); //캐시 누적 방지(캐시메모리 초기화 - 안정적 사용 가능)
    try {
        this.pw = res.getWriter();
        this.pw.print(result);
        this.pw.close();
    } catch (IOException e) {
        e.printStackTrace();
    }

    return null;
}

isPresent()

true,false로 회신해줌

 

 

- web_repo.java (interface)

(   https://dev-eunse.tistory.com/281  )  dao는 어제꺼 쓰고 repo(interface) 만 새로 생성

//회원가입 및 로그인 ,회원리스트 ,회원 삭제, 회원정보수정
public interface web_repo extends JpaRepository<jpa_dao, Integer>{
	@Query("select now()")
	String mysql_times();
	
	//아이디 체크 메소드
	Optional<jpa_dao> findByUid(String uid); //findBy~ : 검색(== select)
}

findBy :

where, 또는 부가적인 order by , group by로  검색하는 select !   

자세한건 다음글에 있음 ㅎ

 

opational 

boolean 으로 받음 (true or false 로 출력)

boot에서 나옴 = 데이터 1개를 기준으로 select / List는 여러개 데이터

 

  👀 회원가입 submit  => data insert  

- memberjoin.js

function member_joinok(){
	var ck = document.getElementById("checklist").value;
	if(ck != "ok"){
		alert("아이디 중복확인을 해주세요");
	}else if(ck=="ok"){
		if(frm.utel.value.length < 11 || frm.utel.value.lenth > 11){
			alert("올바른 연락처를 입력하세요");
		}else if(frm.upost.value==""){
			alert("주소를 입력하세요");
		}else{
			frm.method="post";
			frm.action="./member_join";
			frm.enctype="multipart/form-data"; //이미지 보낼땐 필수
			frm.submit();
		}
	}
}

 

 

- Controller 

@PostMapping("/checkout/member_join")
public String member_join(@ModelAttribute jpa_dao jd,ServletResponse res) {
    res.setContentType("text/html;charset=utf-8");
    jd.setToday(wr.mysql_times()); //mysql server 시간을 입력시킴
    jpa_dao insert = wr.save(jd);
    try {
        this.pw = res.getWriter();
        this.pw.print("<script>"
                + "alert('정상적으로 회원가입이 완료되었습니다.');"
                + "location.href='./checkout/member_list';"
                + "</script>");
        this.pw.close();
    } catch (IOException e) {
        e.printStackTrace();
    } 

    return null;
}

=> insert 잘됨

=>⭐ 원래 insert 되는  jpa_dao insert = wr.save(jd);   요 부분은 모듈로 빠져야함!!! 

 

---

🤷‍♂️ 알아두쇼

 

👀 set

 

[ servlet ]

servlet + jsp + db(class) + Connection & preparedstatement

 

[ spring ]

spring + jstl & jsp + mybatis(config,mapper) + datasource,sqpfactory,sqltemplate

 

[ spring-boot ]

springboot + thymeleaf + mybatis or ( jpa (interface 100% 활용) + findBy를 이용 )