CRUD GET 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 personnellement en tant qu'article.

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.

Dans cet article, vous pouvez obtenir des informations détaillées sur le produit en accédant à l'API créée par DRF de Nuxt.

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.

Back end

Tout d'abord, créez un projet familier. Organisons le réglage du côté DRF.

$  mkdir nuxt-django

$ cd nuxt-django

$ django-admin startproject server

$ cd server

$ django-admin startapp practice

Commençons par changer le fichier de paramètres.

settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'practice', #ajouter à
    'rest_framework', #ajouter à
    'corsheaders', #ajouter à
]

......


#ajouter à
#Origine à autoriser
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:3000',
    )
CORS_ORIGIN_ALLOW_ALL = True

......

#Les modifications et ajouts suivants

# 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')

Ce que j'ai ajouté à ʻINSTALLED_APPS est le rest_frameworkqui est requis pour utiliser l'application et le DRF ajouté parstartapp, et les corsheaders` qui sont nécessaires pour accéder avec axios.

CORS_ORIGIN_WHITELIST doit être écrit pour définir où autoriser l'accès.

Après cela, modifiez «LANGUAGE_CODE» et «TIME_ZONE» pour prendre en charge le japonais.

Le dernier «MEDIA ...» a été ajouté pour gérer l'image après cela. Ce n'est pas nécessaire si vous n'utilisez pas le fichier image, mais il est recommandé de le décrire car il sera utilisé dans de nombreux cas.

urls.py

from django.contrib import admin
from django.urls import path,include #ajouter à
from django.conf.urls.static import static #ajouter à
from django.conf import settings #ajouter à


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, 'Boisson'),
    (2, 'arrangement de fleurs'),
)

class Item(models.Model):
    name = models.CharField(verbose_name='Nom du produit',max_length=255,null=False)
    category = models.IntegerField(verbose_name='Catégorie',choices=CATEGORY)
    image = models.FileField(verbose_name='image')
    price = models.PositiveIntegerField(verbose_name='image',null=False)
    description = models.TextField(verbose_name='Détails',blank=True,null=True)

    def __str__(self):
        return self.name

Cette fois, j'ai fait un modèle d'un produit commun. Créez ensuite un sérialiseur pour gérer cet élément.

serializers.py

from rest_framework import serializers
from .models import Item

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

Ensuite, écrivez views.py et urls.py pour acheminer ceci.

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()),
]

Enfin, ajoutez ce qui suit afin que l'administrateur puisse gérer les données.

admin.py

from django.contrib import admin

from .models import Item

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

En ce qui concerne la raison pour laquelle ʻItemListView et ʻItemDetailView sont séparés, il sera plus facile à utiliser s'ils sont séparés lors de l'implémentation des permissions, et il sera nécessaire de les séparer plus tard.

Ceci termine les paramètres de base du backend.

$ python manage.py makemigrations

$ python manage.py migrate

$ python manage.py createsuperuser
Nom d'utilisateur(leave blank to use 'kuehar'): kueharx
adresse mail: 
Password: 
Password (again): 
Superuser created successfully.

$ python manage.py runserver

Avec le serveur local en cours d'exécution http://localhost:8000/admin Accédons et ajoutons des données comme celle-ci.

Après ça http://localhost:8000/api/items Lorsque vous accédez, vous devriez voir un écran comme celui ci-dessous.

À ce stade, la construction du backend pour GET à partir du frontend est terminée.

Passons maintenant à la construction du front-end.

l'extrémité avant

Commençons par créer un projet. Cette fois, je l'ai fait avec les paramètres suivants.

$ 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

fais le

$ npm run dev

Puis

Je me sens comme cela.

Je vais ajouter des paramètres. Tout d'abord,

$ npm install -s @nuxtjs/axios

Après cela, ajoutez la description suivante au fichier de paramètres.

JavaScript:nuxt.config.js

....

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

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

Ajouter. Il s'agit d'un élément qui indique à quel serveur local se connecter lors de l'utilisation d'axios, et si vous ne l'ajoutez pas, vous ne pourrez pas accéder à l'API que vous avez créée précédemment.

Eh bien, inspirer ressemble à ça au début,

Ajoutons du code.

Cette fois, je vais créer une carte qui affiche le contour du produit et le lien.

Faisons d'abord cette carte.

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>Catégorie</strong> {{ item.category }}
      </p>
      <p class="card-text">
        <strong>prix:</strong> {{ item.price }}
      </p>
      <div class="action-buttons">
        <nuxt-link :to="`/items/${item.id}/`" class="btn btn-sm btn-primary">
Détails
        </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>

La mise en page de la carte est maintenant terminée.

Lisons cette carte avec inspiration.

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>Liste de produits</h3>
          <!-- <nuxt-link to="/items/add" class="btn btn-info">
Ajouter un produit
          </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: 'Liste de produits'
    }
  }
}
</script>

Application de ces ...

Comme mentionné ci-dessus, j'ai pu obtenir la liste correctement.

~~ Cette fois, nous créerons une page de détails sur le produit la prochaine fois. ~~

J'ai écrit! CRUD GET avec Nuxt & Django REST Framework ②