python测试开发django-54.xadmin添加自定义页面

前言

xadmin后台如何添加一个自己写的页面呢？如果仅仅是在GlobalSettings添加url地址的话，会丢失左侧的导航菜单和顶部的页面,和整体的样式不协调。

新增页面后希望能保留原来的样式，只改主体部分显示。

base_site.html模板继承

在自己的app下新增一个页面模板，继承xadmin里面的 base_site.html

自己写的html在app名称/teamplates目录,使用extends继承母模板{% extends 'xadmin/base_site.html' %},重写里面的content 这个block,格式如下

{% extends 'xadmin/base_site.html' %}

{% block content %}

{#  注释，自己需要写的页面，html代码放到这里就可以了#}

{% endblock %}

比如，我把登录的页面嵌套在里面，保存为login_xx.html

{% extends 'xadmin/base_site.html' %}

{% block content %}

<div style="margin: 15% 40%;">
    <h1>欢迎登录！</h1>
    <form action="/login_test/" method="post">
       {% csrf_token %}
        <p>
            <label for="id_username">用户名：</label>
            <input type="text" id="id_username" name="username" placeholder="用户名" autofocus required />
        </p>
        <p>
            <label for="id_password">密码：</label>
            <input type="password" id="id_password" placeholder="密码" name="password" required >
        </p>
        <p style="color:red">
            {{msg}}
        </p>
        <input type="submit" value="确定">
        <a href="/forget">忘记密码?</a>
    </form>
   <br><br>
    <a href="/registerx">新用户先注册</a>

</div>

{% endblock %}

BaseAdminView 类

这是所有 AdminView 类的基类， 它继承于 BaseAdminObject 和 django.views.generic.View。

Xadmin 框架的核心类， 所有的 AdminView 类需要继承于这个类。 Xadmin 和 Django Admin 最明显的区别是每一个请求将导致一个 AdminView 类的实例被创建， 也是基于 class 的 view 方式， 在 Django 1.3 中实现。 可以参考 Django 官方文档 Class-based generic views https://docs.djangoproject.com/en/1.4/topics/class-based-views/。

基于 class 的 view 有很多的好处。 首先， 无论何时进来请求， 都会创建一个具有当前请求的相关变量的实例来响应。 当扩展一个类或重写父类方法时， 这种方式很有用。

其次， 基于 class 的 view 方式很容易去实现一个插件方法或动态加载插件， 因为每一个 AdminView 实例需要根据自身情况加载一些指定的插件， 详情参见 BaseAdminPlugin 类。

实现一个定制化的 AdminView 类是非常简单的， 举例如下：

from xadmin.sites import site
from xadmin.views import BaseAdminView

class MyAdminView(BaseAdminView):

    def get(self, request, *args, **kwargs):
        pass

site.register_view(r'^me_test/$', MyAdminView, name='my_test')

这样您就可以通过 my_test/来访问这个视图了。 同时， Xadmin 提供了一些通用的 AdminView 类， 它们是：

• CommAdminView 类： 通用用户界面的基本 view， 提供 Xadmin 通用用户界面（比如目录）需要的数据；

• ModelAdminView 类： 核心类中的一个， 提供基于 Model 的 AdminView 类；

xadmin注册信息

xadmin.py代码如下

import xadmin
from xadmin import views
from .views import TestView   # 导入试图类

class GlobalSettings(object):
    site_title = "开发平台"         # title内容
    site_footer = "yoyo"            # 底部@后面
    # menu_style = "accordion"      # 菜单折叠

    # 自定义菜单
    def get_site_menu(self):
        return [
            {
                'title': '自定义菜单',
                'icon': 'fa fa-bars',       # Font Awesome图标
                'menus':(
                    {
                        'title': 'bug统计',
                        'icon': 'fa fa-bug',
                        'url': "/xadmin/bug"

                    },
                    {
                        'title': 'a发邮件',
                        'icon': 'fa fa-envelope-o',
                        'url': self.get_model_url(Student, 'changelist'),
                    }
                )
            },

        ]

xadmin.site.register(views.CommAdminView, GlobalSettings)
xadmin.site.register_view(r'bug/$', TestView, name='bug_report')

views视图

views.py代码如下

from xadmin.views import CommAdminView

class TestView(CommAdminView):
    def get(self, request):
        context = super().get_context()     # 这一步是关键，必须super一下继承CommAdminView里面的context，不然侧栏没有对应数据
        title = "bug详情"     #定义面包屑变量
        context["breadcrumbs"].append({'url': '/cwyadmin/', 'title': title})   #把面包屑变量添加到context里面
        context["title"] = title   #把面包屑变量添加到context里面
        return render(request, 'login_xx.html', context)   #最后指定自定义的template模板，并返回context

显示效果

打开xadmin后台页面查看显示效果

这里会有个问题，页面多了一行书签这个div，接下来就想办法去掉

页面优化

页面优化想到了两个思路，第一个是加入jquery脚本，定位到这个div后删除remove() ，第二个方法是从继承的base_site.html里面删掉对应部分代码，这里我用第二个思路解决了

先把xadmin里面的base_site.html找到这段代码注释掉

{#      {% block content-nav %}#}
{#      <div class="navbar content-navbar navbar-default navbar-xs" data-toggle="breakpoint"#}
{#        data-class-xs="navbar content-navbar navbar-inverse navbar-xs"#}
{#        data-class-sm="navbar content-navbar navbar-default navbar-xs">#}
{#        <div class="navbar-header">#}
{#          {% view_block 'nav_toggles' %}#}
{#          {% block nav_toggles %}#}
{#          {% include "xadmin/includes/toggle_back.html" %}#}
{#          {% endblock %}#}
{##}
{#          <a class="navbar-brand" data-toggle="collapse" data-target="#top-nav .navbar-collapse">#}
{#            {% block nav_title %}{% endblock %}#}
{#          </a>#}
{#        </div>#}
{#        <div class="navbar-collapse collapse">#}
{#          <ul class="nav navbar-nav">#}
{#            {% view_block 'nav_menu' %}#}
{#          </ul>#}
{#          {% view_block 'nav_form' %}#}
{#          {% block nav_form %}{% endblock %}#}
{#          <div class="navbar-btn pull-right hide-xs">#}
{#            {% view_block 'nav_btns' %}#}
{#            {% block nav_btns %}{% endblock %}#}
{#          </div>#}
{#        </div>#}
{#      </div>#}
{#      {% endblock %}#}

注掉之后刷新页面，发现没有了，也就是找到了是 {% block content-nav %}这段控制的，注掉的这部分记得改回来，要不然其它页面也没有了。

那接下来重写content-nav这个block就可以了

{% extends 'xadmin/base_site.html' %}

{% block content-nav %}
{% endblock %}#}

{% block content %}

{#  注释，自己需要写的页面，html代码放到这里就可以了#}

{% endblock %}

最终显示效果

备注：参考的这篇博客，https://blog.csdn.net/killersdz/article/details/89018834,在他的基础上去掉了中间那一栏