Совместное обслуживание React и Django

Reactjs - хороший фреймворк для внешнего интерфейса, а Django REST framework (DRF) - еще один отличный фреймворк для разработки API. Интересно, как обслуживать проекты React и Django на одном сервере и в одном порту! Наконец-то я нашел решение, и сегодня я его обсудю.

В этой статье мы создадим API, используя Django REST Framework и проект React (интерфейс), который будет использовать API. Идея очень проста: React получит названия книг из бэкэнда (Django) и отобразит их.

Backend (Django) проект

Для этого проекта я использую Django 2. Сначала создайте проект Django с именем book.
Установите django-rest-framework с помощью pip install django-rest-framework и добавьте rest_framework в INSTALLED_APPS список в settings.py.
Создайте два приложения с именами api и core с помощью python manage.py startapp api и python manage.py startapp core, затем добавьте приложение имена в INSTALLED_APPS список в settings.py.

Это наш INSTALLED_APPS список в settings.py:

Отредактируйте /api/views.py и добавьте следующие коды:

Настройте URL-адрес в book/urls.py (настройку URL-адреса можно выполнить более элегантно, но я пропущу его для краткости):

Запустите сервер, используя python manage.py runserver (он будет запускать сервер с портом по умолчанию 8000).

Протестируйте наш API

Postman - отличный инструмент для тестирования API. Откройте Почтальон и перейдите по адресу «http://127.0.0.1:8000/book/»:

Наш API работает нормально! Теперь займемся разработкой интерфейса с помощью React.

Фронтенд (React) проект

Мы будем использовать create-react-app пакет для создания проекта React. Сначала установите пакет «create-response-app», используя npm install create-react-app.

Теперь создайте приложение для реагирования с именем «book-frontend» create-react-app book-frontend внутри каталога проекта (книги).

Измените текущий каталог на «book-frontend» и запустите npm start.

Он будет запускать наш интерфейсный сервер на порте по умолчанию 3000.

Перейдите к localhost: 3000 в своем любимом браузере (я использую Google Chrome):

Мы будем использовать еще два пакета во фронтенде. Давайте сначала установим их:
axios: npm install axios
react-router-dom: npm install react-router-dom

Создайте папку с именем Component внутри папки src, затем внутри папки Component создайте папку с именем Book. Внутри книги создайте файл javascript с именем index.js (это означает: /src/Component/Book/index.js).
Поместите следующий код в index.js (этот код будет извлекать данные из серверной части и отображать их во внешнем интерфейсе).

Наш index.js:

И измените App.js следующим образом:

Все функции нашего книжного приложения на миллион долларов теперь завершены!
Перейдите к localhost: 3000, чтобы увидеть результат:

ОПС! Без слова «книги» ничего не показывается, верно?

Откройте консоль вашего браузера:

Нам необходимо решить проблему CORS.
Мы можем решить эту проблему с помощью библиотеки django-cors-headers.

Мое settings.py решение проблемы CORS:

Теперь перейдите к localhost: 3000 и посмотрите желаемый результат!