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表单处理

回答

相关问题