danDevlog

Spring - 4 (View구현 - list) 본문

Spring 게시판 만들기

Spring - 4 (View구현 - list)

단데기이 2022. 4. 17. 18:38
728x90

구현한 Service를 테스트하기위해 Test에 패키지를 만들어 BoardServiceTests를 생성한다.

package com.review.service;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import com.review.domain.BoardVO;

import lombok.Setter;
import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardServiceTests {
	
	// 어노테이션에 전달값이 여러개의 배열 형태라면 {} 이용
	@Setter(onMethod_ = { @Autowired })
	private BoardService service;
	
	@Test
	public void testResgister() {
		BoardVO board = new BoardVO();
		board.setTitle("새로 작성하는 글");
		board.setContent("새로 작성하는 내용");
		board.setWriter("새로운 작성자");
		
		service.register(board);
		log.info("생성된 게시물 번호 + " + board.getBno());
		
		// 서비스 >> 매퍼 >> mybatis query, 다른 메소드 테스트는 비슷함.
	}
}

Controller를 작성해본다.

src/main/java -> com.review.controller -> BoardController 클래스 생성

package com.review.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.review.service.BoardService;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;


@Log4j
@RequestMapping("/board/*")
@AllArgsConstructor
@Controller
public class BoardController {
	
	private BoardService service;
	
	@GetMapping("/list")
	private void list(Model model) {
		log.info("list");
		model.addAttribute("list",service.getList());
		
		// 컨트롤러 >> 서비스 >> 매퍼 >> mybatis
	}
}

@RequestMapping : 요청에 대해 어떤 Controller, 어떤 메소드가 처리할지를 맵핑하기 위한 어노테이션

