一:本文目的通过

   通过django的方式,在web界面展示数据库某张表的内容。比如我们有一个xxljob任务系统,此时开发想看都运行了哪些任务,基于xxljob自身系统的原因无法直接开通开发账户,因此有个web界面展示任务就迫在眉睫。


二:脚本亮点

配合前端代码,把运行的任务状态显示绿色,停止的任务状态显示为红色。

三:效果展示

运维自动化【把数据库某张表通过django展示】_数据


四:代码细节

路由:

# http://127.0.0.1:90/saemonitor/showlist_dingshi
path('saemonitor/showlist_dingshi', saemonitor_views.app_showlist_dingshi),

视图:

def app_showlist_dingshi(request):
    # 查询所有数据
    # list = models.saemonitor_xxljob.objects.all()
    # 查询指定列,以字典形式输出字段匹配结果
    list = models.saemonitor_xxljob.objects.values('id', 'job_desc', 'trigger_status',
                                                   'author', 'schedule_conf',
                                                   'executor_param')

    print(list,type(list))
    #初始化paginator(数据列表,每页显示的数据条数)
    paginator = Paginator(list,2000)
    #初始化 具体页码的page对象(相当于哪个页码对应的数据--这个解释还不确定)
    c_page = paginator.page(int(page_num))
    return render(request,'saemonitor/list_xxljob.html',locals())

模板:

<!DOCTYPE html>
{%  load static %}  <!-- static标签,是Django的模板语法,对应的是STATIC_URL配置的templates目录,可以通过浏览器里查看页面源代码看到-->
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>导航bootstrap</title>

    <!--    引入bootstrap样式文件-->
    <link , href="{%static '/static/bootstrap/css/bootstrap.css' %}" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body>




<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1"
                    data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--            href="/" 表示跳转到首页-->
            <a class="navbar-brand" href="/">运维统计</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


            <!--最上方的导航栏  开始-->
            <ul class="nav navbar-nav">



      <!--      添加一个容器(span标签是行内元素,不会换行;div是块元素会换行),用来显示时间。 00:00是默认值,当页面加载完时,通过下方的js函数获取数据库中的时间,并替换容器中的默认值。-->
                <li data="1">
                    <a>查看xxljob任务列表,更新时间:<span id="updataTime" style="color:red;" > 00:00 </span></a>
                </li>



                <li data="2"  ><a  style="color: black; font-weight: bold;"   onclick="myFunc1()" href="#"  > 全部的 </a></li>
                <script type="text/javascript">
                                function myFunc1() {
                                    self.location='/saemonitor/showlist_dingshi';
                                }
                        </script>

                <li data="3"><a style="color: green; font-weight: bold;" onclick="myFunc2()" href="#" >  运行中</a> </li>
                <script type="text/javascript">
                                function myFunc2() {
                                    self.location='/saemonitor/showlist_dingshi_yunxingzhong';
                                }
                        </script>

                <li data="4"><a  style="color: red; font-weight: bold;"  onclick="myFunc3()" href="#">停止的</a></li>
                <script type="text/javascript">
                                function myFunc3() {
                                    self.location='/saemonitor/showlist_dingshi_tingzhi';
                                }
                        </script>


</nav>



<div class="bs-example" data-example-id="bordered-table">
    <table class="table table-bordered">

      <thead>

        <tr>
        <th>id</th>
        <th>定时任务描述</th>
        <th>状态[停止/运行] </th>
        <th>作者</th>
        <th>执行时间</th>
        <th>运行参数</th>
        </tr>

      </thead>



      {%  for i in c_page  %}
      <tr>
        <td>  {{ i.id  }}   </td>
        <td>  {{ i.job_desc  }}   </td>
<!--    <td>  {{ i.trigger_status  }}  </td>-->
<!--     使用页面变量判断,把库里的0改为停止,1改为运行;最后加颜色。-->
          {%  if i.trigger_status == 0  %}
              <td style="color:red" >  停止 </td>
          {%  else  %}
             <td style="color:green" > 运行  </td>
          {%  endif  %}
        <td>  {{ i.author  }}   </td>
        <td>  {{ i.schedule_conf  }}   </td>
        <td>  {{ i.executor_param  }}   </td>
       </tr>
      {%  endfor  %}






</body>
</html>

<script>



</script>


完!