ajax 통신, 회원가입 구현하기

💡기존에는 form 태그에 action으로 주소를 걸어서 전송하는 방식을 사용했었는데 여기에서는 기존의 방식이 아닌, JSON을 활용해서 Ajax로 회원가입을 요청하는 방식으로 구현할 것이다.

1. 서버 요청이 들어왔을 때 기본으로 스캔하는 곳인 src/main/resources/static 아래에 user.js 파일을 생성해 준다.

2. 회원가입 버튼이 기존에 submit 타입이었는데 타입을 지우고 id값을 부여해 준다.


      
      
      
    
    
      <html />
    
<button id="btn-save" class="btn btn-primary">회원가입완료</button>

3. id값을 가져와서 자바스크립트 코드를 작성해 준다.

4. 테스트용으로 아무 값을 입력하지 않고 회원가입완료 버튼을 눌러보면 alert창이 잘 뜨는 것을 확인할 수 있다.

5. 이제 ajax 코드를 작성해줄 것이다.

💡회원가입 시 Ajax를 사용하는 2가지 이유?

1. 요청에 대한 응답을 html이 아닌 Data(Json)로 받기 위하여
2. 비동기 통신을 위하여

6. UserApiController 클래스 작성


      
      
      
    
    
      <java />
    
@RestController
public class UserApiController {
	
	@Autowired
	private UserService userService;
	
	@PostMapping("/api/user")
	public ResponseDto<Integer> save(@RequestBody User user) {
		System.out.println("UserApiControllre: save 호출됨");
		user.setRole(RoleType.USER);
		int result = userService.회원가입(user);
		return new ResponseDto<Integer>(HttpStatus.OK,result);
	}
}

7. UserService 코드 작성


      
      
      
    
    
      <java />
    
//스프링이 컴포넌트 스캔을 통해 Bean에 등록을 해줌. IoC를 해준다.
@Service
public class UserService {
	
	@Autowired
	private UserRepository userRepository;
	
	@Transactional
	public int 회원가입(User user) {
		
		try {
			userRepository.save(user);
			return 1;
		}catch (Exception e) {
			e.printStackTrace();
			System.out.println("UserService : 회원가입() : "+e.getMessage());
		}
		return -1;
	}

}

8. 회원가입을 진행해 보면 콘솔창에 메시지가 잘 뜨는 것을 확인할 수 있다.

9. ajax 통신에서 전송할 data를 먼저 alert창에 담았을 때에는 object로 뜨는 것을 확인할 수 있다.

10. 주석을 지우고 회원가입을 진행하면 콘솔 로그에 Http 상태값이 OK로 잘 뜨고

11. DB에도 값이 잘 들어온 것을 확인할 수 있다.

회원가입 시 입력한 데이터

회원가입 후 DB 테이블 조회

중요! : 스크립트 확인시 콘솔창 오류 확인 후 network 페이지에서 제대로 로딩이 되었는지 확인

제대로 안되면 빨간색 뜸 확인 요!

'Springboot > Springboot Blog Project' 카테고리의 다른 글

Service가 필요한 이유 - 메타 코딩 참조- 수정중 (0)	2022.09.24
Ajax를 사용하는 이유 - 메타코딩 유튜브 요약 (0)	2022.09.24
부트스트랩 적용하여 메인 화면 구현하기 (0)	2022.09.24
Springboot 동작원리! (0)	2022.09.24
Json 데이터 통신하기 (0)	2022.09.24

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

'Springboot > Springboot Blog Project' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

'Springboot > Springboot Blog Project' 카테고리의 다른 글

검색 태그

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역