我需要一个渲染Dashbord页面用的名为contain.html的HTML模版文件,内容是展示contain的id,contain是否在运行,最后一次更新的时间,所需要的镜像id,占用的cpu核数,占用内存大小及暴露的端口号这几列信息,还有增删改查的按键
时间: 2024-03-27 08:40:55 浏览: 24
好的,以下是一个简单的contain.html模版文件,你可以根据自己的需要进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contain Dashboard</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Contain Dashboard</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Running</th>
<th>Last Updated</th>
<th>Image ID</th>
<th>CPU Cores</th>
<th>Memory Usage</th>
<th>Exposed Ports</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for contain in contains %}
<tr>
<td>{{ contain.id }}</td>
<td>{{ contain.running }}</td>
<td>{{ contain.last_updated }}</td>
<td>{{ contain.image_id }}</td>
<td>{{ contain.cpu_cores }}</td>
<td>{{ contain.memory_usage }}</td>
<td>{{ contain.exposed_ports }}</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<button>Add Contain</button>
</body>
</html>
```
这个模版文件使用了模版引擎语言,其中包含了一个称为"contains"的变量,它应该是一个包含多个contain对象的列表。在模版中使用了for循环,来遍历这个列表,并将每个contain对象的属性填充到表格中的对应列中。最后,还包含了增删改查的按键。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)