스프링 게시판 만들기 - 1(게시판 목록 보여주기,mvc패턴)
mvc패턴이란 디자인 패턴 중의 하나이며 model,view,controller의 약자이다.
디자인 패턴이란 어떤 특정 프로그램을 더 쉽고 편리하게 사용하기위해 만든 특정한 방법들을 말한다.
예를 들어 jquery는 $('#...') 달러 표시로 id를 셀렉트 할 수 있지만 , 자바스크립트를 사용하는 경우 getElementsById('')를사용하여 제이쿼리의 디자인 패턴으로 더 편하게 개발을 할 수 있다.
사용자가 controller를 통해서 데이터를 요청하면 controller는 model을 통해서 데이터를 가져오고 view를 통해 사용자에게 결과 값을 보여준다.
스프링 개발 순서
controller -> vo -> db -> mapper.xml -> mapper -> service -> html
실제 사용자가 보여지는 순서
controller -> service -> vo -> db -> mapper -> vo -> service -> controller
단순 게시판 목록만 보여주는 화면을 만들어보자
1.Controller
@Controller
public class BoardController{
@GetMapping("/board/list")
public ModelAndView getBoardList(){
ModelAndView view = new ModelAndView();
view.setModelName("경로");
return view;
}
}
2.vo
@Getter
@Setter
@ToString
public class BoardVO{
private int BoardNo;
private String writer;
private String title;
private String content;
private String regDate;
private String updateDate;
private STring originFileName;
private String storedFileName;
}
3.db
create table board(
board_no int auto_increment,
title varchar(200) not null,
content varchar(4000) default '',
writer varchar(50) not null,
reg_date datetime default now(),
update_date datetime default now(),
origin_file_name varchar(255) default '',
stored_file_name varchar(1000) default '',
primary key(board_no)
);
4.mapper.xml
<mapper namespace = "boardmapper가 있는 주소">
<select id="getBoardList" resultType="vo가 있는 주소">
select board_no,
title,
content,
writer,
date_formate(reg_date, '%Y-%m-%d %H:%i:%s') as regDate
from board
order by reg_date desc
</select>
</mapper>
5.
@Mapper
public interface BoardMapper{
public List<BoardVO> getBoardList() throws Exception;
}
6.Service
@Service
@AllArgsConstructor
public class BoardService{
private BoardMapper boardMapper;
public List<BoardVO> getBoardList() throws Exception{
return boardMapper.getBoardList();
};
}List형태로 BoardVO를 받아오겠다.
(List는 요소의 중복저장을 허락하고 , 들어온 순서대로 저장한다. )
7.html
<form id="board" th:action="@{search}" method="get">
<a th:href="@{register}">글쓰기</a>
<input type="text" name="keyword"/> <input type="submit" value="검색"/>
<table class="table" style="border: 1px solid;">
<thead>
<tr>
<td style="border:1px solid;text-align:center;width:80px">번호</td>
<td style="border:1px solid;text-align:center;width:320px">제목</td>
<td style="border:1px solid; text-align: center;width:100px">작성자</td>
<td style="border:1px solid; text-align: center;width:180px">등록일자</td>
</tr>
</thead>
//나중에 자바스크립트 할 때
<tbody id="boardRows">
</tbody>
</table>
</form>일단 이 부분을 html화면으로 만들면 이렇게 윗부분만 표시되는 부분이며
tbody id = "boardRows' 이 부분이 , 실제 게시판 목록들이 들어가는 부분이다.
사용자가 게시판을 한개씩 추가 했을 때, 게시판 목록부분만 데이터의 변화가 일어나기 떄문에 전체 페이지를 로드할 필요가 없다. 이럴때 사용하는 것이 ajax, 즉 비동기성 기능을 사용하는데 ajax를 사용하면 브라우저 내에서 비동기 기능(신호를 보냈을 때 새로운 HTML을 로딩 할 필요 없이 동작을 수행)을 사용할 수 있다.
동기는 추구하는 같은 행위(목적)가 동시에 이루어지는 것을 말하며, 비동기는 추구하는 행위(목적)가 다를 수도 있고, 동시에 이루어지지도 않는 것을 말한다. 즉 ajax는 모든 데이터가 동시에 움직이지 않아도 자기만 움직일 수 있기 떄문에 비동기성이라고 부른다.
7. ajax
<script>
function getBoard(){
$.ajax({
url: '/api/board/list',
type : 'GET',
dataType : 'json',
data : null
}).done(function (result){
var tbody = $('#boardRows');
//로드될때마다 기존 로딩된 데이터 지워서
tbody.empty();
//each (대상함수(인덱스 , 객체) {} ); each 가 대상에서 data 는 boardapi controller에 있는거임
$.each(result.data, function(index,obj){
var tr = $('<tr></tr>')
var td = '';
td += '<td style = "text-align:center">' + obj.boardNo+'</td>';
td += '<td style = "text-align:left">' + obj.title+'</td>';
td += '<td style = "text-align:left">' + obj.writer+'</td>';
td += '<td style = "text-align:left">' + obj.regDate+'</td>';
//apend tr에 넣는 다는 뜻 , tbody에 넣는다는 뜻
tr.append(td);
tbody.append(tr);
})
});
}
$(document).ready(function(){
getBoard();
})여기서 보면 result.data 이건 내가 boardapi에 담아둔 리스트들
function (index , obj) 여기서 index는 리스트의 인덱스 또는 키를 의미함 obj 는 해당 인덱스나 키가 가진 값을 의미한다.
$(document) = html 이 화면에 뜨면
ready(function(){
getBoard();
}
getBoard()함수를 실행시켜라...
콜백함수로 볼 수 있다. 함수가 실행되면 끝이 생길 때까지 또 다른 함수를 부른다. 위에 function(result)부분에 아무것도 안나오면 document가 뜨지 않아서 getBoard()도 실행되지 않는다.
api
package com.survey.web.controller.gallary;
import com.survey.web.service.gallary.GallaryService;
import com.survey.web.vo.gallary.GallaryVO;
import lombok.AllArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@AllArgsConstructor
public class GallaryApiController {
private final GallaryService service;
@GetMapping("/api/gallary/list")
public Map<String,Object> getGallary() throws Exception {
Map<String,Object> resultMap = new HashMap<String,Object>();
try{
List<GallaryVO> list = service.getGalList();
resultMap.put("data",list);
}catch(Exception e){
e.printStackTrace();
}
return resultMap;
}
}
여기서 api 기능을 설명해보자
api는 프로그램과 응용 프로그램이 서로 상호작용 하는 것을 도와주는 매개체 이다.
사용자에게서 요청이 오면 그걸 잘 정리해서 응용 프로그램과 상호작용하여 요청된 값을 전달한다.