Spring Project 8.
91606 단어 Spring bootSpring boot
📌 프로젝트 8번째 이야기
✅ 이번 목표
1. 글 목록 나타내기 ⭕ (11.7 완료)
2. 글 목록 페이징 ⭕ (11.8 완료)
3. 글 상세보기 ⭕ (11.8 완료)
4. 글 삭제하기 ⭕ (11.8 완료)
5. 글 수정하기 ⭕ (11.8 완료)
1. 글 목록 나타내기
1) index 페이지 수정
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="layout/header.jsp" %>
<div class="container">
<c:forEach var="board" items="${boards}">
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">${board.title}</h4>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
</c:forEach>
</div>
<%@include file="layout/footer.jsp" %>2) BoardService
3) BoardController
2. 글 목록 페이징
1) index 페이지 수정
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="layout/header.jsp" %>
<div class="container">
<c:forEach var="board" items="${boards.content}">
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">${board.title}</h4>
<a href="#" class="btn btn-primary">상세보기</a>
</div>
</div>
</c:forEach>
<ul class="pagination justify-content-center">
<c:choose>
<c:when test="${boards.first}">
<li class="page-item disabled"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${boards.last}">
<li class="page-item disabled"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
</c:otherwise>
</c:choose>
</ul>
</div>
<%@include file="layout/footer.jsp" %>2) BoardServise 수정
3. 글 상세보기
1) index 페이지 수정
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="layout/header.jsp" %>
<div class="container">
<c:forEach var="board" items="${boards.content}">
<div class="card m-2">
<div class="card-body">
<h4 class="card-title">${board.title}</h4>
<a href="/board/${board.id}" class="btn btn-primary">상세보기</a>
</div>
</div>
</c:forEach>
<ul class="pagination justify-content-center">
<c:choose>
<c:when test="${boards.first}">
<li class="page-item disabled"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${boards.last}">
<li class="page-item disabled"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
</c:otherwise>
</c:choose>
</ul>
</div>
<%@include file="layout/footer.jsp" %>2) detail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../layout/header.jsp" %>
<div class="container">
<button class="btn btn-secondary" onclick="history.back()">돌아가기</button>
<button id="btn-update" class="btn btn-warning">수정</button>
<button id="btn-delete" class="btn btn-danger">삭제</button>
<br/><br/>
<div>
<h3>${board.title}</h3>
</div>
<hr />
<div>
<div>${board.content}</div>
</div>
<hr />
</div>
<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp" %>3) BoardController 수정
4) BoardService 수정
4. 글 삭제하기
1) detail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../layout/header.jsp" %>
<div class="container">
<button class="btn btn-secondary" onclick="history.back()">돌아가기</button>
<button id="btn-update" class="btn btn-warning">수정</button>
<c:if test="${board.user.id == principal.user.id}">
<button id="btn-delete" class="btn btn-danger">삭제</button>
</c:if>
<br/><br/>
<div>
글 번호: <span id="id"><i>${board.id} </i></span>
작성자: <span><i>${board.user.username} </i></span>
</div>
<br/>
<div>
<h3>${board.title}</h3>
</div>
<hr />
<div>
<div>${board.content}</div>
</div>
<hr />
</div>
<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp" %>2) board.js 수정
let index = {
init: function () {
$("#btn-save").on("click", ()=>{
this.save();
});
$("#btn-delete").on("click", ()=>{
this.deleteById();
});
},
save:function () {
let data = {
title: $("#title").val(),
content: $("#content").val()
};
$.ajax({
type: "POST",
url: "/api/board",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function (resp){
alert("글씨기가 완료되었습니다.");
location.href = "/";
}).fail(function (error){
alert(JSON.stringify(error));
});
},
deleteById:function () {
var id = $("#id").text();
$.ajax({
type: "DELETE",
url: "/api/board/"+id,
dataType: "json"
}).done(function (resp){
alert("삭제가 완료되었습니다.");
location.href = "/";
}).fail(function (error){
alert(JSON.stringify(error));
});
},
}
index.init();3) BoardApiController 수정
4) BoardService 수정
5. 글 수정하기
1) detail.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../layout/header.jsp" %>
<div class="container">
<button class="btn btn-secondary" onclick="history.back()">돌아가기</button>
<c:if test="${board.user.id == principal.user.id}">
<a href="/board/${board.id}/updateForm" class="btn btn-warning">수정</a>
<button id="btn-delete" class="btn btn-danger">삭제</button>
</c:if>
<br/><br/>
<div>
글 번호: <span id="id"><i>${board.id} </i></span>
작성자: <span><i>${board.user.username} </i></span>
</div>
<br/>
<div>
<h3>${board.title}</h3>
</div>
<hr />
<div>
<div>${board.content}</div>
</div>
<hr />
</div>
<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp" %>2) saveForm.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../layout/header.jsp" %>
<div class="container">
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter title" id="title">
</div>
<div class="form-group">
<textarea class="form-control summernote" rows="5" id="content"></textarea>
</div>
</form>
<button id="btn-save" class="btn btn-primary">글쓰기완료</button>
</div>
<script>
$('.summernote').summernote({
tabsize: 2,
height: 300
});
</script>
<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp" %>3) updateForm.jsp
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../layout/header.jsp" %>
<div class="container">
<form>
<input type="hidden"id="id"value="${board.id}"/>
<div class="form-group">
<input value="${board.title}" type="text" class="form-control" placeholder="Enter title" id="title">
</div>
<div class="form-group">
<textarea class="form-control summernote" rows="5" id="content">${board.content}</textarea>
</div>
</form>
<button id="btn-update" class="btn btn-primary">글수정완료</button>
</div>
<script>
$('.summernote').summernote({
tabsize: 2,
height: 300
});
</script>
<script src="/js/board.js"></script>
<%@include file="../layout/footer.jsp" %>4) board.js 수정
let index = {
init: function () {
$("#btn-save").on("click", ()=>{
this.save();
});
$("#btn-delete").on("click", ()=>{
this.deleteById();
});
$("#btn-update").on("click", ()=>{
this.update();
});
},
save:function () {
let data = {
title: $("#title").val(),
content: $("#content").val()
};
$.ajax({
type: "POST",
url: "/api/board",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function (resp){
alert("글씨기가 완료되었습니다.");
location.href = "/";
}).fail(function (error){
alert(JSON.stringify(error));
});
},
deleteById:function () {
let id = $("#id").text();
$.ajax({
type: "DELETE",
url: "/api/board/"+id,
dataType: "json"
}).done(function (resp){
alert("삭제가 완료되었습니다.");
location.href = "/";
}).fail(function (error){
alert(JSON.stringify(error));
});
},
update:function () {
let id = $("#id").val();
let data = {
title: $("#title").val(),
content: $("#content").val()
};
$.ajax({
type: "PUT",
url: "/api/board/"+id,
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function (resp){
alert("글수정이 완료되었습니다.");
location.href = "/";
}).fail(function (error){
alert(JSON.stringify(error));
});
},
}
index.init();5) BoardController 수정
6) BoardApiController 수정
7) BoardService 수정
기본적인 CRUD는 끝이났다.
목표는 Elasticsearch 까지 적용하는 것이기 때문에 최대한 맞춰서 진행 할 예정이다.
11월 한달 동안은 파일럿 오픈 준비때문에 코딩에는 신경을 많이 못 쓸것 같다..
그래도 중간중간 열심히 해봐야겠다....
Author And Source
이 문제에 관하여(Spring Project 8.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@davidkim97/Spring-Project-8저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
