如何为Starlette SPA设计导航

Question

我想制造一个重量轻的SPA。

我想传递一个路径param (nav_element)，它也对应于资源。然后，Jinja2引擎可以简单地通过{{nav_element}}访问该值。

async def dashboard(request: Request):
    """For this page you must be authenticated."""    
    await request.send_push_promise("/static/styles.css")

    try:
        nav_element = request.path_params['nav_element']
    except KeyError as ex:
        nav_element = None
    logger.info(nav_element)

    return templates.TemplateResponse('dashboard.html', {'request': request, "nav_element": nav_element})

routes = [
    Route('/', endpoint=dashboard, methods=["GET"]),
    Route('/{nav_element:str}', endpoint=dashboard, methods=["GET"]),
    Mount(path="/static", app=StaticFiles(directory="static"), name="static")
]

webapp = Starlette(routes=routes )

(有一件事我不喜欢这种方法，它需要两条路线。无论如何。)

那么，但是如何加载页面元素呢？

我可以做

• JavaScript。但是，Jinja2 2/Starlette在单击navigation?
• Are 2/Starlette元素之后只加载页面中的特定元素的最佳实践是什么呢?Jinja2 2/Starlette元素可以帮助我为SPA呈现/加载页面元素/分数/网页组件？我知道{%包括a_page.html %}。但这不是我们加载SPA的方式，对吗？！
• ，我真的不想加载整个页面。

任何设计经验都是非常欢迎的。

Answer 1

我没有样品可试，但你能试试这个吗？

async def dashboard(request: Request):
    """For this page you must be authenticated."""
    async def streamer():
        try:
            nav_element = request.path_params['nav_element']

        except KeyError as ex:
            nav_element = None
        yield templates.TemplateResponse('dashboard.html', {'request': request, "nav_element": nav_element}).body

    return StreamingResponse(streamer(), media_type="text/html")

Answer 2

我必须说，通过Javascript为Starlette加载小部件的任何其他解决方案都会变得非常复杂。有一个原因是，当您加载一个HTML并使用jinja2包含语句时，它将不会调用Starlette中与它关联的端点。因此，从不调用需要在小部件(在HTTPEndpoint中处理)中显示的数据。在某种程度上是有意义的。

因此，我发现的唯一方法是在加载页面之后发送另一个http请求。我认为这是最干净/最短的方法去小部件(它没有SEO-要求)，不试图与Starlette的概念工作。

main = document.querySelector("#main_content > .title");
fetch("/dashboard/widgets/test")
                .then(response => response.text())
                .then(data => main.insertAdjacentHTML("afterend", data));