はじめに
FlaskのMTVフレームワークで構成を学ぶ。そして前回の続きで、configファイルの作成、有効化する。hこれまではリクエストに対して文字列を返していたが、実際にユーザがWebブラウザで閲覧するのはhtmlファイルである。そこで、文字列ではなく、htmlファイルを返してあげるようにしていく。
configファイルの作成
flask_blogフォルダ以下に、config.pyという名前で実際のconfigファイルを作成する。
# flask_blog/config.py
DEBUG = True
代わりに、これまでserver.pyに直接書いていたdebug=Trueを削除する。
# server.py
from flask_blog import app
if __name__ == '__main__':
app.run()
configファイルの有効化
flask_blogフォルダ以下にあるconfig.pyの内容をconfigとして扱うという設定。ファイル全体は以下のようになる。
# flask blog/__init__.py
from flask import Flask
app = Flask(__name__)
app.config.from_object('flask_blog.config')
import flask_blog.views
それでは、アプリケーションを立ち上げる。
コンソールでDebuggerisactive!となっているので、configファイルの内容が有効になっている。
Flaskのフレームワークについて理解するMTVフレームワーク
Flaskは、下記の３つからなるMTVフレームワークで構成されている。
- Model
- Template
- View
ユーザからのリクエストがあったとき、Flaskでは以下のように処理される。
- ユーザがあるURLに対してアクセス（リクエスト）する
アクセスされたURLを読み取り、あらかじめ定義された、URLに紐付いた処理を実行する(View)
処理の中で必要に応じて、モデルと呼ばれるオブジェクトを通してデータベースにアクセスする（Model）
処理の最後にユーザに表示するHTMLなどのテンプレートを返す（Template）
ユーザは返されたHTMLファイルを閲覧する
このように、Flaskでの処理は大きくMTVの３つに分けられることがわかる。
テンプレートを作るMTVフレームワークにおけるTemplate
これまではリクエストに対して文字列を返していたが、実際にユーザがWebブラウザで閲覧するのはhtmlファイルである。そこで、文字列ではなく、htmlファイルを返してあげるようにしていく。
htmlファイルの作成
flask_blogフォルダ以下に、templatesフォルダと、さらにその中にentriesフォルダを作成する。entriesフォルダ以下に、index.htmlファイルを作成する。
# flask_blog/templates/entries/index.html
<!doctype html>
<title>Flask Blog</title>
<a class="navbar-brand" href="/">Flask Blog</a>
<br>
投稿がありません
htmlファイルをブラウザに渡す
flask_blog/views.pyを修正する。
# flask_blog/views.py
from flask import request, redirect, url_for, render_template, flash, session
from flask_blog import app
@app.route('/')
def show_entries():
return render_template('entries/index.html')
１行目で、後ほど利用するものも含めてflask関連に必要なパッケージをimportしている。
前回より、returnで返す内容を変更しており、templatesフォルダ以下にあるentries/index.htmlを返して（レンダリング）あげるという設定である。
パスにtemplatesを指定していないが、これはflaskではtemplatesフォルダ以下に自動でhtmlファイルがあると認識してくれるためである。
flaskでは、htmlファイルはtemplatesフォルダ以下に作成するルールになっている。
実際に起動してみる。
実行結果
このように表示されればレンダリング成功である。
Bootstrapのインポート
htmlが表示されるようになったので、見た目をよくするためBootStrapと呼ばれるライブラリを利用する。
<!-- # flask_blog/templates/entries/index.html -->
<!doctype html>
<title>Flask Blog</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light"></nav>
<a class="navbar-brand" href="/">Flask Blog</a>
<div class="blog-body">
投稿がありません
</div>
</div>
bootstrap導入後
終わりに
今回は下記を学んだ。
- configファイルの作成
- configファイルの有効化
- MTVフレームワーク
- htmlファイルをブラウザに渡す
- Bootstrapのインポート
次回はログインフォームを作成、導入していく。
コメント