[레시피] 댓글 달기 기능 post

 

[ get.html ]

댓글 달기, 댓글 리스트 코드 만들기

<!-- 댓글 달기 폼 -->
<div class="row mt-2">
    <div class="col-md-10 me-auto ms-auto">
        <div class="card card-body">
            <div class="row">
                <div class="col-3">
                    <div class="form-group mx-sm-3 mb-2">
                        <label for="form-label" class="sr-only">글쓴이</label>
                        <input type="text" class="form-control" id="writer" placeholder="글쓴이" required>
                    </div>
                    <div class="text-center">
                        <button type="submit" id="reply-btn" class="btn btn-primary mb-2">댓글달기</button>
                    </div>

                </div>
                <div class="col-9">
                    <div class="input-group input-group-outline mb-0">
                        <div class="input-group input-group-dynamic">
                            <textarea id="content" class="form-control" rows="4" placeholder="댓글 내용을 적어주세요."
                                required></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 댓글 달기 폼 끝-->

<!-- 댓글 리스트 (없음) -->
<div class="row mt-2">
    <div class="col-md-10 me-auto ms-auto">
        <div class="card card-plain">
            <ul class="list-group" id="reply-list">

            </ul>
        </div>
    </div>
</div>

 

 

 

 

댓글달기 버튼 클릭시 콘솔 테스트해보기

 

js 에 설정

/* '댓글달기' 버튼 클릭 시 이벤트 */
const replyButton = document.getElementById('reply-btn');
replyButton.addEventListener('click', function(){
    console.log('클릭!');
})

 

 

---

순서.

mapper 기능&테스트 - service 기능&테스트 - Controller - view

 

 

 

[ ReplyMapper ]

@Mapper
public interface ReplyMapper {

	/* 댓글 등록 */
	public void enroll(ReplyVO reply);
	
	/* 댓글 목록 (게시판 번호가 필요) */
	public List<ReplyVO> getReplyList(int reply_bno);
	
	/* 댓글 수정 */
	public int modify(ReplyVO reply);

	/* 댓글 삭제 */
	public int delete(int reply_no);
	
}

 

- 댓글 등록, 수정 할 때 reply 객체 필요

- 댓글 삭제 할 때는 댓글 번호 필요

- 댓글 목록은 게시글 번호 필요

 

 

 

 

[ ReplyMapper.xml ]

 

위의 ReplyMapper 객체와 id 같도록

<mapper namespace="com.myapp.uglyMarket.dao.ReplyMapper">

