FastAPI : Comment rendre simultanément CSS/JS/Images dans un fichier HTML ?-Questions et réponses sur le réseau chinois PHP

J'ai du mal à restituer les fichiers HTML dans FastAPI.

fichier main.py

static_dir = os.path.join(os.path.dirname(__file__), "static")
app.mount("/",StaticFiles(directory=static_dir, html=True),name="static")

@app.get("/")
async def index():
    return FileResponse('index.html', media_type='text/html')

Lors de l'exécution du fichier ci-dessus à l'aide d'uvicorn, je peux restituer le fichier HTML sur http://127.0.0.1:8765/ mais les fichiers statiques tels que css, js et images ne sont pas rendus.

index.html : du code pour un fichier HTML (construit avec Angular JS)

<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'"><noscript>
<link rel="stylesheet" href="styles.87afad25367d1df4.css"></noscript></head>
<body class="cui">
  test
  <app-root></app-root>
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>

</body></html>

Structure du fichier :

modulename
  - static
       - index.html
       - styles.87afad25367d1df4.css
       - runtime.7f95ee6540776f88.js
       - polyfills.a246e584d5c017d7.js
       - main.4f51d0f81827a3db.js
       
  - main.py 
  - __init__.py

Lorsque j'ouvre la console du navigateur, cela s'affiche comme ceci :

CSS/js doit être rendu sans statique inclus, par exemple http://127.0.0.1:8765/styles.87afad25367d1df4.css mais le rendu est à partir de http://127.0.0.1:8765/static/styles.87afad25367d1df4 .css est chargé dans le navigateur et exécuté.

Je ne sais pas comment résoudre ce problème, toute aide serait grandement appréciée.

Mise à jour : ajout du code suivant pour une meilleure explication

main.py

import uvicorn
import os
import webbrowser
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import HTMLResponse

app = FastAPI(
    title="UI",
    description="This is to test",
)

app.add_middleware(
    CORSMiddleware,
    allow_origins=['*'],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

static_dir = os.path.join(os.path.dirname(__file__), "static")
app.mount("/",StaticFiles(directory=static_dir, html=True),name="static")

def start_server():
    # print('Starting Server...')       

    uvicorn.run(
        "ui.main:app",
        host="0.0.0.0",
        port=8765,
        log_level="debug",
        reload=True,
    )
    # webbrowser.open("http://127.0.0.1:8765/")

if __name__ == "__main__":
    start_server()

Exécutez ce fichier en tant que package/module dans le fichier test.py :

from ui import main

if __name__ == "__main__":
    main.start_server()

index.html:

<!DOCTYPE html><html lang="en">
  <head>
  <meta charset="utf-8">
  <title>WingmanUi</title>
  <base href="static/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'">
</head>
<body>
  This is to test  
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>

</body>
</html>

Structure du fichier :

ui
  - static
       - index.html
       - styles.87afad25367d1df4.css
       - runtime.7f95ee6540776f88.js
       - polyfills.a246e584d5c017d7.js
       - main.4f51d0f81827a3db.js
       
  - main.py 
  - __init__.py

répondre à tous(1)

P粉0290579282023-12-12 16:29:07 1 plancher

Tout d'abord, lorsque vous utilisez StaticFiles 时html 标志设置为 True afin de servir des fichiers statiques (pour les pages Web dynamiques, voir plutôt modèles), par exemple :

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount('/static', StaticFiles(directory='static', html=True), name='static')

Vous n'avez pas besoin de définir un point de terminaison pour servir les pages d'index parce que html=True 意味着在 HTML 模式下运行您的应用程序；因此，FastAPI/Starlette 会自动加载 index.html — 请参阅 Starlette 文档 静态文件. De plus, si vous avez besoin de points de terminaison supplémentaires, veuillez noter que l'ordre dans lequel vous définissez les points de terminaison dans votre application est important. . p>

Deuxièmement, puisque vous avez installé StaticFiles 实例并指定 directory='static'，因此您的静态文件预计将从该目录提供。因此，您所要做的就是将所有静态文件以及 HTML 文件移动到 static 目录中。然后，您应该能够按如下方式提供静态文件（假定您已将 StaticFiles 实例安装到 /，例如 app.mount('/', ...) :

<script src="someScript.js"></script>

ou, si StaticFiles 实例安装到 /static，例如 app.mount('/static', ...) (voir aussi cette réponse) :

<script src="static/someScript.js"></script>

Dans votre cas, puisque vous avez utilisé des URL StaticFiles 实例安装到 /，因此静态文件仍以 static 前缀加载的原因，例如 http://127.0.0.1:8000/static/someScript.js 只是因为您添加了 pour toutes les URL relatives de votre document HTML. Par conséquent, vous devez supprimer les lignes suivantes de votre fichier HTML :

<base href="static/">

Comme +0

Ajouter une réponse