如何通过单击 Jinja2 模板中的 HTML 按钮来导航 FastAPI 路由？

问题描述 投票：0回答：2

我有一个 FastAPI 应用程序，如果我手动移动它们（即通过更改浏览器地址栏中的 

/<path>
），某些路线可以正常工作。例如，这是其中之一：

@task.get('/tasks', response_model=list[Task], tags=["Tasks"])
def find_all_tasks():
    print("\n[*] Showing all Tasks\n")
    return tasksEntity(conn.local.task.find())

我的 

/root
路线加载显示按钮的 
index.html
文件。我想要做的是每当我单击按钮时将上述路由添加到 URL（例如，
http://127.0.0.1/tasks
）。

我使用 

Jinja2Templates
从 API 的不同路径渲染 HTML 中的数据，但我不知道如何从前端 HTML 按钮移动它们。

python html jinja2 fastapi starlette
2个回答
3
投票

后端

您的 

/tasks
端点（即 
find_all_tasks
函数）应返回一个新的 Jinja2 
TemplateResponse
，其 
list
为 
tasks
。例如：

@app.get('/tasks')
def find_all_tasks(request: Request):
    tasks = ['task 1', 'task 2', 'task 3']
    return templates.TemplateResponse("tasks.html", {"request": request, 'tasks': tasks})

前端

1.点击网址即可进入
tasks
页面

在 

index.html
中，您可以使用 
url_for()
函数获取端点的 URL 并允许用户单击它，例如：

<a href="{{ url_for('find_all_tasks') }}">Click me</a>

或

<form action="{{ url_for('find_all_tasks') }}">  
   <button>Click me</button>  
</form>

或

<button onclick="location.href='{{ url_for('find_all_tasks') }}';">Click me</button>

或

<input type="button" onclick="location.href='{{ url_for('find_all_tasks') }}';" value="Click me"/>

或者，您可以使用相对路径，如here和here所述，传递路由名称和任何所需的路径/查询参数。例如：

<a href="/tasks">Click me</a>

如果您的端点包含 path 和/或 query 参数，请查看 thisanswer 和 thisanswer 了解如何包含这些参数。

2.显示
tasks

在

tasks.html
模板中，您可以循环并输出大括号内的
tasks
，如这个答案和下面所示：

<!DOCTYPE html>
<html>
    <body>
        {% for task in tasks %}
            <tr>
                <td>{{ task }}</td><br>
            </tr>
        {% endfor %}
    </body>
</html>
0
投票

根据此answer，您可以使用

app.url_path_for('find_all_tasks')
来获取路线的网址。你可以将其作为参数传递给 Jinja，然后在你的模板中你想要类似的东西

<form action="{{ find_all_tasks_route }}">
    <input type="submit" value="Go to all tasks" />
</form>

（拍摄于此处）

其中 

find_all_tasks_route
是您传递给渲染器的参数。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.