一:本文目的通过
通过django的方式,在web界面展示数据库某张表的内容。比如我们有一个xxljob任务系统,此时开发想看都运行了哪些任务,基于xxljob自身系统的原因无法直接开通开发账户,因此有个web界面展示任务就迫在眉睫。
二:脚本亮点
配合前端代码,把运行的任务状态显示绿色,停止的任务状态显示为红色。
三:效果展示
四:代码细节
路由:
# 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>
完!