Dans ce tutoriel, nous allons créer une application de blog de base en utilisant FastAPI pour le backend, HTML et CSS pour le frontend, et un Fichier JSON pour effectuer des opérations CRUD de base (Créer, Lire, Mettre à jour, Supprimer).
FastAPI est un framework Web moderne permettant de créer des API avec Python, connu pour sa simplicité, sa rapidité et sa prise en charge intégrée des opérations asynchrones.
La mise en œuvre ci-dessous ressemblerait à ceci :
Prérequis
Avant de commencer, assurez-vous d'avoir installé les éléments suivants :
- Python 3.7+
- API rapide
- Uvicorn (pour exécuter des applications FastAPI)
Pour installer FastAPI et Uvicorn, vous pouvez utiliser pip :
pip install fastapi uvicorn python-multipart
Copier après la connexion
Structure du projet
Voici comment le projet sera structuré :
/blog_app
├── static
│ └── style.css
├── templates
│ ├── index.html
│ ├── post.html
│ ├── create_post.html
├── blog.json
├── main.py
Copier après la connexion
Étape 1 : Configuration de FastAPI
Créez un fichier main.py qui contiendra l'application FastAPI.
from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse, RedirectResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
import json
import os
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
# Load or initialize blog data
BLOG_FILE = "blog.json"
if not os.path.exists(BLOG_FILE):
with open(BLOG_FILE, "w") as f:
json.dump([], f)
def read_blog_data():
with open(BLOG_FILE, "r") as f:
return json.load(f)
def write_blog_data(data):
with open(BLOG_FILE, "w") as f:
json.dump(data, f)
@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
blogs = read_blog_data()
return templates.TemplateResponse("index.html", {"request": request, "blogs": blogs})
@app.get("/post/{post_id}", response_class=HTMLResponse)
async def read_post(request: Request, post_id: int):
blogs = read_blog_data()
post = blogs[post_id] if 0 <= post_id < len(blogs) else None
return templates.TemplateResponse("post.html", {"request": request, "post": post})
@app.get("/create_post", response_class=HTMLResponse)
async def create_post_form(request: Request):
return templates.TemplateResponse("create_post.html", {"request": request})
@app.post("/create_post")
async def create_post(title: str = Form(...), content: str = Form(...)):
blogs = read_blog_data()
blogs.append({"title": title, "content": content})
write_blog_data(blogs)
return RedirectResponse("/", status_code=303)
@app.post("/delete_post/{post_id}")
async def delete_post(post_id: int):
blogs = read_blog_data()
if 0 <= post_id < len(blogs):
blogs.pop(post_id)
write_blog_data(blogs)
return RedirectResponse("/", status_code=303)
Copier après la connexion
Étape 2 : Configuration du HTML et du CSS
Dans le dossier des modèles, créez les fichiers HTML suivants :
index.html
Ce fichier listera tous les articles du blog.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog App</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>Blog Posts</h1>
<a href="/create_post">Create New Post</a>
<div>
{% for post in blogs %}
<div class="post">
<h2>{{ post.title }}</h2>
<p>{{ post.content[:100] }}...</p>
<a href="/post/{{ loop.index0 }}">Read more</a>
<form method="post" action="/delete_post/{{ loop.index0 }}">
<button type="submit">Delete</button>
</form>
</div>
{% endfor %}
</div>
</body>
</html>
Copier après la connexion
post.html
Ce fichier affichera le contenu complet d'un article de blog.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ post.title }}</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
<a href="/">Back to Home</a>
</body>
</html>
Copier après la connexion
create_post.html
Ce fichier contiendra le formulaire de création d'un nouveau message.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a New Post</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>Create a New Post</h1>
<form method="post" action="/create_post">
<label for="title">Title</label>
<input type="text" name="title" id="title" required>
<label for="content">Content</label>
<textarea name="content" id="content" required></textarea>
<button type="submit">Create</button>
</form>
<a href="/">Back to Home</a>
</body>
</html>
Copier après la connexion
Étape 3 : Styliser avec CSS
Dans le dossier statique, créez un fichier style.css pour ajouter un style de base.
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
a {
text-decoration: none;
color: #0066cc;
}
.post {
background-color: #fff;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
button {
background-color: #ff4d4d;
border: none;
padding: 5px 10px;
color: white;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #ff1a1a;
}
input, textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
Copier après la connexion
Étape 4 : Exécuter l'application
Maintenant que tout est configuré, exécutez l'application FastAPI à l'aide d'Uvicorn.
uvicorn main:app --reload
Copier après la connexion
Visitez http://127.0.0.1:8000 dans votre navigateur et vous devriez voir la page d'accueil du blog.
En guise de mission, vous pouvez utiliser une base de données ?️ au lieu de simplement JSON pour créer une application Web full-stack.
Avec une base de données, vous pouvez ajouter plus de fonctionnalités ?, améliorer les performances ? et améliorer l'interface utilisateur/UX globale ? pour une expérience utilisateur plus riche.
C'est tout pour ce blog ! Restez à l'écoute pour plus de mises à jour et continuez à créer des applications incroyables ! ?✨
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
