Для того чтобы связать бэкенд и фронтенд в React + FastAPI Full Stack приложении, вам понадобится использовать Python для бэкенда с FastAPI и JavaScript для фронтенда с React. В этом детальном уроке мы покажем вам, как создать и связать бэкенд и фронтенд для вашего приложения.
Шаг 1: Установка необходимых инструментов и зависимостей
Начнем с установки FastAPI для создания бэкенд части приложения. Для этого выполните следующие команды:
pip install fastapi
pip install uvicornЗатем создайте основной файл для вашего бэкенда, например main.py. В этом файле вы можете определить роуты для вашего API с помощью FastAPI.
Для установки React и создания фронтенд части приложения выполните следующие команды:
npx create-react-app frontend
cd frontendШаг 2: Создание API на бэкенде с FastAPI
В вашем файле main.py определите API для вашего приложения с помощью FastAPI. Ниже приведен пример кода для создания простого API с одним ендпоинтом:
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def read_root():
return {"Hello": "World"}Запустите ваш бэкенд сервер с помощью следующей команды:
uvicorn main:app --reloadШаг 3: Создание интерфейса React
Откройте свой текстовый редактор и отредактируйте компонент App.js в вашем фронтенд проекте. Ниже приведен пример кода для создания простого компонента, который делает GET запрос к вашему бэкенд API:
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState({});
useEffect(() => {
fetch('http://localhost:8000')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
<h1>{data.Hello}</h1>
</div>
);
}
export default App;Шаг 4: Связывание бэкенда и фронтенда
Для того чтобы связать ваш бэкенд и фронтенд, вам необходимо указать URL вашего бэкенд API в вашем фронтенд компоненте. В приведенном выше примере мы использовали http://localhost:8000 как URL для получения данных с нашего бэкенда.
Вы можете дальше расширить ваше приложение, добавив новые роуты на бэкенде и компоненты на фронтенде. Для этого обновите файлы main.py на бэкенде и компоненты React в вашем фронтенд проекте.
Шаг 5: Запуск приложения
Теперь, когда вы создали бэкенд и связали его с фронтендом, вы можете запустить свое приложение. Для этого выполните следующие команды:
# В одном окне терминала запустите ваш бэкенд сервер
uvicorn main:app --reload
# Во втором окне терминала запустите ваш фронтенд сервер
cd frontend
npm startПосле выполнения этих шагов, вы сможете увидеть ваше React + FastAPI Full Stack приложение в браузере по адресу http://localhost:3000. Ваш фронтенд будет получать данные с вашего бэкенда и отображать их на странице.
Таким образом, вы успешно связали бэкенд и фронтенд в вашем React + FastAPI Full Stack приложении. Надеемся, что этот урок был полезен для вас и помог вам освоить процесс создания и связывания бэкенда и фронтенда для вашего приложения.
💡 Попробуй онлайн-тренажёр для подготовки к техническому собеседованию: https://clck.ru/3B5gwP 💡
Забирай роадмап изучения самого востребованного фреймворка на Python – FastAPI здесь: https://t.me/ArtemShumeikoBot
какого же хрена фронтенд настолько сложнее бэка 😅все говорят вот фронтен – легкий вход. НЕТ! Делать ручки на фастапи – вот настоящий легкий вход! 🤣Спасибо за видео, очень приятная подача и получить что-то рабочее за 1 час это очень круто!
Никогда до меня не дойдет этот бред: писать css свойства через длинные цепочки классов..
Что в таком случае вы оптимизируете, какой процесс конкретно? Кол-во строчек кода? НЕТ (ведь вы просто переносите свойства css в названия классов).. Кол-во файлов? НЕТ (если учитывать различные файлы конфигов и костыли для решения конфликтов между разными библиотеками)… Какой-то бред
А мне одному не нравится что в HTTPClient указан header для конкретной реализации CMC? 🙂
Надо в CMCHTTMClient объявить init и на вход дать headers 🙂
А на какой минуте тут настройка аутентификации и регистрации?
Выбираю Select a framework: » React вариант JavaScript, а мне вот такую простынь
Error: EPERM: operation not permitted, unlink 'C:UsersAcerDesktopОбучениеTrek_CriptovenvScriptspython.exe'
at unlinkSync (node:fs:1874:11)
at _unlinkSync (node:internal/fs/rimraf:214:14)
at fixWinEPERMSync (node:internal/fs/rimraf:306:5)
at rimrafSync (node:internal/fs/rimraf:200:14)
at node:internal/fs/rimraf:253:9
at Array.forEach (<anonymous>)
at _rmdirSync (node:internal/fs/rimraf:250:7)
at fixWinEPERMSync (node:internal/fs/rimraf:304:5)
at rimrafSync (node:internal/fs/rimraf:200:14)
at node:internal/fs/rimraf:253:9 {
errno: -4048,
code: 'EPERM',
syscall: 'unlink',
path: 'C:\Users\Acer\Desktop\Обучение\Trek_Cripto\venv\Scripts\python.exe'
}
PS C:UsersAcerDesktopОбучениеTrek_Cripto>
Нашел ошибку неправильно перепечатал к себе код.В фаиле main в 21 строчке вместо currency_id: int Я написал currency_id: id.
Это мое предположение что там была ошибка!
Но после исправления код заработал!
Добрый день! Это опять Я! Не знаю Я написал в телегу, но Я думаю здесь Я быстрей получу ответ чем в телеге, хотя в телеге можно легко вставлять фото!
Виталий, спасибо за видео!!!
Обычно не оставляю комментарии, но здесь с первых минут видео, что канал заслуживает больше просмотров и подписчиков. Спасибо за контент.
Привет, Артем!
У меня следующая напасть.Плюнуло мне ошибку "Error loading ASGI app. Import string "src.main.app" must be in format "<module>:<attribute>"."Что за строка какой формат!
А у меня как всегда дало ошибку после команды uvicorn src.mian:app –reload
Простынь ошибки:
PS C:UsersAcerDesktopОбучениеbackend> uvicorn src.mian:app –reload
INFO: Will watch for changes in these directories: ['C:\Users\Acer\Desktop\Обучение\backend']
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO: Started reloader process [17964] using WatchFiles
Process SpawnProcess-1:
Traceback (most recent call last):
File "C:UsersAcer.pyenvpyenv-winversions3.12.4Libmultiprocessingprocess.py", line 314, in _bootstrap
self.run()
File "C:UsersAcer.pyenvpyenv-winversions3.12.4Libmultiprocessingprocess.py", line 108, in run
self._target(*self._args, **self._kwargs)
File "C:UsersAcerDesktopОбучениеbackendvenvLibsite-packagesuvicorn_subprocess.py", line 80, in subprocess_started
target(sockets=sockets)
File "C:UsersAcerDesktopОбучениеbackendvenvLibsite-packagesuvicornserver.py", line 65, in run
return asyncio.run(self.serve(sockets=sockets))
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:UsersAcer.pyenvpyenv-winversions3.12.4Libasynciorunners.py", line 194, in run
return runner.run(main)
^^^^^^^^^^^^^^^^
File "C:UsersAcer.pyenvpyenv-winversions3.12.4Libasynciorunners.py", line 118, in run
return self._loop.run_until_complete(task)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:UsersAcer.pyenvpyenv-winversions3.12.4Libasynciobase_events.py", line 687, in run_until_complete
return future.result()
^^^^^^^^^^^^^^^
File "C:UsersAcerDesktopОбучениеbackendvenvLibsite-packagesuvicornserver.py", line 69, in serve
await self._serve(sockets)
File "C:UsersAcerDesktopОбучениеbackendvenvLibsite-packagesuvicornserver.py", line 76, in _serve
config.load()
File "C:UsersAcerDesktopОбучениеbackendvenvLibsite-packagesuvicornconfig.py", line 434, in load
self.loaded_app = import_from_string(self.app)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:UsersAcerDesktopОбучениеbackendvenvLibsite-packagesuvicornimporter.py", line 22, in import_from_string
raise exc from None
File "C:UsersAcerDesktopОбучениеbackendvenvLibsite-packagesuvicornimporter.py", line 19, in import_from_string
module = importlib.import_module(module_str)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:UsersAcer.pyenvpyenv-winversions3.12.4Libimportlib__init__.py", line 90, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "<frozen importlib._bootstrap>", line 1387, in _gcd_import
File "<frozen importlib._bootstrap>", line 1360, in _find_and_load
File "<frozen importlib._bootstrap>", line 1310, in _find_and_load_unlocked
File "<frozen importlib._bootstrap>", line 488, in _call_with_frames_removed
File "<frozen importlib._bootstrap>", line 1387, in _gcd_import
File "<frozen importlib._bootstrap>", line 1360, in _find_and_load
File "<frozen importlib._bootstrap>", line 1324, in _find_and_load_unlocked
ModuleNotFoundError: No module named 'src'
INFO: Stopping reloader process [17964]
Я слаб в языке!
Объясните почему не использовать jinja и на фронтенде уже дополнять JS логикой.
Неоднократно слышу что сайты на React не особо любит Google который не всегда читает JS хоть и заявлял о этом .
И вообще если на бекенде Fastapi а на фронтенде должен быть удобный и быстрый что выбрать React или Vue? Не нужно перед ними делать Next.JS?
Есть один прикол, что если обновить страницу после того как мы уже написали динамичные данные, то будет ошибка, так как при первичной загрузке страницы мы не загружаем данные о валюте, поэтому нужно сделать первоначальныую загрузку данных о битке без нажатия на кнопку
Сделай пожалуйста приложение где есть несколько страниц и на каждой странице своя тематика, например: 1 – погода, трейдинг, новости, 2- списки задач, работа с документами, 3 голосовой помощник (Vosk) и управление компом (через кнопки)
Давай еще деплой, как вторая часть
54:00 у меня ошибка,currency не видит как будто, красным подсвечивается,как пофиксить?
Подскажите сайт где я могу разместить задание для бекенд разработчиков
На 17:17мин выдает ошибку 500, `ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate`. Как поправить?
а такой вопросик, вот например для установки библиотек в питоне -> все ставится в папку venv, а как обстоят дела у js, куда например ставятся файлы при установке tailwindcss, или же все зависимости в файле tailwind.config.js?