[Spring JPA ] - 글목록 페이지 생성 (index 에서 BoardList페이지로 변경 ), 글목록 수정하기- 14

JEONG SUJIN·2022년 11월 26일

스프링부트 JPA

목록 보기

15/24

기존에는 index.jsp에 목록이 바로 나와서 그부분을 list.jsp 만들어서 수정

header.jsp

<c:otherwise>
						<ul class="navbar-nav">
							<li class="nav-item"><a class="nav-link"
								href="/board/saveForm">글쓰기</a></li>
								
							<li class="nav-item"><a class="nav-link"
								href="/board/boardList">목록</a></li>
									
							<li class="nav-item"><a class="nav-link"
								href="/user/updateForm">회원정보</a></li>
							<li class="nav-item"><a class="nav-link"
								href="/logout">로그아웃</a></li>
						</ul>
</c:otherwise>

index.jsp

<div class="container">
	인덱스페이지
</div>

list.jsp

<%@ 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">

			<div class="card-body">

				<h4 class="card-title">${board.title}</h4>
				<p class="card-text">${board.content}</p>
				<p class="card-text">${board.createDate }</p>
				<p class="card-text">${board.user.username }</p>

				<a href="/board/${board.id}" class="btn btn-dark">상세보기</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}">이전</a></li>
			</c:when>
			<c:otherwise>
				<li class="page-item"><a class="page-link"
					href="?page=${boards.number-1}">이전</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}">다음</a></li>
			</c:when>

			<c:otherwise>	
			<li class="page-item"><a class="page-link"
					href="?page=${boards.number+1}">다음</a></li>
				
			</c:otherwise>
		</c:choose>
	</ul>

</div>
<%@ include file="../layout/footer.jsp"%>

BoardController.java

인덱스로 이동하는 부분을 맵핑주소랑 리턴주소랑 index를 list로 변경

@GetMapping("/board/boardList")
	//게시판 목록 갈때 데이터를 가져가야한다.
	public String list(Model model,@PageableDefault(size=2, sort="id", direction=Sort.Direction.DESC) Pageable pageable) {
		model.addAttribute("boards", boardService.boardList(pageable));
		return "board/list"; //viewResolver 작동 
	}

글 수정하기

다시 detail.jsp 에서 수정버튼을 유저아이디랑 글쓴아이디랑 동일할 때 보이도록 변경

게시판 수정은 페이지 이동을 해야되서 <a href=""></a> 태그로 변경

detail.jsp

<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>

BoardController.java

	//글수정하기 
	@GetMapping("/board/{id}/updateForm")
	public String update(@PathVariable int id, Model model) {
		model.addAttribute("board", boardService.boardView(id));
		return "board/updateForm";
	}

@PathVariable로 id값을 받고, model넣어주고, model객체는 해당 데이터를 가지고 뷰 페이지를 넘겨줄 때 사용

model.addAttribute("보낼데이터", boardService.boardView(id)); 를
그대로 실행해준다.

updateForm.jsp

<%@ 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">
			<!--model에 데이터를 들고 오니까  -->
			<input type="text" value="${board.title}" class="form-control" placeholder="Enter title" id="title" >
		</div>
	
		<div class="form-group">
		 
			<textarea class="form-control summernote" rows="5" cols="" 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" %>

title, content 만 가지고 수정할 수 없기 때문에
<input type="hideen" id="id" value="${board.id}"> 를 추가 해준다.

모델에 데이터를 들고 오니까, value="${board.title}" 에 값을 넣어준다.

<button id="btn-update">글 수정하기</button>
버튼을 클릭했을 때 실행되는 로직을 board.js에서 구현

board.js


// 클릭했을때 이벤트
$("#btn-update").on("click", ()=> {
			this.update();
		})


update: function() {
		
		let id = $("#id").val(); //아이디값
		let data = {
			title:$("#title").val(), //title값 
			content:$("#content").val(), //content값
		};	
		$.ajax({
		type:"PUT", //수정할거니까 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));
		});
	},

BoardApiController.java

//글 수정 
	@PutMapping("/api/board/{id}")
	public ResponseDto<Integer> updateForm(@PathVariable int id, @RequestBody Board board){
		boardService.updateForm(id,board);
		return new ResponseDto<Integer> (HttpStatus.OK.value(),1);
	}

BoardService.java

//글수정
	@Transactional
	public void updateForm(int id, Board requestBoard) {
	// 글 수정할려면 영속화를 시켜야함
	Board board = boardRepository.findById(id).orElseThrow(()->{
		return new IllegalArgumentException("글 찾기실패: 아이디를 찾을 수 없습니다");
	});
	
	//영속화된 board
	board.setTitle(requestBoard.getTitle());
	board.setContent(requestBoard.getContent());
	//해당 함수로 종료시 Service가 종료, 트랜잭션이 종료. 이때 더티체킹
	//영속화되어있는 Board의 데이터가 달라졌기 때문에 더티체킹이 일어나면서 자동 업데이트가 된다.
	
	}