실습(댓글)
- [Web_Spring] 17 이어서
1. src/main/resource/static/js/reply.js
let replyService = (function(){
function add(reply, callback){
console.log("add reply.........");
console.log(reply);
$.ajax({
url: "/reply/new",
type: "post",
data: JSON.stringify(reply),
contentType: "application/json",
success: function(result){
if(callback){
callback(result);
}
}
});
}
function getList(param, callback){
let boardNumber = param.boardNumber;
let page = param.page || 1;
$.getJSON("/reply/list/" + boardNumber + "/" + page, function(list){
if(callback){
callback(list);
}
});
}
function read(replyNumber, callback){
$.get("/reply/" + replyNumber, function(reply){
if(callback){
callback(reply);
}
});
}
function remove(replyNumber, callback){
$.ajax({
url: "/reply/" + replyNumber,
type: "delete",
success: function(result){
if(callback){
callback(result);
}
}
});
}
function modify(reply, callback){
$.ajax({
url: "/reply/" + reply.replyNumber,
type: "PUT",
data: JSON.stringify(reply),
contentType: "application/json; charset=utf-8",
success: function(result){
if(callback){
callback(result);
}
}
});
}
return {add: add, getList: getList, read: read, remove: remove, modify: modify};
})();
2. src/main/resource/templates/board/read.html
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Board</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="/css/main.css" />
<style>
.line {
border-bottom: 1px solid #ff8b77;
}
.replies li {
list-style: none;
}
h4 {
margin-bottom: 0;
margin-top: 25px;
}
</style>
</head>
<body class="is-preload">
<!-- Main -->
<div id="main">
<div class="wrapper">
<div class="inner">
<!-- Elements -->
<header class="major">
<h1>Board</h1>
<p>게시글 상세보기</p>
</header>
<!-- Table -->
<h3><a id="goList" class="button small">목록 보기</a></h3>
<div class="content">
<div class="form">
<form action="/board/remove" method="post">
<div class="fields" th:object="${board}">
<div class="field">
<h4>번호</h4>
<input type="text" th:field="*{boardNumber}" readonly/>
</div>
<div class="field">
<h4>제목</h4>
<input type="text" th:field="*{boardTitle}" readonly/>
</div>
<div class="field">
<h4>내용</h4>
<textarea rows="6" style="resize:none" th:field="*{boardContent}" readonly></textarea>
</div>
<div class="field">
<h4>작성자</h4>
<input type="text" th:field="*{boardWriter}" readonly/>
</div>
</div>
<ul class="actions special">
<li>
<input type="button" class="button" value="수정" onclick="goUpdate()"/>
<input type="submit" class="button" value="삭제"/>
</li>
</ul>
<a href="javascript:void(0)" class="register button primary small" style="width: 100%">댓글 등록</a>
<div style="display: none" class="register-form">
<div>
<h4>작성자</h4>
<input type="text" name="replyWriter" placeholder="Replier">
</div>
<div>
<h4>댓글</h4>
<textarea rows="6" name="replyContent" placeholder="Reply" style="resize: none"></textarea>
</div>
<div style="text-align: right">
<a href="javascript:void(0)" class="finish button primary small">등록</a>
<a href="javascript:void(0)" class="cancel button primary small">취소</a>
</div>
</div>
<ul class="replies"></ul>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- Scripts -->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.dropotron.min.js"></script>
<script src="/js/browser.min.js"></script>
<script src="/js/breakpoints.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
<!--<script th:inline="javascript">let boardNumber = [[${board.boardNumber}]];</script>-->
<script src="/js/reply.js"></script>
</script>
</html>
'웹 개발 > Spring' 카테고리의 다른 글
| [Web_Spring] 23 (0) | 2022.07.01 |
|---|---|
| [Web_Spring] 19 (0) | 2022.07.01 |
| [Web_Spring] 17 (0) | 2022.06.29 |
| [Web_Spring] 16 (0) | 2022.06.28 |
| [Web_Spring] 15 (0) | 2022.06.27 |