202040312 전자전부 복습(상세보기(detail)
2024. 3. 11. 19:59ㆍ복습/전자정부-게시판만들기
상세보기
다음엔 멀티보드 연결해서 글쓰기까지 가져오기
<div class="col-5 text-start"
th:onclick="|location.href='@{/detail(no=${row.mtno})}'|">[[${row.mttitle }]]</div>이렇게 detail로 연결하면
mtno가 찍힌다.
IndexController > detail
@GetMapping("/detail")
public String detail(@RequestParam("no") int no, Model model) {
List<Map<String, Object>> detail = indexService.detail(no);
model.addAttribute("detail", detail);
return "detail";
}이렇게 하니까 안되서 찾아봤다.
List 사용하지 않고 Map을 사용하라고 한다.그래서 코드를 바꿨다.
@GetMapping("/detail")
public String detail(@RequestParam("no") int no, Model model) {
Map<String, Object> detail = indexService.detail(no);
model.addAttribute("detail", detail);
return "detail";
}그러니까 된다. 이후 서비스, dao도 수정해 줬다.
IndexService > detail
public Map<String, Object> detail(int no) {
return indexDAO.detail(no);
}
IndexDAO > detail
Map<String, Object> detail(int no);
detail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
[[${detail.board_no}]]
[[${detail.board_title}]]
[[${detail.board_content}]]
</body>
</html>
detail.html(상세보기) 꾸며주기
<!-- Quote/testimonial aside-->
<aside class="text-center">
<div class="container px-5">
<div class="p-3 mt-5 mb-2 rounded" style="background-color: #FAFAFA">
<div class="boarder-bottom">
<h3 th:text="${detail.mttitle }"></h3>
</div>
<div class="boarder-bottom" style="background-color: #c0c0c0">
<div class="row">
<div class="col-6 text-start">
[[${detail.mname }]]님
</div>
<div class="clo-6 row text-end">
<div class="col-7" th:text="${detail.mtread }"></div>
<div class="col-5" th:text="${detail.mtip }"></div>
</div>
</div>
</div>
<div class="mt-3 text-start" th:utext="${detail.mtcontent }" style="min-height: 300px; height: auto"></div>
</div>
</div>
</aside>
<!-- App feat
게시판으로 가는 a태그 추가
<!-- 게시판으로 -->
<div class="row justify-content-center mt-3">
<div class="col-md-6">
<a href="/freeboard" class="btn btn btn-block">게시판으로</a>
</div>
</div>
수정하기, 삭제하기 만들기
스윗어럴트 추가
<!-- 스윗어럴트 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
onclick 추가
<div class="col-6 text-start">
[[${detail.mname }]]님
<i class="bi bi-pencil-fill" th:id="${detail.mtno }" onclick="update(this.id)"></i>
<i class="bi bi-trash2-fill" th:id="${detail.mtno }" onclick="del(this.id)"></i>
</div>
스크립트 추가
<script type="text/javascript">
function update(no){
Swal.fire({
title: "수정합니까?",
text: "해당 내용을 수정합니다.",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "수정"
}).then((result) => {
if (result.isConfirmed) {
//Swal.fire({title: "수정을 선택했습니다.",text: "수정합니다.",icon: "success"});
let form = document.createElement('form');
form.setAttribute('method','get');
form.setAttribute('action','/postUpdate');
let input = document.createElement('input');
input.setAttribute('type','hidden');
input.setAttribute('name','no');
input.setAttribute('value', no);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
});
}
function del(no){
Swal.fire({
title: "삭제합니까?",
text: "해당 내용을 삭제합니다. 복구가 불가능합니다.",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "삭제"
}).then((result) => {
if (result.isConfirmed) {
//Swal.fire({title: "삭제를 선택했습니다.",text: "삭제합니다.",icon: "success"});
//location.href="/postDel?no="+no;
let form = document.createElement('form');
form.setAttribute('method','post');
form.setAttribute('action','/postDel');
let input = document.createElement('input');
input.setAttribute('type','hidden');
input.setAttribute('name','no');
input.setAttribute('value', no);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
});
}
</script>
'복습 > 전자정부-게시판만들기' 카테고리의 다른 글
| 20240309 전자정부 복습(프로젝트생성~디테일jsp 만들기) (0) | 2024.03.09 |
|---|