xadmin快速搭建後臺管理系統

時間 2019-11-12

標籤 xadmin 快速搭建後臺管理系統简体版

原文原文鏈接

一.xadmin的特色：

1.基於Bootstrap3：Xadmin使用Bootstrap3.0框架精心打造。基於Bootstrap3，Xadmin天生就支持在多種屏幕上無縫瀏覽，並徹底支持Bootstrap主題模板，讓您的管理後臺也動感、多樣起來。javascript

2.內置功能豐富：Xadmin做爲一款全面的後臺管理系統框架，不只提供了基本的CRUD功能，還內置了豐富的插件功能。包括數據導出、書籤、圖表、數據添加嚮導及圖片相冊等多種擴展功能。css

3.真心強大的插件系統：Xadmin的插件系統借鑑了其餘領域成功框架的設計思想，讓插件能夠擴展系統的任何一個功能點。對於開發者，Xadmin的插件開發簡單；對於使用者，Xadmin的插件安裝方便。html

4.後臺實際就是對錶的增刪改查，從某種程度上來說不依賴於業務邏輯，又能夠在後臺對每張表管理時加入本身的後臺邏輯，這也是它優於不少後臺管理系統的緣由。前端

二.xadmin的安裝：

1.直接經過pip安裝：pip install xadmin（會有三個依賴包：django-formtools ，django-crispy-forms ，httplib2 都會自動安裝好）java

2.經過githup上搜索xadmin，直接下載源碼包，只需把下載文件中的xadmin文件夾拷貝到項目根目錄配置即可以使用，固然得把pip安裝得xadmin卸載後使用的纔是導入的源碼包--pip uninstall xadmin（推薦，當xadmin的新功能尚未發佈到pypi上時，能夠優先使用，固然，最主要的是咱們能夠查看源碼，更加容易理解xadmin的功能，並在不斷學習中進步）node

三.xadmin的app配置及url配置：

1.app配置：xadmin是一個app，也應該在setting.py的INSTALLED_APPS中添加上，不僅是xadmin，還得添加上依賴包crispy_forms。python

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'xadmin',
    'crispy_forms'

]

2.url配置：替換Django自帶的admin,將url指向xadmingit

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

3.此時訪問xadmin的url（我使用的默認端口，爲127.0.0.1:8000/xadmin），會提示Table ‘xxx.xadmin_usersettings' doesn't exist，是由於xadmin有一些默認的表，只須要同步便可，重新makemigrations(生成數據庫腳本文件),migrate(生成更新表)，即可以發現數據庫多了幾張以xadmin開頭的表（圖1），重新啓動項目即可以訪問了。ajax

圖1算法

4.訪問成功後，進入用戶表效果如圖2（佈局不像admin一每一列一個字段，並且密碼被加密，並告訴加密算法，相比admin更加安全美化，佈局可本身定製）：

圖2

四.xadmin的使用：

1.在每個app下新建一個adminx.py文件（相似django自動生成的admin.py文件,xadmin會自動在每一個app下搜索xadminx.py並註冊）

2.xadmin的簡單註冊（以School表爲例），效果如圖3：

#導入xamin模塊
import xadmin
#導入School表
from .models import School

#建立註冊類
class SchoolAdmin(object):
    pass

xadmin.site.register(School, SchoolAdmin)

圖3

class School(models.Model):
    '''
    學校表
    '''
    name=models.CharField(max_length=50,verbose_name='學校名字')
    address=models.CharField(max_length=100,verbose_name='學校地址')
    add_time=models.DateTimeField(default=datetime.now,verbose_name='添加時間')

    class Meta:
        verbose_name='學校'
        verbose_name_plural=verbose_name

    def __str__(self):
        return self.name

圖4

註冊在後臺的標名爲verbose_name(數據只有一條，即單數)，不然爲verbose_name_plural（數據大於一條，即爲複數），若爲指明verbose_name_plural，則複數形式默認在單數形式後面在s（學校s），進入詳情頁的標籤則爲models中的verbose_name。models中重載__str__()函數返回的值是在每張表詳情列表頁的展現的標籤名，能夠在顯示列中指定，如圖5，以及點進詳情頁的修改（刪除）xxx的標籤名，如圖3（修改西南石油大學）。

