7. 게시판 출력 (Vue + Springboot 연동 5)

Vuetify를 사용한 게시판

어찌저찌 Springboot에서 데이터를 가져와서 Vue를 통해 보여줬다.

Vuetify를 사용하니 게시판 형태를 구현하기가 너무 쉬워서 깜짝놀랐다

그리고 Springboot에서 구현한 page를 나누는 기능을 여기서는 자동으로 지원해주니 더 편했는것 같다.

 

 

<template>

---

<template>
<v-container grid-list-md>
  <v-layout row wrap>
    <v-flex xs12>
      <v-data-table
          :headers="headers"
          :items="users"
          :loading="loading">
        <template slot="items" slot-scope="props">
          <td :class="headers[0].class">{{props.item.id}}</td>
          <td :class="headers[1].class">{{ props.item.subject }}</td>
          <td :class="headers[2].class">{{ props.item.author }}</td>
          <td :class="headers[3].class">{{ props.item.writeDate }}</td>
          <td :class="headers[4].class">{{ props.item.readCount }}</td>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
</v-container>
</template>

< v-data-table >

•  headers : 테이블의 헤더를 정의 
•  items : 테이블에 나타낼 내용을 정의
•  이 두개의 옵션은 보통 data: () 안 쪽에 정의하는 것이 일반적이다. 테이블에 나타내야할 내용이 많아질수록 그대로 나 타내기가 힘들기 때문이다.
• (아래는 추가 가능한 옵션)

 items-per-page : 테이블에서 한 페이지에 나타낼 데이터를 정할 수 있다

 

 search  (다음 옵션을 사용하면 검색을 할 수 있다.) --!위 코드에는 추가가 안되어있다--

  1. search를 사용하기 위해서는 text영역을 추가해야한다. 관련된 v-text-field를 추가하자.

  2. v-text-field에는 주의해야할 prop가 있는데 v-model이다.

     해당 prop는 v-text-field에서 text를 입력하면 해당 변수로 그 값을 전달해 주는 prop 이다.

     따라서, 입력값을 넣어주는 data( )내 search변수에 저장이 되는 것. 그 결과는

     v-data-table의 :search prop에 전달 된다

 

  -> 검색 옵션 설정하는 법 https://vuetifyjs.com/en/components/data-tables/#dense

 

 

여기서는 v-data-table을 통해서 items에 저번에 Springboot에서 불러온 users를 담았다 (script 코드에서 볼 수 있다)

아래 블로그를 참고하면 더 다양한 옵션들이 소개되어 있습니다

https://jhhan009.tistory.com/45

 

< / v-data-table >

 

 

<script>

---

<script>
export default {
  name: 'App',
  data: () => ({
    users:[],
    subject: 'hi',
    loading: false,
    headers: [
      { text: '번호', value: 'id', sortable: true },
      { text: '제목', value: 'subject', sortable: true },
      { text: '글쓴이', value: 'author', sortable: false },
      { text: '등록일', value: 'writeDate', sortable: true },
      { text: '조회', value: 'readCount', sortable: true }
    ],
  }),

  methods: {
    button () {
      this.$axios.get('board/example', { params: { tEst: this.b1 } }).then(result => {
        console.log(result.data)
        this.a = result.data
      });
    },
    retrieveUsers(){
      this.$axios.get("board/list")
          .then(response=>{
            this.users = response.data;
            console.log(response.data);
          })
          .catch(e=>{
            console.log(e);
          })
    }
  },
  mounted(){
    this.retrieveUsers();
  }
}
</script>

 headers

 상단에 표시될 필드(컬럼) 들을 바인드 한다. 배열로 되어 있으며 배열 개수만큼 표시한다

 데이터테이블의 핵심인 headers를 먼저 정의

• value는 값의 키 이다
• text는 표시될 내용이다
• sortable은 클릭해서 정렬이 가능하게 한다
• class는 해당 컬럼에 스타일을 적용할 수 있습니다. 예를들어 (id를 hidden-sm-and-down으로 태블릿 이하에서는 표시되지 않게 할 수 있다.) 

 

 items

 실제 데이터 이다. 위 코드에서는 users를 받아서 바인드 시켜놨다.

 테이블의 내용을 채우는 <template slot="items" slot-scope="props"> 의 props가 각 데이터가 된다.

 td에 props.item.x 가 값이 된다.

 

 

참고한 블로그 : https://fkkmemi.github.io/nemv/nemv-069-board-datatable/