포토그램 인증 구현하기
회원정보 수정 구현
이제 회원정보 수정을 진행 할거다.
update.jsp 부분에서 프로필 수정 form태그 부분에
PUT 같은 경우는 이렇게 넣어서 진행 할 수 없다.
PUT이나 DELETE 같은 경우는 자바스크립트를 이용해서 요청을 해야한다.
제출 버튼을 클릭 했을 때 update 함수를 호출하게 만들어준다
<button onclick="update()">제출</button>
Java
복사
소스 하단에 update.js를 추가해주고
<script src="/js/update.js"></script>
Java
복사
update.js에 잘 실행되는지 alert하나를 추가해준다
// (1) 회원정보 수정
function update() {
alert("update")
}
Java
복사
이제 데이터를 다 담아서 요청해볼거다.
<button type="button" onclick="update(${principal.user.id } ,event)">제출</button>
Java
복사
// (1) 회원정보 수정
function update(userId, event) {
console.log(event);
}
Java
복사
버튼 클릭시 console.log로 찍힌다
event 부분은 빼주고
<button type="button" onclick="update(${principal.user.id })">제출</button>
Java
복사
// (1) 회원정보 수정
function update(userId) {
let data = $("#profileUpdate").serialize();
console.log(data);
}
Java
복사
jquery 사용 가능한 이유는 header부분에 이미 추가해줬기 때문이다.
serialize()를 하면은 id가 profileUpdate인 form 데이터가 다 담긴다.
$.ajax({
}).done(res=>{
}).fail(error=>{
});
Java
복사
ajax 틀 만들어주고
$.ajax({
type: "put",
url : '/api/user/${userId}',
data: data,
contentType : "application/x-www-form-urlencoded: charset=utf-8",
dataType : "json"
}).done(res=>{
console.log("update 성공")
}).fail(error=>{
console.log("update 실패")
});
Java
복사
해당 update 관련된 Controller를 만들어주자.
web 안에 api 폴더를 생성
api 폴더 안에 UserApiController.java 생성
@PutMapping("/api/user/{id}")
public String update() {
};
Java
복사
update해서 넘겨줄 데이터를 담아줄 DTO를 미리 생성해주자
dto 폴더 안에 user 폴더 생성 UserUpdateDto.java 생성
package com.cos.photogramstart.web.dto.user;
import com.cos.photogramstart.domain.user.User;
import lombok.Data;
@Data
public class UserUpdateDto {
private String name; //필수
private String password; //필수
private String website;
private String bio;
private String phone;
private String gender;
// 조금 위험함. 코드 수정이 필요할 예정 (필수값이 아닌 데이터들도 포함되어 있어서)
public User toEntity() {
return User.builder()
.name(name)
.password(password)
.website(website)
.bio(bio)
.phone(phone)
.gender(gender)
.build();
}
}
Java
복사
필수가 아닌 데이터를 entity로 만들면 위험하다.
UserApiController.java에 다시 dto 추가한 부분을
@PutMapping("/api/user/{id}")
public String update(UserUpdateDto userUpdateDto) {
System.out.println(userUpdateDto);
return "ok";
};
Java
복사
다시 제출하면 오른쪽에 update 실패라 뜨는데 json 으로 받기로 되어있었는데 String으로 받아서 그렇다.
