이전에 UserList로 전체 User를 출력하는 것을 만들었는데 이번에는 특정 유저만 출력하도록 해보겠다. 이번에는 List를 만들면서 필요한 패키지나 클래스들을 미리 만들어놨기때문에 조금 수월할 것으로 예상된다.
userList.jsp 에서 onclick 이벤트 만들기
이미 만들어놓은 userList에서 해당 user의 아이디를 onclick하면 userList를 지우고 해당 user의 정보만 나오도록 해보겠다.
먼저 userList.jsp로 가서 id부분에 span을 주고 onclick 이벤트로 userDetail() function을 호출하겠다. 또한, 해당 id를 가지고 요청을 보내기위해 function을 호출하면서 id를 실인수로 담아놓겠다.
a태그 처럼 보이게 간단한 css 만들기
span을 클릭하려니까 클릭하는 느낌이 없기도하고 해서 간단한 css를 줘서 a태그처럼 보이게 하겠다.
해당 위치에 style.css 를 만들고 textlink 클래스를 가진 태그들에게 클릭하는 느낌을 주었다.
그리고 userManagement.jsp에 link를 걸어주고 css 효과를 원하는 태그의 class 이름을 textlink로 만들어준다.
잘 적용 된 모습이다.
function userDetail() 기능 구현
userManagement.js 으로 넘어가서 function을 만들어준다.
userList.jsp에서 id를 실인자로 보냈으니까 id를 매개변수로 받아줘야한다.
이번에는 RESTApi 기법으로 data만 받아서 자바스크립트에서 직접 table을 만들어주겠다.
url에는 요청값을 적고 (PathVariable 형태로 요청)
resultHTML 에는 Table을 직접 그려주겠다.
(나중에 알았는데 PathVariable 형태로 스크린샷을 찍은게 아니다.. 아래 코드를 보면 PathVariable 형태로 요청으로 코드를 바꾸었다.)
function userDetail(id){
let url = "/rest/userDetail/"+id; // PathVariable 형태로 요청
let resultHTML = "";
axios.get(url
).then(response => {
console.log(JSON.stringify(response.data)); // 응답받은 데이터를 콘솔에 출력
document.getElementById('textArea01').innerHTML=''; // UserDetail을 출력하기위해 textArea01의 userList 값을 삭제
let userDetail = response.data; // userDetail 값을 할당 받고
resultHTML = // table을 만들어줌
`
<table border=1>
<caption>회원정보</caption>
<tr height="40">
<th bgcolor="BlueViolet">ID</th>
<td>${userDetail.id}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">Password</th>
<td>${userDetail.password}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">Name</th>
<td>${userDetail.name}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">Age</th>
<td>${userDetail.age}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">Jno</th>
<td>${userDetail.jno}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">Info</th>
<td>${userDetail.info}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">Point</th>
<td>${userDetail.point}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">Birthday</th>
<td>${userDetail.birthday}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">추천인</th>
<td>${userDetail.rid}</td>
</tr>
<tr height="40">
<th bgcolor="BlueViolet">이미지</th>
<td><img alt="mainImage" src="/resources/uploadImages/${userDetail.uploadfile}" width="300"height="200"></td>
</tr>
</table>
`;
document.getElementById('textArea01').innerHTML = resultHTML; // 위에서 만든 최종 Table을 출력
}).catch(err => {
alert("UserDetail 요청 중 error 발생 => " + err.message);
});
}
function에서 data만 받아서 직접 table을 그려서 출력해주기 위해서 table을 function에서 만들었다.
백엔드 처리 service, mapper
service는 해당 요청을 추가하면되고 이번 mapper 방식은 xml 방식이 아니라 @(에노테이션) 방식으로 해보겠다.
Service, serviceImpl에 userDetail() 추가
userMapper Interface에 에노테이션 방식으로 SQL 문 추가
이렇게 하면 UserMapper.xml에 sql을 적을 필요가 없다.
백엔트 처리 RESTContoller
이제 서버DB와 접촉해서 UserDetail 의 데이터를 전송하겠다.
RESTContoller로 넘어가서 PathVariable 형태로 id를 전달받고 매개변수로 받은 id를 앞서 지정한 userDetail SQL문을 통해 서버에서 데이터를 받겠다.
받은 데이터가 null이 아니라면 status에 200번대 OK 값과 dto 값을 리턴하고
받은 데이터가 null이라면 status에 500번대 BAD_GATEWAY 값과 dto 값을 리턴한다.
UserDetail 요청해보기
이제 서버에서 UserList.jsp 로 가서 유저의 이름을 클릭해보면 List가 지워지면서 detail이 출력되어야 한다.
user03 박민수 클릭
UserList가 지워지고 UserDetail (박민수의 정보) 만 출력되는 모습
느낀점
실수가 몇 있었지만 수십분 앉아서 찾아내는 오류가 아니라 그냥 하다보니 "아맞다! PathVariable 형태로 요청했어야했는데!" 수준의 실수라서 따로 문제발생 태그를 만들지 않았다. 역시 한번 만들어진 코드라서 블로그를 쓰면서 하는데도 금방 만들수 있었다.
그래도 두세번 넘게 한거라 좀 수월했던 것 같다.
git URL
