240219 스프링 프로젝트

오늘 할 일은 RestAPI, RestFull

 

저번에 만들었던 modal 에 footer 추가

modal-body, div 밑에

<div class="modal-footer">
  모달 footer
</div>

 

이런 식으로 되어있음

 

 

이제 글을 클릭했을 때 페이지가 넘어가는 것이 아닌 

modal 창에 글 띄워보기, 기존 글 작성 modal 복사하여 가져오기

<!-- 자세히보기 Modal -->
<div class="modal" id="detail">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">자세히 보기</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mt-2">
          <h6>제목</h6>
          <h6>내용</h6>
        </div>
      </div>
      <div class="modal-footer">자세히보기, 모달, 닫기</div>
    </div>
  </div>
</div>

 

이번에는 글 제목을 클릭하는 것이 아닌 title 에 포함된 칸을 클릭하면 창 띄워보기

td 쪽에 onclick 추가

<td class="title" onclick="detail(${list.board_no})">

 

스크립트쪽에서 기존 alert 창 대신에 다른 알림창 만들어보기

SweetAlert

 

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

 

해당 코드 추가하고

 

스크립트 추가

function detail(no) {
  // swal("title", "text", "icon");
  swal({
    title: "Goob job!",
    text: "번호 : " + no,
    icon: "success",
    button: "조아요"}); // title, text, icon, button
}

 

설명서대로 작성,, 문자열 안에 ${no} 를 적었는데 왜 번호가 안뜨고 저렇게 써야만 될까..

`` 도 해봤는데,,

 

제목 클릭 시 modal 창 띄우기

스크립트에 modal 창 띄우는 명령 추가

// Modal 이라는 객체를 먼저 생성
let detailModal = new bootstrap.Modal('#detail', {}); // {옵션}
// 생성한 객체를 show() 실행
detailModal.show();

 

글 번호를 modal-title 에 띄우기

modal header 쪽에 id 추가
<h6 class="modal-title" id="modalTitle">자세히 보기</h6>

$("#modalTitle").text(no); // id = modalTitle 의 내용 바꾸기

 

값을 받아올 수 있게 ajax 추가

$.ajax({
  url: "restDetail",
  type: "post",
  dataType: "text", // 이후 JSON 으로 변경
  data: {'no': no},
  success: function(data) {
    alert(data);
  },
  error: function(error){
    alert(error);
  }
});

 

RestController 를 생성하여 값이 잘 오는지 확인

@Controller
public class RestController {
  
  @PostMapping("/restDetail")
  public String restDetail(@Param("no") int no, Model model) {
    System.out.println("restDetail : " + no);
    return "restDetail" + no; // 이건 그냥 써놓은 것
  }
}

 

기존에 만들어두었던 BoardService 와 연결해서 게시글의 내용이 잘 오는지 확인

@Controller
public class RestController {
  
  @Autowired
  private BoardService boardService;
  
  @PostMapping("/restDetail")
  public String restDetail(@Param("no") int no, Model model) {
    BoardDTO dto = boardService.detail(no);
    System.out.println(dto.getBoard_title());
    return "restDetail" + no;
  }
}

 

들어온 detail 값을 바로 보낼 수 있게 어노테이션과 return 값 바꾸기

@PostMapping("/restDetail")
public @ResponseBody BoardDTO restDetail(@Param("no") int no, Model model) {
  BoardDTO detail = boardService.detail(no);
//  System.out.println(detail.getBoard_title());
  return detail;
}

 

-> return 이 JSON 값으로 변환됨

 

ajax 의 dataType 을 json 으로 바꾸고

board_title 값이 잘 뜨는지 확인하기

 

success 에 modal 값 변경시키기

success: function(data) {
  $("#modalTitle").text(data.board_title);
  $("#modalContent").html(data.board_content);
  detailModal.show();
},

 

Ajax 에 대한 설명

AJAX란? JQuery를 이용한 AJAX사용법

 

Spa 에 대한 설명

SPA 그리고 SSR과 CSR

 

클릭 시 글 잘 뜨는지 확인

 

detail 에서 댓글 만들기

자세히보기 창이 기존 만들어둔 창, Modal 창 총 2개 중 먼저 기존 만들어둔 자세히보기 창에 댓글 달기

기존 detail 창 밑에

