Python第51天 bootstrap模板使用2

文章目录

2019-2-20 09:17:25

bootstrap模板使用2

  • 左侧菜单的数据通过index,将数据传递至base.html页面
  • 右侧具体数据,通过ORM进行查询后,传递给hostpage.html等相关界面
  • views
#views.py
from builtins import locals
from django.shortcuts import render,HttpResponse,redirect
from host import models
from django.views import View
from utils import form_class,init_menu
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.utils.decorators import method_decorator
from django.contrib.auth.hashers import make_password, check_password
import hashlib
#登录页面
class login(View):
    def get(self,request):
        form = form_class.UserForm()
        return render(request, 'login.html',locals())
    def post(self,request):
        form = form_class.UserForm(request.POST)
        #判断输入数据是否存在
        if form.is_valid():
            user = form.cleaned_data['user']
            pwd = form.cleaned_data['pwd']
            # pwd = make_password(form.cleaned_data.get('pwd'),'pbkdf2_sha256')
            # print(pwd)
            obj = models.UserInfo.objects.filter(username=user).first()
            one_menu=init_menu.InitMenu().initMenu(user)
            print('全体散开',one_menu)
          
            if obj:
                #判断密码是否对应正确,使用django自带加密算法功能
                if  check_password(pwd,obj.password):
                    obj1 = models.UserInfo.objects.filter(username=user).first().roles.all()
                    menu_list = []
                    permission_list =[]
                    obj2 = models.Menu.objects.all()
                    for i in obj2:
                        if i.title not in menu_list:
                            menu_list.append(i.title)
                    request.session['menu_list'] = menu_list
                    # print('+++++',menu_list)
                    for i in obj1:
                        for j in i.permissions.all():
                            permission_list.append(j.url)
                    request.session['permission_list']=permission_list
                    request.session['one_menu']=one_menu
                    response = HttpResponse('ok')
                    response.set_cookie('username', user, max_age=1110)
                    res = redirect('/host/hostpage/')
                    res.set_cookie('username', user, max_age=1110)
                    return res
                else:
                    #密码不正确
                    error_msg = '用户名或密码错误!'
                    return render(request, 'login.html', locals())
            else:
                # 密码不正确
                error_msg = '用户名或密码错误!'
                return render(request,'login.html',locals())
        #如果输入数据不存在
        else:
            form = form_class.UserForm(request.POST)
            return render(request, 'login.html',locals())
#资产管理
class hostpage(View):

    def get(self,request,*args,**kwargs):
        one_menu = request.session.get('one_menu')
        # print('hostpage---->',request.session.get('menu_list'))
        menu_list=request.session.get('menu_list')
        obj_li = models.HostList.objects.all()
        p = Paginator(obj_li, 10)
        last_page = max([i for i in p.page_range])
        get_page = int(request.GET.get('page', 1))
        permission_list=request.session.get('permission_list')
        try:
            obj_li = p.page(get_page)  # obj_li此时已经重新赋值,有分页的方法
        except PageNotAnInteger:
            obj_li = p.page(1)
        except EmptyPage:
            obj_li = p.page(p.num_pages)
        return render(request, 'hostpage.html', locals())
    def post(self):
        pass
#增
class add(View):
    def get(self,request):
        one_menu = request.session.get('one_menu')
        form =form_class.HostForm()
        return render(request,'add.html',locals())
    def post(self,request):
        one_menu = request.session.get('one_menu')
        form = form_class.HostForm(data=request.POST)
        # print('add_post')
        try:
            if form.is_valid():
                # print(form.cleaned_data)
                # print(type(form.cleaned_data['region_id']))
                models.HostList.objects.create(**form.cleaned_data)
                return redirect('/host/hostpage/')
            else:
                # print(1111)
                return render(request, 'add.html', locals())
        except AttributeError:
            return render(request, 'add.html', locals())
        return redirect('/host/hostpage/')
#删
class delete(View):
    def post(self,request,*args):
        print(222222222,args)
        one_menu = request.session.get('one_menu')
    def get(self,request,*args,**kwargs):
        # print(request.META['HTTP_REFERER'])
        one_menu = request.session.get('one_menu')
        url = request.META['HTTP_REFERER']
        get_id = int(request.GET.get('id'))
        models.HostList.objects.filter(id=get_id).delete()
        # return redirect('/hostpage/')
        return redirect(url)
