SEIYU 스타일의 EC 사이트 만들기 (2) Xadmin을 사용하여 관리 화면을 새로 고칩니다.

18313 단어 django-rest-framework파이썬Vue.js장고

마지막 기사



세이유풍의 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에 다음 내용을 추가합니다.

    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 설정입니다.

    다음 번



    세이유풍의 EC사이트 만들기 (3) 장고 REST 프레임워크로 폭속 API 만들기
    • 장고 REST framework + Vue.js "SEIYU 스타일의 EC 사이트 만들기"전 6 회 (예정)
    모르는 LINE BOT을 만들려고 하면 fuga밖에 대답하지 않는 유감스러운 놈이 된 이야기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage