前回の記事

Xadminとは何か

GitHub上に公開されてるDjangoの管理画面の上位互換パッケージ。

管理画面本来の機能を拡張し、見た目も良くします。

前回の記事で完成した管理画面を、Xadmin使用してリメイクすれば、以下のようになります。

また、スタイルの切り替えも可能ですし、データのexcel出力などもデフォルト機能としてはいってます。

では、早速作っていきます。

Xadminダウンロード

githubのリポジトリはこちらになります。xadmin

ブランチはdjango2を選んでダウンロードしてください
あるいは本記事のリポジトリextra_appsからxadminを抜いて使ってください

本記事のリポジトリから抜いて使うことがオススメです

注意事項
pip install xadminは絶対しないことです、古いバージョンのxadminをおとすことで、パッケージ依存がややこしいことになります。

依存パッケージインストール

以下コマンドを実行し、xadminに必要なパッケージをインストールします。

公式参考リンク

pip install django-crispy-forms
pip install django-import-export
pip install django-reversion
pip install django-formtools
pip install future
pip install httplib2
pip install six

ファイル配置

appsと同じディレクトリで、extra_appsという名のフォルダを作ります。
extra_apps配下にダウンロードしたxadminを置きます。
完成後のディレクトリ構成は以下になります。


qiita-Django-supermarket
|-- requirements.txt
|-- README.md
|-- LICENSE
|-- CHANGELOG.md
|-- api
|-- |--api
|-- |-- |-- __init__.py
|-- |-- |-- settings.py
|-- |-- |-- urls.py
|-- |-- |-- wsgi.py
|-- |--apps
|-- |-- |-- goods
|-- |-- |-- users
|-- |--extra_apps
|-- |-- |-- xadmin
|-- |--manage.py

その後settings.pyに以下の内容を追加します。

settings.py

...
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))
...

INSTALLED_APPS = [
    ...
    'crispy_forms',
    'xadmin',
]

その後extra_appsをappsと同じようにsouruces Rootに指定します。
PyCharmの操作方法は
1.extra_appsを右クリック
2. Mark Directory as
3. souruces Root

usersとgoods appにadminx.pyファイルを作る

usersアプリに移動して、adminx.pyファイルを作ります

cd apps/users
vim adminx.py

apps/users/adminx.py

import xadmin
from xadmin import views
from .models import VerifyCode


class BaseSetting(object):
    enable_themes = True
    use_bootswatch = True


class GlobalSettings(object):
    site_title = "ネットスーパー"
    site_footer = "supermarket_Back"


class VerifyCodeAdmin(object):
    list_display = ['code', 'mobile', "add_time"]


xadmin.site.register(VerifyCode, VerifyCodeAdmin)
xadmin.site.register(views.BaseAdminView, BaseSetting)
xadmin.site.register(views.CommAdminView, GlobalSettings)

その後goodsファイルに移動し、adminx.pyを作ります

cd ../goods
vim adminx.py

apps/goods/adminx.py

import xadmin
from .models import Goods, GoodsCategory, GoodsImage, GoodsCategoryBrand, Banner, HotSearchWords
from .models import IndexAd

class GoodsAdmin(object):
    list_display = ["name", "click_num", "sold_num", "fav_num", "goods_num", "market_price",
                    "shop_price", "goods_brief", "is_new", "is_hot", "add_time"]
    search_fields = ['name', ]
    list_editable = ["is_hot", ]
    list_filter = ["name", "click_num", "sold_num", "fav_num", "goods_num", "market_price",
                   "shop_price", "is_new", "is_hot", "add_time", "category__name"]

    class GoodsImagesInline(object):
        model = GoodsImage
        exclude = ["add_time"]
        extra = 1
        style = 'tab'

    inlines = [GoodsImagesInline]


class GoodsCategoryAdmin(object):
    list_display = ["name", "category_type", "parent_category", "add_time"]
    list_filter = ["category_type", "parent_category", "name"]
    search_fields = ['name', ]


class GoodsBrandAdmin(object):
    list_display = ["category", "image", "name", "desc"]

    def get_context(self):
        context = super(GoodsBrandAdmin, self).get_context()
        if 'form' in context:
            context['form'].fields['category'].queryset = GoodsCategory.objects.filter(category_type=1)
        return context


class BannerGoodsAdmin(object):
    list_display = ["goods", "image", "index"]


class HotSearchAdmin(object):
    list_display = ["keywords", "index", "add_time"]


class IndexAdAdmin(object):
    list_display = ["category", "goods"]


xadmin.site.register(Goods, GoodsAdmin)
xadmin.site.register(GoodsCategory, GoodsCategoryAdmin)
xadmin.site.register(Banner, BannerGoodsAdmin)
xadmin.site.register(GoodsCategoryBrand, GoodsBrandAdmin)

xadmin.site.register(HotSearchWords, HotSearchAdmin)
xadmin.site.register(IndexAd, IndexAdAdmin)

urls.pyにxadmin用のpathを追加

api/urls.py

import xadmin

urlpatterns = [
    ...
    path('xadmin/', xadmin.site.urls),
    ...
]

最後にマイグレートを実行します。
xadmin内部にmigrateファイルがあるため、それを実行します。

python manage.py makemigrations 
python manage.py migrate

ここまで来れば

python manage.py runserver

サーバーを立ち上げてhttp://127.0.0.1:8000/xadminにアクセスすると、xadminにアクセスできるようになってるはずです。

補足

アプリの表示名を修正したい場合。

下記の二つの手順を実行してください。

apps/goods/apps.py

from django.apps import AppConfig


class GoodsConfig(AppConfig):
    name = 'goods'
    verbose_name = "商品だよ"

api/setting.py

INSTALLED_APPS = [
...
 'goods.apps.GoodsConfig'
...
]

修正後、以下のようになります。

次回予告

思ったよりxadminを紹介するのに時間がかかりました
次回は一気にAPIを作って行きたいと思います。
そしていよいよVue.jsのセットアップです。

次回

SEIYU風のECサイトを作りましょう（3）Django REST frameworkで爆速APIを作りましょう

SEIYU風のECサイトを作りましょう（2）Xadminを使って管理画面を一新します