Flaskのモジュールから色々なクラスや関数をインポートできるように「__init__.py」を利用して商品リストを作成します。
|
1 2 3 4 5 6 7 |
web └── __init__.py (1)・・・ 新規作成 └── templates | └── base.html | └── index.html (2)・・・ 新規作成 └── static └── style.css (3)・・・ 追加 |
(1) __init__.py
「__init__.py」について、以下の役割をします。
・モジュールをimportや関数の初期処理
・Pythonディレクトリを表す
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
from flask import Flask, render_template def create_app(): app = Flask(__name__) @app.route('/list') def apptest(): return render_template('index.html', items=get_testdata()) def get_testdata(): return [ {'id':1, 'item_name':'キャベツ', 'price':200}, {'id':2, 'item_name':'にんじん', 'price':100}, {'id':3, 'item_name':'牛乳', 'price':178}, {'id':4, 'item_name':'もやし', 'price':50}, ] return app |
10～16行目に商品リスト情報を設定します。（※今後、SQLiteから読み込む予定）
(2)index.html
(1)で読み込んだ商品リストを表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{% extends 'base.html' %} {% block title %}Search{% endblock %} {% block content %} <table> <tr class='keyname'> <th>商品名</th> <th>価格</th> </tr> {% for item in items %} <tr> <td>{{item['item_name']}}</td> <td>{{item['price']}}</td> {% endfor %} </table> {% endblock %} |
(3)style.css （追記）
商品リスト分を追記
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
table{ background:lavender; margin-left:20px; padding:10px; } td,th{ text-align: left; padding-right:10px; } .keyname{ color:navy; } .list{ padding-bottom:10px; } |
・以下のコマンドをAnaconda Promptで実行します。
|
1 2 3 |
set FLASK_APP=web set FLASK_ENV=development flask run |
「FLASK_APP」は「__init__.py」があるディレクトリ名、「FLASK_ENV」は開発環境、を設定します。
・実行結果
以上です。