layui 框架与BootCSS框架相似都属于前端美化框架，区别在于BootCSS更加专业，而LayUI则更多的是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。
下面的页面作为基模板，取名为 base.html 后期子模版，全部继承它。
自动化监控平台
{% block css %}
{% endblock %}
自动化监控平台
仪表盘
安全配置
邮件管理
消息管理
LyShark
安全设置
用户注销
仪表盘
主机管理
动态监控
图形查询
日志检索
远程命令
系统设置
授权管理
{% block content %}
{% endblock %}
C 2018 -2020 版权所有 LyShark 保留所有权利
创建仪表盘子页面，此处就叫 main.html 这里直接继承base.html
{% extends "base.html" %}
{% block content %}
当前系统状态
等待添加统计图形功能。
CPU利用率
等待添加统计图形功能。
内存利用率
等待添加统计图形功能。
{% endblock %}urls.py
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path("",views.main)
]上面的代码a标签如果被填上待跳转路径就会出现，跳转虽然实现了，但是a标签无法高亮，解决的办法这里我想到了一个比较笨的方法。
var Arry = ["/host/","/logs/"];
for(var x=0;x<10;x++)
{
var log = window.location.pathname;
if (Arry[x] == log){
$(".layui-side-scroll li").removeClass("layui-nav-itemed")[0];
$(".layui-side-scroll li").removeClass("layui-this")[0];
$(".layui-side-scroll li").next().eq(x).addClass("layui-this");
$(".layui-side-scroll li").next().eq(x).addClass("layui-nav-itemed");
}
}最终的效果是这样的。
我们继续完善这个main.html 页面，仪表盘用于统计本机数据。
{% extends "base.html" %}
{% block content %}
在线用户
Local User
1 Users
总活跃用户1
本机进程数
Process ID
248 Process
总活进程数248
管理主机数量
Host Count
256 Hosting
管理主机数量248
当前活跃会话
Local Sesion
1 Session
活跃的会话1
系统CPU负载
等待添加统计图形功能。
内存利用率
等待添加统计图形功能。
网络数据包
等待添加统计图形功能。
{% endblock %}接着使用WebSocket打通一条隧道，并持续更新图形。
{% extends "base.html" %}
{% block content %}
在线用户
Local User
{{ User_Count }} Users
总活跃用户{{ User_Count }}
本机进程数
Process ID
{{ User_Proc }} Process
总活进程数{{ User_Proc }}
管理主机数量
Host Count
256 Hosting
管理主机数量248
当前活跃会话
Local Sesion
{{ User_Count }} Session
活跃的会话{{ User_Count }}
系统CPU负载
{% endblock %}view.py
from django.shortcuts import render
from dwebsocket.decorators import accept_websocket
import psutil,time,json
@accept_websocket
def main(request):
if not request.is_websocket():
User_Count = len(psutil.users())
User_Proc = len(psutil.pids())
return render(request, "main.html", {"User_Count": User_Count, "User_Proc": User_Proc})
else:
while True:
times = time.strftime("%M:%S", time.localtime())
data = psutil.cpu_percent(interval=None, percpu=True)
js = {"time":times,"load":data}
sen = json.dumps(js)
request.websocket.send(sen)
time.sleep(1)添加内存监控图形，老样子，继续加就是了，动态图形。
{% extends "base.html" %}
{% block content %}
在线用户
Local User
{{ User_Count }} Users
总活跃用户{{ User_Count }}
本机进程数
Process ID
{{ User_Proc }} Process
总活进程数{{ User_Proc }}
管理主机数量
Host Count
256 Hosting
管理主机数量248
当前活跃会话
Local Sesion
{{ User_Count }} Session
活跃的会话{{ User_Count }}
系统CPU负载
系统内存统计
{% endblock %}view.py
from django.shortcuts import render
from dwebsocket.decorators import accept_websocket
import psutil,time,json
@accept_websocket
def main(request):
if not request.is_websocket():
User_Count = len(psutil.users())
User_Proc = len(psutil.pids())
return render(request, "main.html", {"User_Count": User_Count, "User_Proc": User_Proc})
else:
while True:
times = time.strftime("%M:%S", time.localtime())
data = psutil.cpu_percent(interval=None, percpu=True)
mem = psutil.virtual_memory()
mem_total = int(mem.total / 1024 / 1024)
mem_used = int(mem.used / 1024 / 1024)
js = {"time":times,"load":data,"mem_used":mem_used}
sen = json.dumps(js)
request.websocket.send(sen)
time.sleep(1)base.html
自动化监控平台
{% block css %}
{% endblock %}
自动化监控平台
仪表盘
安全配置
邮件管理
消息管理
LyShark
安全设置
用户注销
仪表盘
主机管理
动态监控
{% block content %}
{% endblock %}
C 2018 -2020 版权所有 LyShark 保留所有权利
host.html
{% extends "base.html" %}
{% block content %}
系统主机组管理
{% endblock %}main.html
{% extends "base.html" %}
{% block content %}
在线用户
Local User
{{ User_Count }} Users
总活跃用户{{ User_Count }}
本机进程数
Process ID
{{ User_Proc }} Process
总活进程数{{ User_Proc }}
管理主机数量
Host Count
256 Hosting
管理主机数量248
当前活跃会话
Local Sesion
{{ User_Count }} Session
活跃的会话{{ User_Count }}
系统CPU负载
系统内存统计
{% endblock %}urls.py
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path("",views.main),
path("get_host/",views.get_host),
path("host/",views.host),
]views.py
from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
import psutil,time,json
from MyWeb import models
@accept_websocket
def main(request):
if not request.is_websocket():
User_Count = len(psutil.users())
User_Proc = len(psutil.pids())
return render(request, "main.html", {"User_Count": User_Count, "User_Proc": User_Proc})
else:
while True:
times = time.strftime("%M:%S", time.localtime())
data = psutil.cpu_percent(interval=None, percpu=True)
mem = psutil.virtual_memory()
mem_used = int(mem.used / 1024 / 1024)
print(mem_used)
js = {"time":times,"load":data,"mem_used":mem_used}
sen = json.dumps(js)
request.websocket.send(sen)
time.sleep(1)
# 主机列表获取接口
def get_host(request):
ret = []
obj = models.HostDB.objects.all()
for item in range(0,len(obj)):
ret.append(obj.values()[item])
data = {
"code":0,
"msg":"",
"count":15,
"total":1,
"data": ret
}
return HttpResponse(json.dumps(data))
# 返回主机页面数据,或执行删除 *** 作等
def host(request):
return render(request,"host.html")完整前端代码:
自动化监控平台
自动化监控平台
仪表盘
LyShark
密码修改
用户注销
仪表盘
主机管理
动态监控
权限管理
密码修改
创建用户
注销
{% block content %}
{% endblock %}
C 2018 -2021 自动化运维平台 By:LyShark
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）