Membina Apl Blog Mudah Menggunakan FastAPI, HTML, CSS dan JSON-Tutorial Python-php.cn

Membina Apl Blog Mudah Menggunakan FastAPI, HTML, CSS dan JSON

WBOY

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

asal

1181 orang telah melayarinya

Dalam tutorial ini, kami akan mencipta apl blog asas menggunakan FastAPI untuk bahagian belakang, HTML dan CSS untuk bahagian hadapan, dan JSON fail untuk melaksanakan operasi asas CRUD (Buat, Baca, Kemas Kini, Padam).
FastAPI ialah rangka kerja web moden untuk membina API dengan Python, yang terkenal dengan kesederhanaan, kelajuan dan sokongan terbina dalam untuk operasi tak segerak.

Di bawah Pelaksanaan akan kelihatan seperti ini :

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

Prasyarat

Sebelum bermula, pastikan anda telah memasang yang berikut:

Python 3.7+
FastAPI
Uvicorn (untuk menjalankan aplikasi FastAPI)

Untuk memasang FastAPI dan Uvicorn, anda boleh menggunakan pip:

pip install fastapi uvicorn python-multipart

Salin selepas log masuk

Struktur Projek

Begini cara projek itu akan distrukturkan:

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

Salin selepas log masuk

Langkah 1: Menyediakan FastAPI

Buat fail main.py yang akan mengandungi aplikasi 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)

Salin selepas log masuk

Langkah 2: Menyediakan HTML dan CSS

Dalam folder templat, buat fail HTML berikut:

index.html
Fail ini akan menyenaraikan semua catatan 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>

Salin selepas log masuk

post.html
Fail ini akan memaparkan kandungan penuh catatan 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>

Salin selepas log masuk

create_post.html
Fail ini akan mengandungi borang untuk membuat siaran baharu.

<!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>

Salin selepas log masuk

Langkah 3: Menggayakan dengan CSS

Dalam folder statik, cipta fail style.css untuk menambah beberapa penggayaan asas.

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

Salin selepas log masuk

Langkah 4: Menjalankan Aplikasi

Setelah semuanya disediakan, jalankan aplikasi FastAPI menggunakan Uvicorn.

uvicorn main:app --reload

Salin selepas log masuk

Lawati http://127.0.0.1:8000 dalam penyemak imbas anda dan anda sepatutnya melihat halaman utama blog.

Sebagai tugasan, anda boleh menggunakan Pangkalan Data ?️ dan bukannya JSON sahaja untuk mencipta apl web tindanan penuh.
Dengan pangkalan data, anda boleh menambah lebih banyak ciri ?, meningkatkan prestasi ?, dan meningkatkan keseluruhan UI/UX ? untuk pengalaman pengguna yang lebih kaya.

Itu sahaja untuk blog ini! Nantikan lebih banyak kemas kini dan teruskan membina apl yang menakjubkan! ?✨

Atas ialah kandungan terperinci Membina Apl Blog Mudah Menggunakan FastAPI, HTML, CSS dan JSON. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!