[Spring] 회원정보 수정

[Spring] 회원정보 수정

◇ 회원정보 수정

회원가입 후 정보수정은 그동안 하던 방식과는 다르게 페이지 구현에 앞서 쿼리문과 서비스, 컨트롤러부터 구현한 후 보여지는 화면을 가장 마지막에 구현했다. (이게 원래 회사에서 진행하는 방식이라고 하셨다.)

UPDATE TBL_USER SET USER_PWD = #{userPwd}, USER_NAME = #{userName}, USER_EMAIL = #{userEmail} WHERE USER_ID = #{userId}

update로 하면 타입은 자동으로 int로 지정된다고 한다. 쿼리를 작성한 후에는 쿼리문의 id인 userUpdate와 동일한 이름으로 UserDao.java페이지에 추상메소드를 정의해주면 된다.

public int userUpdate(User user);

그 후에는 UserService.java로 가서 쿼리문을 실행하는 로직을 구현해준다. (서비스가 메소드를 호출하는 역할!)

//사용자 정보 수정 public int userUpdate(User user) { int count = 0; try { count = userDao.userUpdate(user); } catch(Exception e) { logger.error("[UserService] userUpdate Exception", e); } return count; }

다 되었다면 컨트롤러에서 다른 친구들을 호출할 수 있도록 코드를 작성해주면 된다.

그 전에 잠시 네비게이션 페이지를 보면 로그인을 했을때는 아래처럼 세개가 메뉴바에 나오게 되어있다.

로그아웃 회원정보수정 게시판

그런데 우리는 아직 이 updateForm 화면도 보이도록 해두지 않은 상태이기 때문에, 요청이 들어오면 컨트롤러에서 가장 먼저 화면을 요청할 수 있는 코드부터 짜보도록 했다. 이번에는 ModelMap객체를 받을건데, ModelMap은 화면에 값을 뿌려줄때 유저객체를 새로 선언하지 않아도 되도록 도와주는 객체,,? 라고 한다 ,, (사실 의미를 잘 이해를 하지 못했다,,)

//회원정보 화면 @RequestMapping(value="/user/updateForm", method=RequestMethod.GET) //리턴형태 jsp : 타입 String public String updateForm(ModelMap model, HttpServletRequest request, HttpServletResponse response) { //쿠키받아오기 String cookieUserId = CookieUtil.getHexValue(request, AUTH_COOKIE_NAME); //객체읽어오기 User user = userService.userSelect(cookieUserId); //모델맵을 받아서 화면에 뿌려주기 위한 용도. /user/updateForm에서 얘를 쓸 수 있게 할거임 model.addAttribute("user", user); //jsp에서 "user"라는 이름으로 user객체를 쓸거야 return "/user/updateForm"; }

다음으로는 회원정보 수정 버튼이 눌린 후 ajax통신의 요청을 처리하기 위한 코드를 작성했다. ajax를 받아야 해서 ResponseBody를 사용한다.

//회원정보 수정 @RequestMapping(value="/user/updateProc", method=RequestMethod.POST) @ResponseBody public Response updateProc(HttpServletRequest request, HttpServletResponse response) { Response ajaxResponse = new Response(); //로그인되는지 봐야하니까 쿠키아이디 필요하고, 화면에서 비번/이름/이메일 받을거임 String cookieUserId = CookieUtil.getHexValue(request, AUTH_COOKIE_NAME); String userPwd = HttpUtil.get(request, "userPwd"); String userName = HttpUtil.get(request, "userName"); String userEmail = HttpUtil.get(request, "userEmail"); //쿠키값비어있을때 if(!StringUtil.isEmpty(cookieUserId)) { User user = userService.userSelect(cookieUserId); if(user != null) { //정상적으로 사용하고있는 회원인지 확인 if(StringUtil.equals(user.getStatus(), "Y")) { //사용중 if(!StringUtil.isEmpty(userPwd) && !StringUtil.isEmpty(userName) && !StringUtil.isEmpty(userEmail)) { //내용이 다 채워져있음 user.setUserName(userName); user.setUserPwd(userPwd); user.setUserEmail(userEmail); if(userService.userUpdate(user) > 0) { //0보다크면 정상적으로 처리 ajaxResponse.setResponse(0, "Success"); } else { //0보다 적으면 문제있음 ajaxResponse.setResponse(500, "internal server error"); } } else { //하나라도 값이 넘어오지않음= 쿠키날리고 오류응답 CookieUtil.deleteCookie(request, response, AUTH_COOKIE_NAME); ajaxResponse.setResponse(400, "Bad Request") } } else { //사용중이 아니다 = 쿠키날리고 오류응답 CookieUtil.deleteCookie(request, response, AUTH_COOKIE_NAME); ajaxResponse.setResponse(400, "Bad Request"); } } else { //유저정보가 없다. 근데 쿠키는 있다. => 쿠키삭제 & 오류코드 보내기 CookieUtil.deleteCookie(request, response, AUTH_COOKIE_NAME); ajaxResponse.setResponse(404, "Not Found"); } } else { //로그인 된 정보가 아니다 = 파라미터값이 잘못되었다. ajaxResponse.setResponse(400, "Bad Request"); } return ajaxResponse; }

