스프링 부트 서버에서
회원 정보의 값을 이런식으로 리턴하도록 설정했다.
자세히보면 team부분은 한명의 사용자가 여러 개의 팀을 가질 수 있어서 배열로 만들어서 리턴해준 것이다.
그래서 저 팀 부분을 View단의 화면에 여러개를 띄워야 한다.
- myPage.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>내 정보</title>
</head>
<body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
console.log(sessionStorage.getItem("token"));
$.ajax({
contentType: "application/json",
type: "POST",
url: "/api/v1/user/mypage",
headers: {'Authorization':sessionStorage.getItem("token")},
dataType: "json",
}).done(function (res) {
console.log("응답 성공");
console.log(res);
const inHtml_username = document.getElementById("username");
inHtml_username.innerHTML = `<a>` + res.id + `</a>`;
const inHtml_name = document.getElementById("user_name");
inHtml_name.innerHTML = `<a>` + res.user_name + `</a>`;
const inHtml_email = document.getElementById("user_email");
inHtml_email.innerHTML = `<a>` + res.user_email + `</a>`;
const inHtml_nickname = document.getElementById("user_nickname");
inHtml_nickname.innerHTML = `<a>` + res.user_nickname + `</a>`;
const inHtml_gender = document.getElementById("user_gender");
inHtml_gender.innerHTML = `<a>` + res.user_gender + `</a>`;
const inHtml_phone = document.getElementById("user_phone");
inHtml_phone.innerHTML = `<a>` + res.user_phone + `</a>`;
const inHtml_birthday = document.getElementById("user_birthday");
inHtml_birthday.innerHTML = `<a>` + res.user_birthday + `</a>`;
//수정된 부분
for(let i=0;i<res.team.length;i++){
const inHtml_team = document.getElementById("team");
inHtml_team.innerHTML += `Team Title : <a>`+res.team[i].title+`</a><br/>`;
}
//------
})
.fail(function (res) {
console.log(res);
alert("로그인 후 접근 가능한 페이지 입니다.");
window.location.replace("/loginPage");
});
</script>
<center><h2>내 정보</h2></center>
<strong>아아디 : </strong>
<span id="username"></span>
<hr/>
<strong>이름 : </strong>
<span id="user_name"></span>
<hr/>
<strong>이메일 : </strong>
<span id="user_email"></span>
<hr/>
<strong>생일 : </strong>
<span id="user_birthday"></span>
<hr/>
<strong>닉네임 : </strong>
<span id="user_nickname"></span>
<hr/>
<strong>성별 : </strong>
<span id="user_gender"></span>
<hr/>
<strong>전화번호 : </strong>
<span id="user_phone"></span>
<hr/>
<!-- 수정된 부분-->
<strong>내가 속한 팀 목록</strong>
<div id="team"></div>
<!-- 수정된 부분-->
</body>
</html>//수정된 부분 을 설명하자면
우선 리턴받은 team을 for문을 돌린다.
team의 배열을 하나씩 찾아가며 team안의 객체 title값을 하나씩 뽑아서 view단에 출력해준다
- 결과
'JAVA' 카테고리의 다른 글
| spring boot 웹소켓통신 메세지 ping pong. (0) | 2022.10.02 |
|---|---|
| Spring Boot 회원 정보 출력 (JPA N+1 문제 해결, Ajax, Thymeleaf) (0) | 2022.09.21 |
| Spring Boot 회원정보 출력 (2) 비동기 통신 Ajax (0) | 2022.09.15 |
| Spring Boot 회원정보 출력 (1) 비동기 통신 Ajax (0) | 2022.09.15 |
| SpringBoot thymeleaf Ajax 비통기 통신 parsererror 이슈 해결 (0) | 2022.09.08 |
댓글