vue.js [게시판 불러오기]

Spring boot 와 연동된 데이터를 vue.js로 게시판을 만들어 불러와 보았다.

 

 

 

위의 자료가 vuetify의 예제인데 페이지 넘기기, 오름차순, 내림차순 정렬의 기능이 있고 한페이지 당 행의 갯수,

header에서 내가 원하는 컬럼만 뽑아오고 게시판을 만들도록 수정하였다.

 

 

 

 

 

 

참고

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/usage.vue

GitHub - vuetifyjs/vuetify: 🐉 Material Component Framework for Vue

 

 

 

 

 

 

 

 

 

vuetify의 예제를 참고하여  template부터 수정

script의 users (list)를 items로 넘김

 

 

 

 

 

 

 

 

 

 

headers를 수정을 하였는데 

ID, 작성자, 글 제목, 조회수 컬럼이  나오도록 만들었다.

text의 값은 화면에 보여지는 데이터 이름이기 때문에 한글로 임의로 설정,

value 값은 list안의 자료명과 동일한 이름이여야 하기 때문에 id, author, subject, readCount로 입력하였다.(이때 대소문자까지 같도록 신경을 써야함)

 

 

 

31번째 줄인 align은 'start'로 컬럼의 시작부분으로 왼쪽 정렬로 선언한 것이고

오른쪽 정렬을 하려면 'end'를 사용한다.

32번째 줄의 sortable은 false로 제일 처음 게시판에서 오름차순, 내림차순으로 정렬을 시킬수 있는 기능을 넣었다고 하였는데 false를 써서 ID컬럼은 오름차순, 내림차순 기능을 제거하였다. (작성자, 글 제목, 조회수는 false를 쓰지 않아서 정렬기능 기본적으로 추가됨)

 

 

 

 

 

 

 

 

/Home에 들어가 확인해본 결과 성공적으로 테이블이 만들어졌다.

 

 

 

 

 

테이블을 불러오는 것까지 성공하였으니 다음으로는 글 제목을 클릭하여 상세 페이지를 가져오는 기능을 만들 예정이다.