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.

スクリーンショット 2020-05-15 14.45.55.png

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.

スクリーンショット 2020-05-15 17.55.04.png

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

スクリーンショット 2020-05-15 17.55.27.png

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é.

Recommended Posts

CRUD PUT, DELETE avec Nuxt & Django REST Framework
CRUD GET avec Nuxt & Django REST Framework ②
CRUD POST avec Nuxt & Django REST Framework
CRUD GET avec Nuxt & Django REST Framework ①
Framework Django REST avec Vue.js
Connectez-vous avec Django Rest Framework
[Django] Utiliser MessagePack avec le framework Django REST
CRUD avec Django
Implémentation de CRUD à l'aide de l'API REST avec Python + Django Rest framework + igGrid
Bases du framework Django REST
Astuces Django Rest Framework
Implémentation de la fonction d'authentification dans Django REST Framework à l'aide de djoser
Créer une application Todo avec Django REST Framework + Angular
Plus de nouvelles méthodes d'authentification des utilisateurs avec Django REST Framework
Essayez de créer une application Todo avec le framework Django REST
Créer une API autour de l'authentification des utilisateurs avec Django REST Framework
Lorsque vous souhaitez filtrer avec le framework Django REST
Implémenter des URL hiérarchiques avec des routeurs imbriqués drf dans le framework Django REST
Bloc d'achoppement du framework Django REST
Créer une API REST pour faire fonctionner dynamodb avec le Framework Django REST
Suppression logique dans Django, DRF (Django REST Framework)
Comprendre la commodité de Django Rest Framework
Un outil administratif qui peut être créé immédiatement avec le framework ng-admin + Django REST
Notes diverses sur le framework Django REST
Django REST Framework + Considération de conception d'architecture propre
Comment gérer les caractères déformés dans json de Django REST Framework
Comment générer automatiquement un document API avec le framework Django REST et POST à partir de l'écran de document
Framework Django REST Un peu utile à savoir.
Implémenter la fonctionnalité de connexion JWT dans le framework Django REST
Internationalisation avec Django
Parfois, vous souhaitez accéder aux informations de vue depuis Serializer avec DRF (Django REST Framework)
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 1 ~
List, méthode pour les ressources imbriquées dans le framework Django REST
Implémentez l'API à une vitesse explosive en utilisant Django REST Framework
[Django Rest Framework] Personnalisez la fonction de filtre à l'aide de Django-Filter
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 2 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 3 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 4 ~
[CRUD] [Django] Créer un site CRUD en utilisant le framework Python Django ~ 5 ~