個人網站搭建 (第十四天) xadmin強化後臺

時間 2019-11-08

原文原文鏈接

昨天在逛開源中國社區時，偶然在推薦中看到有關xadmin的文章，一想到Django自帶的後臺不是admin嗎，難道它們之間有某種聯繫？果不其然，還真的是，xadmin就是admin的後臺強化版，除強化一些功能外還增長了許多admin中沒有的設計。舉個例子：如使用Bootstrap做爲UI框架，靈活且可自定義的頁面佈局，主頁儀表板和小部件，字體圖標和模型圖標，即時編輯，圖表功能，相關信息菜單等等。詳細內容請查看文檔：Django Xadminjavascript

下面就從安裝開始介紹xadmin的使用方法，替換行動開始css

首先我也是在網絡上各類找方案，找解決辦法，我也不明白爲何有些錯誤你們也互相抄來抄去，對後來學習的人形成了很大的困擾，因此仍是要擦亮眼睛去對待java

xadmin的安裝與配置node

1.安裝xadminpython

方案一：使用pip直接安裝xamdingit

pip install xadmin

方案二：經過git下載到本地github

git clone https://github.com/XiaoFei-97/xadmin.git

方案三：直接在進入到https://github.com/XiaoFei-97/xadmin，而後Download壓縮文件數據庫

其中方案一我試了安裝不成功，老是出現丟包的問題，可能不少依賴沒有自動下載，因此我選擇方案二，方案三也是可行的，下載後解壓縮能夠看到django

├── build
├── changelog.md
├── changelog.sh
├── demo_app
├── dist
├── LICENSE
├── MANIFEST.in
├── README.rst
├── requirements.txt
├── setup.py
├── tests
├── xadmin
└── xadmin.egg-info

其實demo_app是一個小案例，咱們只須要其中的xadmin文件夾，將其方法本身的項目根目錄下json

2.在settings.py裏面註冊上

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

3.修改urls.py

import xadmin
urlpatterns = [
    #url(r'^admin/', admin.site.urls),
    url(r'^xadmin/', xadmin.site.urls),
]

4.啓動django

// 執行數據庫遷移
python manage.py makemigrations
python manage.py migrate

// 運行服務
python manage.py runserver 8000

若是以上過程當中都沒有報錯的話，就能夠正常訪問了

4.xadmin註冊
已經在models定義Post類

from django.db import models
from django.contrib.auth.models import User  # 引入USER
from django.contrib.contenttypes.fields import GenericRelation
from read_statistics.models import ReadNumExpandMethod, ReadDetail
from DjangoUeditor.models import UEditorField


class Post(models.Model, ReadNumExpandMethod):
    """
    文章的數據庫表稍微複雜一點，主要是涉及的字段更多。
    """

    title = models.CharField(max_length=70, verbose_name=u'文章標題',)

    body = UEditorField(verbose_name=u'內容', width=800, height=500, toolbars="full", imagePath="images/", filePath="files/", upload_settings={"imageMaxSize": 1204000},)

    created_time = models.DateTimeField(verbose_name=u'建立時間', auto_now_add=True)
    modified_time = models.DateTimeField(verbose_name=u'修改時間', auto_now=True)

    excerpt = models.CharField(verbose_name=u'摘要', max_length=200, blank=True)

    category = models.ForeignKey(Category, verbose_name=u'分類')

    read_detail = GenericRelation(ReadDetail)

    author = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name=u'做者')

建立的app下建立adminx.py文件

class PostAdmin(object):
    """
    做用:自定義文章管理工具
    admin.ModelAdmin:繼承admin.ModelAdmin類
    """
    
    # 在後臺顯示id值，博文名，建立時間，修改時間，目錄，做者
    list_display = ['id', 'title', 'created_time', 'modified_time', 'category', 'author', 'get_read_num']
    
    # 增長過濾框,且以文章分類做過濾器
    list_filter = ['category', 'created_time', 'author']
    
    # 增長文章標題搜索字段
    search_fields = ['title']
    
xadmin.site.register(Post, PostAdmin)

最好仍是建立另一個adminx.py，不要在admin.py上直接修改，其實只要在以前的app註冊時將admin應用註釋掉就能夠了，admin也留着不要刪，畢竟陪伴過。其餘的模型表也與此相似，就不贅述，但還有一個問題，我還遇到了content_object沒法註冊的狀況，緣由主要是由於我使用了GenericForeignKey這個外鍵，ForeignKey的外鍵仍是能夠同樣註冊的，至於GenericForeignKey的問題，我暫時只能經過在模型類下定義一個方法，使用object_id來filter出當前對應的文章。例如這是一個評論對象的獲取，屬於comment應用模型下的方法，至於評論功能，之後再做出介紹，這裏先不用管

def get_comment(self):
    # 此處的一個異常處理,用來捕獲沒有對象的狀況
    # 例如在admin後臺中,沒有計數值會顯示爲‘-’
    try:
        post = Post.objects.get(id=self.object_id)
        return post.title
    # 對象不存在就返回0
    except exceptions.ObjectDoesNotExist:
        return 0

