0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VSCodeにFlaskを導入する方法ー補足ー

Last updated at Posted at 2022-02-11

以前の記事 VSCodeにFlaskを導入 では、

  • 手順3
    hogehoge.py ファイルを作り保存する。

ここでは以下のモノを試した。

hogehoge.py
from flask import Flask
app = Flask(__name__)
>
@app.route("/") #当然ここでの app は2行目の app を受けて。2行目が hoge = Flask... であれば @hoge.route(...) とする。
def hello_world():
    return"<p>Hello, World!</p>"

と minimal な構成を行っていた。
以下では、@app.route("/") 以降について補足しておく。
以前の hogehoge.py に代わり、次のモノを用意する。

hogehoge2.py
from flask import Flask,render_template
app = Flask(__name__)

@app.route("/")
def hello_world():
    return"<p>Hello, World!</p>"

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

@app.route("/hello/<hoge>")
def hello(hoge):
    return f"<h1>Hello {hoge}</h1>"
    #Python3.6以降に導入されたもの
    #f文字列という。Pythonで文字列の中に変数を組み込む場合に用いる。
    #他にもr文字列なども存在する。
    #変数は{}で囲う。

@app.route("/addition/<int:num>_<int:num2>")
def add(num,num2):
    return f"{num}+{num2}={num+num2}"
    #このように変数の型(コンバーター)を指定することも可能
    #リクエストを処理する際に文字列として受け取った値の処理が簡単に
    #string / int / float / path / uuid がある
    #コンバーターを使うことで、例外処理を自前で実装する必要がないのは便利かも

@app.route("/hello2/<hoge2>")
def hello2(hoge2):
    return render_template("hello.html",whom=hoge2)
    #変数whomはhello.htmlファイル内で用いられている変数

1行目に,render_templateを加えた。
これは@app.route("/hello2/<hoge2>")で必要となるためである。
5行目以降に同じようなものをいくつか加えていることが分かる。

  • @app.route("/about")について

flask run で実行して表示された URL を開くとこれまで通り Hello, World! と表示されている(以下同じ)
開いた URL(=BaseURLとする) の後に BaseURL/about と記述すると about 関数が実行される(以下同様)。

  • @app.route("/hello/<hoge>")について

BaseURL/*** と記述する際の *** に変数を設定することもできる。
hello 関数の中身、return f"..." とあるが、これはf文字列と呼ばれるもの。
Pythonで文字列の中に変数を組み込む場合に用いる(Python3.6以降に導入)。

  • @app.route("/addition/<int:num>_<int:num2>")について

変数の型を指定することもできる。
変数の型として string / int / float / path / uuid がある。
予め変数の型をこちらで定義しておくことで、他の型は受け付けなくなるので処理が簡単になることがある。

  • @app.route("/hello2/<hoge2>")について

Jinja2テンプレートエンジンを用いて、html ファイルを別に用意しておき、そこに変数を代入することができる。
この hogehoge2.py 内では hoge2 という変数に文字列などが入力される。
そして render_template 関数の引数を見ると、hoge2 の中身を whom という変数に代入してある。
この whom は hello.html ファイル内で用いられている変数名と一致させてある。


以下、この hello.html ファイルの配置と中身について

  • 手順1 templates フォルダの作成

Flaskでは、テンプレートをtemplatesフォルダから検索する。
Flask アプリがモジュール(単一ファイル)で構成されている場合には、
templates フォルダはモジュールと同じレベルに配置。
Flask アプリがパッケージとして構成されているのであれば、パッケージ内に配置。

  • 手順2 hello.html ファイルの作成

templates フォルダ内にhello.html ファイルを作成する。
ここでは次のようなものを作った。

hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1>Using Jinja2 Template engine</h1>
    <h2>Hello {{whom}}</h2> 
    <!-- 2重中括弧の部分がJinja2構文 -->
</body>
</html>

このとき、hogehoge2.py を実行し、 BaseURL/hello2/Taro と入力すれば、次のように表示される。
test.jpg

次回は VSCode で作る仮想環境について。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?