Введение:
В этом руководстве мы рассмотрим пошаговый процесс создания полнофункционального веб-приложения с использованием FastAPI в качестве серверной среды и React в качестве внешней библиотеки. FastAPI — это современная, быстрая (высокопроизводительная) веб-инфраструктура для создания API-интерфейсов с помощью Python, а React — это популярная библиотека JavaScript для создания пользовательских интерфейсов.
Мы воспользуемся мощью простоты, производительности и возможностей автоматического создания документации FastAPI для создания надежного внутреннего API. Для хранения данных мы будем использовать MongoDB, гибкую и масштабируемую базу данных NoSQL.
Во внешнем интерфейсе мы будем использовать компонентную архитектуру React для создания динамического и интерактивного пользовательского интерфейса. Мы будем реализовывать такие функции, как регистрация пользователей, вход в систему и аутентификация, что позволит пользователям получать доступ к защищенным маршрутам.
В этом руководстве мы рассмотрим установку и настройку необходимых инструментов и зависимостей, объясним структуру кода и предоставим подробные объяснения каждого шага, связанного с созданием приложения. К концу у вас будет четкое понимание того, как разрабатывать полнофункциональное веб-приложение с использованием FastAPI и React.
Итак, давайте погрузимся в захватывающий мир полнофункциональной веб-разработки и начнем создавать наше приложение!
Бэкэнд: создание бэкенда FastAPI с MongoDB
Шаг 1: Настройка серверной среды
1. Установите Python. Убедитесь, что в вашей системе установлен Python. Вы можете скачать и установить Python с официального сайта: python.org
2. Установите FastAPI: FastAPI — это современная, быстрая (высокопроизводительная) веб-инфраструктура для создания API с помощью Python. Откройте терминал или командную строку и выполните следующую команду:
pip install fastapi
3. Установите PyMongo: PyMongo — это официальный драйвер MongoDB для Python. Это позволяет вам взаимодействовать с базой данных MongoDB. Выполните следующую команду:
pip install pymongo
4. Установите PyJWT: PyJWT — это библиотека Python для работы с веб-токенами JSON (JWT). Это помогает в создании и проверке токенов для аутентификации. Выполните следующую команду:
pip install PyJWT
Шаг 2: Создание серверного приложения
1. Создайте новый файл с именем main.py и откройте его в редакторе кода.
2. Импортируйте необходимые модули и библиотеки:
from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel from pymongo import MongoClient import jwt from jwt import encode as jwt_encode from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials from fastapi import Depends, HTTPException from bson import ObjectId
3. Инициализируйте приложение FastAPI:
app = FastAPI()
4. Настройте промежуточное ПО CORS (Cross-Origin Resource Sharing), чтобы разрешить запросы от вашего внешнего интерфейса. Замените `http://localhost:3000` фактическим источником вашего внешнего приложения:
app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:3000"], # Add your frontend origin here allow_credentials=True, allow_methods=["*"], allow_headers=["*"], )
5. Определите модель пользователя с помощью Pydantic:
class User(BaseModel): username: str = None # Make the username field optional email: str password: str
6. Подключитесь к базе данных MongoDB:
# MongoDB connection
client = MongoClient("mongodb://localhost:27017")
db = client["mydatabase"]
users_collection = db["users"]
7. Определите схему безопасности для аутентификации JWT:
# Secret key for signing the token SECRET_KEY = "your-secret-key-goes-here" security = HTTPBearer()
8. Создайте маршрут домашней страницы:
@app.get("/")
def homepage():
return {"message": "Welcome to the homepage"}
9. Реализуйте маршрут входа:
@app.post("/login")
def login(user: User):
# Check if user exists in the database
user_data = users_collection.find_one(
{"email": user.email, "password": user.password}
)
if user_data:
# Generate a token
token = generate_token(user.email)
# Convert ObjectId to string
user_data["_id"] = str(user_data["_id"])
# Store user details and token in local storage
user_data["token"] = token
return user_data
return {"
message": "Invalid email or password"}
10. Реализуйте маршрут регистрации:
@app.post("/register")
def register(user: User):
# Check if user already exists in the database
existing_user = users_collection.find_one({"email": user.email})
if existing_user:
return {"message": "User already exists"}
# Insert the new user into the database
user_dict = user.dict()
users_collection.insert_one(user_dict)
# Generate a token
token = generate_token(user.email)
# Convert ObjectId to string
user_dict["_id"] = str(user_dict["_id"])
# Store user details and token in local storage
user_dict["token"] = token
return user_dict
11. Реализуйте маршрут `/api/user` для получения пользовательских данных на основе токена JWT:
@app.get("/api/user")
def get_user(credentials: HTTPAuthorizationCredentials = Depends(security)):
# Extract the token from the Authorization header
token = credentials.credentials
# Authenticate and retrieve the user data from the database based on the token
# Here, you would implement the authentication logic and fetch user details
# based on the token from the database or any other authentication mechanism
# For demonstration purposes, assuming the user data is stored in local storage
# Note: Local storage is not accessible from server-side code
# This is just a placeholder to demonstrate the concept
user_data = {
"username": "John Doe",
"email": "[email protected]"
}
if user_data["username"] and user_data["email"]:
return user_data
raise HTTPException(status_code=401, detail="Invalid token")
12. Определите вспомогательную функцию для создания токена JWT:
def generate_token(email: str) -> str:
payload = {"email": email}
token = jwt_encode(payload, SECRET_KEY, algorithm="HS256")
return token
13. Запустите сервер FastAPI:
if __name__ == "__main__": import uvicorn uvicorn.run(app, host="0.0.0.0", port=8000)
Шаг 3: Запуск внутреннего приложения
1. Откройте терминал или командную строку и перейдите в каталог, где находится `main.py`.
2. Выполните следующую команду, чтобы запустить внутренний сервер:
uvicorn main:app - reload
Бэкенд-сервер начнет работать на http://localhost:8000.
Поздравляем! Вы создали серверную часть своего приложения, используя FastAPI и MongoDB. Теперь у вас есть маршруты для домашней страницы, входа в систему, регистрации и получения данных пользователя.
Далее перейдем к внешнему интерфейсу и создадим необходимые компоненты React.
Фронтенд: создание приложения React
Шаг 1: Настройка внешней среды
1. Установите Node.js. Убедитесь, что в вашей системе установлен Node.js. Скачать и установить его можно с официального сайта: nodejs.org
2. Установите Yarn: Yarn — это менеджер пакетов для Node.js и альтернатива npm. Откройте терминал или командную строку и выполните следующую команду для глобальной установки Yarn:
npm install -g yarn
Шаг 2: Создание внешнего интерфейса
1. Создайте новый каталог для своего внешнего приложения и перейдите к нему с помощью терминала или командной строки.
2. Инициализируйте новый проект React, выполнив следующую команду:
yarn create react-app my-app
Эта команда создает новый каталог с именем my-app с базовой структурой проекта React.
3. Перейдите в каталог проекта:
cd my-app
4. Установите дополнительные зависимости, необходимые для фронтенд-приложения:
yarn add react-router-dom axios
- `react-router-dom`: библиотека маршрутизации для React, позволяющая обрабатывать различные маршруты в вашем приложении.
-- `axios`: библиотека для выполнения HTTP-запросов из внешнего интерфейса.
Шаг 3: Реализация компонентов внешнего интерфейса
- Замените содержимое файла `src/App.js` следующим кодом:
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './components/Login';
import Register from './components/Register';
import Homepage from './components/Homepage';
import Navbar from './components/Navbar';
import './styles.css'; // Import the styles.css file
function App() {
return (
<Router>
<Navbar />
<div className="container">
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Routes>
</div>
</Router>
);
}
export default App;
Этот код устанавливает основной компонент приложения и настраивает маршруты с помощью `react-router-dom`.
2. Создайте новый каталог с именем `src/components`.
3. Создайте новый файл `src/components/Homepage.js` и добавьте следующий код:
import React, { useEffect, useState } from 'react';
function Homepage() {
const [userData, setUserData] = useState(null);
useEffect(() => {
// Fetch user data from the API endpoint
fetch('http://localhost:8000/api/user', {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`,
},
})
.then(response => response.json())
.then(data => setUserData(data))
.catch(error => console.error(error));
}, []);
const username = localStorage.getItem('username');
const email = localStorage.getItem('email');
return (
<div>
<h1>Welcome to the Homepage</h1>
{userData && (
<p>
Welcome {username}, {email} to the homepage!
</p>
)}
</div>
);
}
export default Homepage;
Этот компонент извлекает пользовательские данные из внутреннего API и отображает приветственное сообщение на главной странице.
4. Создайте новый файл `src/components/Login.js` и добавьте следующий код:
import React from 'react';
import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const navigate = useNavigate();
const handleLogin = () => {
// Send login request to the backend
axios
.post('http://localhost:8000/login', { email, password })
.then(response => {
setMessage(response.data.message);
const { username, email, token } = response.data;
localStorage.setItem('username', username);
localStorage.setItem('email', email);
localStorage.setItem('token', token);
// Redirect to homepage using navigate
navigate('/'); // Replace '/' with the homepage URL if needed
})
.catch(error =>
{
console.error(error);
setMessage('Error logging in. Please try again.');
});
};
return (
<div>
<h2>Login</h2>
<div>
<input
type="email"
placeholder="Email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
<button onClick={handleLogin}>Login</button>
{message && <p>{message}</p>}
</div>
</div>
);
}
export default Login;
Этот компонент предоставляет форму входа, которая отправляет запрос на вход в серверный API.
5. Создайте новый файл `src/components/Register.js` и добавьте следующий код:
import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
function Register() {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');
const navigate = useNavigate();
const handleRegister = () => {
// Send registration request to the backend
axios
.post('http://localhost:8000/register', { username, email, password })
.then(response => {
setMessage(response.data.message);
const { username, email, token } = response.data;
localStorage.setItem('username', username);
localStorage.setItem('email', email);
localStorage.setItem('token', token);
// Redirect to homepage using navigate
navigate('/'); // Replace '/' with the homepage URL if needed
})
.catch(error => {
console.error(error);
setMessage('Error registering. Please try again.');
});
};
return (
<div>
<h2>Register</h2>
<div>
<input
type="text"
placeholder="Username"
value={username}
onChange={e => setUsername(e.target.value)}
/>
<input
type="email"
placeholder="Email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
<button onClick={handleRegister}>Register</button>
{message && <p>{message}</p>}
</div>
</div>
);
}
export default Register;
Этот компонент предоставляет регистрационную форму, которая отправляет запрос на регистрацию в серверный API.
6. Создайте новый файл `src/components/Navbar.js` и добавьте следующий код:
import React from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
<li>
<Link to="/register">Register</Link>
</li>
</ul>
</nav>
);
}
export default Navbar;
Этот компонент предоставляет базовую панель навигации со ссылками на домашнюю страницу, страницы входа и регистрации.
Шаг 4: Запуск внешнего приложения
1. Откройте терминал или командную строку и перейдите в каталог вашего внешнего приложения (`my-app`).
2. Запустите следующее
команда для запуска сервера разработки React:
yarn start
Фронтенд-сервер начнет работать на http://localhost:3000.
3. Откройте веб-браузер и посетите http://localhost:3000, чтобы увидеть приложение в действии.
Поздравляем с завершением руководства по созданию полнофункционального веб-приложения с помощью FastAPI и React! Мы рассмотрели широкий спектр концепций и технологий, от настройки серверной части с использованием FastAPI и MongoDB до создания динамического пользовательского интерфейса с помощью React.
Заключение:
На протяжении всего руководства мы узнали, как создавать конечные точки API для регистрации пользователей, входа в систему и аутентификации с использованием FastAPI. Мы также изучили, как хранить пользовательские данные в базе данных MongoDB и реализовать аутентификацию на основе токенов с использованием веб-токенов JSON (JWT).
На стороне внешнего интерфейса мы создали приложение React с несколькими маршрутами, включая домашнюю страницу, страницы входа и регистрации. Мы использовали хуки React, такие как useState и useEffect, для управления состоянием компонентов и обработки запросов API. Мы также внедрили защищенные маршруты, для доступа к которым требуется аутентификация.
Объединив эффективные серверные возможности FastAPI с гибкими и интерактивными внешними компонентами React, мы создали полноценное веб-приложение, обеспечивающее беспрепятственный пользовательский интерфейс.
С помощью знаний, полученных из этого руководства, вы сможете еще больше усовершенствовать приложение, добавив дополнительные функции, реализовав дополнительные конечные точки API или настроив внешний интерфейс в соответствии со своими конкретными требованиями.
Не забудьте изучить официальную документацию FastAPI и React, чтобы получить более глубокие знания и быть в курсе последних функций и рекомендаций.
Создание полнофункциональных веб-приложений позволяет создавать мощные и динамичные решения, способные удовлетворить широкий спектр вариантов использования. Теперь у вас есть прочная основа для дальнейшего изучения и расширения своих навыков в веб-разработке.
Продолжайте учиться, практиковаться и изучать новые технологии, чтобы открыть бесконечные возможности в мире комплексной веб-разработки!
