Spring RESTful 사용자 관리 게시판

 

https://hyejin.tistory.com/272

Spring RESTful 사용자 관리 프로젝트 (@RequestBody, @ResponseBody, GET, POST, PUT, DELETE, Postman 설치 및 테스트

여기서 했던 사용자 관리에 대해서 RESTful 웹 서비스 호출을 위해 Ajax 통신방법을 이용할 예정이다. 

Ajax 통신을 하는 복잡한 코드를 간결하게 작성하기 위해서 jQuery $.ajax()를 사용한다. 

 

 

1️⃣ 사용자 목록 조회 

결과 화면 

html 

-> html에는 <thead>만 작성하고, 서버로부터 받은 사용자 데이터를 이용하여 동적으로 테이블의 row를 증가시킬것이다. 

js

js userList 

RestfulController

controller에서 요청 경로를 users로 했기 때문에 ajax의 url도 'users'이다.

그리고 GET 방식이기 때문에 type 도 GET이다. 

사용자 목록 조회 요청이 오면 userListResult에서 응답해 동적으로 테이블의 row를 생성해준다.

 

 

 

2️⃣ 특정 사용자 조회 

결과 화면 

html

js

html 페이지가 로드될때 userSelect() 메서드를 호출한다. 

js - userSelect()

특정 사용자의 id 값을 가져오기 위해 input type을 hidden으로 설정했던 값을 가져와서 사용한다. 

RestfulController

js userSelectResult() 

사용자 조회에 대한 요청이 오면 userSelectResult 함수가 실행된다. 

그리고 RestfulController에서 user객체를 "data"의 이름으로 값을 담아 전달했기 때문에 

var user = xhr.data해서 user값을 가져온다. 

그리고 여기에 각각 값을 입력해주는 것이다. 

 

 

3️⃣ 사용자 정보 등록 

결과 화면 

js

js - userInsert()

폼에 각각 값을 입력하고, 등록 버튼을 누르면 userid, name, gender, city에 입력된 값을 가져와서 var userid, name, gender, city에 저장한다. 

그리고 서버에 이를 보내줘야하기 때문에 JSON으로 바꿔서 전달해준다. 

RestFulController

 

 

 

4️⃣ 사용자 정보 수정 

수정전

수정후

js

js - userUpdate

특정 사용자를 조회했을 때 입력되어있는 값들을 받아 각각 var userid, name, gender, city에 저장하고, 

이를 Json으로 생성하여서 서버로 보낸다.

RestfulController

 

 

5️⃣ 사용자 정보 삭제 

삭제 전

삭제 후

 

js

 

js - userDelete()

 

삭제하기전에는 사용자에게 다시 한번 삭제 요청을 확인한다.

그리고 사용자가 확인버튼을 누르면 ajax로 서버로 삭제를 요청한다. 

 

6️⃣ 사용자 작성 정보 초기화 

초기화전

 

초기화후

 

 

js

js - init()