django实现Linux运维管理平台
老早之前就想做一个运维管理平台的项目了,但是一直没沉下来去做,上半年的时候毕设选择了这个课题,想着逼自己一把,不管做出来的怎么样,先把它搞起来.....
django的工作原理:
文字说明:
(1)Web服务器收到用户的http请求。
(2) Django通过URL控制器来判断对应的视图(View)函数从而对http请求做处理。
(3)视图函数调用相应的模型来存取数据、调用相应的模板把数据展示出来。
(4)视图函数最终返回一个http的响应给Web服务器。
(5)Web服务器把接收到的响应数据发给浏览器,浏览器把响应渲染展示出来。
我个人独自开发项目的功能模块图:
我在django项目下面创建了多个app,分别负责独立的功能。
一、用户注册登录:
视图:
# coding:utf-8 from django.shortcuts import render,render_to_response import os import commands from django.http import HttpResponse,HttpResponseRedirect from .models import monitors,User,question,Experience from django import forms from django.template import RequestContext from django.contrib import auth from cmdb.models import Information from webssh.forms import websshform #用户注册 def register(request): if request.method == 'POST': username = request.POST['username'] password = request.POST['password'] try: registusername = User.objects.filter(username=username).get().username registered="已经注册了" return render(request,'register.html',{'registusername':registusername,'registered':registered}) except: registAdd = User.objects.create(username=username,password=password) Registered="注册成功!!!" return render(request,'register.html',{'registAdd':registAdd,'Registered':Registered}) else: return render(request,'register.html') return render(request,'register.html') #用户登录 def login(request): if request.method == 'POST': username = request.POST.get("username","") password = request.POST.get("password","") user = User.objects.filter(username__exact = username,password__exact = password) if user: #如果用户匹配成功 response = HttpResponseRedirect('/index/') #重定向到index response.set_cookie('cookie_username',username,36) #设置cookie return response #把index页面输出 else: nopass="用户名或者密码输入错误" #没有匹配成功 return render(request,'login.html',{'nopass':nopass}) return HttpResponse('yes') return render(request,'login.html') #用户注销登录 def logout(request): return render(request,'login.html') response.delete_cookie('cookie_username') #删除cookie_username对应的用户的cookie return response
模板templates:
登录页面: {% load staticfiles %} <!DOCTYPE HTML> <html> <head> <title>Login</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- Bootstrap Core CSS --> <link href="{% static "css/bootstrap.min.css"%}" rel='stylesheet' type='text/css' /> <!-- Custom CSS --> <link href="{% static "css/style.css" %}" rel='stylesheet' type='text/css' /> <link href="(% static "css/font-awesome.css" %}" rel="stylesheet"> <!-- jQuery --> <script src="{% static "js/jquery.min.js" %}"></script> <link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <script src="{% static "js/bootstrap.min.js" %}"></script> </head> <body id="login"> <div class="login-logo"> <!--a href="index.html">linux 运维管理平台<!--img src="{% static "images/logo.png" %}" alt=""/--></a--> </div> <h2 class="form-heading"><font size="15" face="Cicle">Linux运维管理平台登录页面</font></h2> <div class="app-cam"> {{ nopass }}{{ deltxt }} <form action="/login/" method="post"> {% csrf_token %} <input type="text" class="text" value="username" name="username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'username';}"> <input type="password" value="password" name="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'password';}"> <div class="submit"><input type="submit" onclick="myFunction()" value="登录"></div> <div class="login-social-link"> <a href="/login/" class="facebook"> 登录取消 </a> <a href="/register/" class="twitter"> 用户注册 </a> </div> <!--ul class="new"> <li class="new_left"><p><a href="#">忘记密码</a></p></li> <li class="new_right"><p><a href="/register/"> 注册</a></p></li> <div class="clearfix"></div> </ul--> </form> </div> <div class="copy_layout login"> <p>Copyright © 付炜超Linux运维管理系统登录界面 </p> </div> </body> </html>
注册页面:
登录页面代码: <!DOCTYPE HTML> <html> <head> <title>Register</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- Bootstrap Core CSS --> <link href="{% static "css/bootstrap.min.css" %}" rel='stylesheet' type='text/css' /> <!-- Custom CSS --> <link href="{% static "css/style.css" %}" rel='stylesheet' type='text/css' /> <link href="{% static "css/font-awesome.css" %}" rel="stylesheet"> <!-- jQuery --> <script src="{% static "js/jquery.min.js" %}"></script> <link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <!-- Bootstrap Core JavaScript --> <script src="{% static "js/bootstrap.min.js" %}"></script> </head> <body id="login"> <div class="login-logo"> <!--a href="index.html"><img src="{%static "images/logo.png"%}" alt=""/></a--> </div> <h2 class="form-heading"><font size="15" face="Cicle">Linux运维管理平台注册页面</font> </h2> <form class="form-signin app-cam" action="/register/" method="post">{% csrf_token %} <p> {{ registusername }} {{ registered }}</p> <p> {{ registAdd }} {{ Registered }}</p> <p> 请输入您的想要注册的账号和密码</p> <input type="text" class="form-control1" placeholder="username" name="username" autofocus=""> <input type="password" class="form-control1" placeholder="password" name="password" > <label class="checkbox-custom check-success"> </label> <button class="btn btn-lg btn-success1 btn-block" type="submit">Submit</button> <div class="registration"> Already Registered. <a class="" href="/login/"> Login </a> </div> </form> <div class="copy_layout login register"> <p>Copyright © 付炜超运维管理系统的注册页 </p> </div> </body> </html>
注册页面:
二、 首页
视图(views):
def index(request): date=commands.getoutput('date') area=commands.getoutput('sh /home/zqxt_form2/monitor/ip.sh 2>/dev/null ') weather=commands.getoutput('python /home/zqxt_form2/monitor/weather.py ') username = request.COOKIES.get('cookie_username','') if username: return render_to_response('index.html',{'date': date,'area': area,'weather':weather,'username':username}) else: return render(request,'login.html')
模板(templates):
{% load staticfiles %} <!DOCTYPE HTML> <html> <head> <title>linux运维管理平台</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- Bootstrap Core CSS --> <link href="{% static "css/bootstrap.min.css" %}" rel='stylesheet' type='text/css' /> <!-- Custom CSS --> <link href="{% static "css/style.css" %}" rel='stylesheet' type='text/css' /> <!-- Graph CSS --> <link href="{% static "css/lines.css" %}" rel='stylesheet' type='text/css' /> <link href="{% static "css/font-awesome.css" %}" rel="stylesheet"> <script src="{% static "js/jquery.min.js" %}"></script> <link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <link href="{% static "css/custom.css"%}" rel="stylesheet"> <script src="{% static "js/metisMenu.min.js"%}"></script> <script src="{% static "js/custom.js" %}" ></script> <script src="{% static "js/d3.v3.js" %}"></script> <script src="{% static "js/rickshaw.js" %}"></script> </head> <body> <div id="wrapper"> <nav class="top1 navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">付炜超的运维管理平台</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">linux运维管理平台</a> </div> <!-- /.navbar-header --> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-comments-o"></i><span class="badge">1</span></a> <ul class="dropdown-menu"> <li class="dropdown-menu-header"> <strong>Messages</strong> <div class="progress thin"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (success)</span> </div> </div> </li> <li class="avatar"> <a href="#"> <img src="{% static "images/1.png" %}" alt=""/> <div>New message</div> <small>1 minute ago</small> <span class="label label-info">NEW</span> </a> </li> <li class="dropdown-menu-footer text-center"> <a href="#">View all messages</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown"><img src="{% static "images/1.png" %}"><span class="badge"></span></a><font size="2"face="仿宋" color="blue" >`username`</font> <ul class="dropdown-menu"> <!--li class="dropdown-menu-header text-center"> <strong>Account</strong> </li> <li class="m_2"><a href="#"><i class="fa fa-bell-o"></i> Updates <span class="label label-info">42</span></a></li> <li class="m_2"><a href="#"><i class="fa fa-envelope-o"></i> Messages <span class="label label-success">42</span></a></li> <li class="m_2"><a href="#"><i class="fa fa-tasks"></i> Tasks <span class="label label-danger">42</span></a></li> <li><a href="#"><i class="fa fa-comments"></i> Comments <span class="label label-warning">42</span></a></li--> <li class="dropdown-menu-header text-center"> <strong>用户</strong> </li> <li class="m_2"><a href="/deluser/"><i class="fa fa-user"></i> 删除用户</a></li> <!--li class="m_2"><a href="#"><i class="fa fa-wrench"></i> Settings</a></li> <li class="m_2"><a href="#"><i class="fa fa-usd"></i> Payments <span class="label label-default">42</span></a></li> <li class="m_2"><a href="#"><i class="fa fa-file"></i> Projects <span class="label label-primary">42</span></a></li> <li class="divider"></li> <li class="m_2"><a href="#"><i class="fa fa-shield"></i> 删除用户</a></li--> <li class="m_2"><a href="/logout/"><i class="fa fa-lock"></i> 注销登录</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" value="Search..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search...';}"> </form> <div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse"> <ul class="nav" id="side-menu"> <li> <a href="/webssh/"><i class="fa fa-dashboard fa-fw nav_icon"></i>webssh</a> </li> <li> <a href="#"><i class="fa fa-laptop nav_icon"></i>服务器资产信息<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="/admin/cmdb/information/">服务器资产信息后台编辑</a> </li> </ul> <ul class="nav nav-second-level"> <li> <a href="/server/">服务器资产信息前端展示</a> </li> </ul> </li> <li> <a href="#"><i class="fa fa-indent nav_icon"></i>服务器性能监控<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="/monitort/">服务器监控页面</a> </li> <li> <a href="/monitorset/">报警设置页面</a> </li> <!--li> <a href="/monitor/disk/">磁盘监控图示</a> </li--> </ul> </li> <li> <!--a href="#"><i class="fa fa-envelope nav_icon"></i>产品上线<span class="fa arrow"></span></a--> <a href="#"><i class="fa fa-flask nav_icon"></i>产品上线<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="/testRelease/">测试环境发布</a> </li> <li> <a href="/formalRelease/">正式环境发布</a> </li> </ul> <!-- /.nav-second-level --> </li> <li> <!--a href="widgets.html"><i class="fa fa-flask nav_icon"></i>留白</a--> </li> <li> <a href="#"><i class="fa fa-check-square-o nav_icon"></i>服务器批量管理<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="/servers/">服务器批量管理</a> </li> <li> <a href="/program/">程序管理</a> </li--> <li> <a href="/filersync/">文件同步</a> </li--> </ul> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="fa fa-table nav_icon"></i>生产经验总结<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="/admin/">后台编辑</a> </li> </ul> <ul class="nav nav-second-level"> <li> <a href="/questions/">疑难问题</a> </li> </ul> <ul class="nav nav-second-level"> <li> <a href="/Experience/">心得体会</a> </li> </ul> <!-- /.nav-second-level --> </li> <li> <a href="#"><i class="fa fa-sitemap fa-fw nav_icon"></i>日志管理界面<span class="fa arrow"></span></a> <ul class="nav nav-second-level"> <li> <a href="/linuxlog/">Linux系统日志</a> </li> <li> <a href="/servicelog/">应用程序日志</a> </li> </ul> </li> </ul> </div> </div> </nav> <!--div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div--> <div id="page-wrapper"> <div class="graphs"> <div class="col_3"> <div class="col-md-3 widget widget1"> <div class="r3_counter_box"> <i class="pull-left fa fa-thumbs-up icon-rounded"></i> <div class="stats"> <h5><strong>45%</strong></h5> <span>新订单数</span> </div> </div> </div> <div class="col-md-3 widget widget1"> <div class="r3_counter_box"> <i class="pull-left fa fa-users user1 icon-rounded"></i> <div class="stats"> <h5><strong>1019</strong></h5> <span>今天的访问数</span> </div> </div> </div> <div class="col-md-3 widget widget1"> <div class="r3_counter_box"> <i class="pull-left fa fa-comment user2 icon-rounded"></i> <div class="stats"> <h5><strong>1012</strong></h5> <span>新增用户</span> </div> </div> </div> <div class="col-md-3 widget"> <div class="r3_counter_box"> <i class="pull-left fa fa-dollar dollar1 icon-rounded"></i> <div class="stats"> <h5><strong>$450</strong></h5> <span>一天的收入</span> </div> </div> </div> <div class="clearfix"> </div> </div> <div class="col_1"> <div class="col-md-4 span_7"> <div class="cal1 cal_2"><div class="clndr"><div class="clndr-controls"><div class="clndr-control-button"><p class="clndr-previous-button">previous</p></div><div class="month">July 2015</div><div class="clndr-control-button rightalign"><p class="clndr-next-button">next</p></div></div><table class="clndr-table" border="0" cellspacing="0" cellpadding="0"><thead><tr class="header-days"><td class="header-day">S</td><td class="header-day">M</td><td class="header-day">T</td><td class="header-day">W</td><td class="header-day">T</td><td class="header-day">F</td><td class="header-day">S</td></tr></thead><tbody><tr><td class="day adjacent-month last-month calendar-day-2015-06-28"><div class="day-contents">28</div></td><td class="day adjacent-month last-month calendar-day-2015-06-29"><div class="day-contents">29</div></td><td class="day adjacent-month last-month calendar-day-2015-06-30"><div class="day-contents">30</div></td><td class="day calendar-day-2015-07-01"><div class="day-contents">1</div></td><td class="day calendar-day-2015-07-02"><div class="day-contents">2</div></td><td class="day calendar-day-2015-07-03"><div class="day-contents">3</div></td><td class="day calendar-day-2015-07-04"><div class="day-contents">4</div></td></tr><tr><td class="day calendar-day-2015-07-05"><div class="day-contents">5</div></td><td class="day calendar-day-2015-07-06"><div class="day-contents">6</div></td><td class="day calendar-day-2015-07-07"><div class="day-contents">7</div></td><td class="day calendar-day-2015-07-08"><div class="day-contents">8</div></td><td class="day calendar-day-2015-07-09"><div class="day-contents">9</div></td><td class="day calendar-day-2015-07-10"><div class="day-contents">10</div></td><td class="day calendar-day-2015-07-11"><div class="day-contents">11</div></td></tr><tr><td class="day calendar-day-2015-07-12"><div class="day-contents">12</div></td><td class="day calendar-day-2015-07-13"><div class="day-contents">13</div></td><td class="day calendar-day-2015-07-14"><div class="day-contents">14</div></td><td class="day calendar-day-2015-07-15"><div class="day-contents">15</div></td><td class="day calendar-day-2015-07-16"><div class="day-contents">16</div></td><td class="day calendar-day-2015-07-17"><div class="day-contents">17</div></td><td class="day calendar-day-2015-07-18"><div class="day-contents">18</div></td></tr><tr><td class="day calendar-day-2015-07-19"><div class="day-contents">19</div></td><td class="day calendar-day-2015-07-20"><div class="day-contents">20</div></td><td class="day calendar-day-2015-07-21"><div class="day-contents">21</div></td><td class="day calendar-day-2015-07-22"><div class="day-contents">22</div></td><td class="day calendar-day-2015-07-23"><div class="day-contents">23</div></td><td class="day calendar-day-2015-07-24"><div class="day-contents">24</div></td><td class="day calendar-day-2015-07-25"><div class="day-contents">25</div></td></tr><tr><td class="day calendar-day-2015-07-26"><div class="day-contents">26</div></td><td class="day calendar-day-2015-07-27"><div class="day-contents">27</div></td><td class="day calendar-day-2015-07-28"><div class="day-contents">28</div></td><td class="day calendar-day-2015-07-29"><div class="day-contents">29</div></td><td class="day calendar-day-2015-07-30"><div class="day-contents">30</div></td><td class="day calendar-day-2015-07-31"><div class="day-contents">31</div></td><td class="day adjacent-month next-month calendar-day-2015-08-01"><div class="day-contents">1</div></td></tr></tbody></table></div></div> </div> <div class="col-md-4 span_8"> <div class="activity_box"> <div class="scrollbar" id="style-2"> <div class="activity-row"> <div class="col-xs-1"><i class="fa fa-thumbs-up text-info icon_13"> </i> </div> <div class="col-xs-3 activity-img"><img src="{% static "images/1.png"%}" class="img-responsive" alt=""/></div> <div class="col-xs-8 activity-desc"> <h5><a href="#">Lorem Ipsum</a> liked <a href="#">random</a></h5> <p>Lorem Ipsum is simply dummy</p> <h6>8:03</h6> </div> <div class="clearfix"> </div> </div> <div class="activity-row"> <div class="col-xs-1"><i class="fa fa-comment text-info"></i> </div> <div class="col-xs-3 activity-img"><img src="{% static "images/1.png" %}" class="img-responsive" alt=""/></div> <div class="col-xs-8 activity-desc"> <h5><a href="#">simply random</a> liked <a href="#">passages</a></h5> <p>Lorem Ipsum is simply dummy</p> <h6>8:03</h6> </div> <div class="clearfix"> </div> </div> <div class="activity-row"> <div class="col-xs-1"><i class="fa fa-check text-info icon_11"></i></div> <div class="col-xs-3 activity-img"><img src="{% static "images/1.png" %}" class="img-responsive" alt=""/></div> <div class="col-xs-8 activity-desc"> <h5><a href="#">standard chunk</a> liked <a href="#">model</a></h5> <p>Lorem Ipsum is simply dummy</p> <h6>8:03</h6> </div> <div class="clearfix"> </div> </div> <div class="activity-row1"> <div class="col-xs-1"><i class="fa fa-user text-info icon_12"></i></div> <div class="col-xs-3 activity-img"><img src="{% static "images/1.png" %}" class="img-responsive" alt=""/></div> <div class="col-xs-8 activity-desc"> <h5><a href="#">perspiciatis</a> liked <a href="#">donating</a></h5> <p>Lorem Ipsum is simply dummy</p> <h6>8:03</h6> </div> <div class="clearfix"> </div> </div> </div> </div> </div> <div class="col-md-4 stats-info"> <div class="panel-heading"> <h4 class="panel-title">Browser Stats</h4> </div> <div class="panel-body"> <ul class="list-unstyled"> <li>Google Chrome<div class="text-success pull-right">12%<i class="fa fa-level-up"></i></div></li> <li>Firefox<div class="text-success pull-right">15%<i class="fa fa-level-up"></i></div></li> <li>Internet Explorer<div class="text-success pull-right">18%<i class="fa fa-level-up"></i></div></li> <li>Safari<div class="text-danger pull-right">17%<i class="fa fa-level-down"></i></div></li> <li>Opera<div class="text-danger pull-right">10%<i class="fa fa-level-down"></i></div></li> <li>Mobile & tablet<div class="text-success pull-right">14%<i class="fa fa-level-up"></i></div></li> <li class="last">Others<div class="text-success pull-right">5%<i class="fa fa-level-up"></i></div></li> </ul> </div> </div> <div class="clearfix"> </div> </div> <div class="span_11"> <div class="col-md-6 col_4"> <div class="map_container"><div id="vmap" style="width: 100%; height: 400px;"></div></div> <!----Calender --------> <link rel="stylesheet" href="{% static "css/clndr.css" %}" type="text/css" /> <script src="{% static "js/underscore-min.js" %}" type="text/javascript"></script> <script src= "{% static "js/moment-2.2.1.js" %}" type="text/javascript"></script> <script src="{% static "js/clndr.js" %}" type="text/javascript"></script> <script src="{% static "js/site.js" %}" type="text/javascript"></script> <!----End Calender --------> </div> <div class="col-md-6 col_5"> <div id="chart_container"> <div id="chart"></div> <div id="slider"></div> <script> var seriesData = [ [], [], [], [], [] ]; var random = new Rickshaw.Fixtures.RandomData(50); for (var i = 0; i < 75; i++) { random.addData(seriesData); } var graph = new Rickshaw.Graph( { element: document.getElementById("chart"), renderer: 'multi', dotSize: 5, series: [ { name: 'temperature', data: seriesData.shift(), color: '#AFE9FF', renderer: 'stack' }, { name: 'heat index', data: seriesData.shift(), color: '#FFCAC0', renderer: 'stack' }, { name: 'dewpoint', data: seriesData.shift(), color: '#555', renderer: 'scatterplot' }, { name: 'pop', data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y / 4 } }), color: '#555', renderer: 'bar' }, { name: 'humidity', data: seriesData.shift().map(function(d) { return { x: d.x, y: d.y * 1.5 } }), renderer: 'line', color: '#ef553a' } ] } ); graph.render(); var detail = new Rickshaw.Graph.HoverDetail({ graph: graph }); </script> </div> <link href="{% static "css/jqvmap.css" %}" rel='stylesheet' type='text/css' /> <script src="{% static "js/jquery.vmap.js" %}"></script> <script src="{% static "js/jquery.vmap.sampledata.js" %}" type="text/javascript"></script> <script src="{% static "js/jquery.vmap.world.js" %}" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: '#333333', color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', enableZoom: true, showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial' }); }); </script> </div> <div class="clearfix"> </div> </div> <div class="content_bottom"> <div class="col-md-8 span_3"> <div class="bs-example1" data-example-id="contextual-table"> <table class="table"> <thead> <tr> <th>服务器资源信息</th> <th>资源</th> <th>Total</th> <th>free</th> </tr> </thead> <tbody> <tr class="active"> <th scope="row">1</th> <td>cpu(%)</td> <td>100%</td> <td>70%</td> </tr> <tr> <th scope="row">2</th> <td>内存</td> <td>10M</td> <td>10%</td> </tr> <tr class="success"> <th scope="row">3</th> <td>磁盘</td> <td>30G</td> <td>5%</td> </tr> <tr> <th scope="row">4</th> <td>Swap</td> <td>1000M</td> <td>3%</td> </tr> <tr class="info"> <th scope="row">应用程序</th> <td>service</td> <td>install</td> <td>status</td> </tr> <tr> <th scope="row">6</th> <td>httpd</td> <td>已安装</td> <td>未启动</td> </tr> <tr class="warning"> <th scope="row">7</th> <td>mysql</td> <td>已安装</td> <td>启动成功</td> </tr> <tr> <th scope="row">8</th> <td>tomcat</td> <td>未安装</td> <td>未启动</td> </tr> <tr class="danger"> <th scope="row">9</th> <td>sendmail</td> <td>已安装</td> <td>已启动</td> </tr> </tbody> </table> </div> </div> <div class="col-md-4 span_4"> <div class="col_2"> <div class="box_1"> <div class="col-md-6 col_1_of_2 span_1_of_2"> <a class="tiles_info"> <div class="tiles-head red1"> <div class="text-center">网络</div> </div> <div class="tiles-body red">1M</div> </a> </div> <div class="col-md-6 col_1_of_2 span_1_of_2"> <a class="tiles_info tiles_blue"> <div class="tiles-head tiles_blue1"> <div class="text-center">磁盘</div> </div> <div class="tiles-body blue1">20GB</div> </a> </div> <div class="clearfix"> </div> </div> <div class="box_1"> <div class="col-md-6 col_1_of_2 span_1_of_2"> <a class="tiles_info"> <div class="tiles-head fb1"> <div class="text-center">cpu</div> </div> <div class="tiles-body fb2">1核</div> </a> </div> <div class="col-md-6 col_1_of_2 span_1_of_2"> <a class="tiles_info tiles_blue"> <div class="tiles-head tw1"> <div class="text-center">内存</div> </div> <div class="tiles-body tw2">1GB</div> </a> </div> <div class="clearfix"> </div> </div> </div> <div class="cloud"> <div class="grid-date"> <div class="date"> <p class="date-in">{{ area }}</p> <span class="date-on">°F °C </span> <div class="clearfix"> </div> </div> <h4>`weather`°<i class="fa fa-cloud-upload"> </i></h4> </div> <p class="monday">{{ date}}</p> </div> </div> <div class="clearfix"> </div> </div> <div class="copy"> <p>Copyright 付炜超的运维管理平台 </p> </div> </div> </div> </div> <script src="{% static "js/bootstrap.min.js" %}"></script> </body> </html>
首页效果图:
三 、服务器资产信息存入和前端展示:
模型(models):
from django.db import models class Information(models.Model): name = models.CharField(max_length=30) privateip = models.GenericIPAddressField() publicip = models.GenericIPAddressField() use = models.TextField() zoneid = models.CharField(max_length=30) cpu = models.CharField(max_length=50) memory = models.CharField(max_length=50) datadisk = models.CharField(max_length=30) time = models.DateTimeField() def __unicode__(self): return self.name
admin:
from django.contrib import admin from .models import Information class InformationAdmin(admin.ModelAdmin): list_display = ('name','privateip','publicip','use','zoneid','cpu','memory','datadisk') admin.site.register(Information,InformationAdmin)
视图(views):
from django.contrib import admin from .models import Information class InformationAdmin(admin.ModelAdmin): list_display = ('name','privateip','publicip','use','zoneid','cpu','memory','datadisk') admin.site.register(Information,InformationAdmin)
模板(templates):
<!DOCTYPE html> <html> <head> <style> #header { background-color:#484891; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#E0E0E0; height:calc(100vh - 111px); width:200px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:#484891; color:white; clear:both; text-align:center; padding:6px; position:fixed; left:0; bottom:0; width: 100%; height:20px; } </style> <title>服务器资产信息展示页面</title> </head> <body> <div id="header"> <h1>服务器信息展示</h1> </div> <div id="section"> <h2>CMDB</h2> <p>This is use django to create cmdb </p> <p> User:fuweichao </p> <p> Email:961769710@qq.com </p> <p> Tel:15517707935 </p> </div> {% block content %} <table border="1"> <tr> <th>服务器主机名</th> <th>服务器内网ip</th> <th>服务器公网ip</th> <th>服务器zoneid</th> <th>服务器cpu个数</th> <th>服务器内存大小</th> <th>服务器数据盘大小</th> <th>服务器信息记录时间</th> <th>服务器用途</th> </tr> {% for infor in infor_list %} <tr> <td>{{ infor.name }}</td> <td>{{ infor.privateip}} </td> <td>{{ infor.publicip}} </td> <td>{{ infor.zoneid}} </td> <td>{{ infor.cpu}} </td> <td>{{ infor.memory}} </td> <td>{{ infor.datadisk}} </td> <td>{{ infor.time}} </td> <td> {{ infor.use}}</td> </tr> {% endfor %} {% endblock %} </table> <div id="footer"> Copyright fuweichao webssh page </div> </body> </html>
后台数据录入,我用的django自身的admin:
前端服务器信息展示:
四、服务器性能监控:
视图(views):
def cpu(request): os.system('sh /home/zqxt_form2/monitor/image.sh') return render_to_response('cpu.html') def memory(request): os.system('sh /home/zqxt_form2/monitor/image.sh') return render_to_response('memory.html') def disk(request): os.system('sh /home/zqxt_form2/monitor/image.sh') return render_to_response('disk.html')
image.sh 脚本:
#!/bin/bash minute1="`date --date '1 minute ago ' +%s`" minute3="`date --date '3 minute ago ' +%s`" minute5="`date --date '5 minute ago ' +%s`" dir="/home/zqxt_form2/monitor/rrdtool/" rrdtool graph ${dir}/cpu1.jpg --step 5 -s ${minute1} -t "cpu free monitor (1 minute)" -v cpu DEF:cpu=${dir}/cpu.rrd:cpuds:AVERAGE LINE1:cpu#FF0000:'cpu free' rrdtool graph ${dir}/cpu3.jpg --step 5 -s ${minute3} -t "cpu free monitor (3 minute" -v cpu DEF:cpu=${dir}/cpu.rrd:cpuds:AVERAGE LINE1:cpu#FF0000:'cpu free' rrdtool graph ${dir}/cpu5.jpg --step 5 -s ${minute5} -t "cpu free monitor (5 minute)" -v cpu DEF:cpu=${dir}/cpu.rrd:cpuds:AVERAGE LINE1:cpu#FF0000:'cpu free' rrdtool graph ${dir}/memory1.jpg --step 5 -s ${minute1} -t " memory free monitor (1 minute) " -v cpu DEF:cpu=${dir}/memory.rrd:memoryds:AVERAGE LINE1:cpu#FF0000:'memory free(MB)' rrdtool graph ${dir}/memory3.jpg --step 5 -s ${minute3} -t " memory free monitor (3 minute)" -v cpu DEF:cpu=${dir}/memory.rrd:memoryds:AVERAGE LINE1:cpu#FF0000:'memory free(MB)' rrdtool graph ${dir}/memory5.jpg --step 5 -s ${minute5} -t " memory free monitor (5 minute)" -v cpu DEF:cpu=${dir}/memory.rrd:memoryds:AVERAGE LINE1:cpu#FF0000:'memory free(MB)' rrdtool graph ${dir}/disk1.jpg --step 5 -s ${minute1} -t "disk used / monitor (1 minute)" -v cpu DEF:cpu=${dir}/disk.rrd:diskds:AVERAGE LINE1:cpu#FF0000:'disk free %' rrdtool graph ${dir}/disk3.jpg --step 5 -s ${minute3} -t "disk used / monitor (3 minute)" -v cpu DEF:cpu=${dir}/disk.rrd:diskds:AVERAGE LINE1:cpu#FF0000:'disk free %' rrdtool graph ${dir}/disk5.jpg --step 5 -s ${minute5} -t "disk used / monitor (5 minute)" -v cpu DEF:cpu=${dir}/disk.rrd:diskds:AVERAGE LINE1:cpu#FF0000:'disk free %' dir2="/home/zqxt_form2/monitor/static/jpg/monitor/" cp -rf ${dir}/cpu1.jpg ${dir2} cp -rf ${dir}/cpu3.jpg ${dir2} cp -rf ${dir}/cpu5.jpg ${dir2} cp -rf ${dir}/memory1.jpg ${dir2} cp -rf ${dir}/memory3.jpg ${dir2} cp -rf ${dir}/memory5.jpg ${dir2} cp -rf ${dir}/disk1.jpg ${dir2} cp -rf ${dir}/disk3.jpg ${dir2} cp -rf ${dir}/disk5.jpg ${dir2}
模板(templates):
{% load staticfiles %} <!DOCTYPE html> <html> <head> <style> #header { background-color:#484891; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:calc(100vh - 111px); width:200px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:#484891; color:white; clear:both; text-align:center; padding:6px; position:fixed; left:0; bottom:0; width: 100%; height:20px; } </style> </head> <body> <div id="header"> <h1>服务器性能指标监控</h1> </div> <div id="nav"> <a href="http://118.89.233.129:8000/monitor/disk/"><b><font size="4">磁盘监控</font></b></a><br> <a href="http://118.89.233.129:8000/monitor/cpu/"><b><font size="4">cpu监控</font></b></a><br> <a href="http://118.89.233.129:8000/monitor/memory/"><b><font size="4">memory监控</font></b></a><br> </div> <div id="footer"> Copyright fuweichao monitor page </div> </body> </html>
前端效果图:
五 、服务器批量管理
视图(views)
def servers(request): if request.method == 'POST': hostgroup = request.POST.get("hostgroup","") model = request.POST.get("model","") user = request.POST.get("user","") command = request.POST.get("command","") os.environ['hostgroup']=str(hostgroup) os.environ['model']=str(model) os.environ['user']=str(user) os.environ['command']=str(command) output = commands.getoutput("sh /home/zqxt_form2/monitor/ansible.sh $hostgroup $model $user $command") return render(request,'servers.html',{'output':output}) return render(request,'servers.html')
ansible脚本:
#!/bin/bash ansible $1 -m $2 -a "sudo su - '$3' -c '$4'"
模板(templates):
{% load staticfiles %} <!DOCTYPE html> <html> <head> <title>服务器批量管理页面</title> <link href="{%static "css/ansiblestyle.css"%}" rel='stylesheet' type='text/css' /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Pink Contact Form ,Login Forms,Sign up Forms,Registration Forms,News latter Forms,Elements"./> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!--webfonts--> <link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,100italic,300italic,400italic|Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'> <link href='http://fonts.useso.com/css?family=Raleway:400,200,300,500,600,800,700,900' rel='stylesheet' type='text/css'> <!--//webfonts--> </head> <body> <h1>批量管理页面</h1> <div class="login-01"> <form action="/servers/" method="post"> {% csrf_token %} <ul> <li class="first"> <a href="#" class=" icon email"></a><input type="text" class="text" value="主机组" name="hostgroup" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '主机组';}" > <div class="clear"></div> </li> <li class="first"> <a href="#" class=" icon email"></a><input type="text" class="text" value="模块名" name="model" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '模块名';}" > <div class="clear"></div> </li> <li class="first"> <a href="#" class=" icon email"></a><input type="text" class="text" value="用户" name="user" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '用户';}" > <div class="clear"></div> </li> <li class="first"> <a href="#" class=" icon phone"></a><input type="text" class="text" value="命令" name="command" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '命令';}" > <div class="clear"></div> </li> <!--li class="second"> <a href="#" class=" icon msg"></a><textarea value="Message" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Comments';}">{{ output}}/textarea> <div class="clear"></div> </li--> </ul> <input type="submit" onClick="myFunction()" value="Submit" > <div class="clear"></div> </form> </div> <div class="login-01"> <form> <li class="second"> <a href="#" class=" icon phone"></a><textarea value="Message" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '命令输出结果';}">{{ output }}</textarea> <div class="clear"></div> </li> </form> </div> <!--start-copyright--> <div class="copy-right"> <div class="wrap"> <p>Copyright © 付炜超的linux运维管理平台</p> </div> </div> <!--//end-copyright--> </body> </html>
前端效果图:
这个项目由我自己独立完成,算是给自己的大学一个交代了吧。
如需看详情版,请到 http://www.demodashi.com/demo/11242.html 下载

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
SQL Server事务日志分析
SQL Server事务日志分析 fn_dblog()和fn_dump_dblog()函数介绍 SQL Server有两个未公开的函数fn_dblog()和fn_dump_dblog()非常有用并且提供的信息量很大。你可以使用这些函数来获取100多列大量的有用信息。 fn_dblog()用于分析数据库当前的事务日志文件,它需要两个参数,分别为事务开始LSN和结束LSN,默认为NULL,表示返回事务日志文件的所有日志记录。 例如: SELECT*FROMfn_dblog(null,null); fn_dump_dblog()用于分析数据库的事务日志备份文件,该函数需要的参数很多,但我们只需要传入备份文件的完整路径名称,其他参数使用默认值DEFAULT。 例如: SELECT* FROMfn_dump_dblog( NULL,NULL,'DISK',1,'D:\Pay\Pay_201707280400_LOG.trn', DEFAULT,DEFAULT,DEFAULT,DEFAULT,DEFAULT,DEFAULT,DEFAULT, DEFAULT,DEFAULT,DEFAULT,DEFA...
- 下一篇
总有一种SQL执行计划绑定方式合适你
需要绑定SQL执行计划常见的几种情况: SQL执行计划突变,导致数据库性能下降,从历史执行计划找一个合理的,进行绑定。 SQL无法使用更优的执行计划,且无历史执行计划,可通过hint手工构造的方式,进行绑定。 某些Bug引起优化器生成较差的执行计划。在bug修复前,进行绑定。 ORACLE固定执行计划的3种方式: Oracle 9i使用outline (可跨版本10,11g均可使用) Oracle 10g使用sql profile (11g也可使用) Oracle 11g使用sql plan manage 接下来简述如何使用这3种方式进行执行计划的固定,并举例说明3种固定执行计划的优缺点,通过对比选择合适的固定执行计划来应对不同的业务场景。也就是什么场景下使用何种执行计划固定比较合适。 一、大纲(Stored Outline) 1、当SQL执行计划因新版本变更,统计信息不准确,新建索引,参数改变等发生改变时,存储大纲可以使SQL语句的执行计划保持不变。在创建某条语句的大纲时,ORACLE会将SQL语句的文本,执行计划和语句使用的hints存储在一个系统默认用户OUTLN的3个表O...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7安装Docker,走上虚拟化容器引擎之路
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Docker安装Oracle12C,快速搭建Oracle学习环境