Saya menghadapi masalah untuk memaparkan fail HTMl dalam FastAPI.
fail utama.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')
Apabila menjalankan fail di atas menggunakan uvicorn, saya dapat memaparkan fail HTML di http://127.0.0.1:8765/ tetapi fail statik seperti css, js dan imej tidak dipaparkan.
index.html: beberapa kod untuk fail HTML (dibina dengan 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>
Struktur fail:
modulename
- static
- index.html
- styles.87afad25367d1df4.css
- runtime.7f95ee6540776f88.js
- polyfills.a246e584d5c017d7.js
- main.4f51d0f81827a3db.js
- main.py
- __init__.py
Apabila saya membuka konsol penyemak imbas, ia menunjukkan seperti ini:
CSS/js hendaklah dipaparkan tanpa disertakan statik, mis. dimuatkan dalam penyemak imbas dan jalankan.
Saya tidak pasti bagaimana untuk membetulkannya, sebarang bantuan amat kami hargai.
Kemas kini: Menambah kod berikut untuk penjelasan yang lebih baik
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()
Jalankan fail ini sebagai pakej/modul dalam fail 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>
Struktur fail:
ui
- static
- index.html
- styles.87afad25367d1df4.css
- runtime.7f95ee6540776f88.js
- polyfills.a246e584d5c017d7.js
- main.4f51d0f81827a3db.js
- main.py
- __init__.py
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pertama, apabila menggunakan
StaticFiles时html标志设置为Trueuntuk menyampaikan fail statik (untuk halaman web dinamik, lihat templat sebaliknya), contohnya:from fastapi import FastAPI from fastapi.staticfiles import StaticFiles app = FastAPI() app.mount('/static', StaticFiles(directory='static', html=True), name='static')Anda tidak perlu menentukan titik akhir untuk menyampaikan halaman indeks kerana
html=True意味着在 HTML 模式下运行您的应用程序；因此，FastAPI/Starlette 会自动加载index.html— 请参阅 Starlette 文档静态文件. Selain itu, jika anda memerlukan titik akhir tambahan, sila ambil perhatian bahawa tertib anda menentukan titik akhir dalam aplikasi anda penting. . p>Kedua, kerana anda telah memasang
StaticFiles实例并指定directory='static'，因此您的静态文件预计将从该目录提供。因此，您所要做的就是将所有静态文件以及 HTML 文件移动到static目录中。然后，您应该能够按如下方式提供静态文件（假定您已将StaticFiles实例安装到/，例如app.mount('/', ...):atau, jika
StaticFiles实例安装到/static，例如app.mount('/static', ...)(lihat juga jawapan ini):Dalam kes anda, kerana anda telah menggunakan
StaticFiles实例安装到/，因此静态文件仍以static前缀加载的原因，例如http://127.0.0.1:8000/static/someScript.js只是因为您添加了