Django Rest Rahmen und angular2 Form Umgang

Question

Ich habe ein Projekt, wo meine Ruhe API in django Rest Framework geschrieben dient JSON und mein Frontend ist völlig getrennt (es ist ein ganz anderes Projekt durch yeomann erstellt, könnte dies auch eine ionische app) angular2 App, die im Wesentlichen diese JSON-Daten verbraucht.

Was ist der sauberste Weg bildet in diesem Szenario der Handhabung? Kann mir jemand einfache Code-Schnipsel geben?

Meine eckige App wird ein Formular haben und beim Abschicken trifft sie eine in meinem Django - Backend definierte URL, die diese POST - Anfrage verarbeitet und eine bestimmte neue Modellinstanz speichert (zB Angular2 - Formular zum Hinzufügen eines neuen Buches und Django - Ansicht) neues Buch nach den Daten, die durch den Benutzer in angular2 Form zur Verfügung gestellt)

Wie kann es geschehen? Meine Winkel App keine django-Tags nicht wie diese {% extends 'blog/base.html' %} hat noch mein django app alle Vorlagen haben, ist es ein reines Rest-API.

Answer 1

Ich gehe davon aus, dass Sie bereits die Formularkomponente in Ihrer App bekam. Dann werden die Daten zu API senden, müssen Sie folgendes tun:

1. erstellen JS-Klasse mit gleichen Feldern wie das Modell in Django hat. Zum Beispiel:

   export class Book { 
       name: string; 
       description: string; 
   } 
   

2. Erstellen Sie eine Instanz dieser Klasse in Ihrer Form Komponente und verbinden ihre Attribute Felder zu bilden. Beispiel:

   export class BookFormComponent implements OnInit { 
   
       constructor(private _bookService: BookService) {} 
   
       // ... 
       book: Book = new Book(); 
   
   } 
   

Auch habe ich den Konstruktor hier, um zu zeigen, dass wir auf EventsService verbinden, die für die Kommunikation mit API verantwortlich ist.

3. in Vorlage: Ihre Eingaben binden, um Ihre Objektattribute (siehe Angular guide to forms):

   <form (ngSubmit)="onSubmit()" #bookForm="ngForm" id="bookForm"> 
   
       <label for="bookName">Book name:</label> 
       <input type="text" name="name" id="bookName" maxlength="140" 
         required [(ngModel)]="book.name"/> 
   
       <label for="bookDescription">Description:</label> 
       <textarea form="bookForm" name="description" id="bookDescription" rows="3" 
          required [(ngModel)]="book.description"></textarea> 
   
   </form> 
   

4. ein Verfahren, in Ihrem Dienst erstellen, die eine POST Anfrage senden. Es kann wie folgt aussehen:

   export class BookService { 
       _bookUrl = 'http://your.api.url/books-view' 
       addBook(book: Book) { 
        let headers = new Headers(); 
        headers.append('Content-Type','application/json'); 
        headers.append('X-CSRFToken', this.getCookie('csrftoken')); 
        return this.http.post(this._booksUrl, JSON.stringify(book), 
              {headers: headers}) 
         .toPromise() 
         .then(res => res.json()) 
         .catch(this.handleError); 
       } 
   } 
   

_booksUrl ist eine URL Ihrer Ansicht mit der Liste der Bücher in Django REST-Framework.

Möglicherweise haben Sie Probleme mit der API, die keine Daten speichert, weil Sie nicht angemeldet sind. Das Hinzufügen von Kopfzeilen ist die einfachste Problemumgehung, aber ich empfehle Ihnen, nach anderen Autorisierungsoptionen zu suchen.

5. Anruf AddBook() von Ihrem Service in onSubmit innerhalb der Komponente:

   onSubmit() { 
       this.addBook(this.book); 
   } 
   
   addBook(book: Book) { 
       let res = this._bookService.addBook(book) 
        .then(
         result => res = result); 
   } 
   

Nach diesen Schritten Ihre Angular App mit Ihrem Django REST-API kommunizieren sollte ohne Probleme.

Dies ist eine vereinfachte Version des Projekts ich tue.Sie können den Code on github (siehe event-form.component.ts und events.service.ts) überprüfen, um das ganze Bild zu sehen.