在前面已經說了,如何打開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已經定義好的）
