22.10.11 - [ Spring ] 댓글 입력, 댓글 목록 작업하기

 

-- INDEX --

 

 

1. 화면 만들기	2.구조 잡기	3. 서버측 작업	4. 화면 작업	5. 응답결과 처리	6. 내용 초기화
댓글작성 댓글리스트	db,vo C-S-D mapper	댓글 insert 댓글 select	$.ajax({ })	${}.prepend();	${}.value=""

 

 

 

---

 

 

게시글 상세 조회 후 댓글 작업해보기

댓글 인서트 하는 작업이

본문 내용까지 새로고침 될 필요 없으니

form태그가 아닌 button으로 작업해보자

 

즉, ajax로 작업해보자

 

 

 

---

 

 

 

1. 댓글 작성/댓글 목록 화면 만들기

 

 

 

 

 

 

 

 

---

 

 

 

 

2. db테이블, vo-C-S-D 만들어주기

• 서버 작업할 수 있게 db부터 추가하고, vo- C-S-D 만들어주기
• mapper.xml 파일도 생성

 

---

 

 

 

 

 

---

 

 

 

 

3 : 서버 측 작업 먼저 진행 하기

• 댓글 insert 작업과 댓글 목록 select 작업
• C-S-D : mapper 작업해주기

 

 

3-1 : 댓글 인서트 작업

 

 

---

 

3-2 : 댓글 목록 보여주기 작업

• 게시글 상세페이지 보여줄 때 이제 댓글 목록도 가져와서 게시글과 함께 보여주기

 

 

# 생성자 인젝션으로 ReplyService 주입받게 해 주고

 

 

---

 

# 게시글 상세조회 메서드에 댓글 목록 List로 가져오는 작업도 추가해주기

 

 

 

 

 

# Postman이라는 걸 이용해서 요청 보내는 걸 간단하게 처리할 수 있다.

> 화면 없는 상태에서 백엔드 로직을 만들어놓고 요청 간단히 테스트해볼 때 사용한다.

 

 

 

 

---

 

 

 

 

4. 화면 작업 진행 

• aJax 로 – data들 전달하면서 요청하기!
• $.ajax({ });

 

 

 

 

자바스크립트 영역에서 el을 사용할 수 있는 건가??

여기는 자바스크립트 이전에 JSP 영역이기 때문에 jasper가 파싱 가능하다.

절대 자바스크립트와 el이 동시에 사용되는 것은 아니다.

 

 

 

 

---

 

 

 

 

5. 응답받은 결과를 어떻게 할지 선택하기

 

• 전체 페이지를 새로고침 할 필요는 없을 거 같고
• db에 다시 요청하는 건 – 서버에 다시 일 시키는 거라 힘들어할 거 같고
• 이런 방법은 어떨까?
• 성공했다면 - db에 넣은 데이터와 똑같은 content와 writer를 다시 보여주면 되지 않을까?
• db에 가서 조회해온 값으로 보여주나 – 입력된 값 - 그대로 보여주나 같을 것이다.

 

 

 

---

 

 

createElement 방식은 하나하나 해주어야 하므로 번거로워진다.

 jQuery로 해보자

 

 

5-1 : 다시 보여주는 데 필요한 값들 변수로 설정해놓고 prepend 할 때 사용하기

 

---

 

5-2 : " "  와 ' ' 구분하기

 

 

---

 

5-3 : 통신 성공 && 작업 성공하였으면 - db에 넣은 데이터와 맞춰서 content와 WriterNick을 보여주기

 

 

---

 

ajax 완성

 

 

 

 

 

---

 

 

 

 

6. 댓글 입력되면 내가 쓴 내용 없애주기

 

 

---

 

 

 

 

---