개요

앞:Nuxt
백엔드: Django REST Framework(이하 DRF)
에서 새로운 프로젝트 등을 시작했을 때 설정 등을 일일이 조사하는 것이 귀찮게 되었기 때문에, 정리해 둡니다.

다만, 설정 파일만을 쓰는 것은 개인적으로 기사로서 부족하다.

그래서 김에 기본적인 조작인 API를 두드려 CRUD를 실시해, 회원등록을 구현하는 곳까지 쓸 예정입니다.
덧붙여 이번은 DB는 SQLite를 사용합니다. PostgreSQL이나 MySQL등 다른 RDB가 사용하고 싶은 경우는 DRF측의 DB의 설정을 바꿔 쓸 뿐이므로, 그쪽의 설정은 각자 잘 부탁드리겠습니다.

이 기사에서는 Nuxt에서 DRF로 만든 API를 두드려 데이터베이스에서 정보를 얻고 상세한 정보를 클라이언트 측에서 표시시키는 곳까지입니다.

소스 코드는 여기 에 있으므로 모르는 곳은 적절히 봐 주세요.

또, 트위터 인가 이 기사의 코멘트란에서 모르는 곳을 (들)물어 ​​주실 수 있다고 대답할 수 있습니다.

지난번
Nuxt&Django REST Framework에서 CRUD GET편①

프로젝트 구성

전회는 inspire.vue 에 직접 코드를 추가해 상품란도 일람을 추가했습니다.
그러나 이것으로는 조금 본 목적에 좋지 않기 때문에 세세한 변경을 더해 갑니다.

Nuxt에서 페이지의 vue 파일의 트리 구조는 vue-router를 따라 설정을 자동으로 생성합니다.

Nuxt 문서 의 예에도 있듯이, 디렉토리 구조가 이하의 경우에는,

pages/
--|_slug/
-----|comments.vue
-----|index.vue
--| users/
-----|_id.vue
--|index.vue

자동으로 다음이 생성됩니다.

router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}

이러한 사양 때문에 라우팅에 관한 수고를 줄일 수 있다는 이점이 있습니다.

따라서 먼저 새 pages 안에 items 폴더를 새로 만들고 그 안에 item의 id에 따라 상세 페이지를 만들 수 있도록 _id 폴더를 만듭니다. 이렇게 폴더 안에 _id 폴더를 만드는 것으로 취득한 id에 따른 정보를 자동으로 페이지를 정제해 줍니다.

Github을 보면서이 근처를 진행하면 알기 쉬울까 생각합니다.

그리고 items 폴더에 index.vue 를 만들고 다음과 같이 이전에 쓴 코드를 로고 빼고 이식하고

마지막까지

하지만 이번에는

방문해 봅시다.

items/index.vue

<template>
  <main class="container mt-5">
    <div class="row">
        <div class="col-12 text-right mb-4">
        <div class="d-flex justify-content-between">
          <h3>商品一覧</h3>
          <!-- <nuxt-link to="/items/add" class="btn btn-info">
            商品を追加する
          </nuxt-link> -->
        </div>
      </div>
      <template v-for="item in items">
        <div :key="item.id" class="col-lg-3 col-md-4 col-sm-6 mb-4">
          <!--<item-card :on-delete="deleteitem" :item="item" />-->
        </div>
      </template>
    </div>
    </main>
</template>

<script>
import ItemCard from '~/components/ItemCard.vue'

export default {
  components: {
    ItemCard
  },
  async asyncData ({ $axios, params }) {
    try {
      const items = await $axios.$get('items/')
      return { items }
    } catch (e) {
      return { items: [] }
    }
  },
  data () {
    return {
      items: []
    }
  },
  head () {
    return {
      title: '商品一覧'
    }
  }
}
</script>

그러면 이런 느낌입니다. Vuetify 로고가 들어갈 때보다 그렇게되었습니다.



계속해서 상세를 클릭했을 때 제대로 그 페이지의 설명문 등 상세한 설명이 나오도록 합시다.
다음과 같이 써 보겠습니다.

items/_id/index.vue

<template>
  <main class="container my-5">
    <div class="row">
      <div class="col-12 text-center my-3">
        <h2 class="mb-3 display-4 text-uppercase">
          {{ item.name }}
        </h2>
      </div>
      <div class="col-md-6 mb-4">
        <img
          class="img-fluid"
          style="width: 400px; border-radius: 10px; box-shadow: 0 1rem 1rem rgba(0,0,0,.7);"
          :src="item.image"
          alt
        >
      </div>
      <div class="col-md-6">
        <div class="item-details">
          <h4>カテゴリー</h4>
          <p>{{ item.category }}</p>
          <h4>値段</h4>
          <p>{{ item.price }}</p>
          <h4>説明</h4>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  async asyncData ({ $axios, params }) {
    try {
      const item = await $axios.$get(`/items/${params.id}`)
      return { item }
    } catch (e) {
      return { item: [] }
    }
  },
  data () {
    return {
      item: {
      id:'',
      name:'',
      image:'',
      price:'',
      description:'',
      }
    }
  },
  head () {
    return {
      title: '商品詳細'
    }
  }
}
</script>
<style scoped>
</style>

그리고 상세를 클릭하면 이런 느낌입니다.



목록 페이지에서 읽을 수 없었던 설명을 읽을 수 있습니다.

이러한 느낌에 상품 일람의 페이지에서는 필요 최저한의 정보를 취득해, 각 id마다의 페이지에서는 보다 상세한 정보를 취득해, 표시하는, 같은 사용 구분을 합니다.

상세 페이지를 만드는 방법에 대해서는 이것 정도로 끝입니다.

다음 번은 POST편입니다.

※추기
썼습니다!
Nuxt&Django REST Framework에서 CRUD POST편