Djangoでデフォルトで用意されているmessages framework + Bootstrap4を使って、CRUD操作の際のリダイレクト先でメッセージを表示させる手順のメモです。
実行環境
環境はこちらです。
1 2 3 |
Python 3.7.1 Django 2.1.2 django-bootstrap4 0.0.7 |
構成はこのようになります。今回、編集/追加するファイルのみ記載しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
mydir ├── blog │ └── views.py ├── myproject │ └── settings.py ├── static │ ├── css │ │ ├── bootstrap.min.css │ │ └── style.css │ └── js │ └── jquery-3.3.1.min.js ├── templates │ └── base.html |
上記のディレクトリにダウンロードした、bootstrap.min.css と jquery-3.3.1.min.js を配置します。
https://getbootstrap.com/docs/4.1/getting-started/download/
https://jquery.com/download/
実装
次のコマンドでbootstrap4をインストールします。
1 |
$ pip install django-bootstrap4 |
Settings
settings.pyに’bootstrap4′, を追記します。’django.contrib.messages’はデフォルトで入っています。
mydir/myproject/settings.py
1 2 3 4 5 6 7 8 9 10 11 |
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'blog.apps.BlogConfig', 'accounts.apps.AccountsConfig', 'bootstrap4', # 追加 ] |
一時的なメッセージを保存するための、ストレージはデフォルトで’FallbackStorage’になっています。変更する場合は、以下のように、指定します。
本家ドキュメント参照
mydir/myproject/settings.py
1 |
MESSAGE_STORAGE = 'django.contrib.messages.storage.cookie.CookieStorage' |
Views
ビューにメソッド・メッセージを記述していきます。メッセージタグは’debug’, ‘info’, ‘success’, ‘warning’, ‘error’を指定できます。
mydir/blog/views.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
from django.contrib import messages class CreateView(LoginRequiredMixin, generic.edit.CreateView): model = Article fields = ['title', 'text'] def form_valid(self, form): form.instance.author = self.request.user messages.success(self.request, "「{}」を作成しました!".format(form.instance)) # 追加 return super(CreateView, self).form_valid(form) class UpdateView(LoginRequiredMixin, generic.edit.UpdateView): model = Article fields = ['title', 'text'] def form_valid(self, form): messages.info(self.request, "「{}」を更新しました!".format(form.instance)) # 追加 return super(UpdateView, self).form_valid(form) class DeleteView(LoginRequiredMixin, generic.edit.DeleteView): model = Article success_url = reverse_lazy('blog:index') def delete(self, request, *args, **kwargs): result = super().delete(request, *args, **kwargs) messages.error(self.request, '「{}」を削除しました!'.format(self.object)) # 追加 return result |
Templates
共通テンプレートで bootstrap4, css , js を読み込み、メッセージを表示する記述を加えます。
mydir/templates/base.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
{% load static %} {% load bootstrap4 %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="{% static 'css/style.css' %}" rel="stylesheet"> <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> <title>title</title> </head> <body> <header> </header> {% if messages %} {% for message in messages %} <div class="{{ message|bootstrap_message_classes }} alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> {{ message }} </div> {% endfor %} {% endif %} {% block content %}{% endblock %} <script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </body> </html> |
jQueryで自動的に非表示にする
アラート・メッセージは表示し続けるより、さりげなく、フェードアウトさせる方がいい!という方は、jQueryのsetTimeout関数を使うと実現できます。今回はオプションをfadeOut(‘slow’)、タイミングは「3000」で3秒後としてみました。
1 2 3 4 5 |
<script type="text/javascript"> $(function(){ setTimeout("$('.alert').fadeOut('slow')", 3000) }) </script> |
CSSでスタイル調整
ブートストラップ感に飽きてきたら、CSSで上書きしましょう!大雑把ですが(汗)。
mydir/static/css/style.css
1 2 3 4 5 6 7 8 9 10 11 12 |
.alert-info { text-align: center !important; color: #f9f9f9 !important; background-color: #0bbdde !important; border-color: #0bbdde !important; border-radius: 0.2rem !important; } button.close { color: #ffffff !important; opacity: 1 !important; font-weight: 300 !important; } |
以上です!ご覧いただき、ありがとうございました!!😌