3.list_display的使用：指定默認展現列（效果如圖5），注：要想過濾某外鍵下的字段，只需xxx__yy（xxx爲該表字段名，yy爲外鍵對應表字段），效果如圖6

class SchoolAdmin(object):
    #能夠是列表[],也能夠是元組()，但使用元組只有一個字段是必定要加逗號
    list_display=['name','address']
    #每頁顯示多少個
    list_per_page=20

class Sport_FavAdmin(object):
    list_display = ['student', 'sport', 'add_time']
    search_fields = ['student', 'sport']
    #student,sport均爲外鍵，username,sport_name分別爲學生表，運動項目表下的字段
    list_filter = ['student__username', 'sport__sport_name', 'add_time']

圖5

圖6

4.search_fields的使用：搜索功能（包含搜索，即字段包含搜索字段即可以搜索出，通常不作時間功能搜索），會多出一個搜索框，能夠在裏面搜索配置好了的字段，如圖6

class SchoolAdmin(object):
    # 能夠是列表[],也能夠是元組()，但使用元組只有一個字段是必定要加逗號
    list_display=['name','address']
    #配置在哪些字段搜索
    search_fields=['name','address']

圖7

5.list_filter的使用：篩選功能（如對時間篩選），會多出一個過濾器，即可以進行過濾搜索了，使開發變得簡單，如圖7

class SchoolAdmin(object):
    # 能夠是列表[],也能夠是元組()，但使用元組只有一個字段是必定要加逗號
    list_display=['name','address']
    #配置在哪些字段搜索
    search_fields=['name','address']
    #配置過濾字段
    list_filter=['name','address','add_time']

圖8

6.xadmin全局配置，app名稱修改，左側樣式佈局：

主題配置：註冊與表註冊不一樣，須要將類和views.BaseAdminView綁定，且順序與表相反，效果如圖9

from xadmin import views


class BaseSetting(object):
    '''
    主題樣式多樣化
    '''
    enable_themes=True
    use_bootswatch=True

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

圖9

標籤配置，效果如圖10：

from xadmin import views


class GlobalSetting(object):
    #頁頭
    site_title = '悅動樂後臺管理系統'
    #頁腳
    site_footer = '悅動樂'


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

圖10

將app下表如下拉形式展開（摺疊樣式），效果如圖11：

class GlobalSetting(object):
    #頁頭
    site_title = '悅動樂後臺管理系統'
    #頁腳
    site_footer = '悅動樂'
    #左側樣式
    menu_style='accordion'

圖11

修改app名稱：

只需修改每一個app下的app.py文件，在config類中加上verbose_name=xxx，而後在對應__init__.py文件中加上default_app_config='對應config路徑'，效果如圖12。

app.py配置:

from django.apps import AppConfig


class UsersConfig(AppConfig):
    name = 'users'
    verbose_name='用戶管理'

__init__.py配置:

default_app_config='users.apps.UsersConfig'

圖12

設置全局圖標，效果如圖13，對應圖標代碼可參考http://v3.bootcss.com/components/和http://www.yeahzan.com/fa/facss.html

class GlobalSetting(object):
    #頁頭
    site_title = '悅動樂後臺管理系統'
    #頁腳
    site_footer = '悅動樂'
    #左側樣式
    menu_style='accordion'
    # 設置models的全局圖標
    global_search_models = [UserProfile, Sports]
    global_models_icon = {
        UserProfile: "glyphicon glyphicon-user", Sports: "fa fa-cloud"
    }

圖13

model_icon的使用：配置表的圖標，能夠在awesome官網上下載最新的font-awesome.css替換，並找尋到相應的icon書寫

class Sport_FavAdmin(object):
    list_display = ['student', 'sport', 'add_time']
    search_fields = ['student', 'sport']
    list_filter = ['student__username', 'sport__sport_name', 'add_time']
   #相應表圖標配置
    model_icon='fa fa-address-book'

顯示數據詳情，如圖14：

class Sport_FavAdmin(object):
    list_display = ['student', 'sport', 'add_time']
    search_fields = ['student', 'sport']
    list_filter = ['student__username', 'sport__sport_name', 'add_time']
    #顯示詳情
    show_detail_fields=['sport']

圖14

設置刷新時間，圖15：