다음으로는 보여지는 화면에 대한 내용이다. 그 중 우리는 바디 부분과 스크립트 부분을 구현했는데, 먼저 바디를 보자면 아래와 같다, (바디는 우리가 구현했다기 보다는 아래처럼 인풋박스에 value부분이 나오도록 채워줬다.)

<%@ include file="/WEB-INF/views/include/navigation.jsp" %> 회원정보수정 사용자 아이디 ${user.userId} 비밀번호 비밀번호 확인 사용자 이름 사용자 이메일 수정

사용자 비밀번호, 사용자 이름, 사용자 이메일은 수정에 앞서 먼저 설정되어있던 정보를 뿌려주기 위해 value값에 ${user.userPwd}등의 내용을 채워준다. 사용자 아이디는 변경할 수 없으므로 고정값으로 ${user.userId}을 넣어뒀다.

다음은 Script 부분인데, 물론 이번에도 정규식 등은 이전에 했던 부분이라 우리가 채우진 않았다.

$(document).ready(function() { $("#btnUpdate").on("click", function() { // 모든 공백 체크 정규식 var emptCheck = /\s/g; // 영문 대소문자, 숫자로만 이루어진 4~12자리 정규식 var idPwCheck = /^[a-zA-Z0-9]{4,12}$/; if($.trim($("#userPwd1").val()).length <= 0) { alert("비밀번호를 입력하세요."); $("#userPwd1").val(""); $("#userPwd1").focus(); return; } if (emptCheck.test($("#userPwd1").val())) { alert("비밀번호는 공백을 포함할 수 없습니다."); $("#userPwd1").focus(); return; } if (!idPwCheck.test($("#userPwd1").val())) { alert("비밀번호는 영문 대소문자와 숫자로 4~12자리 입니다."); $("#userPwd1").focus(); return; } if ($("#userPwd1").val() != $("#userPwd2").val()) { alert("비밀번호가 일치하지 않습니다."); $("#userPwd2").focus(); return; } if($.trim($("#userName").val()).length <= 0) { alert("사용자 이름을 입력하세요."); $("#userName").val(""); $("#userName").focus(); return; } if(!fn_validateEmail($("#userEmail").val())) { alert("사용자 이메일 형식이 올바르지 않습니다."); $("#userEmail").focus(); return; } $("#userPwd").val($("#userPwd1").val()); //////*****비밀번호가 변경되지않았을때 다시하게하기! if($("#userPwdOld").val() == $("#userPwd1").val()) //★★★★★★★★★ { alert("비밀번호가 기존과 동일합니다.") $("#userPwd1").focus(); return; } $.ajax({ type: "POST", url: "/user/updateProc", data: { userId: $("#userId").val(), userPwd: $("#userPwd").val(), userName: $("#userName").val(), userEmail: $("#userEmail").val() }, datatype: "JSON", beforeSend: function(xhr){ xhr.setRequestHeader("AJAX", "true"); }, success: function(response) { if(response.code == 0) { alert("회원정보가 수정되었습니다."); location.href = "/board/list"; } else if(response.code == 400) { alert("파라미터값이 올바르지 않습니다."); $("#userPwd1").focus(); } else if(response.code == 404) { alert("회원정보가 업습니다."); location.href = "/"; } else if(response == 500) { alert("회원정보 수정 중 오류가 발생했습니다."); //인서트 날리고 카운트 수가 0보다 작을때 $("#userPwd1").focus(); } else { alert("회원정보 수정 중 오류가 발생했습니다."); $("#userPwd1").focus(); } }, complete: function(data) { icia.common.log(data); }, error: function(xhr, status, error) { icia.common.error(error); } }); }); }); function fn_validateEmail(value) { var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; return emailReg.test(value); }

이번에 새로웠던 부분은 비밀번호를 변경하지 않았을 시 alert창을 띄워서 비밀번호를 변경하도록 유도하는 부분이었다. 이 부분은 교수님이 먼저 알려주지 않으시고 각자 해보라고 하셔서 친구들마다 다양한 방식이 나왔던 기억이 있다. 물론 나도 다른 방식으로 풀어냈다. 해냈다는 것 하나만으로도 성취감이 엄청났던 기억이 있다. (물론 잘못된? 방법이었다. 맹점이 많았다.)

if($("#userPwd1").val() == ${user.userPwd}) { alert("비밀번호가 기존과 동일합니다."); $("#userPwd1").focus(); return; }

위 부분이 내가 구현했던 부분인데, 사실 교수님이 설명은 해주셨지만 왜 이 방식을 추천하지 않는지(?)에 대해서는 여전히 잘 이해되지 않았다. 하지만 위에 적혀있는 교수님이 알려주신 방법이 적는 순서(위치?)가 변경되어도 문제가 전혀 없고 깔끔한 방법이라고 하셔서 이제부터는 그렇게 하기로 했다. 잘 모를때는 맞다는 것을 따르는게 좋다 ,,대세를 따르자,,

자, 이제 회원정보 수정에 대한 내용은 끝이 났다. 이 다음부터는 게시판에 대한 내용인데, 게시판은 우리도 학원에서 일주일이 넘도록 진행하고 있는 부분이라 더 심혈을 기울여서 따라잡아야 할 것 같다 !

from http://bbizzang.tistory.com/27 by ccl(A) rewrite - 2021-12-19 13:01:07