on
스프링 (Spring Vue) 게시판 만들기 #12. 글 상세보기 구현
스프링 (Spring Vue) 게시판 만들기 #12. 글 상세보기 구현
반응형
이번 포스팅에서는 글 목록에서 글 상세보기를 즉 CRUD에서 R에 해당하는 Read를 구현해보도록 하겠습니다.
현재 상태는 이렇게 되어 있는데 테이블을 클릭하면 팝업을 띄워 글에 대해 상세한 내용을 보여주는식으로 간단하게 구현을 해보도록 하겠습니다.
일단 Element-ui에서 테이블을 행(row)을 클릭할때 emit으로 row-click을 보내고 해당 파라미터에는 row,column,event에 대한 정보를 파라미터에 담아서 보내줍니다.
일단 저 row-click을 코드를 통해서 확인해 보겠습니다.
import axios from 'axios'; import moment from 'moment'; export default { name: 'BoardList', data() { return { boardList: [], }; }, created() { this.getBoardList(); }, methods: { DateFormat(row) { return moment(row.regDate).format('YYYY-MM-DD hh:MM:ss'); }, getBoardList() { axios .get('http://localhost:8080/board/get-board-list.do') .then((response) => { if (response.data.success) { this.boardList = response.data.result; } }) .catch(function(error) { console.log(error); }); }, rowClick(row, column, event) { console.log(row); console.log(column); console.log(event); } }, };
rowCilick으로 정의된 데이터의 정보를 한번 확인해보기위해 row데이터를 콘솔로 확인해보겠습니다.
테이블의 한개의 행을 클릭후 콘솔화면
row의 데이터와 column의 데이터, 해당 event에 대한 값을 확인해 볼 수 있습니다.
테이블을 클릭할때 Vue devtools의 Event를 통해서 직접 확인 해 볼 수도 있습니다.
테이블에 해당 줄을 클릭하면 row-click를 emit하여서 payload에 각 row, column, event에 대한 값을 담아서 보내주는걸 Vue devtools로도 확인이 가능합니다.
Vue devtools의 사용법에 대해서는 아래의 포스팅을 참고해주세요.
https://dreamcoding.tistory.com/34
BoardList.vue
여기서 원하는 값은 row의 값중에 bno만 가져와서 BackEnd에 해당 bno를 통해서 데이터를 조회하는 방법으로 구현해보도록 하겠습니다. (물론 해당 row의 데이터만으로도 데이터가 다 있기에 구현이 가능하지만 RestApi로 Read를 구현하는게 목표이기에 bno만 구하겠습니다.)
클릭시 rowClick을 호출하고 해당 row에서 bno만 사용하겠습니다.
bno를 확인했으니 해당 bno를 파라미터로 axios로 호출하도록 코드를 바꿔주고 rowclick의 메소드도 명확하게 getBoardDetail로 바꿔서 Controller의 메소드의 이름과 동일하게 해서 헷갈리지 않게 바꿔보도록 하겠습니다.
백엔드에서 받아온 데이터는 BoardDetail에 담도록 하겠습니다.
BoardList.vue
import axios from 'axios'; import moment from 'moment'; export default { name: 'BoardList', data() { return { boardList: [], boardDetail: [], }; }, created() { this.getBoardList(); }, methods: { DateFormat(row) { return moment(row.regDate).format('YYYY-MM-DD hh:MM:ss'); }, getBoardList() { axios .get('http://localhost:8080/board/get-board-list.do') .then((response) => { if (response.data.success) { this.boardList = response.data.result; } }) .catch(function(error) { console.log(error); }); }, getBoardDetail(row) { const params = { bno: row.bno, }; axios .post('http://localhost:8080/board/get-board-detail.do', params) .then((response) => { if (response.data.success) { this.boardDetail = response.data.result; } }) .catch(function(error) { console.log(error); }); }, }, };
get-board-detail.do에 맞는 Controller에도 Mapping되는 주소를 BoardController.java에 정의하도록 하겠습니다.
BoardController.java
package com.dream.controller; import java.util.Map; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.dream.service.BoardService; import com.dream.vo.BoardVO; import com.dream.vo.ResultVO; @CrossOrigin(origins = "*") @Controller @RequestMapping("board/") public class BoardController { private static final Logger LOG = LoggerFactory.getLogger(BoardController.class); @Autowired BoardService service; @ResponseBody @RequestMapping(value = "get-board-list.do", method = RequestMethod.GET) public ResultVO getBoardList() { // 호출 시 찍히게 될 로그 LOG.info("[GET] getBoardList"); // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅 ResultVO result = new ResultVO(false, null); try { result.setResult(service.getBoardList()); result.setSuccess(true); } catch (Exception e) { // TODO: handle exception LOG.error("[Board] getBoardList : " + e.getMessage(), e); } return result; } @ResponseBody @RequestMapping(value = "regist-board.do", method = RequestMethod.POST) public ResultVO registBoard(@RequestBody BoardVO vo) { // 호출 시 찍히게 될 로그 LOG.info("[POST] registBoard"); // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅 ResultVO result = new ResultVO(false, null); try { result.setResult(service.registBoard(vo)); result.setSuccess(true); } catch (Exception e) { // TODO: handle exception LOG.error("[Board] getBoardList : " + e.getMessage(), e); } return result; } @ResponseBody @RequestMapping(value = "get-board-detail.do", method = RequestMethod.POST) public ResultVO getBoardDetail(@RequestBody BoardVO vo) { // 호출 시 찍히게 될 로그 LOG.info("[POST] getBoardDetail"); // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅 ResultVO result = new ResultVO(false, null); try { result.setResult(service.getBoardDetail(vo)); result.setSuccess(true); } catch (Exception e) { // TODO: handle exception LOG.error("[Board] getBoardDetail : " + e.getMessage(), e); } return result; } }
해당 BoardService에서 getBoardDetail메소드도 작성해주도록 하겠습니다.
BoardService.java
package com.dream.service; import java.util.ArrayList; import java.util.Date; import java.util.List; import java.util.Map; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dream.mapper.BoardMapper; import com.dream.vo.BoardVO; @Service public class BoardService implements BoardServiceIF { @Autowired private SqlSessionFactory sqlSessionFactory; @Override public List getBoardList() { // TODO Auto-generated method stub List boardList = new ArrayList(); try (SqlSession session = sqlSessionFactory.openSession()) { BoardMapper mapper = session.getMapper(BoardMapper.class); boardList = mapper.getBoardList(); } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } return boardList; } public Boolean registBoard(BoardVO vo) { // TODO Auto-generated method stub vo.setRegDate(new Date()); vo.setWriter("user"); boolean result = false; try (SqlSession session = sqlSessionFactory.openSession()) { BoardMapper mapper = session.getMapper(BoardMapper.class); // 매퍼의 결과를 담을 변수 int mapperResult = 0; // 성공시 1이 반환됩니다. mapperResult = mapper.registBoard(vo); //정상 동작시 return 값을 true if (mapperResult > 0) { result = true; } //정상 동작이 아닐 시 return 값을 false else { result = false; } } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } return result; } public BoardVO getBoardDetail(BoardVO vo) { // TODO Auto-generated method stub BoardVO board = new BoardVO(); try (SqlSession session = sqlSessionFactory.openSession()) { BoardMapper mapper = session.getMapper(BoardMapper.class); board = mapper.getBoardDetail(vo.getBno()); } catch (Exception e) { // TODO: handle exception e.printStackTrace(); } return board; } }
BoardMapper 인터페이스에 mapper 메소드를 정의합니다.
BoardMapper 인터페이스
package com.dream.mapper; import java.util.List; import org.apache.ibatis.annotations.Mapper; import com.dream.vo.BoardVO; @Mapper public interface BoardMapper { public List getBoardList(); public int registBoard(BoardVO vo); public BoardVO getBoardDetail(int bno); }
다음으로 해당 메소드에 맞는 id의 SQL문을 BoardMapper.xml에 작성해줍니다.
SELECT * FROM BOARD INSERT INTO BOARD (title, content, writer, regDate) VALUES (#{title}, #{content}, #{writer}, #{regDate}) SELECT * FROM BOARD WHERE bno = #{bno}
자 Reponse가 정상적으로 되는지 확인해보겠습니다.
정상적으로 Board의 정보를 반환하는것을 확인 할 수 있습니다.
테이블에서 한개의 row를 클릭시 api호출 후 Response
Vue devtools로 해당 컴포넌트의 데이터를 확인해보니 정상적으로 boardDetail에 데이터가 있는것도 확인했습니다.
.
자 이제 팝업으로 띄워보도록 하겠습니다.
BoardList.vue에 팝업에 대한 코드를 추가합니다.
BoardList.vue
글 번호 : {{ boardDetail.bno }} 제목 : {{ boardDetail.title }} 등록일 : {{ boardDetail.regDate }} 내용 : {{ boardDetail.content }} 작성자 : {{ boardDetail.writer }} import axios from 'axios'; import moment from 'moment'; export default { name: 'BoardList', data() { return { boardList: [], boardDetail: [], openDetail: false, }; }, created() { this.getBoardList(); }, methods: { DateFormat(row) { return moment(row.regDate).format('YYYY-MM-DD hh:MM:ss'); }, getBoardList() { axios .get('http://localhost:8080/board/get-board-list.do') .then((response) => { if (response.data.success) { this.boardList = response.data.result; } }) .catch(function(error) { console.log(error); }); }, getBoardDetail(row) { const params = { bno: row.bno, }; axios .post('http://localhost:8080/board/get-board-detail.do', params) .then((response) => { if (response.data.success) { this.boardDetail = response.data.result; this.openDetail = true; } }) .catch(function(error) { console.log(error); }); }, }, };
간단하게 해당 정보를 팝업에 보여주도록 하겠습니다.
정상적으로 잘 보이는것을 확인 할 수 있습니다.
다음번은 수정하기에 대해 포스팅하도록 하겠습니다.
전체 소스코드는 아래 깃허브에서 확인 할 수 있습니다.
https://github.com/skarbgud/Board-Project
반응형
from http://dreamcoding.tistory.com/51 by ccl(A) rewrite - 2021-11-29 22:02:25