[PYTHON] CRUD POST 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. Diesmal 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 habe ich vorerst die von DRF aus Nuxt erstellte API aufgerufen und den im Formular eingegebenen Inhalt an die Datenbank gesendet.

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 GET mit Nuxt & Django REST Framework ②

Standort aktualisieren

Backend

POST ist nicht möglich, da die für DRF bis zum vorherigen Zeitpunkt erforderliche Ansicht und URL nicht geschrieben wurden.

Der Grund dafür ist, nur GET zuzulassen, den Prozess des Informationsempfangs. Der Grund dafür ist, dass es bei der Betrachtung einer App, die praktisch verwendet werden kann, einfacher ist, Berechtigungen zu verwalten und festzulegen, wenn sie geteilt wird. Mit den neuesten Web-Apps können Sie beispielsweise Informationen abrufen, ohne sich als Mitglied zu registrieren. In den meisten Fällen können Sie jedoch keine POST durchführen, ohne sich als Mitglied zu registrieren, und diese Berechtigung ist getrennt. Da es jedoch beängstigende Menschen auf der Welt gibt, ist es wichtig zu verhindern, dass sie missbraucht werden.

Dieses Mal werde ich also zunächst Ansicht und URL hinzufügen.

views.py

......
#hinzufügen
class ItemCreateView(generics.CreateAPIView):
    serializer_class = ItemSerializer
    queryset = Item.objects.all()

urls.py

......
#hinzufügen
path('items/add',ItemCreateView.as_view()),

Nun, auf diese Weise

http://localhost:8000/api/items/add

Wenn Sie darauf zugreifen, können Sie jetzt wie folgt POSTEN.

Dies ist die einzige Ergänzung auf der DRF-Seite! Es ist wunderbar.

Gehen wir weiter zum Frontend.

Vorderes Ende

Hier müssen Sie ein Formular erstellen und eine Seite für POST hinzufügen.

Also habe ich ein einfaches Formular geschrieben. Auch in Bezug auf die Logik habe ich es nach der Grundgrammatik von Axios geschrieben.

addItem.vue

<template>
<v-card
    light
    :loading="isUpdating"
  >
    <div id="app">
    <v-app id="inspire">
    <v-form @submit.prevent="submitItem">
      <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 hinzufügen
      </v-btn>
    </v-card-actions>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>
</v-card>
</template>

<script>
export default {
  data () {
    return {
      item: {
        name: '',
        category: '',
        image: '',
        price: '',
        description: '',
      },
      preview: '',
      autoUpdate: true,
      isUpdating: false,
      title: 'Produktzusatz',
  }
  },
  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 submitItem () {
      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.$post('/items/add', formData, config)　// eslint-disable-line
        this.$router.push('/items')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

Eine Form wie diese wird herauskommen. Und wenn Sie diese Felder ausfüllen und senden ...

Es wurde erfolgreich hinzugefügt.

Ich dachte, ich schreibe es, aber wenn ich es lerne und schreibe, wird es funktionieren, und ich persönlich denke, dass es wichtig ist, das Dokument über Axios genau zu lesen.

Ich persönlich empfehle Axios Installation und einfache Verwendung von Axios ](https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9) es ist hier.

Dieser Artikel ist sehr leicht zu verstehen und lesenswert.

~~ Ich denke, dass die Entwicklung sehr reibungslos vonstatten gehen kann, wenn CRUD- und Mitgliedschaftsregistrierungshandbücher erstellt werden. Deshalb werde ich beim nächsten Mal darüber schreiben, wie die Informationen korrigiert und gelöscht werden, dh PUT und DELETE. ~~

Ich habe geschrieben CRUD PUT, DELETE mit Nuxt & Django REST Framework