[SpringBoot] 게시판 구현3(DB 연결없음)

1. VO(Value Object) 생성

- 게시판을 위한 vo를 생성하기 전에 기본적인 디렉토리 구조를 생성하도록 한다.

com/example/practice디렉토리 바로밑에 3개의 디렉토리를 생성한다.

• VO를 모아둘 vo디렉토리
• 로직을 수행할 클래스를 모아둘 service디렉토리
• 지금은 아니지만 추후에 DB와 연결할때 사용할 repository디렉토리

mvc 기본구조 생성

- 구조를 완성했다면 생성한 vo 디렉토리 바로 밑에 "BoardVo" 클래스를 생성한다.

필드 중에 당장 사용하지 않을 값들이 있지만 일단 작성하도록한다.

BoardVo.java

package com.example.practice.vo;

public class BoardVo {

    private Long no;
    private String title;
    private String contents;
    private int hit;
    private String regDate;
    private int groupNo;
    private int orderNo;
    private int depth;
    private Long parentNo;
    private Long userNo;
    private String userName;

    public Long getNo() {
        return no;
    }

    public void setNo(Long no) {
        this.no = no;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContents() {
        return contents;
    }

    public void setContents(String contents) {
        this.contents = contents;
    }

    public int getHit() {
        return hit;
    }

    public void setHit(int hit) {
        this.hit = hit;
    }

    public String getRegDate() {
        return regDate;
    }

    public void setRegDate(String regDate) {
        this.regDate = regDate;
    }

    public int getGroupNo() {
        return groupNo;
    }

    public void setGroupNo(int groupNo) {
        this.groupNo = groupNo;
    }

    public int getOrderNo() {
        return orderNo;
    }

    public void setOrderNo(int orderNo) {
        this.orderNo = orderNo;
    }

    public int getDepth() {
        return depth;
    }

    public void setDepth(int depth) {
        this.depth = depth;
    }

    public Long getUserNo() {
        return userNo;
    }

    public void setUserNo(Long userNo) {
        this.userNo = userNo;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public Long getParentNo() {
        return parentNo;
    }

    public void setParentNo(Long parentNo) {
        this.parentNo = parentNo;
    }

}

 

---

2. Service, DAO 클래스 만들기

- 로직담당인 "BoardService" 클래스 및 DB에서 데이터를 읽어올 "BoardDao"클래스를 작성한다.

 

BoardService 및 BoardDao 클래스생성

BoardService.java

package com.example.practice.service;

import com.example.practice.repository.BoardDao;
import com.example.practice.vo.BoardVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BoardService {


    @Autowired
    private BoardDao boardDao;


    public List<BoardVo> getBoardList(){

        return boardDao.selectBoardList();

    }

}

 

DB 연결이 없기 때문에 아래와 같이 하드코딩하여 데이터를 반환 하도록 한다.

BoardDao.java

package com.example.practice.repository;

import com.example.practice.vo.BoardVo;
import org.springframework.stereotype.Repository;

import java.util.ArrayList;
import java.util.List;

@Repository
public class BoardDao {


    public List<BoardVo> selectBoardList() {

        BoardVo board =  new BoardVo();
        board.setNo(1L);
        board.setTitle("게시판입니다.");
        board.setContents("안녕하세요. 첫 게시판 입니다.");
        board.setRegDate("2019-11-16");
        board.setHit(111);
        board.setUserName("홍길동");
        board.setUserNo(1L);

        List<BoardVo> boardList = new ArrayList<>();

        boardList.add(board);

        return boardList;
    }
}

---

3. Model 객체에 게시판 데이터 넣기

- Controller에서 board.html 경로를 매핑한 함수를 아래와 같이 수정한다.

TestController.java

    // 추가
    @Autowired
    private BoardService boardService;   
    
    
    // AS-IS
    @RequestMapping("/board")
    public String getBoardList(Model model){
        return "views/board/board"; // index.html 파일 경로매핑
    }
    
    
    // TO-BE
    @RequestMapping("/board")
    public String getBoardList(Model model){
        List<BoardVo> boardList =  boardService.getBoardList();
        model.addAttribute("boardList", boardList);
        return "views/board/board"; // board.html 파일 경로매핑
    }

---

4. board.html에 게시판 데이터 뿌려주기

- 컨트롤러의 getBoardList 메소드에서 넣어준 "boardList"를 board.html에 뿌려준다

타임리프의 문법에 맞춰서 board.html을 아래와 같이 작성한다.

board.html

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>mysite</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link href="/static/css/board.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
    <div id="header">
        <h1>MySite</h1>
        <ul>
            <li><a href="#">로그인</a><li>
            <li><a href="#">회원가입</a>	<li>
            <li><a href="#">회원정보수정</a><li>
            <li><a href="#">로그아웃</a><li>
            <li>jh님 안녕하세요 ^^;</li>
        </ul>
    </div>
    <div id="content">
        <div id="board">
            <form id="search_form" action="#" method="get">
                <input type="text" id="keyword" name="keyword" value="검색어를 입력해주세요.">
                <input type="hidden" id="showBoardNum" name="showBoardNum" value="${showBoardNum}">
                <input type="submit" value="찾기">
            </form>
            <table class="tbl-ex">
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                    <th>글쓴이</th>
                    <th>조회수</th>
                    <th>작성일</th>
                    <th>&nbsp;</th>
                </tr>
                    <tr th:each="board : ${boardList}">
                        <td th:text="${board.no}"></td>
                        <td style="text-align:left; padding-left: 20px">
                            <a th:text="${board.title}" href="#" ></a>
                        </td>
                        <td th:text="${board.userName}"></td>
                        <td th:text="${board.hit}"></td>
                        <td th:text="${board.regDate}"></td>
                        <td><a href="#" class="del">삭제</a></td>
                    </tr>

            </table>

            <div class="pager">
                <ul>
                        <li><a href="#">◀</a></li>
                                <li class="selected">
                                    <a href="#">1</a>
                                </li>
                                <li>
                                    <a href="#">2</a>
                                </li>
                        <li><a href="#">▶</a></li>
                </ul>
            </div>
            <!-- pager 추가 -->

            <div class="bottom">
                <a href="#" id="new-book">글쓰기</a>
            </div>
        </div>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="#">jh</a></li>
            <li><a href="#">방명록</a></li>
            <li><a href="#">게시판</a></li>
        </ul>
    </div>
    <div id="footer">
        <p>(c)opyright 2015, 2016, 2017, 2018</p>
    </div>
</div>
</body>
</html>

 

- 그런 후에 다시 브라우저에서 localhost:8088/test/board로 접근한다.

BoardDao에서 가져온 데이터가 나타난 화면

- BoardDao에서 가져온 데이터를 뿌려주는 것을 확인할 수 있다.