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,在他的基礎上去掉了中間那一欄