简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
FastAPI: Bagaimana untuk membuat CSS/JS/Images serentak dalam fail HTML?
P粉237125700
P粉237125700 2023-12-11 17:58:49
0
1
553

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


P粉237125700
P粉237125700

membalas semua(1)
P粉029057928
P粉0290579282023-12-12 16:29:07 Tingkat 1

Pertama, apabila menggunakan StaticFiles 时html 标志设置为 True untuk 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('/', ...):

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

atau, jika StaticFiles 实例安装到 /static，例如 app.mount('/static', ...) (lihat juga jawapan ini): 

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

Dalam kes anda, kerana anda telah menggunakan StaticFiles 实例安装到 /，因此静态文件仍以 static 前缀加载的原因，例如 http://127.0.0.1:8000/static/someScript.js 只是因为您添加了 URL untuk semua relatif URL dalam dokumen HTML anda. Oleh itu, anda harus mengalih keluar baris berikut daripada fail HTML anda: 

<base href="static/">
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！