여기선 /board/* 로 지정하여 아래에 GetMapping 주소에 /board 부분이 추가되었다고 보면된다.

 

@AllArgsConstructor : 모든 필드 값을 파라미터로 받는 생성자를 만들어준다.

 

@GetMapping : HTTP GET 요청을 처리하는 메서드를 맵핑하는 어노테이션이다.

 

model.addAttribute : 모델에 데이터를 담아준다. 위에선 name이 "list" 이며, value는 service.getlist() 이다.

즉, 서비스에서 리스트를 가져오면 이 데이터들을 list에 담는다는 뜻

 

제대로 화면에 출력되는지 jsp 파일을 생성해본다.

해당 경로처럼 폴더와 jsp파일을 생성한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>${list }</p>
</body>
</html>

서버의 기본경로에 controller 경로를 추가해서 실행하도록 경로가 지정되어있기때문에 바꿔준다.

주소 : localhost:8080/board/list

model로 받아온 데이터가 출력되는것을 볼 수 있다.

 

이제 글쓰기, 글읽기, 글 수정, 글 삭제 컨트롤러 기능을 구현한다.

package com.review.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.review.domain.BoardVO;
import com.review.service.BoardService;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

@Log4j
@RequestMapping("/board/*")
@AllArgsConstructor
@Controller
public class BoardController {

	private BoardService service;

	@GetMapping("/list")
	private void list(Model model) {
		log.info("list");
		model.addAttribute("list", service.getList());

		// 컨트롤러 >> 서비스 >> 매퍼 >> mybatis
	}

	// 글쓰기
	@PostMapping("/register")
	public String register(BoardVO board, RedirectAttributes rttr) {
		// @Controller 어노테이션이 붙고,
		// 컴포넌트 스캔에 패키지가 지정되어 있다면,
		// 매개변수 인자들은 스프링이 자동으로 생성 할당 함.
		log.info("register : " + board);
		service.register(board);
		rttr.addFlashAttribute("result", board.getBno());
		// 리다이렉트 시키면서 1회용 값을 전달.
		return "redirect:/board/list";
	}

	// 글읽기
	@GetMapping("/get")
	public void get(@RequestParam("bno") Long bno, Model model) {
		// @RequestParam : 요청 전달값으로 글번호 이용.
		log.info("/get");
		model.addAttribute("board", service.get(bno));
		// jsp에서 request.setAttribute 하던 것과 비슷.
		// 전달값으로 명시만 하면 스프링이 자동 처리.
		// 사용하는 부분만 추가 구현.
	}

	// 글 수정
	// post 요청으로 /modify가 온다면, 아래 메소드 수행.
	@PostMapping("/modify")
	public String modify(BoardVO board, RedirectAttributes rttr) {
		log.info("modify:" + board);
		if (service.modify(board)) {
			rttr.addFlashAttribute("result", "success");
		}
		// 수정이 성공하면 success 메세지가 포함되어 이동.
		// 실패해도 메세지 빼고 이동.
		return "redirect:/board/list";
	}

	// 글 삭제
	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes rttr) {
		log.info("remove..." + bno);
		if (service.remove(bno)) {
			rttr.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}
}

RedirectAttribut : Model과 같이 파라미터로 선언해서 사용

addFlashAttribute(이름, 값) 메서드를 이용해서 화면에 한 번만 사용하고 다음에는 사용되지 않는 데이터를 전달하기

위해서 사용한다.

 

RequestParam은 아래처럼 사용하며, 1개의 HTTP 요청 파라미터를 받기 위해서 사용한다. @RequestParam은 필수 여부가 true이기 때문에 기본적으로 반드시 해당 파라미터가 전송되어야 한다. 해당 파라미터가 전송되지 않으면 400 Error를 유발하게 된다.

@RequestParam("가져올 데이터의 이름") [데이터타입] [가져온데이터를 담을 변수]

 

스프링4.3 버전부터 새로운 어노테이션이 추가되었는데 그 중 PostMapping 과 GetMapping이 있다.

기존 방식으로는

@RequestMaiing(value="경로", method=RequestMethod.GET)

이러한 방식으로 사용했었지만, 지금은

@GetMapping("/list")

이렇게 코드가 단축되어 간편한게 사용할 수 있다.

GET은 주로 조회일때 사용, POST는 생성할때 주로 사용

DB에 영향을 주면 모두 POST라고 봐도 무관하다.

 

기본적인 틀이 적용되어있는 화면을 위해 부트스트랩을 설치하여 적용한다.

https://startbootstrap.com/themes/sb-admin-2/ 를 다운받아서 

해당 경로에 넣어주었다.

폴더 안에서 table.html을 찾아서 list.jsp에 적용해준다.

적용후에 경로가 달라졌기때문에 list.jsp 파일에서 사진과 같은 경로들을 수정해준다.

css, js등 경로에 모두 붙여줘야한다.

적용화면

코드를 수정하기에 너무 복잡하니, header와 footer로 나눠준다.

코드 중앙에 div class="contatiner-fluid 가 있는곳까지 header로 잘라내어 붙여넣어준다.

그다음 주석으로 footer 선이 그어져있는곳부터 그아래 쭉 잘라내어 붙여넣어준다.

 

header와 footer추가를 위해서 list.jsp에 <%@ include file="../includes/header.jsp" %> 와 아래에

 <%@ include file="../includes/footer.jsp" %>를 추가해준다.

 

 

데이터베이스에서 가져온 데이터들을 출력할 수 있게 코드를 수정한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- jstl core 쓸때 태그로 c로 표시 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!-- jstl fmt 쓸때 위와 같음, fmt : fomatter 형식 맞춰서 표시 -->
<%@ include file="../includes/header.jsp"%>

<h1 class="h3 mb-2 text-gray-800">Tables</h1>
<p class="mb-4">
	DataTables is a third party plugin that is used to generate the demo
	table below. For more information about DataTables, please visit the <a
		target="_blank" href="https://datatables.net">official DataTables
		documentation</a>.
</p>

<!-- DataTales Example -->
<div class="card shadow mb-4">

	<div class="card-header py-3" align="right">
		<button id="regBtn" style="color: green;">글쓰기</button>
	</div>

	<div class="card-body">
		<div class="table-responsive">
			<table class="table table-bordered" id="dataTable" width="100%"
				cellspacing="0">
				<thead>
					<tr>
						<th>#번호</th>
						<th>제목</th>
						<th>작성자</th>
						<th>작성일</th>
						<th>수정일</th>
					</tr>
				</thead>

				<tbody>
					<c:forEach var="board" items="${list }">
						<tr>
							<td><c:out value="${board.bno }"></c:out></td>
							<td><a href="/board/get?bno=${board.bno }"><c:out value="${board.title }"></c:out></a></td>
							<td><c:out value="${board.writer }"></c:out></td>
							<td><fmt:formatDate pattern="yyyy-MM-dd"
									value="${board.regdate }" /></td>
							<td><fmt:formatDate pattern="yyyy-MM-dd"
									value="${board.updateDate }" /></td>
						</tr>
					</c:forEach>

				</tbody>
			</table>
		</div>
	</div>
</div>

<!-- 알림창 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
			</div>
			<div class="modal-body"></div>
			<div class="modal-footer">
				<button class="btn btn-secondary" type="button" data-dismiss="modal">닫기</button>
			</div>
		</div>
	</div>
</div>




<script>
	$(document).ready(function() {
		console.log("목록 페이지0414");
		$('#dataTable').DataTable({
			"order" : [ [ 0, "desc" ]], // 정렬 0컬럼의 내림차순으로
			"paging" : false, // 페이징 표시 안함.
			"bFilter" : false, // 검색창 표시 안함.
			"info" : false
			//안내창 표시 안함
		});
		
		$("#regBtn").on("click", function() {
			self.location = "/board/register";
			/* 아이디 regBtn 을 클릭한다면
			현재창의 url를 쓰기로 변경 */
		});
		
		var result = '<c:out value="${result}"/>';
		// 자바스크립트 형추론 이용.
		checkModal(result);
		// 게시판 번호를 매개변수로 전달하면서 checkModal 평션 호출
		
		function checkModal(result) {
			if(result === ''){
				// ==는 값만 비교, === 은 값과 형식도 비교
				return;
			}
			if(parseInt(result) > 0) {
				$(".modal-body").html("게시글 " + parseInt(result) + "번이 등록");
				// 표시할 내용 만들기
			}
			$("#myModal").modal("show"); //모달창 표시
		}
	});
