I have already said, jumpserver how to open the management console and customize your own data model. Then implement a custom function module.
Look at the results!
A definition of their own model (model)
1.1 This together previous blog post has been talked about
Two define their own app (here we must note that the custom app, do not modify the source code on someone else's app, because jumperver source code is not so simple .. possible to use a variety of issues)
2.1 python manage.py startapp XXX
Through the above steps you can build your own app
Three custom URL
This child is not difficult, I directly issued to the new app.
Four custom template (html)
4.1 added the function module
This child is extremely complex (jumpserver with bootstrap) in order to figure out the logic is very time-consuming,
First, _nav.html inside this template, add modules according to their needs, I added the following
If the addition should see no problem in the front, so more out of a module
4.2 template page details
In jumpserver which uses a multi-page mosaic way, we collected a whole page about logic
base.html (base page)
{% 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>
Our customization page (all the features pages) need to extend this template page
as follows
{% 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>Host domain name </ TH > < TH > environment </ TH > < TH > operating system type </ TH > < TH > Account </ TH > < TH > Password </ TH > < TH > ip- network </ TH > < TH > IP- extranet </ TH > < TH > the CPU </ TH > < TH >Memory </TH > < TH > description </ TH > < TH > system disk </ TH > < TH > dial </ TH > < TH > Bandwidth </ TH > < TH > security group </ TH > < TH > Packet </ 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 > ID </ TH > < TH > host domain name </ TH > < TH > environment </ TH > < TH > operating system type </ TH > < TH > account </ TH > < TH > password </ TH > <TH > ip- network</ TH > < TH > IP- extranet </ TH > < TH > the CPU </ TH > < TH > memory </ TH > < TH > description </ TH > < TH > system disk </ TH > < TH > dial </ TH > < TH > Bandwidth </ TH > < TH >Security Group </ TH> <th>分组</th> </tr> </tfoot> </table> </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> </section> </div> {% endblock %} {% block scripts %} <script> $ (the Document) .ready ( function () { Alert ( " Hello " ) $ ( " # assetsall2 " ) .addClass ( " the Active " ); $ ( " # assetsall1 " ) .addClass ( " the Active " ); Alert ( " execution is complete " ); the console.log ( " execution is complete. 1 " ); }) </ Script > {%}% endblock
This is what our children write their own pages need to complete what features are needed to achieve here! ! ! There are two pit
1. After write our own page, click on the right found the show really normal, but the left side of the menu bar to refresh, and did not stay on the column just click! ! ! !
The reason is because there is no class = 'active' class, this child has spent a lot of time. The last solution is to add JQ following page
<Script>
$ (the Document) .ready (function () {
Alert ( "Hello")
$ ( "# assetsall2") addClass ( "the Active");.
. $ ( "# assetsall1") addClass ( "the Active" );
Alert ( "execution is complete");
the console.log ( "execution is complete. 1");
})
</ Script>
There is another pit did not know before, and in the custom page can not write directly to JS, must be on a page definition block ... (this looks like a very unreasonable),
Meaning that my pages inherit base.html in jumpserver environment, then there must be consultation base.html block of script modules
Also present can only be achieved if you want to rivet two directory, a directory must also be rivets. . (Jumpserver own internal logic due to limited knowledge of front-end, temporarily can not be modified)
So far, we completed jumpserver function module customization concrete realization of what has been page optimization. . Follow-up. .