django 自定义html5,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 %}

欢迎登录！

{% csrf_token %}

用户名：

密码：

{{msg}}

忘记密码?

新用户先注册

{% 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 %}#}

{#

{# data-class-xs="navbar content-navbar navbar-inverse navbar-xs"#}

{# data-class-sm="navbar content-navbar navbar-default navbar-xs">#}

{#

#}

{# {% view_block 'nav_toggles' %}#}

{# {% block nav_toggles %}#}

{# {% include "xadmin/includes/toggle_back.html" %}#}

{# {% endblock %}#}

{##}

{# #}

{# {% block nav_title %}{% endblock %}#}

{# #}

{#

#}

{#

#}

{#

• #}

{# {% view_block 'nav_menu' %}#}

{#

#}

{# {% view_block 'nav_form' %}#}

{# {% block nav_form %}{% endblock %}#}

{#

#}

{# {% view_block 'nav_btns' %}#}

{# {% block nav_btns %}{% endblock %}#}

{#

#}

{#

#}

{#

#}

{# {% 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,在他的基础上去掉了中间那一栏

2019年《python3自动化UI+接口》课程5月25-7月27开课主讲老师：上海-悠悠上课方式：QQ群视频在线教学上课时间：每周六、周日晚上20:30-22:30报名费：2000