😸
Django 管理画面のカスタマイズ
概要
今回はPython + Djangoを使い、バックエンド側の実装を進めていきます。
Djangoには元々管理画面用のファイル（admin.py）が用意されているのですが、デフォルトの機能だけでは使いづらい部分もあるため公式のリファレンスをもとにカスタマイズをしていきます。
実装機能
- DjangoでのModel構築
- Django管理画面のカスタマイズ（admin.py）
| 項番 | 記事 |
|---|---|
| 1 | React + Django + CORSを使ったフロントエンド / バックエンドのデータ連携 |
| 2 | Django 管理画面のカスタマイズ（本記事） |
| 3 | Django REST framework(DRF)を使ったAPIサーバーとReactとのデータ連携（後日公開） |
| 4 | Django REST frameworkのserializersを使った外部キーモデルの参照（後日公開） |
| 5 | React + Redux / Redux Toolkitを使った非同期通信の検証（後日公開） |
| 6 | APIをテストツール「Postman」を使ったDjangoとのCRUD機能実装(設計編)（後日公開） |
| 7 | APIをテストツール「Postman」を使ったDjangoとのCRUD機能実装(実装編)（後日公開） |
参考文献
- Django公式: Django の admin サイト
- Django管理画面のオブジェクト一覧ページをカスタマイズ
フォルダ構成
今回使用しているものをメインに抜粋
- バックエンド(Python / Django)
[Djangoプロジェクト]
├── [Djangoプロジェクト_meta]
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── [Djangoアプリ]
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── db.sqlite3
└── manage.py
実装方法
バックエンド
今回は ProjectTopics と言うモデル名を参照します。
また編集を必要とせず、複数のモデルで共通項目として使用するものを BaseMeta として定義しています。
- ModelでDB構成の設計
backend_django/django_app/models.py
# 全てのモデルに共通する項目を定義する
class BaseMeta(models.Model):
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
abstract = True # 抽象クラスとして定義する
class ProjectTopics(BaseMeta):
topic_id = models.AutoField(primary_key=True)
date = models.DateField()
content = models.CharField(max_length=1000)
class Meta:
db_table = 'project_topics' # テーブル名を指定する
- デフォルトで設計されている
admin.pyにModelを追加
backend_django/django_app/admin.py
from django.contrib import admin
# Register your models here.
from .models import ProjectTopics
admin.site.register(ProjectTopics)
- デフォルトのlocalhostである http://127.0.0.1:8000/admin/ を参照します。
python manage.py runserver
■一覧画面
■編集画面
いくつかデータを入れた状態だとこのような表示になるのですが、このままではデータの表示がわかりずらいため、各画面を見やすくするために各ファイルの設定を追加していきます。
backend_django/django_app/models.py
class Meta:
:
verbose_name_plural = 'プロジェクトのトピック一覧'
def __str__(self):
return self.content
| 指定値 | 内容 |
|---|---|
| verbose_name_plural | 管理画面で表示されるモデル名を指定する |
| str(self) | 管理画面で表示されるモデルの名称を指定する |
ProjectTopics モデルを継承した、カスタマイズ用のClass ProjectTopicsAdmin を定義します。
backend_django/django_app/admin.py
# admin.site.register(ProjectTopics)
@admin.register(ProjectTopics)
class ProjectTopicsAdmin(admin.ModelAdmin):
Fields = ('topic_id', 'date', 'content')
list_display = ('topic_id', 'date', 'content', 'created_at', 'updated_at')
list_display_links = ('topic_id', )
search_fields = ('content', )
list_filter = ('date', )
list_editable = ('date', 'content')
| 指定値 | 内容 |
|---|---|
| Fields | 編集画面で表示する項目を指定する |
| list_display | 一覧画面で表示する項目を指定する |
| list_display_links | 一覧画面でリンクにする項目を指定する |
| search_fields | 検索ボックスを表示する項目を指定する |
| list_filter | フィルターを表示する項目を指定する |
| list_editable | 一覧画面で編集可能にする項目を指定する |
※ list_display_links で指定した項目は、list_editable と重複させることはできません。
実装レビュー
models.py, admin.pyそれぞれを指定させることで、以下のような機能が実装されました。
- 一覧画面で抽象クラスを含めたProjectTopicsモデルの各項目を参照する
- 編集画面への遷移を必要とせず、一覧画面で編集できる項目
- 一定のフィルタリングを通した検索ができるように
- 管理画面で表示されるモデル名を変更
Discussion