프로그래밍/java
[Spring] 스프링 댓글 작성 기능 구현하기
***bmo***
2023. 4. 26. 02:55
반응형
<input type="hidden" id="useridx" value="${info.idx }" >
<div id="insertReviewbody">
<table>
<tr>
<td style="padding-bottom : 3em;">
<input type="text" >${info.name }
</td>
<td >
<div id="insertReview" style="display: inline-block; ">
<input type="text" name="reviewcontent" style=" border:4px solid #4ea0d8; width:550px; padding-rigth:30px;" ></input>
</div>
</td>
<td>
<button type="button" id="reviewbtn" onclick="postReview()" style="margin-left:10px; " class="btn btn-default">리뷰쓰기</button>
</td>
<td>
</td>
</tr>
</table>
</div>먼저 useridx 에 회원idx를 불러오고 리뷰작성칸을 div로 감싸 비회원일 경우 스크립트에서 영역을 숨긴다.
var name = $('#useridx').val();
if(name !==''){
$('#insertReviewbody').show();
} else {
$('#insertReviewbody').hide();
}
js
function postReview() {
var content = $('[name=reviewcontent]').val()
var memberIdx = $('#useridx').val();
var vehicleIdx = $('[name=caridx]').val();
var data ={
"vehicleIdx":vehicleIdx,
"memberIdx": memberIdx,
"content" : content
} //입력 데이터를 받아주고 ajax를 이용해 컨트롤러로 보내준다
$.ajax({
url:'<%=request.getContextPath()%>/postReview',
contentType: 'application/json; charset=utf-8',
type: 'post',
dataType:'json',
data: JSON.stringify(data),
success: function(result) {
alert('리뷰가 등록되었습니다')
location.reload();
},
error: function() {
alert('리뷰 등록 실패');
}
});
}
컨트롤러
@PostMapping("/postReview")
public int insertReview(@RequestBody ReviewDto data) {
int result = rService.insertReview(data);
return result;
}jsp에서 post형식의 ajax로 보내고 컨트롤러에서 PostMapping을 사용해 데이터를 받았다.
서비스
public int insertReview(ReviewDto data);
서비스impl
@Override
public int insertReview(ReviewDto dto) {
return dao.insertReview(dto);
}
dao
public int insertReview(ReviewDto dto) {
return sqlSession.insert("review.insert", dto);
}
mapper
<insert id="insert">
INSERT INTO REVIEW(IDX,MEMBER_IDX,CONTENT,CREATE_DATE,RECOMMEND,SCORE,VEHICLE_IDX)
VALUES(REVIEW_SEQ.NEXTVAL, #{memberIdx}, #{content}, DEFAULT, DEFAULT, 3.5, #{vehicleIdx})
</insert>
dto는 db 컬럼명과 동일하게 만들었다.(코드생략..)
설정한 alert가 뜨고 db에 저장이 잘 되었다.
<table class="table review" width="100%" style="padding: 3em;">
<tr>
<td width="0%"></td>
<td width="15%" >닉네임</td>
<td width="50%">리뷰내용</td>
<td width="15%">수정</td>
<td width="10%">추천</td>
</tr>
<c:forEach items="${rList }" var="review" varStatus="i">
<tr>
<td ><input type="hidden" id="reviewIdx" value="${review.idx }"></td>
//데이터 처리를 위해 필요한 idx를 가져오기위해 input에 담고 hidden으로 처리했다
<td >${review.name}</td>
<td >${review.content}</td>
<td >
<div>
<form name="reviewForm">
<c:if test="${info.name eq review.name }">
//로그인한 닉네임(info.name)과 해당리뷰를 작성자가 일치할때를 c:if로 판별하여
//작성자는 자신의 댓글 옆에 수정, 삭제 버튼이 뜨게 한다
<input data-idx="${review.idx }" type="button" class="edit" value="수정">
<input data-idx="${review.idx }" type="button" class="deleteReview" value="삭제">
</c:if>
<br>${review.createdate}
</form>
</div>
</td>
<td align="center">
<input data-idx="${review.idx}" data-recommend="${review.recommend}" src="<%=request.getContextPath()%>/resources/garoestate/assets/img/icon/like.png" class="likebtn" type="image" style="float:left;">
//input 자체에 데이터를 담아서 전달한다!! 이 방법을 몰라서 id값으로 가져오려고 했는데 훨씬 간단하게 해결됐다
${review.recommend}</td>
<td ></td>
</tr>
<div>
</div>
</c:forEach>
</table>리뷰영역의 테이블.
전체 데이터를 list에 담아서 foreach문으로 나열해준다.
작성자에게는 수정, 삭제 버튼이 보이게 하기 위해 c:if 조건문으로 현재 로그인한 아이디를 가져와 비교했다.
@GetMapping("/carlist/{idx}")
public ModelAndView viewVehicle(ModelAndView mv, @PathVariable String idx, Principal prin, HttpSession session) {
int index = Integer.parseInt(idx);
//기준이 되는 idx를 jsp에서 받아오고 index로 형변환을 해줬다
if(prin == null) {
mv.setViewName("reservation/details");
}else {
String username = prin.getName();
mv.addObject("info", mService.selectMypageOne(username));
}
mv.addObject("car", vService.getVehicleInfo(index));
mv.addObject("option", vService.getOptionInfo(index));
List<ReviewDto> rList= rService.selectOne(index);
session.setAttribute("vehicleIdx", index);
mv.addObject("rList",rList);
mv.setViewName("reservation/details");
return mv;
}리뷰 리스트는 다른 데이터들과 함께 조회돼야 하니 전체 데이터를 조회하는 컨트롤러에서 생성했다.
서비스, 서비스impl
//서비스
public List<ReviewDto> selectOne(int vehicleIdx);
//서비스impl
@Override
public List<ReviewDto> selectOne(int vehicleIdx) {
return dao.selectOne(vehicleIdx);
}vehicleIdx가 매개변수가 된다.
dao
public List<ReviewDto> selectOne(int vehicleIdx) {
return sqlSession.selectList("review.selectOne", vehicleIdx);
}
mapper
<select id="selectOne" resultType="reviewDto">
SELECT * FROM review r
left outer join member_info m
on(r.member_idx = m.idx)
where VEHICLE_IDX=#{idx}
ORDER BY CREATE_DATE ASC
</select>리뷰 테이블에 저장된 멤버idx와 멤버정보가 담긴 멤버정보 테이블을 join시켜주고 where절로 조건을 걸어주고 조회하면 된다.
좋아요 기능과 수정, 삭제 기능은 다음 글에!
반응형