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:391167semak 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 :
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!