Front
호출하고 받은 데이터를 바인딩 하면 돼서 별로 어려운 건 없는데 동적 라우팅이 어려웠다
bno(게시글 번호) 를 파라미터로 넘겨줘야 하는데 방법을 몰라서
<a getBno({{$어쩌구}}><a/>
이런식으로 가져오려고 했는데 뭔 undefined 가 자꾸 나오거나
$어쩌고저쩌고 같은 경로를 타서 대체 뭐가 문젠가 싶었는데
BoardList 에서
<router-link :to="`/board/${row.bno}`">{{ row.title }}</router-link>이런 식으로 bno 를 넘겨주는 거였다 = 난 헛짓거리 했다
const bno = this.$route.params.bno; // 라우터 경로에서 bno 가져옴
그래서 BoardDetail 에서 bno를 넘겨받고 board/1, 2, 3 이런 식으로 해당되는 bno 대로 (동적으로)경로가 바뀐다
++ 상세에 파일을 올려주는 걸 나중에 추가했는데... 왜 안 돼? vue 는 쓰레기다...
하지만 하긴 했다. 이걸 두시간이나 걸려서 했다고? 싶지만? 그렇다 .
<tr>
<th>첨부파일</th>
<td colspan="3">
<img :src="'/images/' + details.stored_file" alt="첨부된파일 없음" />
</td>
</tr>
: < v-bind 를 줄이면 저렇다.
동적 경로라서 안 되는 건지 뭔지 {$어쩌구} 이런 식으로 쓰면 죽어도 해결이 안 됐다...
아니면 경로 문제인가? 하고 처음엔 assets 에 넣었는데 진짜 @ 를 붙이든 {{}} 뭐 되는 것도 없고 자료도 없고... 근데 public 에 넣으면 동적경로여도 된다.... 허탈함...
Back
bno 를 PathVariable 로 받았다.
Controller
@GetMapping("/board/{bno}")
public BoardFileDTO getBoardDetail(@PathVariable int bno) {
BoardFileDTO boardFile = boardService.getBoardDetail(bno);
return boardFile;
}Detail 은 bno 만 잘 받으면 된다!
Impl 단에서 로직을 조금 추가 했다
@Override
public BoardFileDTO getBoardDetail(int bno) {
BoardEntity board = mapper.getBoard(bno);
BoardFileDTO boardFile = new BoardFileDTO();
boardFile.fromBoard(board);
// 파일이 있는 경우 (fno 가 0이 아닌 경우)
if (board.getFno() != 0) {
FileEntity files = mapper.getFile(bno);
boardFile.fromFile(files);
}
mapper.updateViewCount(bno);
return boardFile;
}board 가 file을 참조하는 구조니까 fno 가 0 이 아니면 그 글에는 파일이 첨부된 거다
그래서 첨부된 파일이 있으면 file 데이터 보내주고 없음 안 보낸다.
detail 을 호출 한다는 건 그 게시글이 클릭 됐다는 거니까
조회수 올려주려고 조회수에게도 bno 보내준다~
Mapper
@Select("select * from board where bno=#{bno}")
BoardEntity getBoard(int bno);
@Select("select * from files where fno=#{fno}")
FileEntity getFile(int fno);
@Update("update board set viewcount=viewcount+1 where bno=#{bno}")
void updateViewCount(int bno);Board 에 있는 거 file 에 있는거 다 가져옴ㅋㅋ
필요한 정보만 가져오도록 좀 더 명확하게 작성 하는 게 좋겠지만.... join 을 썼다면 좋겠지만
나는 감자니까 쉽게 했다.
