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