[구현] 사용자 정보(feat. session)

구현

- 사용자 정보(feat.session) -

---

KeyPoint
 - request.getSession()
 - session.getAttribute("xxx")

 

---

기존에 테스트용으로 만들었던 사용자 정보 화면은 userSn을 임시로 부여해서 JSON데이터로 전송 및 UserVO에 담아 DB에서 가져오는 방법이었다.

이제 Login 화면이 구현이 되면서 session에 정보를 담아줄 수 있으니 위 방식을 session 방식으로 수정했다.

 

Back단

▶ UsersDAO.java (interface, 메서드만 정의)

package pms.dao;

import java.util.List;

import org.springframework.stereotype.Repository;

import pms.vo.UserVO;

@Repository
public interface UsersDAO {

    // 사용자 정보
    public List<UserVO> userInfo(int userSn);

    // 정보 수정
    public Object uptUserData(UserVO user);
	
}

 

▶ Users_SQL_oracle.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="pms.dao.UsersDAO">

    <resultMap type="user" id="userInfo"/>
    <select id="userInfo" parameterType="int" resultMap="userInfo">
        SELECT
            u.USER_SN as userSn,
            u.TEAM_SN as teamSn,
            t.TEAM_NM as teamNm,
            u.GRADE_SN as gradeSn,
            g.GRADE_KOR as gradeKor,
            g.GRADE_ENG as gradeEng,
            u.USER_ID as userId,
            u.PASSWORD,
            u.USER_NM as userNM,
            u.EMAIL,
            to_char(u.ENTER_DT, 'yyyy-mm-dd') as enterDT
        FROM PMS."USER" u, team t, GRADE g
        WHERE 1=1
        AND u.TEAM_SN = t.TEAM_SN 
        AND u.GRADE_SN =g.GRADE_SN 
        AND u.USER_SN = #{userSn}
    </select>

    <update id="uptUserData" parameterType="user">
    UPDATE PMS."USER"
    SET
        PASSWORD = #{password},
        EMAIL = #{email}
    WHERE 1=1
    AND USER_SN = #{userSn}
    </update>
</mapper>

ENTER_DT의 경우 Type이 DATE이므로, 가져올 때에는 to_char()함수로 가져와 String으로 받는다.

 

▶ UsersService.java

package pms.service;


import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import pms.dao.UsersDAO;
import pms.vo.UserVO;

@Service
public class UsersService {

@Autowired(required = false)
private UsersDAO dao;

    public Object userInfo(int userSn){

        // 1. 리스트 불러오기
        List<UserVO> list = dao.userInfo(userSn);

        // 2. 불러온 리스트를 HashMap에 담아주기
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("list", list);

        // 3. 담은 HashMap 리턴
        return result;
    }

    public Object uptUserData(UserVO user) {

        return dao.uptUserData(user);
    }
}

 

▶ UsersController.java (Session에 저장된 userSn을 이용!)

package pms.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import pms.service.UsersService;
import pms.vo.UserVO;

@Controller
public class UsersController {

    @Autowired(required = false)
    private UsersService service;

    // http://localhost:7090/pmsProject/users/users.do 
    @RequestMapping(value = "/users/users.do", method = RequestMethod.GET)
    public String userInfo(HttpServletRequest request, HttpServletResponse response) {

        // session 값을 받아옴
        HttpSession session = request.getSession();

        // 세션의 userSn이 null 이면
        if(session.getAttribute("userSn") == null) {
            // 로그인 화면으로 이동
            return "redirect:/ppm/login.do";
        }
        // 세션의 userSn값이 존재한다면
        else {
            // 사용자 정보 화면으로 이동
            return "/WEB-INF/pmsPrj/jsp/users/user_info";
        }
    }

    // 기본 정보
    @RequestMapping(value = "/users/getUserData.do", method = RequestMethod.POST)
    @ResponseBody
    public Object getUserData(HttpServletRequest request) {

        // Session에서 받아와서 userSn에 담아줌
        HttpSession session = request.getSession();
        int userSn = (int) session.getAttribute("userSn");

        return service.userInfo(userSn);
    }

    // 정보 수정
    @RequestMapping(value = "/users/uptUserData.do", method = RequestMethod.POST)
    @ResponseBody
    public Object uptUserData(@RequestBody UserVO user) {
        return service.uptUserData(user);
    }

}

 

Front 단

User의 경우 $(event.target)을 사용해서 <input>태그의 readonly 값만 변경하는 방향으로 해서 컴포넌트가 따로 없다.

오직 instance뿐..

 

▶ userInfo.js (Instance)

/**
* users instance vue
**/

var app = window.app || {};
app.components = app.components || {};

