Rumah > Artikel > pembangunan bahagian belakang > Membina Apl Blog Mudah Menggunakan FastAPI, HTML, CSS dan JSON

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

WBOYasal: 2024-09-10 06:47:391161semak imbas

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

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

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)

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>

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>

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>

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

Langkah 4: Menjalankan Aplikasi

Setelah semuanya disediakan, jalankan aplikasi FastAPI menggunakan Uvicorn.

uvicorn main:app --reload

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!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：contoh ujian teknikal vison komputer - Python / c++Artikel seterusnya：contoh ujian teknikal vison komputer - Python / c++

Artikel berkaitan

Lihat lagi