In diesem Tutorial erstellen wir eine einfache Blog-App mit FastAPI für das Backend, HTML und CSS für das Frontend und einem JSON-Datei zum Ausführen grundlegender CRUD-Vorgänge (Erstellen, Lesen, Aktualisieren, Löschen).
FastAPI ist ein modernes Web-Framework zum Erstellen von APIs mit Python, das für seine Einfachheit, Geschwindigkeit und integrierte Unterstützung für asynchrone Vorgänge bekannt ist.
Die folgende Implementierung würde so aussehen:
Bevor Sie beginnen, stellen Sie sicher, dass Folgendes installiert ist:
Um FastAPI und Uvicorn zu installieren, können Sie pip:
verwenden
pip install fastapi uvicorn python-multipart
So wird das Projekt aufgebaut sein:
/blog_app
├── static
│ └── style.css
├── templates
│ ├── index.html
│ ├── post.html
│ ├── create_post.html
├── blog.json
├── main.py
Erstellen Sie eine main.py-Datei, die die FastAPI-Anwendung enthält.
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)
Erstellen Sie im Vorlagenordner die folgenden HTML-Dateien:
index.html
In dieser Datei werden alle Blogbeiträge aufgelistet.
<!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
In dieser Datei wird der vollständige Inhalt eines Blogbeitrags angezeigt.
<!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
Diese Datei enthält das Formular zum Erstellen eines neuen Beitrags.
<!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>
Erstellen Sie im statischen Ordner eine style.css-Datei, um einige grundlegende Stile hinzuzufügen.
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;
}
Da nun alles eingerichtet ist, führen Sie die FastAPI-Anwendung mit Uvicorn aus.
uvicorn main:app --reload
Besuchen Sie http://127.0.0.1:8000 in Ihrem Browser und Sie sollten die Blog-Startseite sehen.
Als Aufgabe können Sie eine Datenbank ?️ statt nur JSON verwenden, um eine Full-Stack-Webanwendung zu erstellen.
Mit einer Datenbank können Sie weitere Funktionen hinzufügen, die Leistung verbessern und die gesamte Benutzeroberfläche/UX verbessern. für ein umfassenderes Benutzererlebnis.
Das ist alles für diesen Blog! Seien Sie gespannt auf weitere Updates und erstellen Sie weiterhin tolle Apps! ?✨
Das obige ist der detaillierte Inhalt vonErstellen einer einfachen Blog-App mit FastAPI, HTML, CSS und JSON. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
