xadmin快速搭建后台管理系統

一.xadmin的特點：

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

     2.內置功能豐富：Xadmin作為一款全面的后台管理系統框架，不僅提供了基本的CRUD功能，還內置了豐富的插件功能。包括數據導出、書簽、圖表、數據添加向導及圖片相冊等多種擴展功能。

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

     4.后台實際就是對表的增刪改查，從某種程度上來講不依賴於業務邏輯，又可以在后台對每張表管理時加入自己的后台邏輯，這也是它優於很多后台管理系統的原因。

二.xadmin的安裝：

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

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

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

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

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指向xadmin

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），從新啟動項目便可以訪問了。

圖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')