5.將應用名稱和數據表顯示爲中文
對於數據表的顯示，早在模型定義就應該被完成，如

title = models.CharField(max_length=70, verbose_name=u'文章標題',)
class Meta:
    verbose_name = '文章'
    verbose_name_plural = '文章'
    ordering = ['-created_time']

重要的是應用名稱的修改，修改apps.py文件

from django.apps import AppConfig

class BlogConfig(AppConfig):
    name = 'blog'
    verbose_name = u'博客'

還須要在該應用下的__init__.py下添加

default_app_config = "blog.apps.BlogConfig"

6.xadmin的全局定義
頁頭和頁腳自定義

class GlobalSetting(object):
    # 設置網站標題
    site_title = "後臺管理系統"
    
    # 設置網站頁腳
    site_footer = "蔣振飛的博客"
    
    # 設置應用圖標
    # menu_style = "accordion"

xadmin.site.register(views.CommAdminView, GlobalSetting)

7.打開主題應用

class BaseSetting(object):

    # 主題
    enable_themes = True
    use_bootswatch = True

xadmin.site.register(views.BaseAdminView, BaseSetting)

這個功能開啓就能夠經過按鈕自定義更換主題顏色，不過我目前沒有成功，只有默認和Bootstrap主題樣式，網上的解釋是當use_bootswatch 爲True的時候，就會使用httplib2去http://bootswatch.com/api/3.json網址獲取主題菜單項。可是使用瀏覽器打開這個網址，http會被替換成https的，httplib2訪問這個https的網址，就會報錯，而後使用requets代替之類的，我試過了，也終究沒有成功。最後本身經過發現其是經過requests庫來抓取json格式的文件，而後解析出css樣式地址，最後在static中引用，那我爲什麼不可本身經過下載css文件引用到static中，果真，最後成功了

以Cerulean爲例，首先在http://bootswatch.com/api/3.json下載css，添加到xadmin/static/xadmin/css/themes文件夾，並修改文件名爲Cerulean-theme.css，而後在themes.py中添加

class ThemePlugin(BaseAdminPlugin):

    enable_themes = False
    # {'name': 'Blank Theme', 'description': '...', 'css': 'http://...', 'thumbnail': '...'}
    user_themes = None
    use_bootswatch = False
    default_theme = static('xadmin/css/themes/bootstrap-xadmin.css')
    bootstrap2_theme = static('xadmin/css/themes/bootstrap-theme.css')
    # Cerulean_theme是新添加的靜態文件地址
    Cerulean_theme = static('xadmin/css/themes/Cerulean-theme.css')

最後一步，在block_top_navmenu方法下的themes添加

themes = [
    {'name': _(u"Default"), 'description': _(u"Default bootstrap theme"), 'css': self.default_theme},
    {'name': _(u"Bootstrap2"), 'description': _(u"Bootstrap 2.x theme"), 'css': self.bootstrap2_theme},
    # 新加天藍色主題
    {'name': _(u"天藍色"), 'css': self.Cerulean_theme},
]

8.最終效果以下，主頁面的一些小組件是本身添加的

xadmin集成富文本編輯器Ueditor

xadmin已經整合的差很少了，可是細心的話會發現，以前使用Ueditor編輯器在編輯框消失了，因此我又來填坑了，至於安裝Ueditor編輯器什麼的，以前也在個人網站搭建 (第十天) Ueditor編輯器總結過，這裏就直接區分xadmin與admin使用Ueditor的不一樣

1.在xadmin/plugins下新建ueditor.py

import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings

class XadminUEditorWidget(UEditorWidget):
    def __init__(self,**kwargs):
        self.ueditor_options=kwargs
        self.Media.js = None
        super(XadminUEditorWidget,self).__init__(kwargs)

class UeditorPlugin(BaseAdminPlugin):

    def get_field_style(self, attrs, db_field, style, **kwargs):
        if style == 'ueditor':
            if isinstance(db_field, UEditorField):
                widget = db_field.formfield().widget
                param = {}
                param.update(widget.ueditor_settings)
                param.update(widget.attrs)
                return {'widget': XadminUEditorWidget(**param)}
        return attrs

    def block_extrahead(self, context, nodes):
        js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js")  # 本身的靜態目錄
        js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.js")  # 本身的靜態目錄
        nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

2.在xadmin/plugins/__init__.py添加ueditor

 'ueditor'

2.配置adminx.py

class PostAdmin(object):
    """
        做用:自定義文章管理工具
        admin.ModelAdmin:繼承admin.ModelAdmin類
    """
    # 後臺管理每頁顯示20篇文章標題
    list_per_page = 20
    # 注意body是正文的字段名
    style_fields = {"body": "ueditor"}
    # 刷新時間間隔
    refresh_times = (60,)
 
xadmin.site.register(Post, PostAdmin)