在上一篇我們講到了#如何在myeclipse中用React和Django創建一個CRUD應用程序#的前端搭建部分，本篇將繼續講解如何利用使用Django構建Books API。

一、使用Django構建Books API

我們將使用Django創建books API，創建一個新的虛擬項目：
如果尚未安裝pipenv ，則需要在終端中運行以下命令來安裝它：pip install pipenv

使用集成終端，激活pipenv shell以創建Django項目：pipenv shell

完成后，運行以下命令來安裝Django和Django REST Framework：

pipenv install django
pipenv install django-rest-framework

接下來，我們創建一個Django項目并創建一個Django應用。

django-admin startproject booksApi
cd booksApi/
django-admin startapp books

這將在books-api文件夾中創建新文件夾。更新INSTALLLED_APPS在settings.py包括書籍和Django的REST的框架。

# books-api/booksApi/booksApi/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'books',
]

我們的數據庫模型將僅包含Book模型。將以下內容添加到models.py

# books-api/booksApi/books/model.py.

from django.db import models

# Create your models here.

class Book(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    author = models.CharField(max_length=200)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return '%s by %s' % (self.title, self.author)

我們的圖書模型包含4個字段：標題，描述，作者和created_at。

• 在標題字段存儲的書的標題。
• 該描述存儲一本書的描述。
• 該作者字段存儲的書的作者。

這些字段將從我們的前端提供-我們之前構建的react應用。

• 根據創建圖書的時間，將自動插入created_at字段。

運行以下命令以創建必要的遷移和表。
在Terminal +中，確保您位于books-api / booksApi /中，然后運行：

python manage.py makemigrations
python manage.py migrate

接下來，我們將創建一個序列化器。序列化程序用于將我們的數據轉換為JSON，當我們訪問端點時將返回這些數據。

# books-api/booksApi/books/serializers.py.
from rest_framework import serializers
from .models import Book


class BookSerializer(serializers.ModelSerializer):
  class Meta:
    model = Book
    fields = ('id', 'title', 'author', 'description', 'created_at')

接下來，我們更新views.py以添加我們的API視圖。

# books-api/booksApi/books/views.py.

from .models import Book
from .serializers import BookSerializer
from rest_framework import generics

class BookList(generics.ListCreateAPIView):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

class BookDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

最后，我們需要添加端點。在books-api / booksApi / books中創建urls.py

# books-api/booksApi/books/urls.py.
from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns
from books import views

urlpatterns = [
    path('books/', views.BookList.as_view()),
    path('books//', views.BookDetail.as_view()),
]

然后將books-api / booksApi / booksApi / urls.py更新為：

# books-api/booksApi/booksApi/urls.py.
"""booksApi URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    //docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('books.urls')),
]

通過在Terminal +中運行以下代碼段來啟動Django服務器：

python manage.py runserver

可以在http：// localhost：8000 / api / books /上查看端點。在我們在React應用中使用API之前，我們需要解決一個可能會出現的問題-CORS。運行以下命令以安裝軟件包以幫助CORS：

pipenv install django-cors-headers

完成此操作后，像我們之前所做的那樣，將以下內容添加到settings.py中的INSTALLED_APPS列表中。我們還需要添加一些新的中間件。

# books-api/booksApi/booksApi/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'books',
    'corsheaders',

]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

最后，添加以下行以允許所有來源訪問API：

# books-api/booksApi/booksApi/settings.py

CORS_ORIGIN_ALLOW_ALL = True

使用集成終端運行服務器：

python manage.py runserver

二、通過React使用API

我們將使用訪存來使用books API。將以下內容添加到index.js：

class BookDashboard extends React.Component {
    state = {
        books: []
    }

    componentDidMount() {
        fetch('//localhost:8000/api/books/')
            .then(response => response.json())
            .then(data => {
                this.setState({books: data});
            });
    }
...
}

如上所示，我們刪除了books數組的初始內容，僅使用一個空數組對其進行了初始化。

使用componentDidMount鉤子，獲取書api的內容，并在第10行，更新狀態以使用獲得的數據。
當前，數據庫中沒有書，因此對http：// localhost：8000 / api / books /的每次調用都將返回一個空數組。

更新createNewBook函數以使用API進行書籍創建：

createNewBook = (book) => {
    fetch('//localhost:8000/api/books/', {
        method: 'POST',
        headers: {
                'Content-Type': 'application/json',
        },
        body: JSON.stringify(book),
    })
    .then(response => response.json())
    .then(book => {
        this.setState({books: this.state.books.concat([book])});
    });
}

createNewBook將POST請求與從表單獲取的書籍數據一起發送到書籍api。API以新創建的書作為響應，其中包含一些其他數據，例如id和created_at。
接下來，我們需要修改書籍-更新。要更新圖書，我們需要發送一個PUT請求。

updateBook = (newBook) => {
    fetch(`//localhost:8000/api/books/${newBook.id}/`, {
        method: 'PUT',
        headers: {
                'Content-Type': 'application/json',
        },
        body: JSON.stringify(newBook),
    }).then(response => response.json())
    .then(newBook => {
        const newBooks = this.state.books.map(book => {
            if(book.id === newBook.id) {
                return Object.assign({}, newBook)
            } else {
                return book;
            }
        });
        this.setState({books: newBooks});
    });

如上所示，我們正在將放置請求發送到url /。這顯示了我們要更新的書。如果更新成功，我們將更新狀態。

我們正在使用與以前相同的狀態更新機制。您可能想要發送另一個請求，以從API提取所有書籍，但這將花費更多時間。

修改的最后一種方法是delete操作，如下所示：

deleteBook = (bookId) => {
    fetch(`//localhost:8000/api/books/${bookId}/`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
        },
    })
    .then(() => {
        this.setState({books: this.state.books.filter(book => book.id !== bookId)})
    });
}

刪除操作可能是最簡單的。我們將DELETE請求發送到與更新相同的URL，delete操作不返回任何數據，因此我們可以更新狀態。

標簽：