-
게시판 만들기(3) - 데이터 Read (게시글 리스트와 게시글 상세보기SpringBoot/게시판 (SpringBoot, H2,Mybatis,Thymeleaf) 2021. 1. 3. 23:57
게시판 카테고리의 포스팅들은 IntelliJ, Gradle, SpringBoot, Mybatis, H2-Database, Thymeleaf를 사용해
간단한 게시판을 만들어가는 포스팅입니다.더미 데이터 삽입하기
이전 포스팅의 스키마 위의 스키마 파일을
다음과 같이 변경해줍니다.
이유는 1개의 데이터는 없어보이기 때문입니다.
수정 스키마 파일 컨트롤러 수정
이전의 포스팅에서 작성한 컨트롤러와 다른점은 맨 하단의 GetMapping("/main")인데요,
컨트롤러 http://localhost:8080/board/main으로 이동했을 때
Model 객체에 service의 boardList 메소드를 호출해 저장하는 동작을 수행합니다.
http://localhost:8080/board/main 이동 -> main()실행 -> service의 boardList()실행
-> mapper인터페이스의 getList() 실행 -> mapper.xml의 getList 실행의 과정을 수행해"list"라는 이름에 게시글들의 정보들을 삽입합니다.
Board서비스 
BoardMapper 인터페이스 
BoardMapper.xml View 작성
컨트롤러에서 처리를 완료했으니, 이제 사용자에게 보여주는 페이지를 작성해보겠습니다
이전의 포스팅에서 작성한 hello.html의 위치인 resources/templates/boards/ 폴더에 main.html을 추가해줍니다.
본 포스팅에서는 템플릿 엔진을 Thymeleaf를 사용하기에 html 파일을 생성한 뒤 약간의 수정이 필요합니다.
main.html 맨 상단의 <html xmlns xmlns:th="http://www.w3.org/1999/xhtml" : th="http://www.thymeleaf.org">코드를 추가해
타임리프를 사용하는 것을 명시해주어야 여러가지 기능들을 사용할 수 있게 됩니다.
그리고 기본적인 디자인은 저에겐 너무 고차원적인 문제이기에 간편한 부트스트랩을 사용하겠습니다.
<head> 아래에
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> 이 부분을
추가해주시면 완료되는데요, 간단하게 깔끔한 디자인을 쉽게 만들 수 있게 도와줍니다.
자 이제 보여주는 화면 작성에 들어가보겠습니다.
태그들의 class 부분은 부트스트랩 사용으로, 공식 홈페이지에 방문하시면 사용법 등 다양한 정보를 얻으실 수 있습니다.
www.w3schools.com/bootstrap4/페이지에 들어간 후 왼쪽의 카테고리에서 원하시는 태그를 찾아 입력해주시면 됩니다.
<table>을 보시면 <tr th:each=list :${list} >란 부분이 존재하는데, 이 부분이 타임리프를 이용해 리스트 형식의 데이터를 가공할 수 있게 해주는 부분입니다.
타임리프 문법은 th:text, th:each등과 같은 형태로 사용하게 되는데, 이도 공식 홈페이지를 참조하시면 많은 설명이 있습니다!
www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
테이블 th:each는 반복문의 동작을 수행하는데 th:each="사용 이름 : ${model의 이름}"의 형태로 사용할 수 있습니다.
컨트롤러에서 "list"라는 이름에 게시글들의 정보를 넣었었죠 그렇기 때문에 th:each="변수 이름 :${list}"의 형태로 사용할 수 있게 됩니다.
list에는 총 10개의 데이터가 있기에 저 부분은 10번의 반복을 하게되고, 하위의 <td>로 정보들을 테이블에 삽입하는 구조로 동작하게 됩니다.
[[${list.boardId}]]에 있는 [[${??}]]는 타임리프 문법으로, 값을 출력할 수 있게 해주는 역할입니다.
html 파일까지 다 작성했다면 이제 확인을 해볼 차례입니다.
스프링부트를 구동하고
http://localhost:8080/board/main으로 이동해보시면
리스트 위와 같은 깔끔한 테이블로
초기에 db에 삽입했던 데이터 10개가 모두 정상적으로 출력되는 모습을 확인하실 수 있습니다!게시글 상세 보기
BoardMapper.xml 수정하기.
boardmapper.xml 위와같은 코드를 BoardMapper.xml에 추가해주시면 됩니다.
getBoard라는 이름을 가지고, Long타입을 매개변수로 받으며 boardId가 ??(매개변수)인 Board의 데이터를 반환해주는 동작을 수행합니다.
BoardMapper.interface 수정하기
boardMapper인터페이스 BoardMapper.interface에 위와 같은 코드를 추가해주시면 됩니다.
getBoard라는 이름을 가지고 Long타입 매개변수 boardId를 boardMapper.xml의 getBoard로 넘겨주는 역할입니다.
BoardService 수정하기
BoardSerivce BoardService에 위 사진의 하단과 같은 코드를 추가해주시면 됩니다.
getBoard 메소드로, controller로 primaryKey가 boardId인 게시글의 내용을 반환해줍니다.
BoardController 마지막으로 BoardController에 위와같은 코드를 새로 추가합니다.
http://localhost:8080/board/view에 접근했을 때 "view"라는 이름에 위에서 작성했던 쿼리문의 결과값을 저장합니다.
그 후 "view"라는 변수를 가지고있는 boards/view 페이지를 반환해 사용자가 볼 수 있게 동작합니다.
view.html view.html도 main.html과 같이 html 태그와 head의 부트스트랩을 추가합니다.
그 후 controller에서 만든 model 객체인 "view"데이터를 이용해
화면에 표시해줍니다.
[[${view.boardId ,title, name, content}]] 등
내용을 넣은 textarea처럼 th:text=${view.content}와 같은 문법을 사용하셔도 무방합니다.
그 후 스프링부트를 구동하고
이번에는 url에 ?번 게시물의 정보를 얻기위한 게시물 번호를 넣어줘야 하기에
http://localhost:8080/board/view?파라미터 이름 = 값의 형태로 접근해보겠습니다.
http://localhost:8080/board/view?boarId=1로 이동하게 되면
1번게시글 1번 게시글의 내용을 볼 수 있고,
http://localhost:8080/board/view?boarId=2로 이동하게 되면
2번게시글 위와 같이 2번 게시글의 정보를 볼 수 있게됩니다.
하지만 게시판의 글을 볼 때마다 이렇게 고치는 것은 매우 번거로울테니
게시판 리스트에서 클릭으로 들어오고싶게 만들어야겠죠?
다시 main.html로 이동해 수정 작업을 진행합니다.
크게 바뀌는 것은 없고, 테이블에서 게시글에 제목을 눌렀을 때 해당 게시글의 id를 파라미터로 넘기게끔
다음과 같이 작성해 주시면 됩니다.
main.html 제목 부분이 <a th:href> 태그가 생겼는데 이것은 타임리프의 링크 문법입니다.
풀어서 설명하면
http://localhost:8080/board/view?boardId=누른 게시글의 번호 가 되겠습니다.
그렇다면 3번 게시글의 제목을 눌렀을 때 http://localhost:8080/board/view?boardId=3 으로 이동해
3번 게시글의 정보를 볼 수 있겠죠?
이번 포스팅은 게시글의 리스트와, 게시글 상세 보기를 다뤘습니다.
다음 포스팅에서는 게시글의 작성에 대해 알아보겠습니다!
'SpringBoot > 게시판 (SpringBoot, H2,Mybatis,Thymeleaf)' 카테고리의 다른 글
게시판 만들기(5) - 데이터 Update,Delete (게시글 수정, 삭제) (7) 2021.01.20 게시판 만들기(4)- Create(게시글 만들기) (14) 2021.01.05 게시판 만들기(2) - Mapper설정. (1) 2021.01.03 게시판 만들기(1) - 프로젝트 생성과 설정. (1) 2021.01.03