xadmin是一個django的管理后台實現，使用了更加靈活的架構設計及Bootstrap UI框架， 目的是替換現有的admin，國人開發，有許多新的特性：

  • 兼容 Django Admin
  • 使用 Bootstrap 作為 UI 框架
  • 編輯頁面靈活布局
  • 主頁面儀表盤及小部件
  • 過濾器強化
  • 數據導出
  • 強大的插件機制

與django的集成

本篇以simpleblog項目為例，介紹下怎樣在django中集成xadmin

python2.7環境切換

注意，前面的教程都是在python3.4環境下開放的。 而目前為止xadmin還只能支持python2，所以我們要在此項目基礎上新建一個分支py27， 然后我們創建一個python2.7的virtual environment，切換到此環境下面即可。

添加依賴

在requirements.txt中添加如下的依賴，注意：要用到xadmin的django1.9分支

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 = (
 # ('Your Name', 'your_email@example.com'),
)
MANAGERS = ADMINS

# Application definition
INSTALLED_APPS = (
 # ...
 'xadmin',
 'crispy_forms',
 'reversion',
 # ...
)

 

添加/xadmin的鏈接

修改mysite/urls.py如下

1
2
3
4
5
6
7
8
9
10
11
12
 
#!/usr/bin/env python
# -*- encoding: utf-8 -*-
from django.conf.urls import patterns, include, url
# version模塊自動注冊需要版本控制的 Model
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
 
#!/usr/bin/env python
# -*- encoding: utf-8 -*-
"""
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):
 # 設置base_site.html的Title
 site_title = '博客管理后台'
 # 設置base_site.html的Footer
 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)
# xadmin.site.register(Tag)
# xadmin.site.register(Post)
# xadmin.site.register(Comment)
# xadmin.site.register(Evaluate)

在這里，我們將所有的model都注冊到xadmin中去，這樣后台就能自動管理它們了。 並且自定義了后台的一些菜單、標題等等。具體的定制方法可以參考xadmin的官方文檔。

添加管理后台鏈接

在mysite/templates/mysite/base.html模板中添加/xamdin的管理后台鏈接：

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

這些完成后，我們打開應用，訪問管理站點鏈接，應該可以看到如下的登錄頁面

 

登錄后的效果