[PYTHON] CRUD POST 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, dans cet article, j'ai frappé l'API créée par DRF à partir de Nuxt et POST le contenu entré dans le formulaire dans 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 GET avec Nuxt & Django REST Framework ②
Mettre à jour l'emplacement
Back end
POST n'est pas possible car la vue et l'url requises pour DRF jusqu'à la date précédente n'ont pas été écrites.
La raison en est de n'autoriser que GET, le processus de réception d'informations. La raison en est que lorsqu'on considère une application qui peut être utilisée pratiquement, il est plus facile de gérer et de définir les autorisations si elle est divisée. Par exemple, avec les applications Web récentes, vous pouvez obtenir des informations sans vous inscrire en tant que membre, mais dans la plupart des cas, vous ne pouvez pas effectuer de POST sans vous inscrire en tant que membre, ou vous avez séparé cette autorité. Cependant, comme il y a des gens effrayants dans le monde, il est important de les empêcher d'être maltraités.
Donc cette fois, je vais commencer par ajouter à la vue et à l'url.
views.py
......
#ajouter à
class ItemCreateView(generics.CreateAPIView):
serializer_class = ItemSerializer
queryset = Item.objects.all()
urls.py
......
#ajouter à
path('items/add',ItemCreateView.as_view()),
Eh bien, en faisant ça
http://localhost:8000/api/items/add
Lorsque vous y accédez, vous pouvez maintenant POSTER comme suit.
C'est le seul ajout du côté DRF! C'est merveilleux.
Passons au front-end.
l'extrémité avant
Ici, vous devez créer un formulaire et ajouter une page pour POST.
J'ai donc rédigé un formulaire simple. Aussi, concernant la logique, je l'ai écrit selon la grammaire de base d'axios.
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="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>
Ajouter un produit
</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: 'Ajout de produit',
}
},
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>
Un formulaire comme celui-ci sortira. Et si vous remplissez ces champs et envoyez ...
Il a été ajouté avec succès.
Je pensais que je l'écrivais, mais si je l'apprends et l'écris, cela fonctionnera, donc je pense personnellement qu'il est important de lire fermement le document sur axios.
Je recommande personnellement [axios] Installation et utilisation facile d'axios c'est ici.
Cet article est très facile à comprendre et mérite d'être lu.
~~ Je pense que le développement peut être fait très facilement si CRUD et les manuels d'inscription des membres sont créés, donc la prochaine fois, j'écrirai sur la façon de corriger les informations et de les supprimer, c'est-à-dire PUT et DELETE. ~~
j'ai écrit CRUD PUT, DELETE avec Nuxt & Django REST Framework
Recommended Posts