bottleで404ページを作成してみた。

~目次~
やったこと
1. ファイル構成
2. 作成コード
実行結果
つまづいたところ
やってみた感想

~目次~

やったこと
1. ファイル構成
2. 作成コード
実行結果
つまづいたところ
やってみた感想

やったこと

前回（JavaScriptでフォームのデフォルトの日付を今日にする。）の続き。
今回やったのは、以下。

404ページの作成
404ページにアクセスすると5秒後に自動的にトップページに遷移する機能を追加

ファイル構成

.
├── form.py
├── views
│  └── base.html
│  └── form.html
│  └── form_failed.html
│  └── 404.html
└── static
  └── main.js

├── form.py

├── views

│ └── base.html

│ └── form.html

│ └── form_failed.html

│ └── 404.html

└── static

└── main.js

作成コード

メインとなるPythonファイルには、以下のコードを追加

from bottle import error

@error(404)
def error404(error):
    return template('404.html', title = "Page Not Found.")

from bottle import error

@error(404)

def error404(error):

return template('404.html', title = "Page Not Found.")

（参考ページ）
【Python】Bottleで404 Not Foundページをカスタマイズする

404ページのHTMLファイルを作成。
JavaScriptのsetTimeoutで、5秒後に自動的にトップページに遷移するように設定した（✕1000をしているのは、単位がミリ秒のため）。

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}

<div class="container">
	<h1>ページが存在しません</h1><br>
	<h2>5秒後に自動的にトップページに戻ります</h2>
	<a href="/">トップページに戻る</a>
</div>

<script>
	// 5秒後に自動的にトップページに戻る
	setTimeout(function(){
	window.location.href = '/';
	}, 5*1000);
</script>

{% endblock %}

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}

{% block contents %}

<h1>ページが存在しません</h1><br>

<h2>5秒後に自動的にトップページに戻ります</h2>

<a href="/">トップページに戻る</a>

</div>

// 5秒後に自動的にトップページに戻る

setTimeout(function(){

window.location.href = '/';

}, 5*1000);

</script>

{% endblock %}

（参考ページ）
JavaScript- 一定時間たったらページを移動する
 JavaScriptでsetTimeoutを使う方法【初心者向け】

実行結果

存在しないページにアクセスすると設定した404ページが表示される。
さらに、5秒後にはトップページに自動遷移する。

つまづいたところ

特になし。

やってみた感想

簡単に設定できた。JavaScript便利だな。
どこまでをJavaScriptでできて、どこからはバックエンド側で処理しないといけないのかの判断ができるようになると、開発がスムーズにできるようになるかもしれない。

次回（）に続く。