• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

Tech Life

エンジニアの生き方を考えるメディア

  • プログラミング
    • Python入門
    • Flask入門
    • Django入門
  • 利用規約
  • プロフィール
You are here: Home / IT・プログラミング / Python / フレームワーク / Flask / Flaskのテンプレートでurl_forを用いてリンク作成、画像表示を行う。

Flaskのテンプレートでurl_forを用いてリンク作成、画像表示を行う。

2020年12月24日 by 9nmatsumoto

Contents
  1. url_forを利用して、リンクを作成して画面遷移する
  2. url_forで値を渡して、関数を実行する
  3. url_forで画像、css, javascriptなどの静的コンテンツを読み込む

url_forを利用して、リンクを作成して画面遷移する

url_forは、エンドポイントから、そのURLを生成する関数で、テンプレート上でaタグでリンクを作成したり画像を表示する場合などに用いられる。

・関数名を指定してそのviewに遷移する

<a  href="{{ url_for('関数名') }}">New Page</a>

・テンプレート上で画像を表示する

<img src="{{ url_for('static', filename='〇〇.jpg') }}">

 
では、以下に具体例を記述する。

Example

  • views.pyの定義
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/') # http://○○○/の場合に実行される
def index():
    return render_template('index.html')

@app.route('/user') # http://○○○/userの場合に実行される
def user():
    return render_template('user.html')

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

 

  • user関数実行時のテンプレート(user.html)
<p>USERページ</p>
<a href="{{ url_for('index') }}">Index Page</a> <!-- views.pyのindex関数を実行するリンク -->

 

  • index関数実行時のテンプレート(index.html)
<p>INDEXページ</p>

 

  • ファイルの階層構造

以下のように各フォルダ、ファイルを配置する。

 

  • 画面表示時(http://127.0.0.1:5000/user)


 
次に、画面上のIndex Pageをクリックすると、index関数が実行されて、index.htmlが表示される。

  • Index Pageクリック時

url_forで値を渡して、関数を実行する

url_forでは、引数を取った関数を実行することもできる。
それには、

url_for('add', variable=foo)

として、カンマ(,)で区切って変数を指定する。
例えば、以下のように記述する。

Example

  • user.htmlの定義
<p>USERページ</p>
<a href="{{ url_for('index', msg='hello') }}">Index Page</a>
<!-- index関数をmsgをhelloとして実行する -->

 
次に、views.pyのindex関数の定義で、msgを引数に取るようにする

@app.route('/index/<string:msg>')
def index(msg):
    return render_template('index.html', msg=msg)

url_forで画像、css, javascriptなどの静的コンテンツを読み込む

url_forを用いて、画像や、css, javascriptなどと言った静的コンテンツを読み込むこともできる。
利用する際には、url_forの第一引数にはstaticにする。
デフォルトで、staticフォルダ内のファイルを見る

Example

  • 画像を読み込んで表示する
<img src="{{ url_for('static', filename='apple.jpg') }}"> <!-- staticフォルダ内のapple.jpgを表示する -->

 

  • cssファイルを読み込む
<link rel="stylesheet" href={{ url_for('static', filename='css/base.css') }}> <!-- staticフォルダ内のcss/base.cssを読み込む -->

 

  • javascriptファイルを読み込む
<script src={{ url_for('static', filename='js/myjs.js') }}gt;</script><!-- staticフォルダ内のjs/myjs.jsを読み込む -->

 

  • ファイルを階層構造


« Previous

テンプレートを自作する方法

Next »

リダイレクトを行う方法


Flask入門記事一覧はこちら

Filed Under: Flask Tagged With: flask, python

Primary Sidebar

注目記事

プロのエンジニアが選ぶPython入門者、初心者向けの書籍10選
元SEが語る、システムエンジニア(SE)ってどんな仕事?きつくてつらいのか?
元SEが語る、システムエンジニアの良いところ

スポンサーリンク