3
3

More than 1 year has passed since last update.

jinja2でurl_forでのID別のページング

Last updated at Posted at 2021-07-22

Flaskでアプリケーションを作っている時、最初の方に地味にハマったページ遷移の件

初心者も初心者の時にblue_print()を初めて使用していた際、aタグやformのactionでurl_for()を使ってくれと言われ調べてみるも、なかなかヒットせず苦労したので記事にしてみる。

結論

url_fro()の第二引数にIDを指定してあげればOK

コード

ボタンを押せばその数字が表示されると言うなんとクソテキトーなアプリを作成

Flaskの実行用のファイル

contoller.py

from flask import Flask
from route.test_route import test_route

app = Flask(__name__,)
app.secret_key = 'hogehoge'

# ブループリントの設定
app.register_blueprint(test_route)

if __name__ == '__main__':
  app.debug = True
  app.run(host='127.0.0.1', port=5000)

ルーティング用のファイル

route/test_route.py
from flask import Blueprint
from models.test_model import TestModel

test_route = Blueprint('test_route', __name__, url_prefix='/test')
TestModel = TestModel()


@test_route.route('/')
def test():
  """初期表示"""
  return TestModel.test()

@test_route.route('/number/<id>')
def number(id):
  return TestModel.number(id)

モデル用のファイル

models/test_model.py
from flask import render_template

class TestModel():
  def test(self):
    """初期表示"""
    return render_template('test/test.html')

  def number(self, id):
    return id

HTML

test.html
<a href="{{url_for('test_route.number', id=1)}}">
  <button type="button">1</button>
</a>
<a href="{{url_for('test_route.number', id=2)}}">
  <button type="button">2</button>
</a>
<a href="{{url_for('test_route.number', id='3')}}">
  <button type="button">3</button>
</a>

初期ページ

スクリーンショット 2021-07-22 18.33.37.png

1をクリック

スクリーンショット 2021-07-22 18.34.08.png

もちろんID以外や、変数も対応可能だよ

route/test_route.py
from flask import Blueprint
from models.test_model import TestModel

test_route = Blueprint('test_route', __name__, url_prefix='/test')
TestModel = TestModel()


@test_route.route('/')
def test():
  return TestModel.test()

@test_route.route('/number/<name>')
def number(name):
  return TestModel.number(name)

models/test_model.py
from flask import render_template

class TestModel():
  def test(self):
    return render_template('test/test.html', name1="山田", name2="村上", name3="上田")

  def number(self, name):
    return name

test.html
<a href="{{url_for('test_route.number', name=name1)}}">
  <button type="button">{{name1}}</button>
</a>
<a href="{{url_for('test_route.number', name=name2)}}">
  <button type="button">{{name2}}</button>
</a>
<a href="{{url_for('test_route.number', name='name3')}}">
  <button type="button">{{name3}}</button>
</a>

スクリーンショット 2021-07-22 18.57.37.png
スクリーンショット 2021-07-22 18.57.30.png

3
3
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
3
3