Spring @RestController 를 이용한 간단한 게시판, 페이징

Spring @RestController 를 이용한 간단한 게시판, 페이징

2021. 12. 6. 16:42ㆍSpring

728x90

1. REST(REpresentational State Transfer)

: 특정 URI를 통해 사용자가 원하는 정보를 제공받는 형식이다.

이렇게 REST 방식으로 서비스제공이 가능한 것을 RESTful 하다라고 한다.

2. @RestController

https://hyejin.tistory.com/275

Spring RESTful 사용자 관리 게시판

https://hyejin.tistory.com/272 Spring RESTful 사용자 관리 프로젝트 (@RequestBody, @ResponseBody, GET, POST, PUT, DELETE, Postman 설치 및 테스트 https://hyejin.tistory.com/265 Spring MVC, Mybatis [2]..

hyejin.tistory.com

위에서는 @Controller와 @ResponseBody를 통해 REST 방식을 지원했지만,

Spring4에서는 @RestController를 통해 REST방식 역시 지원하기 때문에

@RestController를 사용해볼 예정이다.

3. Jackson, jaxb라이브러리

Jackson은 java객체를 json으로 변환해주는 라이브러리이다.

jaxb는 java객체를 xml으로 변환해주는 라이브러리이다.

4. @RestController를 이용한 간단한 게시판 구현하기

0️⃣ board table

계속 한 게시판에 대해서 다양한 시도를 하고 있는 것이기 때문에

table은 똑같다!

1️⃣ rest.jsp 게시판 화면 구현하기

- rest.css

❗ 이번에는 css 파일을 따로 CSS 폴더를 생성해서 거기에 css파일을 생성했다.

이때 조심해야할 것은 webapp 폴더 밑에 생성해야하고, 다른데 생성하면 동작하지 않는다..!

그리고 context.xml에 CSS폴더에 대해서 설정해줘야한다.

- rest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	// 페이징 관련 변수들
%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>REST+AJAX게시판</title>
<!-- 스타일, js 라이브러리 -->
<!-- TODO -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script>


</script>

<body>

<%-- 현재 페이지 (몇 페이지) 정보 --%>


<form id="frmWrite" onsubmit="TODO">
<table>
	<tr>
		<th>name</th>
		<td><input type="text" id="name" placeholder="작성자이름" required/></td>
		<td rowspan="3"><input type="submit" value="새글등록"/></td>
	</tr>
	<tr>
		<th>subject</th>
		<td><input type="text" id="subject" placeholder="글제목" required/></td>
	</tr>
	<tr>
		<th>content</th>
		<td><input type="text" id="content" placeholder="내용입력"/></td>
	</tr>
</table>
</form>
<br>
<form name="frmDelete" id="frmDelete" onsubmit="return chkDelete()">
<table id="list">
	<thead>
		<th>#</th>
		<th>id</th>
		<th>subject</th>
		<th>name</th>
		<th>viewCnt</th>
		<th>regDAte</th>
	</thead>
	<tbody>
	
	</tbody>
</table>
<br>
<input type="submit" value="선택삭제"/>
<button type="button" id="prev">이전페이지</button>
<button type="button" id="next">다음페이지</button>
</form>

</body>
</html>

아직 동작은 구현하지 않은 단순 화면이다.

여기에 이제 점점 js 코드를 작성할 예정이다.

2️⃣ 글 목록 조회 구현하기

- 페이징을 위한 view 생성

우선 scott에는 뷰 생성 권한이 없었기 때문에 scott에게 권한을 부여해준다.

그리고 이렇게 board_view를 생성해준다.

- 다음에는 원래 작성되었었던 BoardService, BoardDAO, BoardMapper등에 페이징하기 위한 메서드들을 추가해준다.

❗ 이때 fromRow 는 몇번째 row 부터 보여줄 지 나타내며 writePages는 페이지당 몇개의 데이터를 보여줄지 결정한다.

