Django rest框架和angular2表單處理

我有一個項目，我的Rest API是在Django rest框架中爲JSON編寫的，而我的前端是完全獨立的（這是通過yeomann創建的一個完全不同的項目，這也可能是一個Ionic應用程序） angular2應用程序，它基本上消耗該json數據。Django rest框架和angular2表單處理

在這種情況下處理表單的最簡單方法是什麼？有人可以給我示例簡單的代碼片段嗎？

我的角度應用程序將有一個表單，並提交它會擊中我的Django後端定義的URL處理該POST請求並保存特定的新模型實例（即Angular2表單添加新書和django視圖，保存新書根據用戶提供的角度2形式提供的數據）

怎麼辦？我的角度應用程序將不會有這樣的任何django標籤{% extends 'blog/base.html' %}也不我的django應用程序將有任何模板，它是一個純粹的休息API。

來源

2016-04-27 Nitish

我假設你已經在你的應用中獲得了表單組件。然後，將數據發送到API，你需要做到以下幾點：

創建具有相同的字段JS類作爲您的Django模塊。例如：

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

在表單組件創建這個類的一個實例並連接它的屬性，形成領域。例如：

export class BookFormComponent implements OnInit { 

    constructor(private _bookService: BookService) {} 

    // ... 
    book: Book = new Book(); 

}

而且我已經在這裏顯示的構造函數，表明我們正在連接到EventsService，這是負責與API通信。

在模板：綁定你輸入您的對象的屬性（見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>

創建服務的方法，其將發送一個POST請求。它可能看起來像這樣：

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是在Django的REST框架的書籍列表視圖的URL。

由於您未登錄，您可能會因API未保存數據而出現問題。如上所示添加標題是最簡單的解決方法，但我建議您查找其他授權選項。

呼叫addBook（）從在的onSubmit在組件內部服務：之後的那些步驟的角應用應當與你的Django REST API通信

onSubmit() { 
    this.addBook(this.book); 
} 

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

沒有問題。

這是我正在做的項目的簡化版本。您可以檢查代碼on github（請參閱event-form.component.ts和events.service.ts）以查看整個圖片。

來源

2016-04-27 10:55:57

Django rest框架和angular2表單處理

回答

相關問題