Django rest 框架和 angular2 表单处理答案

【问题标题】：Django rest framework and angular2 form handlingDjango rest 框架和 angular2 表单处理
【发布时间】：2016-08-21 07:04:17
【问题描述】：

我有一个项目，其中我的 Rest API 是用提供 JSON 的 django rest 框架编写的，我的前端是完全独立的（它是通过 yeomann 创建的完全不同的项目，这也可能是一个 Ionic 应用程序） angular2 应用程序，它基本上使用该 json数据。

在这种情况下，最简洁的表单处理方式是什么？谁能给我示例简单的代码 sn-ps？

我的 Angular 应用程序将有一个表单，并且在提交时它会访问我的 Django 后端中定义的 url，该 url 处理该 POST 请求并保存一个特定的新模型实例（即添加新书的 Angular2 表单和保存新的 django 视图根据用户提供的数据以angular2形式预订）

怎么做？我的 Angular 应用程序不会有任何像 {% extends 'blog/base.html' %} 这样的 django 标签也不我的 django 应用程序不会有任何模板，它是一个纯粹的休息 API。

【问题讨论】：

标签： django django-forms angular django-rest-framework

【解决方案1】：

我假设您的应用中已经有了表单组件。然后，要将数据发送到 API，您需要执行以下操作：

创建一个与 Django 中的模型具有相同字段的 JS 类。例如：
```
export class Book {
    name: string;
    description: string;
}
```

在表单组件中创建此类的一个实例，并将其属性连接到表单字段。示例：

export class BookFormComponent implements OnInit {

    constructor(private _bookService: BookService) {} 

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

}

我还在这里展示了构造函数，以表明我们正在连接到负责与 API 通信的 EventsService。

在模板中：将您的输入绑定到您的对象属性（参见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 是您的视图的 URL，其中包含 Django REST 框架中的书籍列表。

您可能会遇到 API 无法保存数据的问题，因为您没有登录。如上所示添加标头是最简单的解决方法，但我建议您寻找其他选项进行授权。

在组件内的 onSubmit 中从您的服务调用 addBook()：

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

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

在这些步骤之后，您的 Angular 应用程序应该可以毫无问题地与您的 Django REST API 通信。

这是我正在做的项目的简化版本。您可以查看代码on github（参见event-form.component.ts 和events.service.ts）查看全貌。

【讨论】：