職案人

求職・歴史・仏教などについて掲載するつもりだが、自分の思いつきが多いブログだよ。適当に付き合って下さい。

Flask--共通テンプレートの作成

2021年06月09日 | Python
WebフレームワークFlaskで共通テンプレートを作る

【開発環境】
OS:Win10(64ビット)
言語:Python3.8.5(64bit)
コード エディター:VSCode
Webフレームワーク:Flask

【共通テンプレート】
Flaskでは基盤になるHTMLを準備して、そのファイルを他のHTMLに継承させることができる。
クラスの継承と同じだよ。

1)基盤になるテンプレートを作る
templateフォルダの下に基盤になるテンプレートのbase.htmlファイルを作る

コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{% block head %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>

2)index.htmlを書き換える
コード
{% extends 'base.html' %}

{% block body %}
<h1>共通テンプレートだよ。</h1>
{% endblock %}
変更箇所
<head>部分に、{% block head %}{% endblock %}が増えた
<body>部分に、{% block body %}{% endblock %}が増えた

を削除した

実行してブラウザで見てみる
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

Pythonのフレームワーク・Flask---2

2021年06月09日 | Python
フレームワーク・Flaskの続編

【開発環境】
OS:Win10(64ビット)
言語:Python3.8.5(64bit)
Python の統合開発環境:IDLE
Webフレームワーク:Flask

【render_template関数を使ってHTMLを読み込む方法】
1)新規フォルダー「templates」を作る
VSCodeで以下の部分をクリックし、フォルダー名をtemplatesにする


2)新規ファイル「index.html」を作る
templatesフォルダーを選び、新しいファイルをクリックする

ファイル名をindex.htmlし、クリックする


3)index.htmlのコードを書く
「index.html」が作られると、右側にコードを書く

4)app.pyを変更
render_template 関数を使わないと、htmlを埋め込むことができない。

変更コード
from flask import Flask, render_template # 追加

app = Flask(__name__)

@app.route('/')
def index():
return render_template('index.html') # 変更

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

5)実行する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>



6)ブラウザ表示


7)index.htmlを変えて見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ようこそ!この世界に</h1>
</body>
</html>
8)実行し、URL:http://127.0.0.1:5000/を入れてみる。


以上


コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする