# backend/main.py
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from typing import List
app = FastAPI()
# 模擬內(nèi)存數(shù)據(jù)庫 (使用 Python 列表)
tasks_db = []
# 用于生成唯一的用戶ID
task_id_counter = 1
class Task(BaseModel):
    id: int
    title: str
    status: str = "待完成"  # 默認(rèn)狀態(tài)
class TaskCreate(BaseModel):
    title: str
class TaskResponse(BaseModel):
    tasks: List[Task]
@app.get("/api/tasks", response_model=TaskResponse)
async def get_tasks():
    """獲取所有任務(wù)列表"""
    return TaskResponse(tasks=tasks_db)
@app.post("/api/tasks", response_model=Task)
async def create_task(task_create: TaskCreate):
    """創(chuàng)建新任務(wù)"""
    global task_id_counter
    new_task = Task(id=task_id_counter, title=task_create.title)
    tasks_db.append(new_task)
    task_id_counter += 1
    return new_task
if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)

fastapi
uvicorn
pydantic

import requests
API_BASE_URL = "http://localhost:8000/api"  # 后端 API 基礎(chǔ) URL
def get_task_list():
    """獲取任務(wù)列表"""
    url = f"{API_BASE_URL}/tasks"
    response = requests.get(url)
    response.raise_for_status()  # 檢查請求是否成功 (狀態(tài)碼 2xx)
    return response.json()
def create_new_task(title):
    """創(chuàng)建新任務(wù)"""
    url = f"{API_BASE_URL}/tasks"
    headers = {'Content-Type': 'application/json'}
    data = {'title': title}
    response = requests.post(url, headers=headers, json=data)
    response.raise_for_status()
    return response.json()

from dash import Output, Input, State
from .app import app  # 導(dǎo)入 Dash app 實例
from frontend import api_client  # 導(dǎo)入 API 客戶端
import dash_html_components as html
import  dash
@app.callback(
    Output("task-list-output", "children"),
    [Input("refresh-tasks-button", "n_clicks"),
     Input("add-task-button", "n_clicks")],
    [State("new-task-title", "value")]
)
def update_task_list(refresh_clicks, add_clicks, new_task_title):
    """更新任務(wù)列表顯示"""
    triggered_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if "add-task-button" in triggered_id:
        if new_task_title:
            api_client.create_new_task(new_task_title) # 調(diào)用 API 創(chuàng)建新任務(wù)
    tasks_data = api_client.get_task_list() # 調(diào)用 API 獲取任務(wù)列表
    task_items = []
    if tasks_data and tasks_data.get('tasks'): # 檢查 tasks_data 和 tasks 鍵是否存在
        for task in tasks_data['tasks']:
            task_items.append(html.Li(f"{task['title']} - 狀態(tài): {task['status']} (ID: {task['id']})"))
    else:
        task_items.append(html.Li("暫無任務(wù)"))
    return html.Ul(task_items)

import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
layout = dbc.Container([
    html.H1("迷你任務(wù)管理器"),
    dbc.Row([
        dbc.Col([
            html.Div("任務(wù)標(biāo)題:"),
            dcc.Input(id="new-task-title", type="text", placeholder="請輸入任務(wù)標(biāo)題"),
            dbc.Button("添加任務(wù)", id="add-task-button", n_clicks=0, className="mt-2"),
        ]),
    ]),
    html.Hr(className="mt-3"),
    html.H4("任務(wù)列表"),
    dbc.Button("刷新任務(wù)列表", id="refresh-tasks-button", n_clicks=0, className="mb-2"),
    html.Div(id="task-list-output"), # 用于顯示任務(wù)列表
])

dash
dash-bootstrap-components
requests

"""
簡單事例
"""
# from pydantic import BaseModel
#
# class User(BaseModel):
#     id: int
#     name: str
#     email: str
#     is_active: bool = True  # 默認(rèn)值
#
# # 示例數(shù)據(jù)
# user_data = {
#     'id': 1,
#     'name': 'Alice',
#     'email': 'alice@example.com',
# }
#
# # 使用 Pydantic 模型進(jìn)行數(shù)據(jù)驗證和解析
# user = User(**user_data)
# print(user)
"""
復(fù)雜事例的封裝
"""
from pydantic import BaseModel
from typing import List
class Address(BaseModel):
    street: str
    city: str
    zip_code: str
class User(BaseModel):
    id: int
    name: str
    address: Address  # 嵌套模型
# 創(chuàng)建嵌套數(shù)據(jù)
user_data = {
    'id': 1,
    'name': 'John',
    'address': {
        'street': '123 Main St',
        'city': 'New York',
        'zip_code': '10001',
    }
}
user = User(**user_data)
print(user)

@app.callback(
    Output("task-list-output", "children"),
    [Input("refresh-tasks-button", "n_clicks"),
     Input("add-task-button", "n_clicks")],
    [State("new-task-title", "value")]
)
def update_task_list(refresh_clicks, add_clicks, new_task_title):
    """更新任務(wù)列表顯示"""
    triggered_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if "add-task-button" in triggered_id:
        if new_task_title:
            api_client.create_new_task(new_task_title) # 調(diào)用 API 創(chuàng)建新任務(wù)
    tasks_data = api_client.get_task_list() # 調(diào)用 API 獲取任務(wù)列表
    task_items = []
    if tasks_data and tasks_data.get('tasks'): # 檢查 tasks_data 和 tasks 鍵是否存在
        for task in tasks_data['tasks']:
            task_items.append(html.Li(f"{task['title']} - 狀態(tài): {task['status']} (ID: {task['id']})"))
    else:
        task_items.append(html.Li("暫無任務(wù)"))
    return html.Ul(task_items)

html.Div(id="task-list-output") #  <---  這里定義了 id="task-list-output" 的 Div 組件

dbc.Button("刷新任務(wù)列表", id="refresh-tasks-button", ...) # <--- 這里定義了 id="refresh-tasks-button" 的按鈕