</script>


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

새로 글쓰기 버튼을 추가해주었다.

c:forEach를 사용하면 기존자바 foreach 반복문처럼 가져온 list타입 데이터를 차례대로 하나씩 꺼내서 값을 뿌려준다.

 

여기서 페이지와 shwoing, entires 부분을 지우기위해서 자바스크립트에 

처리를 해주었다.

 

하지만 이래도 적용이 안될텐데 현재 footer 맽밑에 script가 몰려있기때문에 순서상 적용을 못한것이다.

때문에 footer에 있는 script들을 header.jsp의 head부분에 잘라내어 붙여넣어준다.

 

그러면 또 

이러한 창이 뜨게되는데 맨밑에 3개의 script들은 footer에 남겨두어야한다. 그리하면 창이 뜨지 않는다.

 

'Spring 게시판 만들기' 카테고리의 다른 글

Spring - 6 (확인창 / 페이징처리)  (0) 2022.04.18
Spring - 5 (View - register, modify, get)  (0) 2022.04.17
Spring - 3 (테이블 생성 / CRUD 테스트 / Service구현)  (0) 2022.04.15
Spring - 2 (데이터베이스 연결)  (0) 2022.04.15
Spring - 1 (프로젝트 생성 / pom.xml 세팅)  (0) 2022.04.15
'Spring 게시판 만들기' Related Articles more
Comments