一.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\')