[PYTHON] Senden Sie Daten mit Vue.js an die DRF-API

Ich möchte Daten per POST an die im folgenden Artikel erstellte API senden und in der Datenbank registrieren. Ich möchte auf die von DRF erstellte API von Vue.js von Jsfiddle zugreifen

Umgebung

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='Titel', max_length=50)
    price = models.IntegerField(verbose_name='Preis')
    created_at = models.DateTimeField(default=timezone.now)

    def __str__(self):
        return self.title

Außerdem ist Vue.js auf jsfiddle aufgeführt.

Daten, die Sie registrieren möchten

Ich möchte das Titelfeld und das Preisfeld als neue Daten in der Buchtabelle registrieren. id und created_at werden automatisch hinzugefügt, sodass Sie durchgehen können.

Schreiben Sie Vue.js.

html

<div id="app">
  <div>
    <h1>GET</h1>
    <p>Titel: {{ results[1].title }}</p><hr>
  </div>
  
  <div>
    <h1>POST</h1>
    <h2>Titel: {{ title }}</h2>
    <h2>¥{{ price }}</h2>
    <input v-model='title'>
    <input v-model='price'>
    <button v-on:click='postBook'>Senden</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})
 },
})

Verwenden Sie die Direktive v-model mit dem Tag "input", um "title" und "price" festzulegen. Definieren Sie ein gleichnamiges Datenobjekt in der Vue-Instanz und lassen Sie den Inhalt leer.

Registrieren Sie "postBook" in Methoden. Verwenden Sie die v-on-Direktive für das "button tag", um es zu registrieren.

Bei der Methode "postBook" wird "axios.post" ("Endpunkt des Listenbildschirms", {Feldname: Daten, Feldname: Daten}) "verwendet, und das Feld und die Daten dafür werden POST.

Bisher:

Senden

Wenn Sie auf Senden klicken ...

Es wurde hinzugefügt.

Fügen Sie der Zahl ein Komma hinzu

Wenn Sie bei der Anzeige des Preises ein Komma hinzufügen möchten, erstellen Sie einen Filter in der Vue-Instanz und wenden Sie den Filter auf den Schnurrbart der Vorlage an, die Sie mit pipe = | anwenden möchten.

vue Instanz

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

html

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