[PYTHON] CRUD PUT, DELETE mit Nuxt & Django REST Framework

Überblick

Vorderseite: Nuxt Backend: Django REST Framework (DRF) Als ich ein neues Projekt usw. in startete, wurde es schwierig, die Einstellungen usw. einzeln zu überprüfen, sodass ich es zusammenfassen werde.

Es reicht jedoch nicht aus, nur die Einstellungsdatei als Artikel persönlich zu schreiben.

Daher plane ich, bis zur Implementierung der Mitgliederregistrierung zu schreiben, indem ich auf die API drücke, die die Grundoperation ist, um CRUD durchzuführen. Dieses Mal verwendet DB SQLite. Wenn Sie eine andere RDB wie PostgreSQL oder MySQL verwenden möchten, schreiben Sie einfach die DB-Einstellungen auf der DRF-Seite neu. Nehmen Sie diese Einstellungen daher selbst vor.

In diesem Artikel geht es vorerst darum, die von DRF aus Nuxt erstellte API zu verwenden, um den Inhalt der Datenbank zu aktualisieren und zu löschen.

Den Quellcode finden Sie unter hier. Wenn Sie also Fragen haben, schauen Sie bitte.

Sie können auch antworten, indem Sie Twitter oder im Kommentarbereich dieses Artikels fragen, wenn Sie Fragen haben.

Letztes Mal CRUD POST mit Nuxt & Django REST Framework

Standort aktualisieren

Backend

Ansicht und URL wie zuvor hinzufügen.

views.py

#Ansicht zum Bearbeiten / Löschen von Produkten
class ItemEditView(generics.RetrieveUpdateDestroyAPIView):
    serializer_class = ItemSerializer
    queryset = Item.objects.all()

Ich habe es das letzte Mal nicht erwähnt, aber ich verwende die generische Ansicht, weil es einfach zu bedienen ist.

Die diesmal verwendete generics.RetrieveUpdateDestroyAPIView ist eine Ansicht, die Informationen abrufen, einfügen und löschen kann. Die Szene, in der diese Ansicht verwendet wird, ist, wenn Sie die Bearbeitungs- und Löschbildschirme von Produkten wie diesem kombinieren möchten. Außerdem verwende ich diesmal dieses, das auch GET sein kann, um die ursprünglich registrierten Daten anzuzeigen, so dass leicht zu verstehen ist, wo beim Bearbeiten Änderungen vorgenommen werden müssen.

Informationen zur Verwendung von view und einer Liste finden Sie unter hier.

urls.py

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

Wie beim letzten Mal werden die Einstellungen abgeschlossen.

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

Lassen Sie uns zugreifen.

Wie oben erwähnt, werden die Informationen des Produkts mit der ID 1 angezeigt, und PUT und DELETE können ausgeführt werden.

Gehen wir weiter zum Frontend.

Vorderes Ende

Erstellen Sie dieses Mal "edit.vue" im Ordner "_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>Kategorie</h4>
          <p>{{ item.category }}</p>
          <h4>Preis</h4>
          <p>{{ item.price }}</p>
          <h4>Erläuterung</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="Produktname"
              required
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="item.category"
              :counter="10"
              label="Kategorie"
              required
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="item.price"
              label="Preis"
              required
            ></v-text-field>
          </v-col>
          
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="item.description"
              label="Beschreibung des Artikels"
              required
            ></v-text-field>
          </v-col>
          <v-col
            cols="12"
            md="4"
          >
           <v-file-input
           v-model="item.image"
           label="Produktbild"
           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>
Produkt aktualisieren
      </v-btn>
    </v-card-actions>
        </v-row>
      </v-container>
    </v-form>
    <v-form @submit.prevent="deleteItem">
    <button class="btn btn-sm btn-danger">
Löschen
    </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: 'Produktbearbeitung',
  }
  },
  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>

Dann automatisch

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

Die zu routenden Einstellungen werden generiert.

Und um dynamisch von einer vorhandenen Seite wechseln zu können

_id/index.vue

Update wie folgt:

_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>Kategorie</h4>
          <p>{{ item.category }}</p>
          <h4>Preis</h4>
          <p>{{ item.price }}</p>
          <h4>Erläuterung</h4>
          <p>{{ item.description }}</p>
          <h3>Bearbeiten</h3>
          <nuxt-link :to="`/items/${item.id}/edit`" class="btn btn-info">
Produkt bearbeiten
            </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: 'Produktdetails'
    }
  }
}
</script>
<style scoped>
</style>

Die Hauptänderung ist

nuxt-link :to ~

Hinzugefügt. Beachten Sie, dass bei Verwendung von "nuxt-link" für dynamisches Routing eine Fehlermeldung angezeigt wird, wenn vor "kein Doppelpunkt (:)" steht.

Der Detailseite wurde eine Produktbearbeitungsseite hinzugefügt.

Wenn Sie auf diesen Link klicken, gelangen Sie zur Produktbearbeitungsseite mit dem folgenden Formular.

Es gibt eine Spalte zum ordnungsgemäßen Aktualisieren und Löschen, und ich habe den Vorgang hier fest bestätigt.

Ist Prost für gute Arbeit! Jetzt können Sie die CRUD-Verarbeitung nach Belieben durchführen!

Wenn Sie den Prozess richtig verstehen, können Sie Webanwendungen mit Nuxt / DRF in gewissem Umfang frei erstellen.

Anstatt das nächste Mal das Posten an Dritte zu ermöglichen, werden wir die Authentifizierung wie die Registrierung der Mitgliedschaft implementieren, um die Autorität zu verwalten.