728x90

원본 영상 링크:

https://www.youtube.com/watch?v=Y7S1xXsKy_w&list=PLZzruF3-_clsWF2aULPsUPomgolJ-idGJ&index=8

게시글 상세 페이지

상세페이지 html 작성 

templates> boardview.html

<!--상세페이지1-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>게시글상세페이지</title>
</head>
<body>

<h1>제목입니다</h1>
<p>내용이들어갈부분입니다</p>

</body>
</html>

1번 작성

 

controller > BoardController.java

package com.example.demo.contoller;


import com.example.demo.entity.testboard;
import com.example.demo.service.BoardService;
import org.springframework.beans.factory.annotation.Autowired;
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.ResponseBody;

/*shift + f10 재실행*/
@Controller
public class BoardContoller {

    @Autowired
    private BoardService boardService;

    @GetMapping("/board/write") //어떤 url로 접근할 것인지 정해주는 어노테이션 //localhost:8080/board/write
    public String boardWriteForm() {
        return "boardwrite";
    }

    @PostMapping("/board/writepro")
    public String boardWritePro(testboard board){

        boardService.write(board);

        return "";
    }

    @GetMapping("/board/list")
    public String boardList(Model model){
        //BoardService에서 만들어준 boardList가 반환되는데, list라는 이름으로 받아서 넘기겠다는 뜻
        model.addAttribute("list" , boardService.boardList()); //4번
        return "boardList";
    }

    /*상세페이지2*/
    @GetMapping("/board/view")
    public String boardView(){

        return "boardview";
    }

}

2번 작성

 

controller > BoardController.java

package com.example.demo.service;

import com.example.demo.entity.testboard;
import com.example.demo.repository.BoardRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BoardService {

    @Autowired //new를 써야하지만, 스프링부트가 알아서 읽어와서 주입을해준다.
    private BoardRepository boardRepository;

    //글작성
    public void write(testboard board){
    boardRepository.save(board);
    }

    //게시글리스트처리
    public List<testboard> boardList(){
        //findAll : 테스트보드라는 클래스가 담긴 List를 반환하는것을 확인할수있다
        return boardRepository.findAll();
    }
    /*상세페이지3*/
    //특정 게시글 불러오기
    public testboard boardview(Integer id){
        return boardRepository.findById(id).get(); //어떤게시글을 불러올지 지정을해주어야한다 (Integer값으로)
    }
}

3번 작성

 

controller > BoardController.java

package com.example.demo.contoller;


import com.example.demo.entity.testboard;
import com.example.demo.service.BoardService;
import org.springframework.beans.factory.annotation.Autowired;
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.ResponseBody;

/*shift + f10 재실행*/
@Controller
public class BoardContoller {

    @Autowired
    private BoardService boardService;

    @GetMapping("/board/write") //어떤 url로 접근할 것인지 정해주는 어노테이션 //localhost:8080/board/write
    public String boardWriteForm() {
        return "boardwrite";
    }

    @PostMapping("/board/writepro")
    public String boardWritePro(testboard board){

        boardService.write(board);

        return "";
    }

    @GetMapping("/board/list")
    public String boardList(Model model){
        //BoardService에서 만들어준 boardList가 반환되는데, list라는 이름으로 받아서 넘기겠다는 뜻
        model.addAttribute("list" , boardService.boardList()); //4번
        return "boardList";
    }

    /*상세페이지2*/
    @GetMapping("/board/view") //localhost:8080/board/view?id=1 //(get방식 파라미터)
    public String boardView(Model model, Integer id){
        /*상세페이지4*/
        model.addAttribute("testboard", boardService.boardview(id));
        return "boardview";
    }



}
@GetMapping("/board/view") 
public String boardView(Model model, Integer id){
model.addAttribute("testboard", boardService.boardview(id));
return "boardview";

 

localhost:8080/board/view?id=1 (get방식 파라미터)

 

 

4번 작성

 

templates> boardview.html

<!--상세페이지1-->
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>게시글상세페이지</title>
</head>
<body>
<!--상세페이지5-->
<h1 th:text="${testboard.title}">제목입니다</h1>
<p th:text="${testboard.content}">내용이들어갈부분입니다</p>

</body>
</html>

5번 작성

http://localhost:8181/board/view?id=1

id에 숫자 입력하면 list에있는 해당 글번호 내용을 출력한다 

 

이제 리스트이다.

list에서 글을눌렀을때 상세로 이동하게 만들어보자

<!--//2번-->
<!DOCTYPE html>
<html lang="en" xmlns:th="//www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>게시물 리스트 페이지</title>
</head>
<style>
    .layout{
        width : 500px;
        margin : 0 auto;
        margin-top: 40px;
    } /*layout 하위에 있는 input태그 스타일 설정*/
</style>


<body>

<div class="layout">
  <table>
      <thead>
      <tr>
          <th>글번호</th>
          <th>제목</th>
      </tr>
      </thead>
      <tbody>
      <!--list에 testboard가 담겨있는것을 하나씩 빼준다-->
      <tr th:each="testboard : ${list}">
      <td th:text="${testboard.id}">1</td>

      <td><!--list와 상세 연결-->
          <!--href a태그에 링크를 걸어주는역할 --> <!--localhost:8080/board/view?id=board.id-->
          <a th:text="${testboard.title}" th:href="@{/board/view(id=${testboard.id})}"></a>
          <!--제목입니다-->
      </td>

      </tr>
      </td>
      </tbody>
  </table>
</div>

</body>
</html>

제목부분과 상세페이지와 연결해준다

<a th:text="${testboard.title}" th:href="@{/board/view(id=${testboard.id})}"></a>

href a태그에 링크를 걸어주는역할

localhost:8080/board/view?id=board.id

http://localhost:8181/board/list

list의 목록을 누르면 해당글의 상세페이지로 이동할수있다

http://localhost:8181/board/view?id=1

 

728x90

'STUDY > SpringBoot' 카테고리의 다른 글

[Springboot] 게시판따라하기(5) - 메세지 띄우기 ✔정리  (0) 2022.08.09
[Springboot] 게시판따라하기(4) - 게시글 삭제·수정 ✔정리  (0) 2022.08.09
[Springboot] 게시판따라하기(2) - 게시글 리스트 ✔정리  (0) 2022.08.09
[Springboot] 게시판따라하기(1) - 게시글 작성폼생성·작성처리 ✔정리  (0) 2022.08.09
[SpringBoot] IntelliJ + OracleDB 게시판 생성 ✔정리(2)  (0) 2022.08.08

티스토리툴바