❗ 이때 ![CDATA를 사용하는 이유는 Mybatis 사용시 쿼리 문에 지금처럼 비교연산자나 부등호를 처리해야할 때가 있는데 특수문자 사용에 제한이 있다고 한다.

그렇기 때문에 <![CDATA[를 사용하면 이 안에 들어가는 문장을 문자열로 인식하게 돼 특수문자가 들어가도 문자열로 인식해준다!

- BoardRestController @RestController 생성하기

❗ 이때 (page-1) * writePages + 1 할 때 오라클은 +1 해주고, mysql은 안해줘도 된다!

그리고 AjaxBoardList는 결과를 response하기 위한 클래스이다.

boardSerivce를 통해 selectByRow 메서드를 수행한 후에는 AjaxBoardList에 값을 담아서 리턴해준다.

이때 파라미터로 넘어온 BoardVO 값이 널이 아니고, 크기가 0 이상이라면 status는 ok, count에는 리스트의 크기를 저장해주며, list에 selectByRow 수행 결과를 담아준다.

- response 받아 동적으로 table row 생성

그리고 loadPage에서 해당하는 url로 입력해 받은 response의 status 가 success이면 selectByRow 수행후 result에 담아온 데이터를 response해서 해당하는 데이터 수 만큼 테이블의 row를 동적으로 생성해주는 코드이다.

3️⃣ 글 목록 조회 구현 후 페이징 구현하기

이 게시판에서 한 페이지에는 5개의 게시글이 보이도록 설정할 것이다.

따라서 writePages의 값이 5이다.

그리고 url에 숫자 5 대신에 writePages로 수정해준다.

그리고 현재 몇 페이지인지 정보가 필요하기 때문에 hidden으로 page값을 저장해줄 것이다.

페이지를 로딩했을 때 처음에는 #page값을 1로 지정해주고, loadPage(1)을 통해 1페이지의 5개의 게시글을 가져오도록 한다. 그리고 동적으로 row를 생성한것이 true이면 현재 페이지의 값을 파라미터로 받아온 page값으로 지정해줘

다음 페이지를 눌러 2 페이지라면 현재 페이지값이 2이도록 지정해준다.

그리고 나서는 이전 버튼을 누르면 현재 페이지값을 받아와 1이면 alert를 통해 이전 페이지가 없다고 알려주며,

1이상일때는 현재페이지에서 -1 해준다.

그리고 다음 버튼을 누르면 현재 페이지값을 역시 받아온 후에 +1 해준다.

4️⃣ 새로운 글 추가하기

- BoardRestController.java

새로운 글을 추가하고 리턴할 객체로 AjaxBoardQryResult 객체를 생성한다.

- AjaxBoardQryResult.java

글을 작성한 후에 등록 버튼을 누르면 chkSubmit()함수가 실행된다.

성공적으로 글을 추가한 다음에는 다시 1페이지로 돌아가며 폼에 작성되어 있던 값들을 리셋해준다.

5️⃣ 여러개의 글 한번에 삭제하기

아까부터 있던 체크박스를 선택하고 선택삭제 버튼을 누르면 한개 혹은 여러개를 삭제할 수 있다.

- BoardRestController.java

여러개 선택하고 선택삭제 버튼을 누르면 chkDelete() 가 실행된다.

우선 체크된 항목의 wr_uid 값을 가져와야 하기 때문에 #frmDelete iput[name=wr_uid]를 통해 해당 하는 값을 ids라는 배열에 담아준다.

그리고 ids의 길이가 0이면 삭제할 글의 체크박스를 선택하지 않았다는 뜻으로 삭제할 글을 체크해달라는 경고문을 띄워준다.

체크 후에는 한번 확인하는 창을 띄워 아니요를 누르면 동작하지 않고, 네 버튼을 누르면 삭제를 진행한다.

삭제 후에도 다시 자동으로 1페이지로 로딩된다.

"id" : JSON.stringify(ids) -> [ 36, 37]

"id" : JSON.stringify(ids).slice(1).slice(0,-1) -> 36, 37

728x90

'Spring' 카테고리의 다른 글

Jackson ObjectMapper란? (0)	2022.06.22
[Spring] @Async를 활용한 비동기 메서드 만들기 (0)	2022.06.20
Spring Security JDBC 사용한 로그인 처리 (BCryptPasswordEncoder 암호화) (0)	2021.12.03
Spring Security 로그인 인증 및 인가 (Security 환경설정, AuthenticationManger, AutenticationProvider) (0)	2021.12.02
Spring interceptor를 활용한 로그인 및 인가(Authorization) (0)	2021.12.02

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'Spring' 카테고리의 다른 글

관련글

티스토리툴바