Erstellen einer einfachen Blog-App mit FastAPI, HTML, CSS und JSON-Python-Tutorial-php.cn

Erstellen einer einfachen Blog-App mit FastAPI, HTML, CSS und JSON

WBOY

Freigeben： 2024-09-10 06:47:39

Original

1181 Leute haben es durchsucht

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:

Building a Simple Blog App Using FastAPI, HTML, CSS, and JSON

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Folgendes installiert ist:

Python 3.7+
FastAPI
Uvicorn (zum Ausführen von FastAPI-Anwendungen)

Um FastAPI und Uvicorn zu installieren, können Sie pip:
verwenden

pip install fastapi uvicorn python-multipart

Nach dem Login kopieren

Projektstruktur

So wird das Projekt aufgebaut sein:

/blog_app
    ├── static
    │   └── style.css
    ├── templates
    │   ├── index.html
    │   ├── post.html
    │   ├── create_post.html
    ├── blog.json
    ├── main.py

Nach dem Login kopieren

Schritt 1: FastAPI einrichten

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)

Nach dem Login kopieren

Schritt 2: Einrichten von HTML und CSS

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Schritt 3: Styling mit CSS

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;
}

Nach dem Login kopieren

Schritt 4: Ausführen der Anwendung

Da nun alles eingerichtet ist, führen Sie die FastAPI-Anwendung mit Uvicorn aus.

uvicorn main:app --reload

Nach dem Login kopieren

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!