class Sport_FavAdmin(object):
    list_display = ['student', 'sport', 'add_time']
    search_fields = ['student', 'sport']
    list_filter = ['student__username', 'sport__sport_name', 'add_time']
    #顯示詳情
    show_detail_fields=['sport']
    #數據刷新時間
    refresh_times=(3,5)

圖15

書籤：數據列表頁面特定的數據過濾，排序等結果，添加的書籤還能夠在首頁儀表盤中做爲小組件添加。

　　　圖表：在數據列表頁面，根據列表數據生成圖表，能夠指定多個數據列，生成多個圖表。在Model OptionClass 中設定data_charts屬性，該屬性爲dict類型，key是圖表的標示名稱，value是圖表的具體設置屬性，示例:

 data_charts = {
        "user_count": {'title': u"約運動",
                       "x-field": "sport_time", 
                       "y-field": ("people_nums",),
                       },
    }

圖表屬性：

　　title : 圖表的顯示名稱

　　x-field : 圖表的 X 軸數據列, 通常是日期, 時間等

　　y-field : 圖表的 Y 軸數據列, 該項是一個 list, 能夠同時設定多個列, 這樣多個列的數據會在同一個圖表中顯示

　　order : 排序信息, 若是不寫則使用數據列表的排序

效果如圖16：

圖16

數據導出：若是想要導出Excel數據，須要安裝xlwt。默認狀況下，xadmin會提供Excel，CSV,XML，json四種格式的數據導出，能夠經過設置OptionClass的list_export屬性來指定使用哪些導出格式（四種格式分別用xls，csv，xml，json表示）或是將list_export設置爲None來禁用數據導出功能。效果如圖17

class ScheduleAdmin(object):
    list_display = ['start_people', 'sport', 'sport_time', 'people_nums']
    search_fields = ['start_people', 'sport', 'sport_time', 'people_nums']
    list_filter = ['start_people', 'sport', 'sport_time', 'people_nums', 'add_time']
    #導出類型
    list_export = ('xls', 'xml', 'json')
    #導出字段
    list_export_fields = ('start_people', 'sport', 'sport_time')

圖17

其餘：不一一詳細介紹，用到時能夠查看

#對應相應的model
    class LessonInline(object):
         model=Lesson
         extra=0


    class CourseResourceInline(object):
         model=CourseResource
         extra=0
   #配置默認排序規則
    ordering=['-people_nums']
    #設置未只讀，不能修改
    readonly_fields=['proplr_nums']
    #設置爲後臺不能看見,與readony_fields衝突，有前者，exclude不生效
    exclude=['fav_nums']
    # 設置添加時能夠搜索，而不是下拉框，ajax加載(外鍵)
    relfield_style = 'fk-ajax'
    #在同一個頁面添加完整數據,不能夠在嵌套中嵌套，但能夠多個，同一個model註冊兩個管理器
    inlines=[LessonInline,CourseResourceInline]
    #列表頁直接修改的字段
    list_editable=['degree','desc']
   #定製分類管理，篩選，調用當前admin

    def queryset(self):
       qs=super(BannerCourseAdmin,self).queryset()
       qs=qs.filter(is_banner=True)
       return qs

權限介紹：默認生成對每一個表的增刪改查權限，勾上是否職員，用戶即可以登陸後臺管理系統，若沒賦予權限，則什麼也不能夠幹，如圖18，賦予權限，如圖19，方便管理能夠把用戶放入權限組：

圖18

圖19

文本編輯器集成及插件導入（較重要）：

xadmin集成富文本框（可在githup上查看相關配置）：

DjangoUeditor的安裝：1.下載源碼包，而後python setup.py install;2.pip install DjangoUeditor

而後在setting.py中配置app：

INSTALLED_APPS = [
       .......   
    'DjangoUeditor',

]

配置url:

url(r'^ueditor/',include('DjangoUeditor.urls' )),

修改models:

from DjangoUeditor.models import UEditorField
......
 #width：寬，height：高，imagePath，filePath圖片文件上傳路徑
 detail = UEditorField(verbose_name=u"運動詳情",width=600, height=300, imagePath="courses/ueditor/",
                                         filePath="courses/ueditor/", default='')

ueditor插件定製，在\extra_apps\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.min.js")   #本身的靜態目錄
        nodes.append(js)

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

plugin配置:在extra_apps\xadmin\plugins\__init__.py中配置：

