[PYTHON] CRUD GET 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 erhalten Sie detaillierte Produktinformationen, indem Sie auf die von DRF aus Nuxt erstellte API klicken.

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.

Backend

Erstellen Sie zunächst ein vertrautes Projekt. Lassen Sie uns von der Einstellung von der DRF-Seite aus arrangieren.

$  mkdir nuxt-django

$ cd nuxt-django

$ django-admin startproject server

$ cd server

$ django-admin startapp practice

Lassen Sie uns zunächst die Einstellungsdatei ändern.

settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'practice', #hinzufügen
    'rest_framework', #hinzufügen
    'corsheaders', #hinzufügen
]

......


#hinzufügen
#Herkunft zu erlauben
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:3000',
    )
CORS_ORIGIN_ALLOW_ALL = True

......

#Die folgenden Änderungen und Ergänzungen

# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/

LANGUAGE_CODE = 'ja-JP'
TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Was ich zu "INSTALLED_APPS" hinzugefügt habe, ist das "rest_framework", das für die Verwendung der in "startapp" hinzugefügten App und DRF unverzichtbar ist, und die "Corsheaders", die für den Zugriff mit Axios erforderlich sind.

CORS_ORIGIN_WHITELIST muss geschrieben werden, um festzulegen, wo der Zugriff zugelassen werden soll.

Ändern Sie danach "LANGUAGE_CODE" und "TIME_ZONE", um Japanisch zu unterstützen.

Das letzte "MEDIA ..." wurde hinzugefügt, um das Bild danach zu verarbeiten. Es ist nicht erforderlich, wenn Sie die Bilddatei nicht verwenden. Es wird jedoch empfohlen, sie zu beschreiben, da sie in vielen Fällen verwendet wird.

urls.py

from django.contrib import admin
from django.urls import path,include #hinzufügen
from django.conf.urls.static import static #hinzufügen
from django.conf import settings #hinzufügen


urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/',include('practice.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

models.py

from django.db import models

# Create your models here.


CATEGORY = (
    (1, 'Getränk'),
    (2, 'Blumenarrangement'),
)

class Item(models.Model):
    name = models.CharField(verbose_name='Produktname',max_length=255,null=False)
    category = models.IntegerField(verbose_name='Kategorie',choices=CATEGORY)
    image = models.FileField(verbose_name='Bild')
    price = models.PositiveIntegerField(verbose_name='Bild',null=False)
    description = models.TextField(verbose_name='Einzelheiten',blank=True,null=True)

    def __str__(self):
        return self.name

Diesmal habe ich ein Modell eines gemeinsamen Produkts gemacht. Erstellen Sie dann einen Serializer, um dieses Element zu verarbeiten.

serializers.py

from rest_framework import serializers
from .models import Item

class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = '__all__'

Schreiben Sie dann views.py und urls.py, um dies weiterzuleiten.

views.py

from django.shortcuts import render

from rest_framework import viewsets,filters,permissions,generics
from .serializers import ItemSerializer
from .models import Item

# Create your views here.
class ItemListView(generics.ListAPIView):
    serializer_class = ItemSerializer
    queryset = Item.objects.all()

class ItemDetailView(generics.RetrieveAPIView):
    serializer_class = ItemSerializer
    queryset = Item.objects.all()

practice/urls.py

from django.urls import path

from .views import ItemListView,ItemDetailView

urlpatterns = [
    path('items/',ItemListView.as_view()),
    path('items/<int:pk>/',ItemDetailView.as_view()),
]

Fügen Sie abschließend Folgendes hinzu, damit der Administrator mit den Daten umgehen kann.

admin.py

from django.contrib import admin

from .models import Item

# Register your models here.
admin.site.register(Item)

In Bezug darauf, warum "ItemListView" und "ItemDetailView" getrennt werden, ist es einfacher zu verwenden, wenn sie bei der Implementierung von Berechtigungen getrennt werden, und sie müssen später getrennt werden.

Damit sind die grundlegenden Backend-Einstellungen abgeschlossen.

$ python manage.py makemigrations

$ python manage.py migrate

