【コピペでできるpython】Flaskを使ってボタンで画面遷移をしてみよう

f:id:yukiyukiponsu:20190507193628j:plain

こんにちは、ゆきぽんずです。

いまわっちさ東京にいるんだが、昨日3/14に東京で雪さ降ってただ。おいどんはおったまげて、ちきゅうさ、わやになるとおもうてしまったじゃ

さて茶番はここまでにして、今日はpythonのFlaskを使ってボタンで画面遷移を行いたいとおもいまーす。

「Flaskとは何か」「どうやって使うのか」については、前回の記事に書いたのでまだ読んでない人はこっちの記事から読んでください。

www.yukiyukiponsu.work

早速本題に入ります。

やりたいこと

pythonのFlaskを使ってボタンで画面遷移してみたい！

事前準備

フォルダの位置関係

見やすく整理すると

BlogFlask

|- manage_run.py

|- app

|- app.py

|- __pycache__ (こいつは実行するとできるファイルなので無視してください)

|- templates

|- index.html

|- next_index.html

前回の記事と違いは、next_indexファイルが増えたことくらいですかね。

ソースコード

manage_run.py

こいつは以前と変わっていません。

from app.app import app

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

index.html

<!doctype html>
<html lang="ja">
  <head>
  <!-- あってもなくても動くけど入れといた方がいいメタタグ -->
  <!-- 文字をutf-8に -->
    <meta charset="utf-8">
  <!-- どのデバイスで見ても見え方を一緒にする = レスポンシブデザイン -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <!-- 文字の表示を真ん中に -->
  <body class="text-center">
  <h2>いっけーい</h2>
  <!-- ボタンを押すと、/nextpageに飛ぶ -->
  <form action="/nextpage" method="get">
    <input type="submit" value='next!'>
  </form>
  </body>
</html>

next_page.html

<!doctype html>
<html lang="ja">
  <head>
  <!-- あってもなくても動くけど入れといた方がいいメタタグ -->
  <!-- 文字をutf-8に -->
    <meta charset="utf-8">
  <!-- どのデバイスで見ても見え方を一緒にする = レスポンシブデザイン -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <!-- 文字の表示を真ん中に -->
  <body class="text-center">
  <h2>もどるんだーー</h2>
  <!-- ボタンを押すと、/templatesに飛ぶ -->
  <form action="/templates" method="get">
    <input type="submit" value='back!'>
  </form>
  </body>
</html>

app.py

こいつが本当に大事なやつ

from flask import Flask,render_template

app = Flask(__name__)

#「/」へアクセスがあった場合に、"Hello World"の文字列を返す
@app.route("/")
def hello():
    return "Hello World"

#「/templates」へアクセスがあった場合に、index.htmlを返す
@app.route("/templates", methods=["GET"])
def index():
    return render_template("index.html")

#「/nextpage」へアクセスがあった場合に、next_index.htmlを返す
@app.route("/nextpage", methods=["GET"])
def nextpage():
    return render_template("next_index.html")

#app.pyをターミナルから直接呼び出した時だけ、app.run()を実行する
if __name__ == "__main__":
    app.run(debug=True)