修改jumpserver源码并且实现一个自定义功能模块

在前面已经说了,如何打开jumpserver的管理控制台并且自定义自己的数据模型。接下来实现一个自定义的功能模块。

先看效果!

一 定义好自己的模型(model)

  1.1 这一块儿在前一篇博文已经讲过了

二 定义好自己的app(这里注意 一定要自定义app,不要在源码上修改别人的app,因为jumperver的源码不是那么简单的。。可能用各种问题)

2.1 python manage.py startapp XXX

    通过以上步骤就可以建立自己的app

三  自定义URL

这块儿不难, 直接把我新建的app发出来。

四 自定义模板(html)

4.1 加入功能模块

  这块儿极其复杂(jumpserver 用的bootstrap)要想弄清楚逻辑 很耗时间,

  首先在_nav.html 这个模板里面,按照自己的需求加上模块,我加的如下

如果加的没问题 在前端应该看到,多出来这样一个模块

   4.2 模板页面详情

    在jumpserver里面 采用了 多页面拼接的方式,凑一个整的页面大概逻辑为

base.html(基础页)   

{% load static i18n %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>{{ JMS_TITLE }}</title>
    <link rel="shortcut icon" href="{{ FAVICON_URL }}" type="image/x-icon">
    {% include ‘_head_css_js.html‘ %}
    <link href="{% static ‘css/jumpserver.css‘ %}" rel="stylesheet">
    {% block custom_head_css_js %} {% endblock %}
</head>

<body>
<div id="wrapper">
    {% include ‘_left_side_bar.html‘ %}
    <div id="page-wrapper" class="gray-bg">
        {% include ‘_header_bar.html‘ %}
        {% block help_message %} {% endblock %}
        {% include ‘_message.html‘ %}
        {% block content %}{% endblock %}
        {% include ‘_footer.html‘ %}
        {% block scripts %}{% endblock %}
    </div>
</div>

</body>
{% include ‘_foot_js.html‘ %}
{% block custom_foot_js %} {% endblock %}
</html>

我们的自定义功能页(所有的功能页)需要继承这个模板页面

如下

{% extends ‘base.html‘ %}
{% load static %}
{% load i18n %}

{% block custom_head_css_js %}
    <link href="{% static ‘css/plugins/ztree/awesomeStyle/awesome.css‘ %}" rel="stylesheet">
    <script type="text/javascript" src="{% static ‘js/plugins/ztree/jquery.ztree.all.min.js‘ %}"></script>
    <script src="{% static ‘js/jquery.form.min.js‘ %}"></script>
{% endblock %}

{% block content %}
<div class="wrapper wrapper-content">
    <section class="content">
      <div class="row">
        <div class="col-xs-12">

        <div class="box">
        <div class="box-header">
          <h3 class="box-title">资产总表<small>(不含软件)</small></h3>
        <div align="right" style="position:relative;top:10px">
            <button type="button" class="btn btn-success" id="flushdata">点击手动刷新资产信息</button>
        </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">

            <table id="assets_table" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>主机域名</th>
                        <th>环境</th>
                        <th>操作系统类型</th>
                        <th>账号</th>
                        <th>密码</th>
                        <th>ip-内网</th>
                        <th>ip-外网</th>
                        <th>CPU</th>
                        <th>内存</th>
                        <th>描述信息</th>
                        <th>系统盘</th>
                        <th>数据盘</th>
                        <th>带宽</th>
                        <th>安全组</th>
                        <th>分组</th>
                    </tr>
                </thead>
                <tbody id="test2">

                {% for asset in assets %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td class="text-green text-bold">{{ asset.name }}</td>
                        <td>{{ asset.envir }}</td>
                        <td><a href="{% url ‘assets:detail‘ asset.id %}">{{ asset.ossys }}</a></td>

                        <td class="text-bold" >{{ asset.userid }}</td>

                        <td>{{ asset.userpasswd|default_if_none:"-" }}</td>

                        <td class="text-blue">{{ asset.ipin }}</td>

                        <td class="text-danger">{{ asset.ipout }}</td>

                        <td>{{ asset.cpu|default:"-" }}</td>

                        <td>{{ asset.mem }}</td>

                        <td>{{ asset.desc }}</td>

                    <td>{{ asset.sysdisk }}</td>
                    <td>{{ asset.datadisk }}</td>
                    <td>{{ asset.bandwidth }}</td>
                    <td>{{ asset.secgroup }}</td>
                    <td>{{ asset.group }}</td>

                    </tr>

                {% empty %}
                <tr>没有数据</tr>
                {% endfor %}

                </tbody>
                <tfoot>
                    <tr>
                                                <th>序号</th>
                        <th>主机域名</th>
                        <th>环境</th>
                        <th>操作系统类型</th>
                        <th>账号</th>
                        <th>密码</th>
                        <th>ip-内网</th>
                        <th>ip-外网</th>
                        <th>CPU</th>
                        <th>内存</th>
                        <th>描述信息</th>
                        <th>系统盘</th>
                        <th>数据盘</th>
                        <th>带宽</th>
                        <th>安全组</th>
                        <th>分组</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
        </div>
    <!-- /.col -->
      </div>
    <!-- /.row -->
    </section>
</div>

{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
    alert("你好啊")
    $("#assetsall2").addClass("active");
    $("#assetsall1").addClass("active");
     alert("执行完成");
        console.log("执行完成1");
    })
</script>
{% endblock %}

这块儿东西是我们自己写的页面  需要完成什么功能都需要在这里实现!!!  这里有2个大坑 

        1.我们自己写的页面 点击了之后发现右边确实正常显示了,但是左侧菜单栏刷新了,并没有停留在刚刚点击的那个栏目上!!!!

  原因是因为 没有 class=‘active‘类, 这块儿花费了大量时间。 最后解决办法是在页面加JQ  如下

<script>
    $(document).ready(function() {
    alert("你好啊")
    $("#assetsall2").addClass("active");
    $("#assetsall1").addClass("active");
     alert("执行完成");
        console.log("执行完成1");
    })
</script>

    这里面又有个坑是之前不知道的,   在自定页面没法直接写JS,必须在上一级页面定义block...(这个貌似很不合理),

  在jumpserver环境中的意思就是 我的页面继承base.html,那么base.html里面就必须协商block的script模块

另外  目前只能实现如果要铆钉二级目录,那么一级目录也必须铆钉。。(jumpserver自己内部的逻辑 由于前端知识有限,暂无法修改)

至此,就完成了jumpserver的功能 模块自定义  功能具体实现什么内容 已经页面的优化 。。后续。。

  

原文地址:https://www.cnblogs.com/ZFBG/p/11518987.html

时间: 2024-10-10 06:38:44

修改jumpserver源码并且实现一个自定义功能模块的相关文章

修改CAS源码是的基于DB的认证方式配置更灵活

最近在做CAS配置的时候,遇到了数据源不提供密码等数据的情况下,怎样实现密码输入认证呢? 第一步:新建Java项目,根据假面算法生成CAS加密工具 出于保密需要不提供自定义的加密工具,在您的实际项目中,你可采用cas默认的加密方式比如md5. 第二步:修改CAS源码 找到cas-server-support-jdbc子模块找到包路径cas-server-support-jdbc\src\main\java\org\jasig\cas\adaptors\jdbc\,在复制一份QueryDataba

openwrt路由器更换了Flash之后需要修改的源码

假如我使用的是WR703N,改为8M内存: 1 修改openwrt/target/linux/ar71xx/image/Makefile文件 $(eval $(call SingleProfile,TPLINK-LZMA,64kraw,TLMR3420V2,tl-mr3420-v2,TL-MR3420-v2,ttyS0,115200,0x34200002,1,4Mlzma)) #$(eval $(call SingleProfile,TPLINK-LZMA,64kraw,TLWR703,tl-w

修改extjs源码关闭按钮样式

首先通过文件引用找到extjs的样式文件: <link rel="stylesheet" type="text/css" href="<%=basePath%>/publicresource/extlib/resources/css/ext-all.css" /> 打开ext-all.css在文件最后添加下面代码 .x-tool-close {          background-position:-2 -380px;

STL源码之实现一个简易的Vector容器

STL源码之实现一个简易的Vector容器 这里需要的基础知识主要是类模板和函数模板,以及一个C++内存分配的技术allocator类,它提供可感知类型的内存分配,这个类支持一个抽象接口,以分配内存并随后使用该内存保存对象. 使用allocator类,首先应用allocator类建立一个allocator对象,然后使用该对象你可以分配内存,释放内存,构造你需要的对象,释放不要的对象. template<class T>allocator<T> Vector<T>::al

jQuery 源码分析(十九) DOM遍历模块详解

jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装和扩展,用于在DOM树中遍历父元素.子元素和兄弟元素. 可以通过jQuery的实例来访问,方法如下: parent()             ;获取匹配元素的父元素 parents(selector)         ;获取匹配元素的所有祖先元素                        ;s

MVC源码分析 - ModelBinder绑定 / 自定义数据绑定

这几天老感觉不对, 总觉得少点什么, 今天才发现, 前面 3 里面, 在获取Action参数信息的时候,  少解析了. 里面还有一个比较重要的东西. 今天看也是一样的. 在 InvokeAction() 方法里面, 有一句代码: IDictionary<string, object> parameterValues = this.GetParameterValues(controllerContext, actionDescriptor); 这个是用来获取参数的. 那么参数是不是随便获取呢?

修改flume源码,使其HTTPSource具备访问路径功能

目前有一个需求,就是Flume可以作为一个类似于tomcat的服务器,可以通过post请求进行访问,并且路径需要:ip:port/contextPath格式. 经过一些资料获悉,httpSource只是httpSource的一个玩具工具,可以说毛坯版,目前仅仅支持的是按照ip:port访问,并不具备servlet这种功能. 那么打开源码看一下: 这上面便是httpsource源码了,可以看到主要是5个类:HTTPBadRequestException,HTTPSource,HTTPSourceC

修改Launcher3源码在ADT(Eclipse)上调试

Android4.4上的Launcher3源码:http://download.csdn.net/detail/deng0zhaotai/8281391 修改后能在Eclipse上调试的Android4.4 Launcher3代码:http://download.csdn.net/detail/deng0zhaotai/8284961 可以下载两个工程进行对比就知道有哪些地方修改过的,需要修改的地方 1.删除两个文件src/com/android/launcher3/LauncherBackup

pc单机版雷电修改器源码

记得以前第一次接触电脑玩的第一个游戏就是雷电,那时候觉得这游戏真好玩,很过瘾.闲来没事干,所以想重温一下游戏,(当时玩的不是这个版本的雷电),那时候是和小伙伴一起玩的,可惜现在找不到那种感觉了. 现在玩单机游戏没有以前那种耐心了,现在只想开局就999级,金币99999. 所以就写了这么一个简单的修改器,有兴趣的朋友可以研究下. 可以修改生命数量,炸弹数量,修改射出的武器效果. 那个武器我是观察生命的基址得出来的,一般单机游戏找到生命值的基址,其他类似炸弹数和武器都是在附近的. 这个是红色散弹 绿