이하 구디아카데미 김지훈 강사님의 수업자료와 강의 내용 정리, 실습한 내용을 정리함

Ajax

form 방식과 ajax 방식의 차이

• ajax Multi-part request 구형 브라우저에서만 안 됨. 하지만 웬만하면 하지 않음.

login

index(view)

• id 가 login 인 객체에 클릭 이벤트가 일어나면 실행문 실행
• input 태그에 name 이 id 인 것의 value 를 변수 id 에 담음
• input 태그 중 name 이 pw 인 것의 value 를 변수 pw 에 담음
• type 은 post / 호출명은 login / 보내는 데이터는 키 'id', 값 id 와 키 pw, 값 pw
• 데이터 타입은 JSON,
• 성공 시 data를 받아와 실행문 실행
• data를 콘솔에 출력, data의 msg 를 경고창에 띄움
• 만약 data의 id 가 null 이 아닐 시, 그리고 data 의 perm 이 null 이 아닐 시엔 memberList 를 호출함
• 만약 data의 id 가 null 이 아니고 data 의 perm 은 null 이면 boardList 호출함
• 에러 발생 시 콘솔에 이벤트 출력

controller

• login 요청이 post 타입으로 들어오면 실행

• responsebody 어노테이션으로 프론트로 값을 전송해줌

• hashmap 타입의 login 메서드는 받아온 params와 session 을 매개변수로 실행됨

• sevice의 login 메서드 실행 결과를 HashMap 타입의 변수 result 에 담기

• 만약 result 가 null 이면 hashmap을 result 로 객체화 하고 result에 msg 키로 "아이디 또는 비밀번호를 확인하세요" 라고 출력(member 테이블에 해당하는 id과 pw 값이 없으면)

• 만약 null 이 아니면 result 에 msg 키로 "로그인에 성공하였습니다." 불러옴

• 그리고 session 에 속성을 설정함 / "loginId"라는 키로 result 의 id, name 키로 result 의 name, perm 이라는 키로 result 의 perm을

• 반환값은 result

• memberList 요청이 오면 memberList.jsp 로 보냄

• boardList 요청이 오면 boardList.jsp 로 보냄

mapper

• login 요청이 오면 select 문을 실행하고 반환값은 map 타입으로 보냄
• meeber 테이블과 author 테이블을 left join 함 / member 의 id 와 author 의 id 가 같은 것을 기준으로 / member 테이블의 id와 member 테이블의 pw 가 입력된 id, pw 값과 같을 때 / emember 의 id 와 author 의 perm, member의 name 을 가져옴

memberList

view

• tbody 태그의 id list 로 설정해줌

• member 들의 id, 이름, 이메일 리스트를 ajax 로 요청해 오기

• type 은 get, 요청명은 mList, 보내는 데이터는 없음, dataType 은 JSON,
  받아오는 걸 성공했을 시에는 콘솔에 받아온 data 찍기
  만약 data의 success 가 -1 일 때는 "이 페이지의 권한이 없습니다." 출력하고 절대경로 context 경로로 이동

• -1 이 아닐 시엔 변수 content를 준비하고 for 문으로 데이터를 가져옴

• i 는 0이고 i는 데이터 사이즈보다 적을 시 i는 계속 증가함

• content 에 tr 누적합으로 넣어줌

• content 에 누적합으로 data의 mList 의 i번째 인덱스의 id 1열에 출력

• content 에 누적합으로 data의 mList 의 i번째 인덱스의 name 2열에 출력

• content 에 누적합으로 data의 mList 의 i번째 인덱스의 email 3열에 출력

• 반복이 끝나면 id가 list 인 태그에 append 메서드로 content를 넣어줌
  (.append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.)

• error 시엔 콘솔에 이벤트 출력

controller

• mList 로 요청이 오면 처리
• hashmap 타입을 반환하는 메서드 mlist 는 매개변수 session 을 넣어 실행됨
• hashmap result 로 객체화 해옴
• 만약 session 의 loginId 가 null 이 아니고 session 의 "perm"도 null 이 아니면
• result 에 success 라는 키로 1 을 부를 수 있게 함
• service 의 mList 메서드 실행 값을 mList 에 담음
• result 에 mList 라는 키로 mList 를 부를 수 있게 함
• result 에 size 라는 키로 mList 의 size 를 부를 수 있게 함
• 둘 중 하나라도 null 이면 result 에 success 라는 키로 -1 를 호출함
• 반환값은 result

mapper

• mList 요청이 오면 select 실행, 반환 타입은 map
• member 테이블에서 id, name, email 을 가져옴

boardList

view

• 리스트에 img 를 넣기 위에 c:url 을 우선 변수 img 에 담음 / 이미지가 없을 시 표시되는 이미지는 noImg 에 담음
• ajax 에 담아 서버로 전송 및 요청
• type 은 get, 요청명은 bList, 보내는 data 는 없음, bataType 은 JSON
• 성공 시 실행할 콜백함수는 data를 매개변수로 실행
• data 콘솔에 출력
• content 변수 선언
• for 문으로 꺼내오기, i 변수에 0을 담고 data의 size 보다 작을 때까지 반복, i는 반복할 때마다 증가함
• tr 을 누적합으로 content 에 담음
• 1열에 bList 의 i번째 인덱스의 idx 를 가져옴
• 2열에 만약 bList 의 i번째 인덱스에 img 사이즈가 0보다 크면 링크의 img를 넓이 30px로 content 에 누적합으로 담음 / 만약 bList 의 i번째 인덱스에 img 의 사이즈가 0과 같다면 noImg 출력
• 3열에 제목, 4열에 유저 이름, 5열에 조회수를 출력하도록 content 에 담음
• 담겨진 content 를 id 가 list 인 태그에 append로 넣음
• error 시 console 에 이벤트 객체 출력

controller

• bList 로 요청이 들어오면 실행되는 메서드
• response 의 값을 담아 프론트로 보냄
• hashmap 타입 반환값을 갖는 메서드 bList 는 매개변수 session 을 사용해서 실행됨
• HashMap result 로 객체화 해옴
• service 의 bList 메서드 실행 결과를 ArrayList hashmap 변수 bList 에 담음
• result 에 bList 라는 키로 bList 를 호출할 수 있게 담음 / size 라는 호출명으로 bList 의 size를 부를 수 잇도록 담음
• 리턴값은 result
  
  

mapper

• bList 요청이 들어오면 select 문 실행하고 반환타입은 map 으로 함
• bbs 테이블로부터 idx, subject, user_name, bHit 와 img, 가져옴 / img 는 photo 테이블에서 bbs idx 와 photo 의 idx 가 같은 녀석의 수를 가져옴