xadmin是一个django的管理后台实现，使用了更加灵活的架构设计及Bootstrap UI框架，
目的是替换现有的admin，国人开发，有许多新的特性：
- 兼容 Django Admin
- 使用 Bootstrap 作为 UI 框架
- 编辑页面灵活布局
- 主页面仪表盘及小部件
- 过滤器强化
- 数据导出
- 强大的插件机制
项目主页：http://sshwsfc.github.io/django-xadmin/
在线demo: http://demo.xadmin.io/
与django的集成
本篇以simpleblog项目为例，介绍下怎样在django中集成xadmin
python2.7环境切换
注意，前面的教程都是在python3.4环境下开放的。
而目前为止xadmin还只能支持python2，所以我们要在此项目基础上新建一个分支py27，
然后我们创建一个python2.7的virtual environment，切换到此环境下面即可。
添加依赖
在requirements.txt中添加如下的依赖，注意：要用到xadmin的django1.9分支
1
2
3
| django-reversion==1.8.5
xlwt==0.7.5
git+https://github.com/sshwsfc/django-xadmin.git@django1.9
|
修改settings.py
增加xadmin的配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
| ADMINS = (
)
MANAGERS = ADMINS
INSTALLED_APPS = (
'xadmin',
'crispy_forms',
'reversion',
)
|
添加/xadmin的链接
修改mysite/urls.py如下
1
2
3
4
5
6
7
8
9
10
11
12
|
from django.conf.urls import patterns, include, url
from xadmin.plugins import xversion
xversion.register_models()
urlpatterns = patterns(
'',
url(r'xadmin/', include(xadmin.site.urls), name='xadmin'),
)
|
创建adminx.py
在blog/目录下创建adminx.py，内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
"""
Topic: adminx定制类
Desc :
"""
import xadmin
import xadmin.views as xviews
from .models import Tag, Category, Post, Comment, Evaluate, Page
from xadmin.layout import Main, TabHolder, Tab, Fieldset, Row, Col, AppendedText, Side
class BaseSetting(object):
enable_themes = True
use_bootswatch = True
xadmin.site.register(xviews.BaseAdminView, BaseSetting)
class AdminSettings(object):
site_title = '博客管理后台'
site_footer = 'Winhong Inc.'
menu_style = 'default'
def get_site_menu(self):
return (
{'title': '博客管理', 'perm': self.get_model_perm(Page, 'change'), 'menus': (
{'title': '所有页面', 'icon': 'fa fa-vimeo-square'
, 'url': self.get_model_url(Page, 'changelist')},
{'title': '分类目录', 'icon': 'fa fa-vimeo-square'
, 'url': self.get_model_url(Category, 'changelist')},
)},
)
xadmin.site.register(xviews.CommAdminView, AdminSettings)
xadmin.site.register(Page)
xadmin.site.register(Category)
|
在这里，我们将所有的model都注册到xadmin中去，这样后台就能自动管理它们了。
并且自定义了后台的一些菜单、标题等等。具体的定制方法可以参考xadmin的官方文档。
添加管理后台链接
在mysite/templates/mysite/base.html模板中添加/xamdin的管理后台链接：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="meta-2" class="widget widget_meta">
<h3>功能</h3>
<ul>
@% if user.is_superuser %@
<li><a href="/xadmin">管理站点</a></li>
@% endif %@
@% if user.is_authenticated %@
<li>
<a href="@% url 'django.contrib.auth.views.logout' %@">登出</a>
</li>
@% else %@
<li>
<a href="@% url 'django.contrib.auth.views.login' %@">登录</a>
</li>
@% endif %@
<li><a href="#">文章<abbr title="RSS">RSS</abbr></a></li>
</ul>
</div>
|
自定义后台登陆页面
新建mysite/templates/registration/login.html模板，将xadmin模块中的login.html复制过来，
修改其内容，改成自己想要的形式即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| @% load staticfiles %@
@% load i18n %@
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="NONE,NOARCHIVE">
<title>用户登录 - SimpleBlog</title>
<script type="text/javascript" src="@% static 'xadmin/vendor/jquery/jquery.js' %@"></script>
</head>
<body class="login">
<div class="container">
<form method="post" action="@% url 'django.contrib.auth.views.login' %@">
@% csrf_token %@
<div class="panel panel-default panel-single" id="panel-login">
<div class="panel-heading">
<h2 class="form-signin-heading">请登录</h2>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="@% static 'xadmin/js/xadmin.main.js' %@"></script>
<script type="text/javascript" src="@% static 'xadmin/js/xadmin.responsive.js' %@"></script>
<script type="text/javascript"
src="@% static 'xadmin/vendor/jquery-ui/jquery.ui.effect.js' %@"></script>
<script type="text/javascript" src="@% static 'xadmin/js/xadmin.plugin.themes.js' %@"></script>
</body>
</html>
|
这些完成后，我们打开应用，访问管理站点链接，应该可以看到如下的登录页面
登录后的效果
