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_appsxadminplugins添加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_appsxadminplugins\__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_appsxadminplugins添加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_appsxadmin emplatesxadminexcelmodel_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_appsxadminpluginsauth.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_appsxadminpluginsauth.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_appsxadminpluginsauth.py注册时成setting.py对应的url即可：

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