前回の記事
SEIYU風のECサイトを作りましょう（1）要求分析とプロジェクト初期化
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に以下の内容を追加します。
...
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
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
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を追加
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にアクセスできるようになってるはずです。
補足
アプリの表示名を修正したい場合。
下記の二つの手順を実行してください。
from django.apps import AppConfig
class GoodsConfig(AppConfig):
name = 'goods'
verbose_name = "商品だよ"
INSTALLED_APPS = [
...
'goods.apps.GoodsConfig'
...
]
修正後、以下のようになります。
#次回予告
思ったよりxadminを紹介するのに時間がかかりました
次回は一気にAPIを作って行きたいと思います。
そしていよいよVue.jsのセットアップです。