$ python manage.py createsuperuser
Nutzername(leave blank to use 'kuehar'): kueharx
Mail Adresse: 
Password: 
Password (again): 
Superuser created successfully.

$ python manage.py runserver

Bei laufendem lokalen Server http://localhost:8000/admin Lassen Sie uns auf solche Daten zugreifen und sie hinzufügen.

Nachdem http://localhost:8000/api/items Wenn Sie darauf zugreifen, sollte ein Bildschirm wie der folgende angezeigt werden.

Zu diesem Zeitpunkt ist der Aufbau des Backends für GET vom Frontend aus abgeschlossen.

Fahren wir nun mit dem Aufbau des Frontends fort.

Vorderes Ende

Zuerst erstellen wir ein Projekt. Diesmal habe ich es mit den folgenden Einstellungen gemacht.

$ npx create-nuxt-app client

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in client
? Project name client
? Project description nuxt-django-auth sample app
? Author name kueharx
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework Express
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

$ cd client

Tu es

$ npm run dev

Dann

Ich fühle mich so.

Ich werde Einstellungen hinzufügen. Zuerst,

$ npm install -s @nuxtjs/axios

Fügen Sie anschließend der Einstellungsdatei die folgende Beschreibung hinzu.

JavaScript:nuxt.config.js

....

modules: [
    '@nuxtjs/axios',
  ],

axios: {
    baseURL: 'http://localhost:8000/api/',
  },

Hinzufügen. Dies ist ein Element, das angibt, mit welchem lokalen Server bei Verwendung von Axios eine Verbindung hergestellt werden soll. Wenn Sie dies nicht hinzufügen, können Sie die zuvor erstellte API nicht aufrufen.

Nun, inspirieren sieht auf den ersten Blick so aus,

Fügen wir etwas Code hinzu.

Dieses Mal werde ich eine Karte erstellen, auf der die Produktskizze und der Link angezeigt werden.

Lassen Sie uns zuerst diese Karte machen.

ItemCard.vue

<template>
  <div class="card item-card">
    <img :src="item.image" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">
        {{ item.name }}
      </h5>
      <p class="card-text">
        <strong>Kategorie</strong> {{ item.category }}
      </p>
      <p class="card-text">
        <strong>Preis:</strong> {{ item.price }}
      </p>
      <div class="action-buttons">
        <nuxt-link :to="`/items/${item.id}/`" class="btn btn-sm btn-primary">
Einzelheiten
        </nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['item', 'onDelete']
}
</script>
<style>
.item-card {
    box-shadow: 0 1rem 1.5rem rgba(0,0,0,.6);
}
img.card-img-top{
    height:200px;
}
.action-buttons {
  text-align: right;
}
</style>

Das Kartenlayout ist jetzt abgeschlossen.

Lassen Sie uns diese Karte mit Inspiration lesen.

inspire.vue

<template>
  <v-layout>
    <v-flex class="text-center">
      <img
        src="/v.png "
        alt="Vuetify.js"
        class="mb-5"
      >
      <blockquote class="blockquote">
        &#8220;First, solve the problem. Then, write the code.&#8221;
        <footer>
          <small>
            <em>&mdash;John Johnson</em>
          </small>
        <div class="row">
        <div class="col-12 text-right mb-4">
        <div class="d-flex justify-content-between">
          <h3>Produktliste</h3>
          <!-- <nuxt-link to="/items/add" class="btn btn-info">
Fügen Sie ein Produkt hinzu
          </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>
        </footer>
      </blockquote>
    </v-flex>
  </v-layout>
</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: []
    }
  },
  methods: {
    async deleteitem (item_id) { //eslint-disable-line
      try {
        await this.$axios.$delete(`/items/${item_id}/`) //eslint-disable-line
        const newitems = await this.$axios.$get('/items/')
        this.items = newitems
      } catch (e) {
        console.log(e)
      }
    }
  },
  head () {
    return {
      title: 'Produktliste'
    }
  }
}
</script>

Anwenden dieser ...

Wie oben erwähnt, konnte ich die Liste richtig abrufen.

~~ Dieses Mal erstellen wir beim nächsten Mal eine Produktdetailseite. ~~

Ich habe geschrieben! CRUD GET mit Nuxt & Django REST Framework ②