Heim > Artikel > Backend-Entwicklung > Erstellen einer einfachen Blog-App mit FastAPI, HTML, CSS und JSON

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

WBOYOriginal: 2024-09-10 06:47:391163Durchsuche

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

Projektstruktur

So wird das Projekt aufgebaut sein:

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

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)

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>

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>

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

Schritt 4: Ausführen der Anwendung

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!

Python json css html fastapi pip Static for using delete this display database web app http ux ui everything

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für einen technischen Test von Computer Vision – Python / C++Nächster Artikel：Beispiel für einen technischen Test von Computer Vision – Python / C++

In Verbindung stehende Artikel

Mehr sehen