在前面已经说了,如何打开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自己内部的逻辑 由于前端知识有限,暂无法修改)

4.3 页面调整!

刚开始完成页面的时候,右下角的图标显示不正常, 后来发现是因为多次导入了css  js 导致的。(在jumpserver中,其实已经到如果datatables  bootstarp 我们自定义页面的时候无需再次导入),另外要想实现自己的功能CS,可以在head里面自定义 如下(这个head_css模块是jumpserver 的base已经定义好的)

  

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

  1. 修改VCL源码实现自定义输入对话框

    来自:https://yq.aliyun.com/wenji/88428 通过修改VCL源码实现自定义输入对话框 在BCB中有两个函数可以实现输入对话框:InputBox和InputQuery,其实I ...

  2. 一个普通的 Zepto 源码分析(二) - ajax 模块

    一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...

  3. 一个普通的 Zepto 源码分析(三) - event 模块

    一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...

  4. 修改spring源码重写classloader实现项目加密

      (一)操作方法和spring源码添加修改部分 事先说明:spring源码要下载好,会有修改spring的源码操作,本文和本作者所依赖的spring项目的版本是3.1.1,spring4及以上源码对 ...

  5. 修改FFMpeg源码—捕获丢包

    概述 最近我们项目有一个需求就是解决客户端播放RTSP视频流花屏的问题,一般来说丢包就会引起花屏,导致客户端花屏的因素又有很多,比如说: 相机到服务器丢包 服务器到客户端丢包 等等... 其中服务器到 ...

  6. JVM源码分析之一个Java进程究竟能创建多少线程

    JVM源码分析之一个Java进程究竟能创建多少线程 原创: 寒泉子 你假笨 2016-12-06 概述 虽然这篇文章的标题打着JVM源码分析的旗号,不过本文不仅仅从JVM源码角度来分析,更多的来自于L ...

  7. 修改sqlarchemy源码使其支持jdbc连接mysql

    注意:本文不会将所有完整源码贴出,只是将具体的思路以及部分源码贴出,需要感兴趣的读者自己实验然后实现吆. 缘起 公司最近的项目需要将之前的部分业务的数据库连接方式改为jdbc,但由于之前的项目都使用s ...

  8. paramiko修改本分源码

    一.获取paramiko源码 环境:Python3 下载地址:https://github.com/paramiko/paramiko 使用的是 demos这个文件夹 二.修改部分源码用以登入 2.1 ...

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

    最近在做CAS配置的时候,遇到了数据源不提供密码等数据的情况下,怎样实现密码输入认证呢? 第一步:新建Java项目,根据假面算法生成CAS加密工具 出于保密需要不提供自定义的加密工具,在您的实际项目中 ...

随机推荐

  1. [转]Android 应用自动更新及6.0,7.0,8.0适配安装

    原贴:https://www.jianshu.com/p/ea42040c7ace 原贴:https://www.jianshu.com/p/ea42040c7ace 原贴:https://www.j ...

  2. word内存不足 解决办法

    word2013内存不足 解决办法具体操作如下: 尝试了很多方法和经验表示都没有效果,最后找到个有效果的分享给大家: 点击“文件”——选项——加载项“   点左下的”管理“-” 转到“ 把加载项前面的 ...

  3. 【ABAP系列】SAP ABAP Break Point

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP Break P ...

  4. elasticsearch查询操作

    #查看节点信息 curl -X GET http://localhost:9200/_nodes #打开文件数信息 curl -X GET http://localhost:9200/_nodes/s ...

  5. 关于sws安全助手企业政府版的停止维护以及无法购买(官方已公开永久可用免费序列号并将软件开源)

    sws安全助手企业政府版官方公布的永久可用系列号:XGVPP-NMH47-7TTHJ-W3FW7-8HV2C 安装程序官网下载地址:https://swssoftwareshare.gitee.io/ ...

  6. (长期更新)【机器学习实践】Pycharm编辑器的使用注意事项

    1. 写Python代码,根据PEP8风格,默认一行的长度不超过 80 个字符. 但是pycharm 默认是第 120 个字符处,故进行修改:  File→Settings→Editor→Code S ...

  7. leetcode907 Sum of Subarray Minimums

    思路: 对于每个数字A[i],使用单调栈找到A[i]作为最小值的所有区间数量,相乘并累加结果.时间复杂度O(n). 实现: class Solution { public: int sumSubarr ...

  8. OpenCV 例程

    采集图片显示视频: #include <iostream> #include <opencv2/opencv.hpp> using namespace std; using n ...

  9. 【VS开发】IPicture在指定窗口绘制图

    1.利用IPicture接口加载.显示图片 IPicture接口管理一个图片对象和它的属性.图片对象提供对Bitmap Icon Metafile的语言不相关的抽象支持.图像对象的主要接口是IPict ...

  10. docker 运行pptpd服务器

      今天试着用docker搭了一下pptpd服务器,感觉清爽不少(当然是踩坑之后的啦),特此记录.   使用的镜像: mmontagna/docker-vpn-pptp   由于是现成的镜像,所以我们 ...