<!-- 댓글 등록 -->
<select id="enroll" resultType="ReplyVO">
   insert into reply(reply_bno,content,writer) 
   values (#{reply_bno},#{content},#{writer});
</select>
    
<!-- 댓글 목록 (게시글 번호)-->
<select id="getReplyList" resultType="ReplyVO">
    select * from reply where reply_bno = #{reply_bno}
</select>

<!-- 게시판 수정 -->
<update id="modify">
    update reply set content = #{content}, update_at = now() 
    where reply_no = #{reply_no}
</update>
    
<!-- 게시판 삭제 -->
<delete id="delete"> 
    delete from reply where reply_no = #{reply_no}
</delete>

</mapper>

 

댓글 등록에도 게시글 번호가 필요?

 

 

[ ReplyService ]

public interface RecipeService {

	/* 게시판 등록 */
	public void enroll(RecipeVO board);
	
	/* 게시판 목록 */
	public List<RecipeVO> getList();
	
	/* 게시판 목록 (페이지 적용): pageNum, amount를 입력받고 객체criteria 생성 없으면 기본(1,10)*/
	public List<RecipeVO> getListPaging(Criteria criteria);
	
	/* 게시판 조회 */
	public RecipeVO getPage(int id);
	
	/* 게시판 글수정 */
	public int modify(RecipeVO board);
	
	/* 게시판 삭제 */
	public int delete(int id);
	
	/* 게시글 총 갯수 */
	public int getTotalPost(Criteria criteria);
}

 

 

[ ReplyServiceImpl ]

service를 구현하는 impl

public class ReplyServiceImpl implements ReplyService{

	//매퍼 객체 
	@Autowired
	private ReplyMapper replyMapper;
	
	@Override
	public void enroll(ReplyVO reply) {
		replyMapper.enroll(reply);
	}

	@Override
	public List<ReplyVO> getReplyList(int reply_bno) {
		return replyMapper.getReplyList(reply_bno);
	}

	@Override
	public int modify(ReplyVO reply) {
		return replyMapper.modify(reply);
	}

	@Override
	public int delete(int reply_no) {
		return replyMapper.delete(reply_no);
	}
}

 

 

 

 

[ ReplyController ]

@RestController
@RequestMapping("/reply")
public class ReplyController {

	//ReplyService 객체를 생성자 주입
	private ReplyService replyService;
	
	//생성자 객체 주입 시 @Autowired 필요없음
	public ReplyController(ReplyService replyService) {
		this.replyService = replyService;
	}
	
	@PostMapping
	public ReplyVO replyEnrollPOST(@RequestBody ReplyVO reply) {
		
		//입력된 json타입인 데이터를 받아서 reply객체 json타입으로 리턴
		return reply;
		
	}
}

 

@RequestBody 
포스트맨 제이슨 타입으로 서버에 보내고, 서버가 받을때 제이슨으로 받는

 

 

 

 

 

static 폴더 안 js 폴더에  Fetch-API.js 파일 복붙하기

 

 

[get.html]

연결시키기 

<script th:src="@{/js/Fetch-API.js}"></script>

 

 

 

※ 연결이 됐는지 확인하는 법

[ Fetch-API.js ] 

alert('fetch js 로드 됨.');   적으면 창이 뜬다

 

 

 

---

에러

***************************
APPLICATION FAILED TO START
***************************

Description:

Parameter 0 of constructor in com.myapp.uglyMarket.controller.ReplyController required a bean of type 'com.myapp.uglyMarket.service.ReplyService' that could not be found.


Action:

Consider defining a bean of type 'com.myapp.uglyMarket.service.ReplyService' in your configuration.

 

 

 

 

ReplyService  에서 문제가 있는지 찾아보자

.

.

.

ReplyServiceImpl 에서 문제찾음.

 

 

 

해결.

@Service 어노테이션을 안써줬음..

 

 

그리고 

[ ReplyVO ] 에 부분 생성자는 필요가 없으니 전체생성자만 있으면 된다. 

왜지? 

/* 생성자 : reply_no와 created_at,updated_at인 날짜시간은 자동생성 */
// public ReplyVO(int reply_bno, String content, String writer) {
    //this.reply_bno = reply_bno;
    //this.content = content;
    //this.writer = writer;
// } 

 

 

[ get.html ]

//Fetch-API 라이브러리 객체 만들기
const http = new EasyHTTP();

 /* '댓글달기' 버튼 클릭 시 이벤트 */
const replyButton = document.getElementById('reply-btn');
replyButton.addEventListener('click', function(){
    // console.log('클릭!');
    const data = {
        reply_bno: '[[${board.id}]]',
        content: document.getElementById('content').value,
        writer: document.getElementById('writer').value,
    };
    
    http
        .post('/reply',data)
        .then((res)=>console.log(res))
        .catch((err)=>console.log(err));
});

 

댓글 번호 reply_no 와 날짜시간 created_at, updated_at 은 자동생성 이라 안넣어도 되고

 

reply_bno, content,  writer 만 넣는다. 

 

그 data들이  /reply 로 보낸다. → @ReplyController

 http
        .post('/reply', data)
        .then((res)=>console.log(res))
        .catch((err)=>console.log(err));

 

[ ReplyController ]

@RequestMapping("/reply")

@PostMapping
public ReplyVO replyEnrollPOST(@RequestBody ReplyVO reply) {
    replyService.enroll(reply); //DB저장
    return reply;

}

 

값들을 받아서 reply객체를 만들고 다시 reply를 리턴. (json 타입)

 

 

---

에러

Request method 'POST' not supported

 

---

 

 

#

??? 어렵다..