#改
class update(View):
    def get(self,request,getid):
        one_menu = request.session.get('one_menu')
        getid = getid
        obj = models.HostList.objects.filter(id=getid).first()
        form = form_class.HostForm(
            initial={
                'hostname':obj.hostname,
                'ipaddress':obj.ipaddress,
                'cpu':obj.cpu,
                'mem':obj.mem,
                'disk':obj.disk,
                'region':obj.region,
                'system':obj.system,
            }
        )
        return render(request,'update.html',locals())

    def post(self,request,getpid):
        one_menu = request.session.get('one_menu')
        try:
            form = form_class.HostForm(data=request.POST)
            # print('post',getpid)
            if form.is_valid():
                # print(form.cleaned_data)
                ong = models.HostList.objects.filter(id=getpid).update(**form.cleaned_data)
                # ong.update(**form.cleaned_data)
                return redirect('/host/hostpage/')
        except AttributeError:
            return render(request,'update.html',locals())
        return redirect('/host/hostpage/')

#注册页面
class register(View):
    def get(self,request):
        form = form_class.RegisterForm()
        # print('register_get')
        return render(request, 'register.html', locals())
    def post(self,request):
        form = form_class.RegisterForm(request.POST)
        if form.is_valid():
            print('加密前')
            obj=models.UserInfo.objects.filter(username=form.cleaned_data.get('username')).first()
            if not obj:
            #,使用django自带加密算法功能,将密码加密
                form.cleaned_data['password'] = make_password(form.cleaned_data.get('password'),'pbkdf2_sha256')
                models.UserInfo.objects.create(**form.cleaned_data)
                return redirect('/host/login/')
            else:
                error_msg = '用户名已存在'
                return render(request,'register.html',locals())
        else:
            print('errors--->',form.errors)
            return render(request,'register.html',locals())
#退出
class logout(View):
    def post(self,request):
        pass
    def get(self,request):
        request.COOKIES.clear()
        request.session.clear()
        print(request.COOKIES.get('password'))

        return redirect('/host/login/')
#查询
class search(View):
    def get(self):
        pass
    def post(self):
        pass

class index(View):
    def get(self,request):
        menu_list = request.session.get('menu_list')
        permission_list = request.session.get('permission_list')
        print('index_page---->',menu_list)
        return render(request,'base.html',locals())
    def post(self,request):
        pass

class login1(View):
    def get(self,request):
        print('---------------->',request.session.get('one_menu'))
        one_menu = request.session.get('one_menu')

    def post(self,request):
        pass
  • base
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>{% block title %} {% endblock %}</title>
   <meta name="description" content="Ela Admin - HTML5 Admin Template">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/cs-skin-elastic.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/normalize.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/bootstrap.min.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/font-awesome.min.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/themify-icons.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/pe-icon-7-filled.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/flag-icon.min.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/cs-skin-elastic.css">
   <link rel="stylesheet" href="/static/ElaAdmin/assets/css/style.css">
   <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
   <link href="/static/ElaAdmin/assets/weather/css/weather-icons.css" rel="stylesheet" />
   <link href="/static/ElaAdmin/assets/calendar/fullcalendar.css" rel="stylesheet" />
   <link href="/static/ElaAdmin/assets/css/charts/chartist.min.css" rel="stylesheet">
   <link href="/static/ElaAdmin/assets/css/lib/vector-map/jqvmap.min.css" rel="stylesheet">
  <style>
   #weatherWidget .currentDesc {
       color: #ffffff!important;
   }
       .traffic-chart {
           min-height: 335px;
       }
       #flotPie1  {
           height: 150px;
       }
       #flotPie1 td {
           padding:3px;
       }
       #flotPie1 table {
           top: 20px!important;
           right: -10px!important;
       }
       .chart-container {
           display: table;
           min-width: 270px ;
           text-align: left;
           padding-top: 10px;
           padding-bottom: 10px;
       }
       #flotLine5  {
            height: 105px;
       }

       #flotBarChart {
           height: 150px;
       }
       #cellPaiChart{
           height: 160px;
       }

   </style>
</head>

