본문 바로가기
프로그래밍/SpringBoot

[스프링 부트 게시판] 회원정보 수정 / ajax 비동기 처리

by 소소로드 2020. 10. 22.

회원정보 수정 / ajax 비동기 처리

회원가입 처리에 이어 내 회원정보를 수정하고 로그아웃을 하는 예제를 만들어 볼텐데
회원 정보 수정과 로그아웃은 게시판 리스트 페이지에서 진행된다.

로그인을 하면 나를 반가워하는 문구와
회원정보 수정, 로그아웃이 나오는 화면,
그리고 회원정보 수정을 누르면 비밀번호를 수정할 수 있는 예제를 진행할 것이다.

1. 게시판 리스트에 회원정보 화면 구현 


boardList.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
</head>
<body>
<h2>[게시판 리스트]</h2> // 추가된 부분
<div style="margin-bottom: 10px">
    <% 
        if(session.getAttribute("member") == null) {
            out.println("<a href='/'로그인</a>");
        } else {
            MemberVO vo = (MemberVO)session.getAttribute("member");
            out.println(vo.getMemberId() + "님 반갑습니다.<br>");
        }
    %>
<button type="button" onclick="location.href='memberModify'">회원정보 수정</button>
<button type="button" onclick="location.href='logout'">로그아웃</button>
</div>
<table border="1">
    <tr>
        <th>글번호</th>
        <th>작성자</th>
        <th>제목</th>
        <th>작성시간</th>
    </tr>
    <c:forEach items="${list}" var="data">
    <tr>
        <td>${data.num}</td>
        <td>${data.writer}</td>
        <td><a href="/boardRead?num=${data.num}">${data.title}</a></td>
        <td><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${data.regdate}"/></td>
    </tr>
    </c:forEach>
</table>
<button type="button" onclick="location.href='boardWriteForm'">글쓰기</button> 
    
<ul class="paging">
    <c:if test="${paging.prev}">
        <span><a href='<c:url value="/boardList?page=${paging.startPage-1}"/>'>이전</a></span>
    </c:if>
    <c:forEach begin="${paging.startPage}" end="${paging.endPage}" var="num">
        <span><a href='<c:url value="/boardList?page=${num}"/>'>${num}</a></span>
    </c:forEach>
    <c:if test="${paging.next && paging.endPage>0}">
        <span><a href='<c:url value="/boardList?page=${paging.endPage+1}"/>'>다음</a></span>
    </c:if>
</ul>
</body>
</html>
cs

// 추가된 부분을 추가하면 된다.
이 부분에서 session.getAttribute("member")은
Login 컨트롤러의 session.setAttribute("member", member)에 대비되는 내용이다.

이름을 정해주었으니 사용한다는 의미로 getAttribute를 사용한다.


2. 회원정보 수정 화면 구현

BoardController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 회원정보 수정 화면 구현 : GET방식 @RequestMapping(value="/memberModify", method=RequestMethod.GET)
    public String memberModifyGET(HttpServletRequest req, Model model, MemberVO memverVO) throws Exception {
        
        HttpSession session = req.getSession();
        
        MemberVO member = (MemberVO) session.getAttribute("member");
        MemberVO modifyMember = boardService.membermodifyGET(member.getMemberId());
        
        model.addAttribute("modifyName", modifyMember.getMemberName());
        model.addAttribute("modifyId", modifyMember.getMemberId());
        model.addAttribute("modifyPass", modifyMember.getMemberPass());
        
        return "memberModify";    
    }
cs

여기서 해주는 작업은 GET방식으로 회원정보 수정 화면을 보여주기만 하면된다.

회원수정 버튼을 누르면 세션에 저장된 정보를 가져와서 수정할 수 있어야 한다.
그러기 위해서는 로그인 부분을 만들 때 사용한 member를 가져오면 된다.
 
session.setAttribute("member", member); 으로 세션의 이름을 정해준 것처럼
현재의 세션을 가져올 때 member라는 키워드로 가져오면 된다. 
그리고 그 정보를 model로 담아서 jsp로 보내지는데 그때 어떤 식으로 사용되는지가 중요하다.


BoardService, BoardMapper, BoardMapper.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//BoardService
 public MemberVO membermodifyGET(String memberId) throws Exception {
        return boardMapper.memberModifyGET(memberId);
 }
 
//BoardMapper
 public MemberVO memberModifyGET(String memberId) throws Exception;
 
//BoardMapper.xml
<select id="memberModifyGET" resultType="MemberVO" parameterType="String">
        SELECT *
        FROM hello_member
        WHERE memberId = #{memberId}
</select>
cs

결국 세션 member에서 추출한 memberId를 통해
member의 정보들을 가져와서 수정화면에 뿌려주게 된다.


memberModify.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<html>
<body>
<h2>[회원정보 수정]</h2>
<form action='<c:url value='/register'/>' method="post">
    <div>이름<input type="text" name="memberName" id="memberName" value="${modifyName}" readonly="readonly"></div>    
    <div>아이디<input type="text" name="memberId" id="memberId" value="${modifyId}" readonly="readonly"></div>
    <div>비밀번호<input type="text" name="memberPass" id="memberPass" value="${modifyPass}"></div>
</form>
    <button type="button" id="submit" onclick="modifyMember()">수정완료</button>
    <button type="button" onclick="location.href='/boardList'">처음으로</button>
    <button type="button" onclick="deleteMember()">회원 탈퇴</button>
</body>
</html>
cs

[controller의 Model을 jsp에서 받기]

Controller에서 Model로 값을 받은 경우,  value="${model값}" 이렇게 담아주면 된다.

