스프링부트 게시판 조회하기

게시판리스트 화면 호출 후 ajax 로 데이터를 조회

 

작성할 소스 목록

 

/gradleProject/src/main/java/com/example/demo/board/vo/BoardVO.java

/gradleProject/src/main/resources/mybatis/board/BoardMapper.xml

/gradleProject/src/main/java/com/example/demo/board/mapper/BoardMapper.java

/gradleProject/src/main/java/com/example/demo/board/service/BoardService.java

/gradleProject/src/main/java/com/example/demo/board/controller/BoardController.java

 

/gradleProject/src/main/webapp/WEB-INF/views/board/boardList.jsp
/gradleProject/src/main/resources/static/js/board/boardList.js

 

 

 

1. BoardTable 생성

 - 아래 게시물에서 테이블 생성하는 쿼리를 따라서 테이블 생성

https://gamma86.tistory.com/12

Mysql 게시판 테이블 생성, 조회, 등록, 수정, 삭제

 

2. 데이터 조회를 위한 서비스단 코드 작성

 1) /gradleProject/src/main/java/com/example/demo/board/vo/BoardVO.java

    게시판 테이블의 데이터를 조회 후 값을 담을 오브젝트

package com.example.demo.board.vo;

import lombok.Data;

@Data
public class BoardVO {

    private String boardNo;
    private String boardType;
    private String title;
    private String contents;
    private String userId;
    private String createdTime;
    private String updatedTime;
    private String likes;
    private String counts;
    
}

  - lombok(@Data) 를 사용하여 getter, setter 를 생략한다.

 

 2) /gradleProject/src/main/resources/mybatis/board/BoardMapper.xml

    mybatis 로 데이터를 조회해 올 쿼리를 작성할 xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.demo.board.mapper.BoardMapper">
    <select id="selectBoardList" resultType="com.example.demo.board.vo.BoardVO">
        SELECT BOARD_NO
             , BOARD_TYPE
             , TITLE
             , CONTENTS
             , USER_ID
             , CREATED_TIME
             , UPDATED_TIME
             , LIKES
             , COUNTS
        FROM BOARD
    </select>
</mapper>

  - namespace : 쿼리문을 호출할 interface 를 설정한다.

  - resultType : 조회한 데이터를 담은 오브젝트를 설정한다.

 

 3) /gradleProject/src/main/java/com/example/demo/board/mapper/BoardMapper.java

package com.example.demo.board.mapper;

import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.example.demo.board.vo.BoardVO;

@Mapper
public interface BoardMapper {
	List<BoardVO> selectBoardList(BoardVO paramVO);
}

 

  - @Mapper: 해당 인터페이스를 매퍼로 등록

  - 위 인터페이스에 등록된 메소드 명을 sql 아이디로 사용하여 Mapper.xml 의 sql 을 호출해 준다.

 

 4) /gradleProject/src/main/java/com/example/demo/board/service/BoardService.java

 

package com.example.demo.board.service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.board.mapper.BoardMapper;
import com.example.demo.board.vo.BoardVO;

@Service
public class BoardService {
	
	@Autowired
	private BoardMapper boardMapper;
	
    public Map<String, Object> selectBoardList(BoardVO paramVO) {
        List<BoardVO> boardList = boardMapper.selectBoardList(paramVO);
        Map<String, Object> boardMap = new HashMap<>();
        boardMap.put("boardList", boardList);
        return boardMap;
    }
}

 

 5) /gradleProject/src/main/java/com/example/demo/board/controller/BoardController.java

package com.example.demo.board.controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.example.demo.board.service.BoardService;
import com.example.demo.board.vo.BoardVO;

@Controller
public class BoardController {
	
	@Autowired
	private BoardService boardService;
	
	
	// 게시판리스트 페이지
	@RequestMapping(value = "/board/boardList", method = {RequestMethod.GET, RequestMethod.POST})
	public ModelAndView boardList() {
		ModelAndView mv = new ModelAndView();
		mv.setViewName("board/boardList");
		return mv;
	}
	
	// 게시판 목록 조회
	@RequestMapping(value = "/board/selectBoardList", method = {RequestMethod.GET, RequestMethod.POST})
	@ResponseBody
	public ModelAndView selectBoardList(BoardVO paramVO) {
		ModelAndView mv = new ModelAndView();
		Map<String, Object> boardMap = new HashMap<String, Object>();
		boardMap = boardService.selectBoardList(paramVO);
		mv.addObject("boardMap", boardMap);
		mv.setViewName("jsonView");
		return mv;
	}
}

 

  - boardList 메소드 : 게시판 페이지를 호출한다.

  - selectBoardList : 게시판 데이터를 조회해 준다.

 

 6) /gradleProject/src/main/webapp/WEB-INF/views/board/boardList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div class="col-sm-offset-3 col-sm-9 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">게시판</h1>
    <div class="table-responsive">
        <table class="table table-bordered dataTable">
            <thead>
            <tr>
                <th>No</th>
                <th>타입</th>
                <th>제목</th>
                <th>내용</th>
                <th>작성자</th>
            </tr>
            </thead>
            <tbody id="tbody_boardList">
            </tbody>
        </table>
    </div>
</div>

 7) /gradleProject/src/main/resources/static/js/board/boardList.js

 var boardList = {
 	// 최초 실행
	init: function(){
		boardList.selectBoardList();	// 게시판 조회
	},
    // 이벤트 바인딩
	bind: function(){
		
	},
    // 게시판 조회 ajax 호출
	selectBoardList: function(){
		$.ajax({
			url: '/board/selectBoardList',
			type: 'post',
			dataType: 'json',
			data: {},
			success: function(res) {
				boardList.drawBoardList(res.boardMap);
			}
		});
	},
    // 게시판 조회 데이터 html 로 화면에 그려주기
	drawBoardList: function(data){
		var html = '';
		$.each(data.boardList, function(i, v){
            html += '<tr>';
            html += '	<td>'+v.boardNo+'</td>';
            html += '   <td>'+v.boardType+'</td>';
            html += '   <td>'+v.title+'</td>';
            html += '   <td>'+v.contents+'</td>';
            html += '   <td>'+v.userId+'</td>';
            html += '</tr>';
		});
		$("#tbody_boardList").html(html);
	}
}

$(function(){
	boardList.init();
});

 - 함수를 화면명과 동일한 이름의 변수에 담아서 관리한다.

 

3. 테스트

 - http://localhost:8080/board/boardList