728x90
반응형
SMALL
ㅎ현재 시큐리티로 로그인 된 상태이다.
1.메인페이지 에서 사용자 수정폼으로의 이동
메인페이지 일부.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<sec:authorize access="isAuthenticated()"> <li><a href="/member/myProfile"><i class="fa fa-sign-out fa-fw"></i>
마이프로필</a></li>
<li><a href="/member/customLogout"><i class="fa fa-sign-out fa-fw"></i>
로그아웃</a></li>
</sec:authorize>
<sec:authorize access="isAnonymous()">
<li><a href="/member/customLogin"><i class="fa fa-sign-out fa-fw"></i>
로그인</a></li>
</sec:authorize>
|
cs |
|
|
|
로그인 된 사용자는 [마이프로필], [로그아웃] 이라는 메뉴만 보이게 sec 태그 라이브러리를 사용하여 설정해둔 상태이며
마이 프로필을 누르게 되면 회원정보를 수정할 수 있는 폼으로 이동하게 된다.
2.사용자 폼에서의 유저정보 받기
마이프로필.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div>
<div class="box" style="background: #BDBDBD;">
</div>
</div>
<form id="actionForm" action="/member/modify" method="get">
<div class="form-group" >
<label for="name">아이디</label>
<input type="text" class="form-control w200"
name="name" placeholder="아이디" value='<c:out value="${user.userid}" />' readonly="readonly" />
</div>
<div class="form-group">
<label for="website">이름</label>
<input type="text" class="form-control w200"
name="username" placeholder="이름" value='<c:out value="${user.username}" />' readonly="readonly" />
</div>
<div class="form-group">
<label for="intro">소개</label>
<input type="text" class="form-control w200"
placeholder="소개" readonly="readonly" />
</div>
<button type="submit" id="list" class="btn btn-default">목록으로</button>
<button type="submit" id="update" class="btn btn-default">수정</button>
<script> $("#update").on("click",function(e){ self.location ="/member/modify"; }); </script> |
<sccs |
10행: 컨트롤러 단에서 받은 유저 id
16행: 컨트롤러 단에서 받은 유저 이름
25행: 수정을 눌렀을때 수정 페이지로 이동
프로필 컨트롤러 일부..
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@Log4j
@Controller
@AllArgsConstructor
@RequestMapping("/member/*")
public class CommonController {
@PreAuthorize("isAuthenticated()")
//마이프로필 창으로 이동
@GetMapping("myProfile")
public void profile(Principal principal,Model model) {
log.info("마이프로필 창으로 이동");
log.info("유저아이디: "+principal.getName());
String userid=principal.getName();
MemberVO vo=service.read(userid);
model.addAttribute("user", vo);
}
}
|
cs |
ㅇㅇㅇㅇㅇ
7행: 로그인된 유저만이 프로필 페이지로 접근할 수 있다.
10행: Principal 객체를 이용해서 로그인된 사용자의 id값 전달을 이용할 수 있다.
14행: Principal 타입의 유저id를 String으로 변환하여 15행의 매퍼로 부터 유저정보를 꺼내주자.
16행: model을 이용하여 user 객체에 유저정보를 저장하여 프로필페이지로 전달하자.
유저 정보가 전달됨을 확인 할 수 있다.
수정 버튼을 눌렀을때 유저의 프로필 수정 페이지로 이동한다.
3.사용자 수정 페이지에서 사용자 정보 받기, 수정된 내용 갱신하기
간단하게 사용자의 프로필 사진과, 이름만 수정해보자
modify.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<form role="form" action="/member/modify" method="post" id="actionForm">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div>
<!-- ============================================ 프로필 사진 나오는 부분 ============================================ -->
<div class="box" style="background: #bdbdbd;">
</div>
</div>
<div>
<label for="ex_file">프로필 사진 바꾸기</label>
<input name="uploadFile" type="file" accept="image/gif, image/jpeg, image/png"/>
</div>
<div class="form-group" >
<label for="name">아이디</label>
<input type="text" class="form-control w200"
name="userid" placeholder="<c:out value="${user.userid}" />" value='<sec:authentication property="principal.username" />' readonly="readonly" />
</div>
<div class="form-group">
<label for="website">이름</label>
<input type="text" class="form-control w200"
name="username"/>
</div>
</form>
<button type="submit" id='update' class="btn btn-default" data-oper="update">완료</button>
<button type="button" id="reject" class="btn btn-default" >취소</button>
|
cs |
1행: 전송 form 태그 post 형식으로 modify 컨트롤러에 전송한다.
2행: 히든타입으로 csrf 토큰 전송(시큐리티 관련 내용)
12행: 사용자의 프로필 사진 부분
17행:사용자의 이름 수정 부분
modify.jsp 의 js부분
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
function showUploadResult(uploadResultArr){
if(!uploadResultArr || uploadResultArr.length == 0){
return;
}
var uploadUL = $(".box");
var str ="";
$(uploadResultArr).each(function(i,obj){
if(obj.image){
var fileCallPath = encodeURIComponent( obj.uploadPath+ "/s_"+obj.uuid +"_"+obj.fileName);
str += "<li data-path='"+obj.uploadPath+"'";
str +=" data-uuid='"+obj.uuid+"' data-filename='"+obj.fileName+"' data-type='"+obj.image+"'"
str +" ><div>";
str += "<span> "+ obj.fileName+"</span>";
str += "<button type='button' data-file=\'"+fileCallPath+"\' " //button x표시
str += "data-type='image' class='btn btn-warning btn-circle'><i class='fa fa-times'>x</i></button><br>";
str += "<img src='/display?fileName="+fileCallPath+"'>";
str += "</div>";
str +"</li>";
}else if(!obj.image){
return false;
}
uploadUL.append(str);
});
}//End showUploadResult
<script>
$(document).ready(function(){
var formObj = $("form[role='form']");
//완료 버튼 클릭시 수정 진행==========================================================
$("button[type='submit']").on("click", function(e){
e.preventDefault();
//button 의 data-oper 값 가져오기
console.log("완료 버튼 클릭");
var str="";
$(".box li").each(function(i,obj){
var obj = $(obj);
console.dir("obj");
console.log(obj.data("filename"));
//5.수정된 파일정보 히든값으로 넘기기=====================================
str += "<input type='hidden' name='attachList["+i+"].fileName' value='"+obj.data("filename")+"'>";
str += "<input type='hidden' name='attachList["+i+"].uuid' value='"+obj.data("uuid")+"'>";
str += "<input type='hidden' name='attachList["+i+"].uploadPath' value='"+obj.data("path")+"'>";
str += "<input type='hidden' name='attachList["+i+"].fileType' value='"+ obj.data("type")+"'>";
});
console.log(str);
formObj.append(str).submit();
});
var csrfHeaderName ="${_csrf.headerName}";
var csrfTokenValue ="${_csrf.token}";
$("input[type='file']").change(function(e){
var formData = new FormData();
var inputFile = $("input[name='uploadFile']");
var files = inputFile[0].files;
/
for(var i=0; i<files.length; i++){
//확인 메서드에서 false가 나오면 안됨
if(!checkExtension(files[i].name, files[i].size)){
return false;
}
//append:요소추가
formData.append("uploadFile",files[i]);
}
//ajax로 서버(uploadAjaxAction)에 전송
$.ajax({
url: '/uploadAjaxAction',
processData: false,
contentType: false,
//ajax로 csrf토큰 전송
beforeSend: function(xhr){
xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);
},
data: formData,
type: 'POST',
dataType: 'json',
success: function(result){
console.log(result)
showUploadResult(result);
}
}); // End ajax
}); //End change
</script>
|
cs |
1행: 파일 업로드시 이미지 로 뷰단에 보이게끔 하는 함수
11행: 파일정보를 불러오면서 li 태그안에 파일 주소, 이름 과 같은 정보를 담는다.
36행: 수정완료 버튼 누를시에 47행의 파일 정보를 히든 태그로 담아서
53행: 폼태그에 같이 전달해준다.
60행: 업로드 파일의 변경이 감지되면
78행: ajax 형식으로 서버에 파일을 갱신해준다.
90행: 실제 서버에 파일이 등록되면 showUploadResult 함수를 콜백하여 이미지를 불러오도록하자.
(수정완료버튼을 누르지 않고 파일만 변경해도 파일자체는 실제 서버에 업로드가 된다. 허나 db내에는 등록되지 않는다. 버튼을 눌렀을때만 유저 아이디에 대조되는 파일내용이 db내에 등록되고 쓸데없이 서버에 업로드된 파일들은 추후에 비교 트리거를 이용하여 db내에 파일과 서버에 업로드된 파일의 내용을 대조하여 일치하지 않을시 삭제해주는 트리거를 만들어 이를 해결할 것이다.)
3-1. 현재 사용자의 정보를 확인하자.
파일테이블
현재 admin90의 유저아이디로 파일테이블에 파일정보가 등록되어있다.
유저테이블
admin90 의 회원이름은 "윤주영" 으로 등록되어있다.
수정을 진행해보자!
프로필 사진과, 유저이름의 변경을 시도한다.
4. 수정 컨트롤러
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//프로필 사진 가져오기
@GetMapping(value="/getAttachList", produces=MediaType.APPLICATION_JSON_UTF8_VALUE)
@ResponseBody
public ResponseEntity<List<BoardAttachVO>>getAttachList(String userid){
log.info("getAttachList: "+userid);
log.info(service.getAttachList(userid));
return new ResponseEntity<>(service.getAttachList(userid),HttpStatus.OK);
}
//마이프로필 수정
@PreAuthorize("isAuthenticated()")
@PostMapping("modify")
public String modify(MemberVO vo,RedirectAttributes rttr) {
log.info("/modify");
int result = service.update(vo);
if(result>0) {
rttr.addFlashAttribute("result","success");
}
return "redirect:/member/myProfile";
}
|
cs |
14행: 수정된 사용자 정보를 파라미터로 수집한다.
16행: 수정메서드 실행
수정 컨트롤러에서 주입되는 service의 수정 메서드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@Transactional
@Override
public int update(MemberVO vo) {
// TODO Auto-generated method stub
log.info("==수정된 회원정보==: "+vo);
//프로필 변경하기 위해서 기존의 프로필 파일을 먼저 삭제해준다.
AttachMapper.deleteUser(vo.getUserid());
//변경 적용
int cnt = mapper.update(vo);
//변경 적용후 변경내용에 프로필 사진이 포함되어 있으면 프로필 내용도 새로 갱신해준다.
if(cnt!=0 && vo.getAttachList()!=null && vo.getAttachList().size()>0) {
vo.getAttachList().forEach(attach ->{
attach.setUserid(vo.getUserid());
AttachMapper.insertUser(attach);
});
}
return cnt;
}
|
cs |
7행: 기존 userid 로 저장됫던 프로필 사진을 먼저 삭제한다.
9행: 입력된 수정내용을 db에 갱신한다.
12행: 수정된 내용중에 파일내용또한 포함되어 있으면 파일 내용또한 같이 갱신해준다.
5.변경후 결과 확인
파일테이블
유저테이블
뷰 단에서의 결과와 db의 내용이 같이 수정된 것을 확인 할 수있다.
728x90
반응형
LIST
'SPRING > 스프링' 카테고리의 다른 글
| [스프링]24. 프로퍼티(properties) 값 가져와서 쓰기. (0) | 2021.07.16 |
|---|---|
| [스프링]23. 대댓글 구현(스프링 레거시) (0) | 2021.07.14 |
| [스프링]21. 로그인된 사용자의 정보 출력하기(feat.스프링 시큐리티) (0) | 2021.06.10 |
| [스프링]20. summernote를 이용한 글쓰기 폼 구현 (0) | 2021.05.31 |
| [스프링]19. ajax 파일 전송에 대한 이해(1) (0) | 2021.05.25 |