// instance
$(document).ready(function(){ // $(event.target)을 위해 추가

    app.components.userInfo = new Vue({
        el : '.users',
        data : {
            mode : 'info', // info: 기본정보, uptInfo: 수정모드
            userNm : '',
            list : [],
            confirmPw : '', // 비밀번호 확인용
        },
        mounted(){
            this.init();
        },
        methods :{
        init : function(){ // 초기화
            this.mode = 'info';
            this.userNm = '';
            this.list = [];
            this.confirmPw = '';
            this.getlist();
        },
        getlist() { // 사용자정보 불러오기
            var self = this;
			
            // 필요한 데이터: userSn >> session처리 >> 따로 보낼 데이터는 없음
            axios.post('/pmsProject/users/getUserData.do').then(function(result){
                self.userNm = result.data.list[0].userNm;
                self.list = result.data.list;
            });
        },
        changeToUpt() { // 수정화면으로 전환
            this.mode = 'uptInfo';
            this.confirmPw = '';
            // 이 버튼의 요소(event.target)의 parent요소의 parent요소에서 input요소를 찾아 readonly 제거
            $(event.target.parentNode.parentNode.parentNode).find('input').removeAttr("readonly");
        },
        changeToInfo() { // 기본화면으로 전환
            this.mode = 'info';
            // 이 버튼의 요소(event.target)의 parent요소의 parent요소의 parent요소에서 
            // input요소를 찾아 readonly 부여
            $(event.target.parentNode.parentNode.parentNode).find('input').attr("readonly", "readonly");
        },
        updateInfo(list) { // 정보 수정 후 DB 저장
            var self = this;

            if(list.password != self.confirmPw){ // 유효성체크
                alert('입력한 비밀번호를 확인하세요.');
                return;
            }

            if(confirm('저장하시겠습니까?')){
                // 전송할 데이터를 json형식으로 만들기
                var data = {
                    "password" : self.confirmPw,
                    "email" : list.email,
                    "userSn" : list.userSn
                }

                // json형식으로 만든 데이터를 JSON으로 변환
                var jsonData = JSON.stringify(data);

                // 제대로 변환되었는지 콘솔에서 확인
                console.log(data);					
                console.log(jsonData);					

                // model로 데이터 보내서 서버통신
                app.model.users.uptUserData(jsonData).then(function(){
                    alert('save complete');
                    self.getlist();
                });

                    self.changeToInfo();
                }
            }
        }
    });
});

>> mode에 따라 보여줄 요소를 가림! (confirmPw)

 

▶ users.js (model) >> 삭제 고민중

/**
* users model
*/
var app = window.app || {};
app.model = app.model || {};

(function(app){
    var users = app.model.users = {};

    // 초기화
    users.initialized = new Promise(function(resolve){
        resolve(users);
    });

    // 사용자 정보 수정
    users.uptUserData = function(data) {
        return axios.post('/pmsProject/users/uptUserData.do', data, {
            headers : {
            'Content-Type' : 'application/json'
            }
        });
    };
})(app);

▶ user_info.jsp (Content Body 부분만)

<section class="content">
 <div class="container-fluid">
  <div class="row">
   <div class="col-12">
    <div class="card">
     <div class="users">
      <div>
       <div class="card-header">
        <h3 class="card-title"><b>{{ userNm }}</b>님의 정보</h3>
       </div>
       <div class="card-body">
        <div v-if="list.length != 0" v-cloak>
         <div v-for="list in list">
          <table class="table table-bordered table-hover">
           <tr>
            <th>사용자일련번호</th>
            <td>{{list.userSn}}</td>
           </tr>
           <tr>
            <th>팀</th>
            <td>{{list.teamNm}}</td>
           </tr>
           <tr>
            <th>직책</th>
            <td>{{list.gradeKor}}({{list.gradeEng}})</td>
           </tr>
           <tr>
            <th>ID</th>
            <td>{{list.userId}}</td>
           </tr>
           <tr>
            <th>비밀번호</th>
            <td><input type="password" class="userInfo" v-model="list.password" readonly/></td>
           </tr>
           <tr v-if="mode == 'uptInfo'">
            <th>비밀번호 확인</th>
            <td><input type="password" v-model="confirmPw"/></td>
           </tr>
           <tr>
            <th>이름</th>
            <td>{{list.userNm}}</td>
           </tr>
           <tr>
            <th>이메일</th>
            <td><input type="text" class="userInfo" v-model="list.email" readonly/></td>
           </tr>
           <tr>
            <th>가입일자</th>
            <td>{{list.enterDt}}</td>
           </tr>
          </table>
          <div style="float: right;">
           <i class="fas-fa-pen"></i>
           <button id="uptUserInfo" style="cursor:pointer;" @click="changeToUpt()" v-if="mode=='info'">수정</button>
           <button id="uptUserInfo" style="cursor:pointer;" @click="updateInfo(list)" v-if="mode=='uptInfo'">저장</button>
           <button id="uptUserInfo" style="cursor:pointer;" @click="changeToInfo()" v-if="mode=='uptInfo'">취소</button>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>

 

이 방식을 응용하여 다른 화면에도 적용

---

 

 

 

 

 

End.

heisely's 괴발개발 개발일지