<body>
   <!-- Left Panel -->

   <aside id="left-panel" class="left-panel">
       <nav class="navbar navbar-expand-sm navbar-default">
           <div id="main-menu" class="main-menu collapse navbar-collapse">
               <ul class="nav navbar-nav">
                   <li class="active">
                       <a href="/host/hostpage"><i class="menu-icon fa fa-laptop"></i>Dashboard </a>
                   </li>

                   <li class="menu-title">CMDB</li><!-- /.menu-title -->
                   {% for i,k in one_menu.items %}
                   <li class="menu-item-has-children dropdown">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-table"></i>{{ i }}</a>
                       <ul class="sub-menu children dropdown-menu">
                               {% for j,m in k.items %}
                           <li><i class="fa fa-table"></i><a href="{{ m }}">{{ j }}</a></li>
                               {% endfor %}
                       </ul>
                   </li>
                   {% endfor %}
               </ul>
           </div><!-- /.navbar-collapse -->
       </nav>
   </aside>
   <!-- /#left-panel -->
   <!-- Right Panel -->
   <div id="right-panel" class="right-panel">
       <!-- Header-->
       <header id="header" class="header">
           <div class="top-left">
               <div class="navbar-header">
                   <a class="navbar-brand" href="./"><img src="/static/ElaAdmin/images/logo.png" alt="Logo"></a>
                   <a class="navbar-brand hidden" href="./"><img src="/static/ElaAdmin/images/logo2.png" alt="Logo"></a>
                   <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
               </div>
           </div>

           <div class="top-right">
               <div class="header-menu">
                   <div class="header-left">
                       <button class="search-trigger"><i class="fa fa-search"></i></button>
                       <a target="_blank" href="https://nuoyo.cnwpa.qq.com/msgrd?v=3&uin=1074020480&site=qq&menu=yes">
                           <img border="0" src="http://wpa.qq.com/pa?p=2:1074020480:51" alt="点击这里给我发消息" title="点击这里给我发消息"/>
                       </a>
                       <div class="form-inline">
                           <form class="search-form">
                               <input class="form-control mr-sm-2" type="text" placeholder="Search ." aria-label="Search">
                               <button class="search-close" type="submit"><i class="fa fa-close"></i></button>
                           </form>
                       </div>

                       <div class="dropdown for-notification">
                           <button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                               <i class="fa fa-bell"></i>
                               <span class="count bg-danger">3</span>
                           </button>
                           <div class="dropdown-menu" aria-labelledby="notification">
                               <p class="red">You have 3 Notification</p>
                               <a class="dropdown-item media" href="#">
                                   <i class="fa fa-check"></i>
                                   <p>Server #1 overloaded.</p>
                               </a>
                               <a class="dropdown-item media" href="#">
                                   <i class="fa fa-info"></i>
                                   <p>Server #2 overloaded.</p>
                               </a>
                               <a class="dropdown-item media" href="#">
                                   <i class="fa fa-warning"></i>
                                   <p>Server #3 overloaded.</p>
                               </a>
                           </div>
                       </div>

                       <div class="dropdown for-message">
                           <button class="btn btn-secondary dropdown-toggle" type="button" id="message" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                               <i class="fa fa-envelope"></i>
                               <span class="count bg-primary">4</span>
                           </button>
                           <div class="dropdown-menu" aria-labelledby="message">
                               <p class="red">You have 4 Mails</p>
                               <a class="dropdown-item media" href="#">
                                   <span class="photo media-left"><img alt="avatar" src="/static/ElaAdmin/images/avatar/1.jpg"></span>
                                   <div class="message media-body">
                                       <span class="name float-left">Jonathan Smith</span>
                                       <span class="time float-right">Just now</span>
                                       <p>Hello, this is an example msg</p>
                                   </div>
                               </a>
                               <a class="dropdown-item media" href="#">
                                   <span class="photo media-left"><img alt="avatar" src="/static/ElaAdmin/images/avatar/2.jpg"></span>
                                   <div class="message media-body">
                                       <span class="name float-left">Jack Sanders</span>
                                       <span class="time float-right">5 minutes ago</span>
                                       <p>Lorem ipsum dolor sit amet, consectetur</p>
                                   </div>
                               </a>
                               <a class="dropdown-item media" href="#">
                                   <span class="photo media-left"><img alt="avatar" src="/static/ElaAdmin/images/avatar/3.jpg"></span>
                                   <div class="message media-body">
                                       <span class="name float-left">Cheryl Wheeler</span>
                                       <span class="time float-right">10 minutes ago</span>
                                       <p>Hello, this is an example msg</p>
                                   </div>
                               </a>
                               <a class="dropdown-item media" href="#">
                                   <span class="photo media-left"><img alt="avatar" src="/static/ElaAdmin/images/avatar/4.jpg"></span>
                                   <div class="message media-body">
                                       <span class="name float-left">Rachel Santos</span>
                                       <span class="time float-right">15 minutes ago</span>
                                       <p>Lorem ipsum dolor sit amet, consectetur</p>
                                   </div>
                               </a>
                           </div>
                       </div>
                   </div>

                   <div class="user-area dropdown float-right">
                       <a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                           <img class="user-avatar rounded-circle" src="/static/ElaAdmin/images/admin.jpg" alt="User Avatar">
                       </a>

                       <div class="user-menu dropdown-menu">
                           <a class="nav-link" href="#"><i class="fa fa- user"></i>My Profile</a>

                           <a class="nav-link" href="#"><i class="fa fa- user"></i>Notifications <span class="count">13</span></a>

                           <a class="nav-link" href="#"><i class="fa fa -cog"></i>Settings</a>

                           <a class="nav-link" href="/host/login"><i class="fa fa-power -off"></i>Logout</a>
                       </div>
                   </div>

               </div>
           </div>
       </header>
       <!-- /#header -->
       <!-- Content -->
       <div class="content">
           <!-- Orders -->
           {% block hostpage %}
           {% endblock %}
           {% block host_add %}
           {% endblock %}
           {% block host_update %}
           {% endblock %}
           {% block api_page %}
           {% endblock %}
           {% block user_page %}
           {% endblock %}
           <!-- /#add-category -->
       </div>
           <!-- .animated -->
       </div>
       <!-- /.content -->
   <div class="clearfix"></div>
   <!-- Footer -->
{#    <footer class="site-footer">#}
{#        <div class="footer-inner bg-white">#}
{#            <div class="row">6c#}
{#                <div class="col-sm-6">#}
{#                    Copyright &copy; 2018 Ela Admin. More book <a href="https://nuoyo.cnnuoyo.cn/" target="_blank" title="模板之家">影-博客</a>#}
{#                </div>#}
{#                <div class="col-sm-6 text-right"> Designed by Ying#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </footer>#}
       <!-- /.site-footer -->
   <!-- /#right-panel -->
   <script src="/static/ElaAdmin/assets/js/vendor/jquery-2.1.4.min.js"></script>
   <script src="/static/ElaAdmin/assets/js/popper.min.js"></script>
   <script src="/static/ElaAdmin/assets/js/plugins.js"></script>
   <script src="/static/ElaAdmin/assets/js/main.js"></script>
   <script src="/static/ElaAdmin/assets/js/lib/chart-js/Chart.bundle.js"></script>
   <script src="/static/ElaAdmin/assets/js/lib/chartist/chartist.min.js"></script>
   <script src="/static/ElaAdmin/assets/js/lib/chartist/chartist-plugin-legend.js"></script>
   <script src="/static/ElaAdmin/assets/js/lib/flot-chart/jquery.flot.js"></script>
   <script src="/static/ElaAdmin/assets/js/lib/flot-chart/jquery.flot.pie.js"></script>
   <script src="/static/ElaAdmin/assets/js/lib/flot-chart/jquery.flot.spline.js"></script>
   <script src="/static/ElaAdmin/assets/weather/js/jquery.simpleWeather.min.js"></script>
   <script src="/static/ElaAdmin/assets/weather/js/weather-init.js"></script>
   <script src="/static/ElaAdmin/assets/js/lib/moment/moment.js"></script>
   <script src="/static/ElaAdmin/assets/calendar/fullcalendar.min.js"></script>
   <script src="/static/ElaAdmin/assets/calendar/fullcalendar-init.js"></script>
   <script src="/static/ElaAdmin/assets/js/init/weather-init.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.js"></script>
   <script src="/static/ElaAdmin/assets/js/init/fullcalendar-init.js"></script>
   <!--Local Stuff-->
   <script>
       jQuery(document).ready(function($) {
           "use strict";

           // Pie chart flotPie1
           var piedata = [
               { label: "Desktop visits", data: [[1,32]], color: '#5c6bc0'},
               { label: "Tab visits", data: [[1,33]], color: '#ef5350'},
               { label: "Mobile visits", data: [[1,35]], color: '#66bb6a'}
           ];

           $.plot('#flotPie1', piedata, {
               series: {
                   pie: {
                       show: true,
                       radius: 1,
                       innerRadius: 0.65,
                       label: {
                           show: true,
                           radius: 2/3,
                           threshold: 1
                       },
                       stroke: {
                           width: 0
                       }
                   }
               },
               grid: {
                   hoverable: true,
                   clickable: true
               }
           });
           // Pie chart flotPie1  End
           // cellPaiChart
           var cellPaiChart = [
               { label: "Direct Sell", data: [[1,65]], color: '#5b83de'},
               { label: "Channel Sell", data: [[1,35]], color: '#00bfa5'}
           ];
           $.plot('#cellPaiChart', cellPaiChart, {
               series: {
                   pie: {
                       show: true,
                       stroke: {
                           width: 0
                       }
                   }
               },
               legend: {
                   show: false
               },grid: {
                   hoverable: true,
                   clickable: true
               }

           });
           // cellPaiChart End
           // Line Chart  #flotLine5
           var newCust = [[0, 3], [1, 5], [2,4], [3, 7], [4, 9], [5, 3], [6, 6], [7, 4], [8, 10]];

           var plot = $.plot($('#flotLine5'),[{
               data: newCust,
               label: 'New Data Flow',
               color: '#fff'
           }],
           {
               series: {
                   lines: {
                       show: true,
                       lineColor: '#fff',
                       lineWidth: 2
                   },
                   points: {
                       show: true,
                       fill: true,
                       fillColor: "#ffffff",
                       symbol: "circle",
                       radius: 3
                   },
                   shadowSize: 0
               },
               points: {
                   show: true,
               },
               legend: {
                   show: false
               },
               grid: {
                   show: false
               }
           });
           // Line Chart  #flotLine5 End
           // Traffic Chart using chartist
           if ($('#traffic-chart').length) {
               var chart = new Chartist.Line('#traffic-chart', {
                 labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                 series: [
                 [0, 18000, 35000,  25000,  22000,  0],
                 [0, 33000, 15000,  20000,  15000,  300],
                 [0, 15000, 28000,  15000,  30000,  5000]
                 ]
             }, {
                 low: 0,
                 showArea: true,
                 showLine: false,
                 showPoint: false,
                 fullWidth: true,
                 axisX: {
                   showGrid: true
               }
           });

               chart.on('draw', function(data) {
                   if(data.type === 'line' || data.type === 'area') {
                       data.element.animate({
                           d: {
                               begin: 2000 * data.index,
                               dur: 2000,
                               from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                               to: data.path.clone().stringify(),
                               easing: Chartist.Svg.Easing.easeOutQuint
                           }
                       });
                   }
               });
           }
           // Traffic Chart using chartist End
           //Traffic chart chart-js
           if ($('#TrafficChart').length) {
               var ctx = document.getElementById( "TrafficChart" );
               ctx.height = 150;
               var myChart = new Chart( ctx, {
                   type: 'line',
                   data: {
                       labels: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" ],
                       datasets: [
                       {
                           label: "Visit",
                           borderColor: "rgba(4, 73, 203,.09)",
                           borderWidth: "1",
                           backgroundColor: "rgba(4, 73, 203,.5)",
                           data: [ 0, 2900, 5000, 3300, 6000, 3250, 0 ]
                       },
                       {
                           label: "Bounce",
                           borderColor: "rgba(245, 23, 66, 0.9)",
                           borderWidth: "1",
                           backgroundColor: "rgba(245, 23, 66,.5)",
                           pointHighlightStroke: "rgba(245, 23, 66,.5)",
                           data: [ 0, 4200, 4500, 1600, 4200, 1500, 4000 ]
                       },
                       {
                           label: "Targeted",
                           borderColor: "rgba(40, 169, 46, 0.9)",
                           borderWidth: "1",
                           backgroundColor: "rgba(40, 169, 46, .5)",
                           pointHighlightStroke: "rgba(40, 169, 46,.5)",
                           data: [1000, 5200, 3600, 2600, 4200, 5300, 0 ]
                       }
                       ]
                   },
                   options: {
                       responsive: true,
                       tooltips: {
                           mode: 'index',
                           intersect: false
                       },
                       hover: {
                           mode: 'nearest',
                           intersect: true
                       }

                   }
               } );
           }
           //Traffic chart chart-js  End
           // Bar Chart #flotBarChart
           $.plot("#flotBarChart", [{
               data: [[0, 18], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,4], [14,6],[16,15], [18, 9],[20,17], [22,7],[24,4], [26,9],[28,11]],
               bars: {
                   show: true,
                   lineWidth: 0,
                   fillColor: '#ffffff8a'
               }
           }], {
               grid: {
                   show: false
               }
           });
           // Bar Chart #flotBarChart End
       });
   </script>
</body>
</html>


  • hostpage
#hostpage.py 
{% extends "base.html" %}
{% block title %}主机界面{% endblock %}
{% block hostpage %}
<div class="orders">
   <div class="row">
       <div class="col-xl-8">
           <div class="card">
               <div class="card-body">
                   <h4 class="box-title">主机列表 </h4>
               <hr>
                   {% if '/host/add/' in permission_list %}
                       <a href="/host/add/"><button class="btn btn-primary btn-sm">新增主机</button></a>
                       <input type="text" placeholder="搜索功能未启用" style="float: right"/>
                       <button class="btn btn-primary btn-sm" style="float: right">搜索</button>
                   {% endif %}
               </div>

               <div class="card-body--">

                   <div class="table-stats order-table ov-h">
                       <table class="table ">
                           <thead>
                               <tr>
{#                                    <th class="serial">序号</th>#}
                                   <th class="avatar">主机名</th>
                                   <th>IP地址</th>
                                   <th>操作系统</th>
                                   <th>CPU</th>
                                   <th>磁盘</th>
                                   <th>内存</th>
                                   <th>区域</th>
                                   <th>机房</th>
                                   <th>操作</th>
                               </tr>
                           </thead>
                           <tbody>
                               {% for i in obj_li %}
                               <tr>
{#                                    <th scope="row" class="serial">{{ i.id }}</th>#}
                                   <td class="serial">{{ i.hostname }}</td>
                                   <td class="serial">{{ i.ipaddress }}</td>
                                   <td class="serial">{{ i.system }}</td>
                                   <td class="serial">{{ i.cpu }}</td>
                                   <td class="serial">{{ i.disk }}</td>
                                   <td class="serial">{{ i.mem }}</td>
                                   <td class="serial">{{ i.region }}</td>
                                   <td class="serial">{{ i.computer_room}}</td>
                                   <td>
                                       <a href="/host/update/{{ i.id }}/"><button class="btn btn-primary btn-sm">修改</button></a>
                                       {% if '/host/delete' in permission_list %}
                                       <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" onclick="show('/host/delete?id={{ i.id }}')">
                                           删除
                                       </button>
                                       {% endif %}
                                   </td>
                               </tr>
                               {% endfor %}
                           </tbody>
                       </table>
                           <div class="pagination">
                               <span class="step-links">
                                   <a href="?page={{ 1 }}">首页</a>
                                   {% if obj_li.has_previous %}
                                       <a href="?page={{ obj_li.previous_page_number }}">上一页</a>
                                   {% endif %}

                                   {% for num in p.page_range %}
                                       {% if num == get_page %}
                                           <a href="?page={{ num }}">{{ num }}</a>
                                       {% else %}
                                           <a href="?page={{ num }}">{{ num }}</a>
                                       {% endif %}
                                   {% endfor %}
                                   {% if obj_li.has_next %}
                                       <a href="?page={{ obj_li.next_page_number }}">下一页</a>
                                   {% endif %}
                                   <a href="?page={{ last_page }}">末页</a>
                               </span>
                           </div>
                   </div> <!-- /.table-stats -->
               </div>
           </div> <!-- /.card -->
       </div>  <!-- /.col-lg-8 -->
   </div>
</div>

<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    真的要删除吗?
                </h4>
            </div>
            <div class="modal-body">
                确定删除?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
                <button type="button" class="btn btn-primary" onclick="submit();">
                    确认删除
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
  $(function () { $('#myModal').modal('hide')});
</script>
<script>
   var href = '';

  function show(url){
      href = url;
      {#alert(url);#}
  }

  function submit(){
      location.href = href;
  }
</script>
{% endblock %}

给TA打赏
共{{data.count}}人
人已打赏
开发

Python第52天 发布系统表设计

2023-9-11 18:33:23

开发

Python第15天 模块的使用

2023-9-11 18:33:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索