vue.js [상세 페이지 불러오기]

데이터 테이블을 만들어 게시판을 불러오는 것 까지 성공하였고 이번에는 글 제목을 클릭하면 상세 페이지로 넘어가서 상세 내용을 나타내도록 구현해 보았다.

url은 /Home -> Board로 넘어가도록 하였다.

상세 페이지의 내용에는

아이디 :

작성자 :

제목 :

내용 :

글쓴 날짜 :

글쓴 시간 :

위의 양식으로 나타나도록 구현할 예정이다.

우선 router-link를 걸어 query로 받아와서 보여주도록 하였다.

글 제목을 클릭하면 페이지가 넘어가도록 해준다.

name : Board, query : {id: item.id}

입력후 Home에 들어가보면 item의 subject인 글 제목에 하이퍼링크 처럼 파란색으로 글씨가 바뀐 것을 볼 수 있다.

링크를 누르면 Board로 넘어가기 때문에 Board에 상세페이지 내용을 띄우기 위해

Board.vue에 내용을 수정한다.

상세 페이지에 보여줄 내용 (아이디, 작성자, 제목, 내용, 글쓴 날짜, 글쓴 시간)

data안에 반환시켜줄 값 bid를 1로 초기화,

users는 상세 페이지에서는 문자열로 가져와야 하기 때문에 ''으로 선언.

method에서는 bid라는 변수를 선언해주고 왼쪽의 query를 받아오기 위해 $route.query.id 를 사용하여 쿼리를 받아와 bid에 저장한다.

다음 다음 $axios로 SpringBoot의 컨트롤러에서 getBoardById 메서드를 불러온다.

불러 온 후 유의할 점은 Board.vue의 users에 데이터를 담을때 컨트롤러에서 ApiResponse를 사용하였기 때문에

ApiResponse안의 data를 불러와야 해서 response.data.data를 사용하여야 한다.

(response.data만 써서 users에 담으면 ui에 아무것도 뜨지 않음)

마지막으로 mounted함수를 써서 retrieveUsers메서드를 불러오면 된다.

첫번째 글을 눌러서 결과를 확인해 보면 성공적으로 상세페이지의 내용이 뜬다는 것을 볼 수 있다!