8. 상세페이지 출력 (springboot + vue 6)

상세페이지를 만들기 전

vue-table에서 각 열을 클릭하면 해당 글의 세부페이지로 이동되게 구현한다.

(페이지가 넘어갈때 id도 함께 넘겨주자)

v-slot을 사용하여 직접 테이블 열을 만들어서 클릭 이벤트를 넣었다.

[다음 블로그에 이유가 잘 나와있다]

 

 

 

Home.vue

---

<v-data-table
          :headers="headers"
          :items="users"
          :loading="loading"
          :items-per-page="5"
          :search="search"
          >
        <template v-slot:item="{ item }">
          <tr @click="inView(item.id)">
            <td :class="headers[0].class">{{item.id}}</td>
            <td :class="headers[1].class">{{ item.subject }}</td>
            <td :class="headers[2].class">{{item.author }}</td>
            <td :class="headers[3].class">{{item.writeDate }}</td>
            <td :class="headers[4].class">{{item.readCount }}</td>
          </tr>
        </template>
      </v-data-table>

 

v-slot을 사용하여 각 열을 클릭하면 해당하는 id를 이동하는 페이지로 넘겨주게 작성했다. 

아래는 클릭을 하면 발생하는 메소드로 vue router의 query방식으로 데이터를 전달한다.

  methods: {
    inView(id){
      this.$router.push({path:'./board',query: {id}});
    },
}

 

 

Board.vue

---

다음은 게시판의 세부내용을 담당하는 board.vue 페이지다.

아래 코드는 board.vue의 script 부분으로 home에서 받은 id를 axios방식으로 springboot에 전달하여 id에 해당하는 글을 불러온다

  methods: {
    detailUsers() {
      let data = this.$route.query.id
      this.$axios.get("board/"+data).then(response => {
        this.users = response.data;
        console.log(response.data);
      })
          .catch(e => {
            console.log(e);
      })
    }
  },
  mounted() {
    this.detailUsers();
  }
}

 

1. springboot에서 list방식으로 vue로 데이터를 넘긴 후

2. vue에서 v-for을 사용하여 list안의 id, author, content.. 등 값을 가져온다

-- board.vue template 부분--

<v-card-text  v-for="user in users" v-bind:key="user.id">
      <div>{{user.writeDate}}</div>
      <p class="text-h4 text--primary">
        {{user.subject}}
      </p>
      <div class="text--primary" >
        {{user.content}}
      </div>
    </v-card-text>
    </v-card-actions>

 

여기서 v-for 디렉티브는 item in items 형태로 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭

script에서 springboot에서 가져온 리스트를 users에 저장 후 v-for를 사용하여 가져온것

 

 

 

---

home에서 2번 글을 클릭하면 위와같이 board id를 넘겨주고 

해당 글의 세부내용을 보여준다