CRUD PUT, DELETE avec Nuxt & Django REST Framework

Aperçu

Avant: Nuxt Backend: Django REST Framework (DRF) Lorsque j'ai lancé un nouveau projet, etc., il est devenu difficile de vérifier les paramètres, etc. un par un, donc je vais le résumer.

Cependant, écrire uniquement le fichier de paramètres ne suffit pas à titre personnel.

Donc, je prévois d'écrire jusqu'au point de mettre en œuvre l'enregistrement des membres en appuyant sur l'API, qui est l'opération de base, pour effectuer CRUD. Cette fois, DB utilise SQLite. Si vous souhaitez utiliser un autre RDB tel que PostgreSQL ou MySQL, réécrivez simplement les paramètres de la base de données du côté DRF, veuillez donc effectuer ces paramètres vous-même.

Pour le moment, cet article concerne l'utilisation de l'API créée par DRF de Nuxt pour mettre à jour et supprimer le contenu de la base de données.

Le code source peut être trouvé à ici, donc si vous avez des questions, veuillez jeter un œil.

Vous pouvez également répondre en demandant à Twitter ou dans la section commentaires de cet article si vous avez des questions.

Dernière fois CRUD POST avec Nuxt & Django REST Framework

Mettre à jour l'emplacement

Back end

Ajoutez une vue et une URL comme auparavant.

views.py

#Vue pour modifier / supprimer des produits
class ItemEditView(generics.RetrieveUpdateDestroyAPIView):
    serializer_class = ItemSerializer
    queryset = Item.objects.all()

Je ne l'ai pas mentionné la dernière fois, mais j'utilise la vue générique car elle est facile à utiliser.

Le generics.RetrieveUpdateDestroyAPIView utilisé cette fois est une vue qui peut GET, PUT et DELETE. La scène pour utiliser cette vue est lorsque vous souhaitez combiner les écrans d'édition et de suppression de produits comme celui-ci. De plus, cette fois, j'utilise ce qui peut également être GET pour afficher les données enregistrées d'origine afin qu'il soit facile de comprendre où changer lors de l'édition.

Veuillez consulter ici pour savoir comment utiliser la vue et une liste.

urls.py

.....
path('items/<int:pk>/edit',ItemEditView.as_view()),

Comme ce fut le cas la dernière fois, cela termine les réglages.

http://localhost:8000/api/items/1/edit

Accédons.

Comme mentionné ci-dessus, les informations du produit avec l'ID 1 sont affichées, et PUT et DELETE peuvent être effectuées.

Passons au front-end.

l'extrémité avant

Cette fois, créez ʻedit.vue dans le dossier _id`.

_id/edit.vue

<template>
<v-card
    light
    :loading="isUpdating"
  >
    <div id="app">
    <v-app id="inspire">
    <v-container>
    <div class="col-12 text-center my-3">
        <h3 class="mb-3 display-4 text-uppercase">
          {{ item.name }}
        </h3>
      </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>Catégorie</h4>
          <p>{{ item.category }}</p>
          <h4>prix</h4>
          <p>{{ item.price }}</p>
          <h4>La description</h4>
          <p>{{ item.description }}</p>
          </div>
          </div>
          </v-container>
    <v-form @submit.prevent="editItem">
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="item.name"
              label="Nom du produit"
              required
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="item.category"
              :counter="10"
              label="Catégorie"
              required
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="item.price"
              label="prix"
              required
            ></v-text-field>
          </v-col>
          
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="item.description"
              label="Description de l'article"
              required
            ></v-text-field>
          </v-col>
          <v-col
            cols="12"
            md="4"
          >
           <v-file-input
           v-model="item.image"
           label="Image du produit"
           filled
           prepend-icon="mdi-camera"
           ></v-file-input>
          </v-col>
          <v-card-actions>
      <v-spacer />
      <v-btn
        class="btn-primary"
        :loading="isUpdating"
        color="primary"
        depressed
        @click="isUpdating = true"
        type="submit"
      >
        <v-icon left>
          mdi-post
        </v-icon>
Mettre à jour le produit
      </v-btn>
    </v-card-actions>
        </v-row>
      </v-container>
    </v-form>
    <v-form @submit.prevent="deleteItem">
    <button class="btn btn-sm btn-danger">
Effacer
    </button>
    </v-form>
  </v-app>
</div>
</v-card>
</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: {
        name: '',
        category: '',
        image: '',
        price: '',
        description: '',
      },
      preview: '',
      autoUpdate: true,
      isUpdating: false,
      title: 'Édition de produits',
  }
  },
  watch: {
    isUpdating (val) {
      if (val) {
        setTimeout(() => (this.isUpdating = false), 3000)
      }
    }
  },
  methods: {
    createImage (file) {
      const reader = new FileReader()
      const vm = this
      reader.onload = (e) => {
        vm.preview = e.target.result
      }
      reader.readAsDataURL(file)
    },
    async deleteItem () { // eslint-disable-line
      try {
        const deleteditem = this.item
        await this.$axios.$delete(`/items/${deleteditem.id}/edit`) // eslint-disable-line
        const newItems = await this.$axios.$get('/items/')
        this.items = newItems
        this.$router.push('/items')
      } catch (e) {
        console.log(e)
      }
    },
    async editItem () {
      const editeditem = this.item
       //if (editeditem.image.includes('http://)') !== -1) {
        //delete editeditem.image
      //}
      const config = {
        headers: { 'content-type': 'multipart/form-data' }
      }
      const formData = new FormData()
      for (const data in editeditem) {
        formData.append(data, editeditem[data])
      }
      try {
        const response = await this.$axios.$patch(`/items/${editeditem.id}/edit`, formData, config)　// eslint-disable-line
        this.$router.push('/items')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

Puis automatiquement

http://localhost:3000/items/${id}/edit

Les paramètres de routage vers sont générés.

Et pouvoir effectuer une transition dynamique à partir d'une page existante

_id/index.vue

Mettez à jour comme suit,

_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>Catégorie</h4>
          <p>{{ item.category }}</p>
          <h4>prix</h4>
          <p>{{ item.price }}</p>
          <h4>La description</h4>
          <p>{{ item.description }}</p>
          <h3>Éditer</h3>
          <nuxt-link :to="`/items/${item.id}/edit`" class="btn btn-info">
Modifier le produit
            </nuxt-link>
        </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:'',
      category:'',
      image:'',
      price:'',
      description:'',
      }
    }
  },
  head () {
    return {
      title: 'détails du produit'
    }
  }
}
</script>
<style scoped>
</style>

Le principal changement est

nuxt-link :to ~

Ajoutée. Notez que si vous utilisez nuxt-link pour le routage dynamique, vous obtiendrez une erreur s'il n'y a pas de deux-points (:) avant.

Une page de modification du produit a été ajoutée à la page de détails.

Cliquez sur ce lien pour accéder à la page de modification du produit avec le formulaire ci-dessous.

Il y a une colonne pour mettre à jour et effacer correctement, et j'ai confirmé l'opération fermement ici.

Vive le bon travail! Vous pouvez maintenant effectuer le traitement CRUD comme vous le souhaitez!

Si vous comprenez correctement le processus, vous pouvez créer librement des applications Web avec Nuxt / DRF dans une certaine mesure.

La prochaine fois, au lieu de permettre de publier à n'importe qui, nous mettrons en œuvre une authentification telle que l'inscription des membres afin de gérer l'autorité.