PLUGINS = (
    'actions', 
    'filters', 
    'bookmark', 
    'export', 
    'layout', 
    'refresh',
    'details',
    'editable', 
    'relate', 
    'chart', 
    'ajax', 
    'relfield', 
    'inline', 
    'topnav', 
    'portal', 
    'quickform',
    'wizard', 
    'images', 
    'auth', 
    'multiselect', 
    'themes', 
    'aggregation', 
    'mobile', 
    'passwords',
    'sitemenu', 
    'language', 
    'quickfilter',
    'sortablelist',
    #ueditor配置，與uditor.py文件名一致
    'ueditor',
    #excel插件設置
    'excel']

admin樣式定製：

class SportAdmin(object):    
     #定義樣式
    style_fields={"detail":"ueditor"}

防止前端轉義：template取值時

  #關閉轉義                 
  {% autoescape off%}
   {{ xxx.detail }}
 {% endautoescape %}

excel插件的導入，效果如圖20：

圖20

excel插件定製，在\extra_apps\xadmin\plugins添加excel.py以下：

# coding:utf-8

import xadmin
from xadmin.views import BaseAdminPlugin, ListAdminView
from django.template import loader


#excel 導入
class ListImportExcelPlugin(BaseAdminPlugin):
    import_excel = False

    def init_request(self, *args, **kwargs):
        return bool(self.import_excel)

    def block_top_toolbar(self, context, nodes):
#html文件
        nodes.append(loader.render_to_string('xadmin/excel/model_list.top_toolbar.import.html', context_instance=context))


xadmin.site.register_plugin(ListImportExcelPlugin, ListAdminView)

html文件定製，在extra_apps\xadmin\templates\xadmin\excel\model_list.top_toolbar.import.html：

        function fileChange(target){
//檢測上傳文件的類型
            var imgName = document.all.submit_upload.value;
            var ext,idx;
            if (imgName == ''){
                document.all.submit_upload_b.disabled=true;
                alert("請選擇須要上傳的 xls 文件!");
                return;
            } else {
                idx = imgName.lastIndexOf(".");
                if (idx != -1){
                    ext = imgName.substr(idx+1).toUpperCase();
                    ext = ext.toLowerCase( );
{#                    alert("ext="+ext);#}
                    if (ext != 'xls' && ext != 'xlsx'){
                        document.all.submit_upload_b.disabled=true;
                        alert("只能上傳 .xls 類型的文件!");

                        return;
                    }
                } else {
                    document.all.submit_upload_b.disabled=true;
                    alert("只能上傳 .xls 類型的文件!");
                    return;
                }
            }

        }

後臺邏輯：

......Admin(object):
#導入excel插件
     import_excel = True
     def post(self,request,*args,**kwargs):
        if 'excel' in request.FILES:
            pass
        #必須返回，否則報錯（或者註釋掉）
        return 
         super(CourseAdmin,self).post(request,*args,**kwargs)

注：user表默認註冊到認證和受權app中，若是須要將其移到用戶管理app中，且定製能夠查看extra_apps\xadmin\plugins\auth.py，修改相應配置便可定製佈局，只需以下，若是Django版本大於2.0，需修改相應文件名及相關配置才能使用：

第一種方法：

#導入關聯用戶表的Admin
from xadmin.plugins.auth import UserAdmin
from users.models import UserProfile

 class UserAdmin(UserAdmin):
     '''
    註冊User到用戶管理
    '''
     pass
from django.contrib.auth.models import User 
#卸載自帶的User註冊
xadmin.site.unregister(User)
xadmin.site.register(UserProfile,UserAdmin)

第二種方法：在extra_apps\xadmin\plugins\auth.py中加入以下，若是在點擊如圖18的修改密碼時報錯，也需加入以下代碼（xadmin的bug，後面可能已經修復）

圖21

#獲取setting中的User
from django.contrib.auth import get_user_model
User = get_user_model()

還有可能點擊用戶詳情中修改密碼的this form報404錯誤，如圖20

圖22

只需修改extra_apps\xadmin\plugins\auth.py註冊時成setting.py對應的url便可：

#修改修改passwoed的url,個人是users/userprofile/(.+)/password
site.register_view(r'^users/userprofile/(.+)/password/$',
                   ChangePasswordView, name='user_change_password')

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。