フォルダ構成
今回のフォルダ構成は以下のようになっています。
サンプルソース
以下は、template_path
パラメータとstatic_path
パラメータを使用したサンプルです。
http://localhost:8888
のGETリクエスト時、template
フォルダの中からindex.html
を見つけて表示します。
http://localhost:8888/sousin
のPOSTリクエスト時、template
フォルダの中からresult.html
を見つけて表示します。
template_path
パラメータ
template_path
パラメータは、テンプレートファイルの場所をtornadoに教えます。 この記述をするとtemplate
というフォルダからテンプレートファイルを見つけてくれるようになります。
static_path
パラメータ
static_path
パラメータは、css,js,画像など、静的コンテンツを保持するためにディレクトリのパスをtornadoに教えます。 html側では<link rel="stylesheet" href="{{static_url("style.css")}}">
のように記述することでこれを利用できます。static_url
は、ファイルの内容に基づいてハッシュを作り、これをURLの末尾に付与します。ハッシュがあることで、以前キャッシュされたバージョンではなく、常に最新のファイルをブラウザがダウンロードして利用することを保証します。- 静的コンテンツのフォルダを移動したくなったとしても
static_path
の参照先を修正するだけですべてのstatic_url
が自動的に参照先を変更してくれる。もし、static_url
を使わなかったら、すべてのテンプレートファイルを手修正する手間が生じる。
UIモジュール
- UIモジュールは、アプリケーション全体で再利用可能なコンポーネントです。
- UIモジュールが呼び出されたときにだけ適用したいCSSやJavaScriptがある場合、
embedded_css
とembedded_javascript
を利用します。
server.py
以下はPythonコードです。
index.html
以下はブラウザに表示するHTMLページです。
cook.html
以下はモジュール用HTMLページです。
コード解説
- ブラウザで
http://localhost:8888
にアクセスします。
このとき、server.py
の以下のコードが処理され、cookListをindex.html
に渡します。 index.html
側では以下のコードが処理され、cookList
の内容を一つづつcook
に格納し、{% module CookUI(cook) %}
の部分で、UIモジュールを呼び出しています。
このコードでは、CookUI
というUIモジュールにcook
を渡しています。CookUI
というはserver.py
の以下のコードに書かれています。このコードはCookUI
というモジュールがCookModules
クラスを呼び出すことを意味しています。CookModules
クラスは、server.py
で以下のように記述しています。
このコードは、index.html
から受け取ったcook
をmodulesフォルダ配下に格納されているcook.html
に渡しています。cook.html
は以下のように記述しています。{{cook["title"]}}
の部分でtitleを表示し、{{cook["impression"]}}
の部分でimpression
を表示しています。
static_path
パラメータを設定している場合は、そこが基点パスになります。