☆☆ 新着記事 ☆☆

2018年10月13日土曜日

Flask / Jinja2 で templates(html)に値を渡す


1. 基本のFlaskファイル

ファイル名: test.py
(local テスト用)

# coding: utf-8  //<-これPython3なら不要
from flask import Flask
app = Flask(__name__)

@app.route('/')     //ルートディレクトリ
@app.route('/home') //directory指定
def home():
    return "<h1>Home Page</h1>"

@app.route('/about') //directory指定
def about():
    return "<h1>About Page</h1>"

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


 
(本番環境 用)
 
# coding: utf-8
from flask import Flask
app = Flask(__name__)

 
@app.route('/')
 
@app.route('/home')
def home():
    return "<h1>Home Page</h1>"


@app.route('/about')
def about():
    return "<h1>About Page</h1>"

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

*route directoryとしてないにもdef を書かないと、最初のdefが表示される。

<html>を記述する場合、
return """
    <h1>Home Page</h1>
    <p>name: <input type="text"></p>
    """
などと、書いていけるが、そういうことはしない。


1.  templateを使う ('Jinja2' がテンプレートを扱うモジュール)

1) 'templates' folderを、同じディレクトリ内に作成

(この段階でのDirectory構成)
  --/directory
    |    test01.py
    |- /templates
          | sample01.html
          | sample02.html

2) . pyファイルの編集

from flask import Flask, render_template // functionの呼び出し
app = Flask(__name__)
 
@app.route('/')
 
@app.route('/home') #directoryを指定している。
def home():
  return render_template("sample01.html")


@app.route('/about') #directoryを指定している。
def about():
    return render_template("sample02.html")

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


**以上でhtmlファイルの参照。

3). htmlファイルの作成・設置

templates directory内に以下のファイル。

ファイル名; sample01.html
<html>
 <head>
  <meta charset="utf-8">
 <title>Home Page</title>
 </head>
 </body>
 <p>Sample01 Page: Home Page</p>
 </body>
 </html>

**以上で htmlファイルの読み込みが可能です**


2. htmlにデータを渡す。

◆Simpleな値を渡す。

1)Py.ファイル:test01.py

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
@app.route('/home')

def home():
  message = 'Good Morning!'
  return render_template("sample01.html", message=message)

@app.route('/about')
def about():
  return render_template("sample02.html")

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


2)htmlファイル:sample01.html

<html>
 <head>
  <meta charset="utf-8">
 <title>Home Page</title>
 </head>
 </body>

 {% if message %}

 
   <p>{{ message }}</p>







 {% endif %}
   
 </body>
 </html>

*コマンド・ラインから、最初にflask runを実行する時に、エラーが出ました。
 html内に, {% endif %}を書き忘れていた為。 最初に、ここまで見てるんですね。

* 「( !! これで動く !! )ロリポップ・サーバーでPython Flaskを動かしてみる 」の手順で
  ロリッポップ・サーバー上で動くことも再確認。
  (.htaccess, index.cgiファイルは当然、必要)

◆辞書型の値を渡す。


pyファイルにデータを読み込んだと仮定。

ファイル名: test.py
from flask import Flask, render_template
app = Flask(__name__)
post_data =[
  {
    'Artist':'Justin Bieber',
    'Birthday':'March 1, 1994',
    'Title': 'Sorry',
    'Year_Released':'2016'
    },

  {
    'Artist':'Taylor Swift',
    'Birthday':'December 13, 1989',
    'Title': 'We Are Never Ever Getting Back Together',
    'Year_Released':'2012'
    }
  ]


@app.route('/')
@app.route('/home')
def home():

    return render_template("sample01.html", posts=post_data) # posts はhtmlにpassされる。
@app.route('/about')
def about():
  return render_template("sample02.html")
if __name__ == '__main__':
    app.run(debug=True)

ファイル名: sample01.html

<html>
 <head>
  <meta charset="utf-8">
 <title>Home Page</title>
 </head>
 </body>

   {% for post in posts %}  # For loop starts

  <h1>{{ post.Artist }} </h1>   #変数を渡すときは、two curly bracesで囲む。
  <p>Born in  {{ post.Birthday }}</p>
  <p> Title is {{post.Title}} released in {{ post.Year_Released  }}

    {% endfor %}  # For loop ends
   
 </body>
 </html>
(補足)
test.py で、dictionaryを
 test={'author' : 'Tom'} とし、return render_template("sample01.html",test=test)とした場合、
htmlサイドは 、for文を廻さなければ、{{test.author}}で、表示できる。

(Output) localhostでのアウトプット
 
上記の記述そのままで、Shared Hosting(ロリポップサーバー)でも、正しく挙動することを確認。

  * 「( !! これで動く !! )ロリポップ・サーバーでPython Flaskを動かしてみる 」の手順で
  ロリッポップ・サーバー上で動くことも再確認。
  (.htaccess, index.cgiファイルは当然、必要)
 
 
 
◆ちょっと複雑だけど、基本は同じ。(渡し方に工夫)
 
 
ファイル名: sample01.html
 
 from flask import Flask, render_template
app = Flask(__name__)
 
@app.route('/')
def index():
    s="absc"
    lis=["a1","a2","a3","a4"]
    dic = {"name":"Alicia Florrick","education":"Georgetown University Law Center "}
    bl = True
    return render_template("index.html", s=s, lis=lis, dic=dic, bl=bl)

if __name__ == '__main__':
    app.run(debug=True)
ファイル名: sample01.html

<!DOCTYPE html>
<html>
<head></head>
<body>

<!--Simple Value -->
 <p>{{ s }}</p>
<hr>

<!--List Type -->
 <ul>
  {% for x in lis %}
  <li>{{x}}</li>
  {% endfor %}
 </ul>
 <hr>

<!--Dic Type -->
 <p>{{"name:%s   Education:%s" % (dic["name"],dic["education"]) }} </p>
 <hr>

<!--If/else -->
 {% if bl %}
  <p>true</p>
 {% else %}
  <p>False</p>
 {% endif %}


<p>All come with easy!!</p>
</body></html>
 
 
 
 (Result)


0 件のコメント:

コメントを投稿