model.addAttribute("modifyName", modifyMember.getMemberName());
<->
value="${modifyName}"


3. 회원정보 수정 기능 구현

BoardController

1
2
3
4
5
6
7
8
// 회원정보 수정 기능 구현 : POST방식 (회원정보 수정시 비동기 처리로 수정해주는 역할) 
    @RequestMapping(value="/memberModify", method=RequestMethod.POST)
    public String memberModifyPOST(@RequestBody MemberVO memberVO) throws Exception {
 
        boardService.memberModifyPOST(memberVO);
 
        return "memberModify";
    }
cs

2번의 화면 구현과 3번의 기능 구현은 도착하는 url은 같지만 완전히 다른 내용이다.
2번에서는 GET방식으로 오로지 화면만 구성한다. 그외의 할일은 없다.
3번에서는 GET방식으로 구현한 화면에서 비밀번호를 바꾸고 '수정완료'를 눌렀을때
비동기 방식으로 실시간 처리를 하면서 비밀번호를 변경한다.

@RequestBody는 전 ajax에서 설명함
https://yulfsong.tistory.com/67



BoardService, BoardMapper, BoardMapper.xml

1
2
3
4
5
6
7
8
9
10
11
//BoardService public void memberModifyPOST(MemberVO memberVO) throws Exception {
        boardMapper.memberModifyPOST(memberVO);
     }
//BoardMapper 
public void memberModifyPOST(MemberVO memberVO) throws Exception;
  //BoardMapper.xml
<update id="memberModifyPOST" parameterType="MemberVO">
        UPDATE hello_member
        SET memberPass = #{memberPass}
        WHERE memberId = #{memberId}
 </update>
cs

mapper부분을 보면 해당 id라는 조건에서 비밀번호를 바꾼다는 것을 알 수 있다.



memberModify.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<html>
<head>
<script type="text/javascript">
 
/* ajax를 통한 비밀번호 수정처리 */
function modifyMember() {
    
    var memberId = $("#memberId").val();
    var memberPass = $("#memberPass").val();
    
    var param = {"memberId":memberId, "memberPass":memberPass}
    
    if(memberPass == '') {
        alert("비밀번호를 올바르게 입력해주세요.");
    } else {
        $.ajax({
            anyne:true,
            type:'POST',
            data: JSON.stringify(param),
            url:"/memberModify",
            dataType: "text",
            contentType: "application/json; charset=UTF-8",
            success : function(data) {    
                alert("비밀번호 변경이 완료되었습니다.");
                location.href="/boardList";
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert("ERROR : " + textStatus + " : " + errorThrown);
            }        
        })
    }
    
}
</script>
</head>
<body>
<h2>[회원정보 수정]</h2>
<form action='<c:url value='/register'/>' method="post">
    <div>이름<input type="text" name="memberName" id="memberName" value="${modifyName}" readonly="readonly"></div>    
    <div>아이디<input type="text" name="memberId" id="memberId" value="${modifyId}" readonly="readonly"></div>
    <div>비밀번호<input type="text" name="memberPass" id="memberPass" value="${modifyPass}"></div>
</form>
    <button type="button" id="submit" onclick="modifyMember()">수정완료</button>
    <button type="button" onclick="location.href='/boardList'">처음으로</button>
    <button type="button" onclick="deleteMember()">회원 탈퇴</button>
</body>
</html>
cs

[ajax를 통한 비밀번호 수정처리]

ajax 옵션에 대한 자세한 설명은 역시 
https://yulfsong.tistory.com/67 여기서 설명해두었다.


var memberId = $("#memberId").val();    // memberId가 일치하는지를 통해서 비밀번호 변경이 가능
var memberPass = $("#memberPass").val(); // memberPass를 변경하기 위해서 사용
var param = {"memberId":memberId, "memberPass":memberPass}
// mapper의 조건에 id, pass가 둘다 필요해서 자바스크립트 형식으로 만들어서 ajax통신한다. 
"memberId"라는 이름을 가진 memberId(수정시 칸에 써진 id) 라는 뜻이다.
참고로 이 구문을 자바스크립트 콘솔에 넣어보면 더 명확히 알 수 있다.
그냥 이름을 지정해서 val값을 보낸다고 생각하면 편한 것 같다.


data: JSON.stringify(param)

JSON.stringify()는 javascript값(내 경우는 param)을 json데이터로 변경한다.
이 변경된 json데이터가 controller에 들어가면 @RequestBody를 만나며
이 어노테이션은 json데이터를 자바 객체로 매핑한다.

즉 param -> json -> java 이렇게 변환되는 셈이다

그래서 통신이 성공하면 비밀번호 변경이 되었다는 문구와 함께 게시판으로 돌아가고,
실패시 에러 내용이 뜬다. jqXHR, textStatus, errorThrown는 에러 내용을 보여줘서 은근히 유용하다.

테스트시 문구가 뜨고, DB에도 반영이 되었다면 성공한 것이다.

저작자표시 비영리 변경금지

'프로그래밍 > SpringBoot' 카테고리의 다른 글

@ResponseBody와 @RequestBody는 언제써야할까  (1) 2021.01.03
[스프링 부트 게시판] 회원 탈퇴, 로그아웃 / ajax 비동기 처리  (0) 2020.10.23
[스프링 부트 게시판] 회원가입 / ajax 비동기 처리  (0) 2020.10.15
[스프링 부트 게시판] 로그인 기능 / 세션 구현하기  (0) 2020.10.15
[스프링 부트 게시판] 게시글 삭제 만들기  (0) 2020.09.30

관련글

티스토리툴바