728x90
팀플을 하고 나서(마지막 글은 안 올렸지만 끝났다.) 주말은 푹 쉬고 오늘부터 다시 차근차근 시작하기로 했다.
1차 일지 - [ 설정 ], [ 회원가입 ]
2차 일지 - [ 로그인 ]
3차 일지 - [ index에서 로그인 상태에 따라 display none/block 제어하고 p태그 내용 바꾸기 ], [ 로그아웃 ]
4차 일지 - [ header에 회원 아이디, 회원정보/로그아웃 링크 or 비회원 문구 추가 후 로그인 상태에 따라 display none/block 제어 ], [ 일반 회원 정보 확인 ]
1. header - 문구 추가 후 로그인 상태에 따라 display none/block 제어
더보기
비로그인 시
일반 회원 로그인 시
관리자 로그인 시
<script type="text/javascript">
$(()=>{
console.log('loginId: ${loginId}');
let id = '${loginId}';
if (id != ''){
console.log('헤더) 로그인 된 아이디 있음')
$('#loginIdHeader').html(id+"님 ");
if (id == 'admin'){
$('#checkAM').html("회원 정보 확인");
}
document.getElementById("loginIdHeaderOn").style.display = 'block';
document.getElementById("loginIdHeaderOff").style.display = 'none';
}else{
console.log('헤더) 로그인 된 아이디 없음')
}
})
</script><div style="height: 180px; background-color: #2e2e34;">
<nav class="top-right">
<div>
<nav id="loginIdHeaderOn" style="padding: 15px 10px 0px 0px; float: right; display: none;">
<p id="loginIdHeader" style="color: #fff; float: left;">test님</p>
 <a href="/member/info" id="checkAM">내 정보 확인</a>
 <a href="/member/logout">로그아웃</a> 
</nav>
<nav id="loginIdHeaderOff" style="padding: 15px 10px 0px 0px; float: right; display: block;">
<p id="loginIdHeader" style="color: #fff; float: left;">현재 로그인 상태가 아닙니다.</p>
</nav>
</div>
<ul class="top-menu" style="color: #d8d3cd">
<li><a>menu1</a></li>
<li><a>menu2</a></li>
<li><a>menu3</a></li>
<li><a>menu4</a></li>
</ul>
</nav>
</div>- 정보 확인을 만들기 전에 쉬운 것부터 하기 위해 이것부터 진행했다.
- 아직 index(메인화면)에서 노란박스를 변경하지 않았는데, 어떻게 변경하면 좋을지 고민중이다.
2. 정보 확인
- MemberController.java
더보기
@GetMapping("/member/info")
public String info(Model model, HttpSession session) {
log.info("==> GetMapping - memberInfo 요청 <==");
return "memberInfo";
}- memberInfo.jsp 화면으로 넘김
- memberInfo.jsp
더보기
- 비동기 통신으로 할 필요는 없었지만, 연습 겸 비동기 통신으로 했다.
- body
<div>
<p>현재 로그인 중인 id: ${loginId}</p>
<div id="infoPwCh" style="display: block;">
<input type="password" name="mPw" id="infoMPw" class="input" placeholder="비밀번호를 입력하세요" maxlength="20" autocapitalize="off">
<div id="infoCh" style="display: none;"></div>
<button type="submit" class="btn btn-3 btn-3e" id="infoSubBtn" style="text-align: center;">비밀번호 확인</button>
</div>
<div id="info">
</div>
<br>
<button type="button" onclick="location.href='/'">메인화면</button>
</div>
- script
<script type="text/javascript">
let loginId = '<%=(String)session.getAttribute("loginId")%>';
$('#infoSubBtn').on('click',function(){
let pw = $('#infoMPw').val();
if (pw==''){
$('#infoCh').html('비밀번호를 입력해주세요.').css('color','red');
document.getElementById("infoCh").style.display = 'block';
$('#infoMPw').focus();
return;
}
let chPwSend = {mPw:pw};
console.log("chPwSend: ",chPwSend);
$.ajax({
method:'get', // post로 보낼 필요 없음
url: '/member/memberInfo',
data: chPwSend,
}).done(function(res){
console.log("res: ",res);
let mDto = res;
if(loginId=="admin"){
$("#info").html("아직 작업 안 함!");
document.getElementById("infoPwCh").style.display = 'none';
}else{
$("#info").html("<p>이름: "+mDto.mname+"</p>");
$("#info").append("<p>이메일: "+mDto.memail+"</p>");
if (mDto.gName!=null){
$("#info").append("<p>게임 닉네임: "+mDto.gname+"</p>");
}
$("#info").append("<p>가입 날짜: "+mDto.joinDate+"</p>");
document.getElementById("infoPwCh").style.display = 'none';
}
}).fail((err,status)=>{
console.log("err:", err);
console.log("status:", status);
$("#info").html("비밀번호가 틀렸습니다.");
})
});
</script>
- MemberAsyController.java
더보기
@GetMapping("/member/memberInfo")
public MemberDto memberInfo(@RequestParam(name = "mPw") String mPw, HttpSession session) {
log.info("==> GetMapping - memberInfo 요청 <==");
String mId = session.getAttribute("loginId").toString();
if (mId.equals("admin")) {
//return mSer.mInfoAd();
}
return mSer.memberInfo(mId, mPw);
}- 주석 처리 해둔 부분은 관리자일 경우의 코드라 대충 정해놓기만 했다.
- MemberService.java
더보기
public MemberDto memberInfo(String mId, String mPw) {
log.info("===> mSer memberInfo 요청 <===");
BCryptPasswordEncoder pwEn = new BCryptPasswordEncoder();
MemberDto mDto = mDao.memberInfo(mId);
if(pwEn.matches(mPw, mDto.getMPw())) {
return mDto;
}
return null;
}- 사실 로그인 메소드를 사용하고 그 다음에 정보를 가져갈까? 했는데 그러면 불필요하게 DB를 두 번이나 가야하기 때문에 패스했다.
- BCryptPasswordEncoder의 matches는 무조건 앞에 변형 전 문자, 뒤에 변형 후 문자가 들어간다!
- MemberDao (java, xml)
더보기
- .java
MemberDto memberInfo(String mId);
- .xml
<select id="memberInfo" parameterType="String">
select * from member where mId=#{param1}
</select>아직 이해하지 못했는데, 여기서 mId를 사용하니 파라미터가 없다면서 오류가 났다. 다른 것들에서는 잘 사용했는데 왜..? 반환값이 클래스라서 그런가..? 이 부분은 더 공부를 해야할 것 같다.
- 결과
더보기
처음 화면
공란으로 버튼 클릭 시
- 일반 회원
- 관리자 (아직 안 함)
전체 피드백
- index의 노란박스 고민) 헤더에서 해당 페이지가 무슨 페이지인지 확인 후 그것에 따라 변경하는 것이 가능하다면 헤더에 넣은 아이템들을 index에서만 저 노란박스에 보이게 하고, 그 외에는 헤더에서만 보이게 하고 싶은데 몇번 시도했으나 실패했고, 가능할지 모르겠다.
- 비밀번호 틀렸을 때의 경우를 작업 안 했다! 작업할 것!!
728x90
'프로그래밍 > +a' 카테고리의 다른 글
| slPro 6차 일지 (1) | 2024.01.11 |
|---|---|
| slPro 5차 일지 (0) | 2024.01.09 |
| 미니 팀 프로젝트 중간 과정 (파이썬) (1) | 2024.01.03 |
| slPro 3차 일지 (0) | 2024.01.01 |
| 미니 팀 프로젝트 사전 준비 (파이썬) (2) | 2024.01.01 |
