실습(MVC(board))
- [Web_JSP] 22 이어서
1. reply.js
/**
*
*/
let replyList;
let check = false;
getList();
//댓글 등록
function insert(){
let $content = $("#content").val();
$.ajax({
url: contextPath + "/board/ReplyWriteOk.re",
type: "post",
data: {boardNumber: boardNumber, replyContent: $content},
success: function(){
$("#content").val("");
getList();
}
});
}
//댓글 목록
function getList(){
$.ajax({
url: contextPath + "/board/ReplyListOk.re", //요청할 URL
type: "get", //실행할 서블릿 메소드 방식
// data를 통해 JS 객체를 JSON으로 전송할 때 contentType은 text로 설정해야 한다.
data: {"boardNumber": boardNumber}, //전송할 데이터(JS Object 형식으로 전송)
contentType: "application/json; charset=utf-8", //전송할 데이터의 타입
dataType: "json", //받을 데이터의 타입
success: showList
});
}
//댓글 목록
function showList(replies){
replyList = replies;
var text = "";
if(replies != null && replies.length != 0){
$.each(replies, function(index, reply){
text += "<div id='reply'>"
text += "<p class='writer'>" + reply.memberId +"</p>"
text += "<div class='content' id='content"+ index +"' style='width:100%'>"
text += "<pre>" + reply.replyContent + "</pre>"
text += "</div>"
if(memberNumber == reply.memberNumber){
text += "<input type='button' id='ready" + index + "' class='primary' value='수정' onclick='readyToUpdate(" + index + ")'>";
text += "<input type='button' id='ok" + index + "' class='primary' style='display:none;' value='수정 완료' onclick='update(" + index +")'>";
//버튼 마다 삭제할 댓글의 번호를 같이 전달한다.
text += "<input type='button' id='remove" + index + "' class='primary' value='삭제' onclick='remove(" + reply.replyNumber + ")'>"
}
text += "</div>"
});
}else{
//댓글 없음
text = "<p>댓글이 없습니다.</p>";
}
$("#replies").html(text);
}
//댓글 수정 버튼 클릭
function readyToUpdate(index){
if(check){
alert("이미 수정중인 댓글이 있습니다.");
return;
}
var div = $("#content" + index);
var updateReady = $("#ready" + index);
var updateOk = $("#ok" + index);
var remove = $("#remove" + index);
console.log(remove);
remove.replaceWith("<input type='button' id='cancel" + index +"' value='취소' onclick='updateCancel(" + index + ")'>");
div.replaceWith("<textarea name='replyContent' id='content" + index +"' style='resize:none; border-radius:0; background:white'>" + div.text() + "</textarea>");
check = true;
updateReady.hide();
updateOk.show();
}
//댓글 수정 취소
function updateCancel(index){
check = false;
var div = $("#content" + index);
var updateReady = $("#ready" + index);
var updateOk = $("#ok" + index);
var cancel = $("#cancel" + index);
updateReady.show();
updateOk.hide();
cancel.replaceWith("<input type='button' id='cancel" + index +"' value='삭제' onclick='remove(" + replyList[index].replyNumber + ")'>");
div.replaceWith("<div class='content' id='content"+ index +"' style='width:100%'><pre>" + replyList[index].replyContent + "</pre></div>");
}
//댓글 수정
function update(index){
$.ajax({
url: contextPath + "/board/ReplyUpdateOk.re",
type: 'post',
// JSON으로 데이터 전달할 때에는 아래와 같이 전달하고,
// contentType:text로 반드시 설정한다. 생략 가능!
data: {replyNumber: replyList[index].replyNumber, replyContent: $("#content" + index).val()},
success: function(){
getList();
check = false;
}
});
}
//댓글 삭제
function remove(replyNumber){
$.ajax({
url: contextPath + "/board/ReplyDeleteOk.re",
type: 'get',
data: {replyNumber: replyNumber},
success: function(){
getList();
}
});
}
2. BoardMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http//mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="Board">
<select id="selectAll" parameterType="map" resultType="boardDTO">
select board_number, board_title, board_content, member_id, board_date, read_count
from tbl_board b join tbl_member m
on b.member_number = m.member_number
order by 1 desc limit #{startRow}, #{rowCount}
</select>
<!-- 게시글 전체 개수 -->
<select id="getTotal" resultType="_int">
select count(board_number) from tbl_board
</select>
<!-- 게시글 상세보기(전체 정보 조회) -->
<select id="selectDetail" parameterType="_int" resultType="boardDTO">
select board_number, board_title, board_content, b.member_number, member_id
from tbl_board b join tbl_member m
on b.member_number = m.member_number and board_number = #{boardNumber}
</select>
<!-- 조회수 -->
<update id="updateReadCount" parameterType="_int">
update tbl_board
set read_count = read_count + 1
where board_number = #{boardNumber}
</update>
<!-- 최근 게시글 번호 -->
<select id="getSeq" resultType="_int">
select board_number from tbl_board
order by 1 desc limit 0, 1
</select>
<!-- 게시글 작성 -->
<insert id="insert" parameterType="boardVO">
insert into tbl_board (board_title, board_content, member_number, board_date)
values(#{boardTitle}, #{boardContent}, #{memberNumber}, now())
</insert>
<!-- 게시글 삭제 -->
<delete id="delete" parameterType="_int">
delete from tbl_board where board_number = #{boardNumber}
</delete>
<!-- 게시글 수정 -->
<update id="update" parameterType="boardVO">
update tbl_board
set board_title=#{boardTitle}, board_content=#{boardContent}
where board_number = #{boardNumber}
</update>
</mapper>
3. BoardDetailOk.java
package com.board.app.board;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.BoardDAO;
import com.board.app.domain.dao.FileDAO;
public class BoardDetailOk implements Action {
@Override
public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//사용자가 선택한 게시글 번호를 파라미터로 전달받는다.
int boardNumber = Integer.parseInt(req.getParameter("boardNumber"));
int page = Integer.parseInt(req.getParameter("page"));
BoardDAO boardDAO = new BoardDAO();
FileDAO fileDAO = new FileDAO();
ActionInfo actionInfo = new ActionInfo();
//게시글 번호로 조회한 게시글의 전체 정보를 requestScope에 저장한다.
req.setAttribute("board", boardDAO.selectDetail(boardNumber));
req.setAttribute("page", page);
req.setAttribute("files", fileDAO.select(boardNumber));
//상세보기로 왔다면, 조회수를 1 증가시켜준다.
boardDAO.updateReadCount(boardNumber);
//requestScope에 데이터를 담았기 때문에 forward로 페이지까지 req객체를 유지한다.
actionInfo.setRedirect(false);
actionInfo.setPath("/app/board/boardDetail.jsp");
return actionInfo;
}
}
4. ReplyWriteOk.java
package com.board.app.reply;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.ReplyDAO;
import com.board.app.domain.vo.ReplyVO;
public class ReplyWriteOk implements Action {
@Override
public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
req.setCharacterEncoding("UTF-8");
ReplyVO replyVO = new ReplyVO();
ReplyDAO replyDAO = new ReplyDAO();
replyVO.setReplyContent(req.getParameter("replyContent"));
replyVO.setBoardNumber(Integer.parseInt(req.getParameter("boardNumber")));
replyVO.setMemberNumber((Integer)req.getSession().getAttribute("memberNumber"));
replyDAO.insert(replyVO);
return null;
}
}
5. ReplyUpdateOk.java
package com.board.app.reply;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.ReplyDAO;
import com.board.app.domain.vo.ReplyVO;
public class ReplyUpdateOk implements Action {
@Override
public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
req.setCharacterEncoding("UTF-8");
ReplyVO replyVO = new ReplyVO();
ReplyDAO replyDAO = new ReplyDAO();
replyVO.setReplyNumber(Integer.parseInt(req.getParameter("replyNumber")));
replyVO.setReplyContent(req.getParameter("replyContent"));
replyDAO.update(replyVO);
return null;
}
}
6. ReplyDeleteOk.java
package com.board.app.reply;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.board.app.action.Action;
import com.board.app.action.ActionInfo;
import com.board.app.domain.dao.ReplyDAO;
public class ReplyDeleteOk implements Action {
@Override
public ActionInfo execute(HttpServletRequest req, HttpServletResponse resp) throws IOException {
req.setCharacterEncoding("UTF-8");
new ReplyDAO().delete(Integer.parseInt(req.getParameter("replyNumber")));
return null;
}
}
7. ReplyFrontController.java
package com.board.app.reply;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.board.app.action.ActionInfo;
public class ReplyFrontController extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doProcess(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doProcess(req, resp);
}
protected void doProcess(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String requestURI = req.getRequestURI();
String contextPath = req.getContextPath();
String command = requestURI.substring(contextPath.length());
switch(command) {
case "/board/ReplyListOk.re":
new ReplyListOk().execute(req, resp);
break;
case "/board/ReplyWriteOk.re":
new ReplyWriteOk().execute(req, resp);
break;
case "/board/ReplyUpdateOk.re":
new ReplyUpdateOk().execute(req, resp);
break;
case "/board/ReplyDeleteOk.re":
new ReplyDeleteOk().execute(req, resp);
break;
}
}
}
'웹 개발 > JSP' 카테고리의 다른 글
[Web_JSP] 24 (0) | 2022.06.12 |
---|---|
[Web_JSP] 22 (0) | 2022.06.10 |
[Web_JSP] 21 (0) | 2022.06.09 |
[Web_JSP] 20 (0) | 2022.06.08 |
[Web_JSP] 19 (0) | 2022.06.07 |