第3回　Flask

Flaskとは

Pythonで開発された軽量なWebアプリケーションの土台

バックエンドとフロントエンド

バックエンド
→裏側の処理（Python）
・データを作る
・計算する
・APIとして返す

フロントエンド
→ユーザーが見る直接見る部分、UI（HTML/CSS/JS）

プログラム例

0-9で奇数と偶数でそれぞれ別のテキストが表示される
Copy!!

#python
from flask import Flask, render_template, redirect,flash, url_for
from csv import reader

app = Flask(__name__)

# ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
@app.route("/")
def index():
    return render_template("index.html", txt1="偶数です", txt2="奇数です")
# ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
if __name__ == '__main__':
    app.run()
Copy!!

#html

<h1>テスト</h1>
    <div>
        {% for i in range(10) %}
            {% if i % 2 == 0 %}
                {{ txt1 }} --- {{ i }}<br>
            {% else %}
                {{ txt2 }} --- {{ i }}<br>
            {% endif %}
        {% endfor %}
    </div>

Googleマップの座標へ飛べるやつ
Copy!!

#python

from flask import Flask, render_template, request, session,
from csv import reader

app = Flask(__name__)

# ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
@app.route('/')
def index():
    #index.htmlがレンダリングされる
    with open('./mmcsv.csv', 'r', encoding="utf-8") as csv_file:
        csv_reader = reader(csv_file)
        list_mm = list(csv_reader)

    for data in list_mm:
        data[3] = "https://www.google.com/maps?q=" + data[3].replace("(","").replace(")","").replace(" ","")

    print(list_mm)
    return render_template("index.html",mmlist=list_mm)

# ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
if __name__ == '__main__':
    app.run()
Copy!!

#html

<h1>テスト</h1>
    <div>
        {% for data in mmlist %}
            {% if data[1]=="場所" %}
                {{ data[1] }} <br>
            {% else %}
                <a href={{ data[3] }} target="_blank">{{ data[1] }}</a><br>
            {% endif%}
        {% endfor %} 
    </div>