JS 세팅 resource - static에 js폴더를 만들고 그 안에 user폴더 생성한다. user폴더에 user.js를 만들고 다음같이 작성한다. 그리고 jQuery를 사용해 다음같이 작성한다.
1 2 3 4 5 6 7 8 9 10 11 let index = { init : function ( ) { $("#btn-save" ).on("click" ,()=> { this .save(); }); }, save : function ( ) { alert('user의 함수 호출' ); } } index.init();
그리고 joinForm.jsp에 가서 button태그가 form에 있으면 submit이 같이 되기 때문에 button태그 바깥으로 빼준다. 그리고 버튼 태그의 type 속성을 지우고, id = “btn-save”를 넣어준다. 그리고 스크립트 태그로 우리가 만든 user.js 태그를 사용해서 연결한다.
1 2 3 4 5 </form > <button id ="btn-save" class ="btn btn-primary" > 회원가입</button > </div > <script src = "/blog/js/user.js" > </script >
이제 joinForm.jsp에서 스크립트 태그를 읽게되면, js파일의 init을 호출하게 되고, init은 save함수를 호출하게 되므로 user의 함수 호출이라는 알림이 뜨게 된다!
그러고 나서 user.js를 다음같이 데이터를 받아오도록 하고 브라우저 개발자 도구의 콘솔로 확인해볼 수 있도록 해보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 let index = { init : function ( ) { $("#btn-save" ).on("click" ,()=> { this .save(); }); }, save : function ( ) { let data = { username : $("#username" ).val(), password : $("#password" ).val(), email : $("#email" ).val() } console .log(data); } } index.init();
Ajax 요청으로 회원가입 처리하기 Ajax를 왜 사용할까? 링크
user.js에 Ajax로 다음과 같이 작성하자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 let index = { init : function ( ) { $("#btn-save" ).on("click" ,()=> { this .save(); }); }, save : function ( ) { let data = { username : $("#username" ).val(), password : $("#password" ).val(), email : $("#email" ).val() }; $.ajax({ type : "POST" , url : "/blog/api/user" , data : JSON .stringify(data), contentType : "application/json; charset=utf-8" , dataType : "json" }).done(function (resp ) { console .log(resp); alert("회원가입완료" ); location.href = "/blog" ; }).fail(function (error ) { alert(JSON .stringify(error)); }); } } index.init();
이 코드를 해석하면 this.init은 btn-save를 가진 태그가 클릭되는지 감시하는 리스너를 활성화한다. 클릭이 되면 this.save를 호출한다.
this.save는 회원가입 페이지에서 입력한 3가지 변수를 가져와 js객체에 할당하고, Ajax로 서버에 회원가입을 요청한다.
Ajax의 요청할 때 코드는 이런 의미다. 어떤 종류의 요청인지? 어떤 url로 요청할 것인가?(js오브젝트를 json으로) body에 어떤 데이터를 담아 보낼 것인가? body에는 어떤 형식의 데이터를 담았는가? 응답을 받을 때 어떤 형식으로 오는가?
그리고 나서 성공했을 때의 done과 실패했을 때의 fail을 작성했다. done은 완료 메시지를 브라우저가 표시하고, 메인화면을 표시하도록 한다. fail은 자바 객체로 받은 error를 json으로 바꿔 브라우저에 표시한다.
UserApiController 클래스 이제 controller 패키지에 api 패키지를 만들고 UserApiController 클래스를 만들어 메소드를 만들자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 @RestController public class UserApiController { @Autowired private UserService userService; @PostMapping("/api/user") public ResponseDto<Integer> save (@RequestBody User user) { System.out.println("UserApiController save called" ); user.setRole(RoleType.USER); userService.signUp(user); return new ResponseDto<Integer>(HttpStatus.OK.value(), 1 ); } }
여기에는 dto와 service 개념이 필요한데, 일단 dto 패키지를 만들어 ResponseDto클래스를 만들자.
1 2 3 4 5 6 7 8 @Data @NoArgsConstructor @AllArgsConstructor @Builder public class ResponseDto <T > { int status; T data; }
이 객체는 데이터와 http 상태 코드를 저장하는 변수가 있다.
그리고 데이터베이스 트랜잭션을 담당하는 service는 링크 를 참고하자. 서비스도 service 패키지를 만들어서 UserService 클래스를 만들자.
1 2 3 4 5 6 7 8 9 10 11 @Service public class UserService { @Autowired private UserRepository userRepository; @Transactional public void signUp (User user) { userRepository.save(user); } }
레포지토리를 DI로 가져와서, signUp메소드 속 트랜잭션들을 묶어서 처리한다.
요약 이제 회원가입 페이지에 들어가면 user.js에 따라 버튼에 이벤트 리스너가 켜지고, 내용을 넣고 회원가입 버튼을 누르면, 내용을 js객체로 담고 Ajax로 json으로 바꿔서 url로 요청한다.
UserApiController에 있는 useService서비스를 실행시켜 데이터를 DB에 저장하고 ResponseDto에 http상태와 성공유무 알게 하는 정수 값을 반환한다. 요청 성공/실패에 따라, 브라우저가 메시지를 나타낸다!