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 :
Avant de commencer, assurez-vous d'avoir installé les éléments suivants :
Pour installer FastAPI et Uvicorn, vous pouvez utiliser pip :
pip install fastapi uvicorn python-multipart
Voici comment le projet sera structuré :
/blog_app
├── static
│ └── style.css
├── templates
│ ├── index.html
│ ├── post.html
│ ├── create_post.html
├── blog.json
├── main.py
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)
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>
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>
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>
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;
}
Maintenant que tout est configuré, exécutez l'application FastAPI à l'aide d'Uvicorn.
uvicorn main:app --reload
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)