<div class="">
  <form action="./commentWrite" method="post">
    <div class="comment row">
      <div class="col-11">
        <textarea class="form-control" name="comment"></textarea>
      </div>
      <div class="col-1">
        <button class="btn btn-outline-dark" type="submit">댓글</button>
      </div>
      <input type="hidden" name="no" value="${detail.board_no }">
    </div>
  </form>
</div>

 

좀 이쁘게 만들고 싶은데 잘 안됨

 

BoardController 에서 값이 잘 오는지 확인, DB 와 연결하기

@PostMapping("/commentWrite")
public String commentWrite(CommentDTO comment) {
//  System.out.println(comment.getNo() + " : " + comment.getComment());
  int result = boardService.commentWrite(comment);
  if (result == 1) {
    }
  return "redirect:/detail?no=" + comment.getNo();
}

public int commentWrite(CommentDTO comment) {
  comment.setId("test1");
  return boardRepository.commentWrite(comment);
}

public int commentWrite(CommentDTO comment) {
  return sqlSession.insert("board.commentWrite", comment);
}

 

mybatis 에 commentDTO alias 설정

<typeAlias type="org.solbum.dto.CommentDTO" alias="commentDTO"/>

 

board-mapper 에 sql문 추가

<insert id="commentWrite" parameterType="commentDTO">
  insert into comment (board_no, mno, ccomment) 
  values (#{no}, (select mno from member where mid=#{id}), #{comment})
</insert>

 

댓글 작성은 완료

 

이제 detail 클릭 시 댓글 보이게 하기

BoardController 에서 detail mapping 쪽에 댓글 List 불러오기 추가

  @GetMapping("/detail")
  public String detail(Model model, @RequestParam(value = "no", defaultValue = "-1", required = true) String no) {
    // HttpServletRequest 로 기존에 배웠던 request.getParameter 사용 가능
    // String no 로 변수 이름과 일치하는 파라미터 값 조회 가능
    int reNo = util.str2Int(no);
    if (reNo != -1) {
      BoardDTO boardDTO = boardService.detail(reNo);
      model.addAttribute("detail", boardDTO);
      if (boardDTO.getComment() > 0) {
        List<CommentDTO> commentList = boardService.commentList(reNo);
        model.addAttribute("comment", commentList);
      }
      return "detail";
    } else {
      // return "error/error";
      return "redirect:/error"; // controller 에 있는 error 매핑을 실행
    }
  }

 

기존 db 에 글마다 댓글 개수가 들어있는데, 댓글이 0개보다 많을 경우 (댓글이 있을 경우)

댓글 조회하여 불러오기

 

이후 똑같이 BoardServicc, BoardRepository 를 건너 board-mapper 에 세팅하기

그 전에 commnetDTO 에 컬럼명 추가

@Setter
@Getter
public class CommentDTO {
  private int no, mno;
  private String comment, mid, mname, cdate, clike, cip;
}

 

board-mapper 에 추가

<select id="commentList" parameterType="Integer" resultMap="commentDTOmap">
  select cno, ccomment, clike, cdate, mno, mname, mid, cip
  from commentview where board_no = #{no}
</select>

 

여기서 DTO 와 컬럼명이 안맞는게 몇개 있는데, 그것은 resultMap 으로 컬럼명을 변경하여 해결 가능

<!-- DB 에 있는 데이터와 DTO 의 값 매핑시키기 -->
<resultMap type="commentDTO" id="commentDTOmap">
  <result column="cno" property="no" jdbcType="Integer" javaType="Integer"/>
  <result column="ccomment" property="comment"/>
  <result column="cdate" property="cdate"/>
  <result column="clike" property="clike"/>
  <result column="mid" property="mid"/>
  <result column="mno" property="mno"/>
  <result column="mname" property="mname"/>
  <result column="cip" property="cip"/>
</resultMap>

일치하지 않는 값만 넣어도 처리 가능

 

jstl forEach 문법으로 조회하면 댓글 확인 가능

<div class="commentList">
  <c:forEach items="${comment }" var="list">
    <div class="d-flex justify-content-between mb-1 p-1">
      <span>${list.mname } 님</span> <span>${list.cdate }</span>
    </div>
    <div class="p-1 comment">${list.comment }</div>
  </c:forEach>
</div>