24. 10. 24 세미프로젝트 점메추 작성글 삭제, 수정

** 여러가지 boardNo를 삭제하고 싶을 때 ** (기존 내용은 삭제

(th:data-별칭) --> For문으로 받아온 객체값 자바스크립트 변수에 넣어주기
th:data-별칭

**** POST 매핑은 두가지만 가능하다 -> ajax, form태그 ****


1. id(식별자) -> class 

id는 식별자로써 1개씩 있을때 사용해야하는데, 

이번에 사용할 코드에서는 

사용할 값들이 여러개 필요했기 때문에 불가

2. 버튼 클릭시 데이터 가져오는 방법

const boardNo = deleteBtn[i].closest(".board-btn-area").dataset.boardNo;

/** 게시글 삭제

* @param boardNo

* @param loginMember

* @param ra

* @param referer : 현재 컨트롤러 메서드를 요청한 페이지 주소(이전페이지주소 == main페이지)

* @return

@PostMapping("delete")

public String boardDelete(

@RequestParam("boardNo")int boardNo,

// @SessionAttribute("loginMember")Member loginMember,

RedirectAttributes ra,

@RequestHeader("referer") String referer) {

log.debug("referer : {}", referer);

// 행의 개수때문에 int를 적어줘야함

int delete = service.boardDelete(boardNo, 1);

String path = null;

String message = null;

if(delete == 0) {

path = "referer";

message = "삭제실패!";

}else {

path = "boardMain";

message = "삭제되었습니다!";

}

ra.addFlashAttribute("message", message);

return "redirect:" + path;

}

boardMain.js

/* 삭제버튼 클릭 시

- 삭제버튼 클릭시 "정말 삭제하시겠습니까?" confirm()

-/boradMain/delete, POST 방식, 동기식 요청

-> from 태그 생성 + 게시글 번호가 세팅된 input

-> body 태그 제일 아래 추가해서 submit()

- 서버(Java)에서 로그인한 회원의 회원번호를 얻어와

로그인한 회원이 작성한 글이 맞는지 SQL에서 검사

// const boardNo = document.querySelector(".board-btn-area").dataset.boardNo;

// 삭제버튼 요소 얻어오기

const deleteBtn = document.querySelectorAll(".deleteBtn");

for (let i = 0; i < deleteBtn.length; i++) {

// 삭제버튼이 존재할 때 이벤트 리스너 추가

deleteBtn[i]?.addEventListener("click", () => {

if (confirm("정말 삭제하시겠습니까?") == false) {

return;

}

const boardNo = deleteBtn[i].closest(".board-btn-area").dataset.boardNo;

const url = "/board/delete"; // 요청주소

// 게시글 번호 == 전역변수 boardNo

// form태그 생성

const form = document.createElement("form");

form.action = url;

form.method = "POST";

// POST는 누구나 할 수 없을때

// form태그와 ajax 2가지 방식밖에 없음

// input 태그생성

const input = document.createElement("input");

input.type = "hidden";

input.name = "boardNo";

input.value = boardNo;

form.append(input); // form 자식으로 input 추가

// body 자식으로 form 추가

document.querySelector("body").append(form);

form.submit(); // 제출

})

}

그냥 const boardNo = document.querySelector(".board-btn-area").dataset.boardNo;을 썼을때는

boardNo를 다가져왔기 때문에 어디를 삭제하든 가장 위에가 삭제됐음

★★

const boardNo = deleteBtn[i].closest(".board-btn-area").dataset.boardNo;

을 사용함으로써 closest -> boradBtn을 감싸는 가장 가까운 요소인 .board-btn-area 을 가져와서 
가까운 게시물 삭제가능!!!

☆☆☆삭제했을때 알람뜨게하기 ☆☆☆☆

	<script th:inline="javascript">
		const message =  /*[[${message}]]*/ "전달 받은 message";
	
		if(message != null) alert(message);
	</script>

게시판 수정

<form class="post-container"

th:action="update"

method="POST"

id="boardWriteFrm"

enctype="multipart/form-data">

<textarea name="boardTitle" id="" class="title-write" placeholder="제목"

th:text="${board.boardTitle}"></textarea>

</div>

<hr>

<br>

</label>

<div>

<br>

</div>

<br>

<textarea name="boardContent" id="write-content" class="body-write"

th:text="${board.boardContent}">게시글 내용</textarea>

</div>

th:action="xx" th:object="${board}" 을 써줘야만

th:text="*{boardContent}" 작성 가능하다!!!!!!!!!

보통 제목은 input 으로 작성하는데, input 일 경우에 value값에 th:value를 넣고 자바와 연결할 수 있다.

textarea로 적은 경우에는 th:textarea 로 적으면됨.

img는 th:src="${board.Img}" 로 적으면됨...

BoardController 게시글 수정화면에서!!!!!!

/** 게시글 수정화면 전환

* @param boardNo : boardNo

* @param loginMember : 로그인한 회원정보

* @param ra : 리다이렉트시 request scope로 데이터 전달

* @param model : forward 시 request scope로 데이터 전달

* @return

@PostMapping("updateView")

public String updateView(

@RequestParam("boardNo") int boardNo,

// @SessionAttribute("loginMember")Member loginMember,

RedirectAttributes ra,

Model model){

Board board = service.updateView(boardNo);

model.addAttribute("board", board);

return "board/boardUpdate";

}

Board board = service.xxxxxxx

K V

까먹지말고 model.addAttribute("board", board);적어줘야만 html에서 사용가능하다!!!!!!!!!!!!!!

융기융의 맛집 탐방세상

24. 10. 24 세미프로젝트 점메추 작성글 삭제, 수정

티스토리툴바