~目次~
やったこと
前回（JavaScriptでフォームのデフォルトの日付を今日にする。）の続き。
今回やったのは、以下。
- 404ページの作成
- 404ページにアクセスすると5秒後に自動的にトップページに遷移する機能を追加
ファイル構成
. ├── 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.")
（参考ページ）
【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 %}
（参考ページ）
JavaScript- 一定時間たったらページを移動する
JavaScriptでsetTimeoutを使う方法【初心者向け】
実行結果
存在しないページにアクセスすると設定した404ページが表示される。
さらに、5秒後にはトップページに自動遷移する。
つまづいたところ
特になし。
やってみた感想
簡単に設定できた。JavaScript便利だな。
どこまでをJavaScriptでできて、どこからはバックエンド側で処理しないといけないのかの判断ができるようになると、開発がスムーズにできるようになるかもしれない。
次回（）に続く。
コメント