Pythonのbottleでテンプレートを使用してみた

プログラミング

bottleはPythonのフレームワークの中でも一番簡単なものです。

bottleを使ってHTMLファイルのテンプレートを使用してみたので、まとめてみました。

bottleのインストール

コマンドプロンプト(Macはターミナル)を開いて、以下のコマンドを打てばbottleがインストールできます。

pip install bottle

 

テストとして、以下のコードを『template.py』に書いて、

# coding: utf-8
from bottle import route, run

@route('/')
def index():
    return "Hello World"

run(host='127.0.0.1', port=8080)

コマンドプロンプトに以下のコマンドを打ち込むと、

python template.py

http://127.0.0.1:8080/にアクセスすれば「Hello World」が表示されます。

 

bottleでテンプレートを使用する

HTMLのテンプレートファイルを使ってみます。ファイル構成は以下の通り。

.
├── template.py
└── views
    └── index.html

 

以下のコードを『template.py』に書いて、

## coding:utf-8
from bottle import run, route, template

@route("/")
def index():
    username = 'hogehoge'
    return template('index', username=username)

run(host='127.0.0.1', port=8080)

 

以下のコードを『index.html』に書きます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テンプレートのテスト</title>
</head>
<body>

  <p>{{ username }}さんようこそ</p>

</body>
</html>

 

すると、以下のように表示されます。HTMLのテンプレートファイルの「username」の変数に、『template.py』で指定した「hogehoge」が入っています。

ソースコードのファイルを変更したときは、コマンドプロンプトで『Ctrl + C』を入力して一度bottleを停止し、再度『python template.py』でbottleを起動しないとコードの変更内容が反映されません。

 

bottleを使ってフォームに入力した値を別ページで表示させる

さらに、2つのテンプレートファイルを使って、フォームに入力した値を別ページで表示させてみます。

ファイル構成は以下の通り。

.
├── template.py
└── views
    └── index.html
    └── result.html

 

『template.py』のファイルには、2つのページにアクセスしたときの挙動を記載します。

# coding:utf-8
from bottle import run, route, template, get, request

# トップページ
@route("/")
def index():
    return template('index')

# フォーム入力結果ページ
@route("/result", method="GET")
def result():
    username = request.query.getunicode("name")
    return template('result', username=username)

run(host='127.0.0.1', port=8080)

request.query.get()ではなく、request.query.getunicode()を使わないと、日本語をフォームに入力したときに文字化けします。

参考:bottleで文字列を取得しようとすると日本語が文字化けする -> 解消|Qiita

 

『index.html』には、名前を入力するフォーム欄を設けました。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テンプレートのテスト</title>
</head>
<body>

  <form action="/result" method="get">
    名前: <input name="name" type="text" />
    <input value="登録" type="submit" />
  </form>

</body>
</html>

 

『result.html』には、先ほどの『index.html』とほぼ同じコードを記載しました。ただ、トップページに戻るボタンを追加してみました。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>入力結果の表示ページ</title>
</head>
<body>

  <p>{{ username }}さんようこそ</p>
  <button type=“button” onclick="location.href='/'">トップに戻る</button>

</body>
</html>

 

そして、http://127.0.0.1:8080/にアクセスすると、以下のように名前を入力するフォームが表示されます。

例えば「hogehoge」と入力し、『登録』ボタンを押すと、以下のように表示されます。

 

タイトルとURLをコピーしました