Python 3 – Flask静的ファイル(例)-Pythonチュートリアル

Webアプリケーションでは、多くの場合、Web表示をサポートするJavaScriptファイルやCSSファイルなどの静的ファイルが必要です。

通常、Webサーバーを構成すると、これが提供されます。 ただし、開発中のFlask開発中、PythonはすべてのWebリクエストを解析します。

これを解決するために、これらのファイルは静的フォルダーに配置され、アプリケーションの /static

関連コース: Python Flask:Flaskを使用してWebアプリを作成する

静的ファイル

静的ファイルを配置する場所

特別なエンドポイントのURL static 静的ファイルを生成するために使用されます。 プログラムディレクトリに、staticという名前の新しいディレクトリを作成します。

このディレクトリには、画像、javascriptファイル、cssファイル、およびPythonバックエンドを必要としない他の多くのファイルを配置できます。

次の例では、hello.jsで定義されたjavascript関数が、Flaskアプリケーションの「/」URLにレンダリングされるindex.htmlのHTMLボタンのOnClickイベントで呼び出されます。

1
2
3
4
5
6
7
8
9
from flask import Flask, render_template
app = Flask(__name__)

@app.route("https://pythonbasics.org/")
def index():
return render_template("index.html")

if __name__ == '__main__':
app.run(debug = True)

次にindex.html

1
2
3
4
5
6
7
8
9
10
11
12
<html>

<head>
<script type = "text/javascript"
src = "{{ url_for('static', filename="hello.js") }}" ></script>
</head>

<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>

</html>

javascriptファイルhello.jsを追加します

1
2
3
function sayHello() {
alert("Hello World")
}

関連コース: Python Flask:Flaskを使用してWebアプリを作成する

Hope this helps!

Source link