[PYTHON] Envoyer des données à l'API DRF avec Vue.js

Je souhaite envoyer des données par POST à l'API créée dans l'article suivant et l'enregistrer dans la base de données. Je veux accéder à l'API créée par DRF à partir de Vue.js de Jsfiddle

environnement

book/models.py

from django.db import models
import uuid
from django.utils import timezone

# Create your models here.
class Book(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    title = models.CharField(verbose_name='Titre', max_length=50)
    price = models.IntegerField(verbose_name='prix')
    created_at = models.DateTimeField(default=timezone.now)

    def __str__(self):
        return self.title

De plus, Vue.js est répertorié sur jsfiddle.

Données que vous souhaitez enregistrer

Je souhaite enregistrer le champ de titre et le champ de prix en tant que nouvelles données dans la table Livre. id et created_at sont ajoutés automatiquement, vous pouvez donc continuer.

Ecrire Vue.js

html

<div id="app">
  <div>
    <h1>GET</h1>
    <p>Titre: {{ results[1].title }}</p><hr>
  </div>
  
  <div>
    <h1>POST</h1>
    <h2>Titre: {{ title }}</h2>
    <h2>¥{{ price }}</h2>
    <input v-model='title'>
    <input v-model='price'>
    <button v-on:click='postBook'>Envoyer</button>
  </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

javascript

new Vue({
  el: '#app',
  data: {
    results: [],
    title: '',
    price: '',
  },
  methods:{
  	postBook: function(){
    	console.log('Hello')
      axios.post('http://127.0.0.1:8000/apiv1/book/', 
      { title : this.title , price : this.price })
    }
  },
  mounted() {
    axios.get('http://127.0.0.1:8000/apiv1/book/')
    .then(response => {this.results = response.data})
 },
})

Utilisez la directive v-model dans la balise ʻinput pour définir le titreet leprix`. Définissez un objet de données avec le même nom dans l'instance Vue et laissez le contenu vide.

Enregistrez postBook dans les méthodes. Utilisez la directive v-on pour la balise bouton pour l'enregistrer.

Dans la méthode postBook, ʻaxios.post ('endpoint of list screen', {field name: data, field name: data})` est défini, et le champ et les données correspondant sont POSTés.

Jusque là:

Envoyer

Lorsque vous appuyez sur envoyer ...

Il a été ajouté.

Ajouter une virgule au nombre

Si vous souhaitez ajouter une virgule lors de l'affichage du prix, créez un filtre dans l'instance Vue et appliquez le filtre à la moustache du modèle que vous souhaitez appliquer avec pipe = |.

instance de vue

  filters: {
    comma(value) {
      if (!value) return ''
      value = value.toString()
      return value.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
 }
 }

html

<h2>¥{{ price | comma }}</h2>