介

layuimini最简洁、清爽、易用的layui后台框架模板。它基于jquery3.4.1 和 layui2.5.4 实现。整套后台大约有20个页面，满足常用的后台管理，如果有基于jquery 的开箱即用的后台项目，可以选型它，有能力的开发者可以利用现有的css和js，把底层库和js逻辑重新实现，把它改成基于vue或者react的后台模板。

github 地址：

https://github.com/zhongshaofa/layuimini

github star: 663+

最新版本：见github，MIT 协议

项目截图

主要特性

快速上手

# 克隆项目到本地
git clone https://github.com/zhongshaofa/layuimini

# 进入项目目录
cd layuimini

# 直接访问html

也可以把项目放到本地服务器然后访问

浏览器兼容性

• 开源项目未提供说明。

jango自带的后台管理是Django明显特色之一，可以让我们快速便捷管理数据。后台管理可以在各个app的admin.py文件中进行控制。本文将主要介绍如何利用Admin后台实现监控页的定制，快来和小编一起学习一下吧

我们使用Django的Admin二次定制一个图形化界面,首先我们把语言设置为中文简体.

修改: settings.py
LANGUAGE_CODE='zh-hans'
TIME_ZONE='Asia/Shanghai'
修改: apps.py
from django.apps import AppConfig
class MywebConfig(AppConfig):
name='MyWeb'
verbose_name="服务器参数收集"

接着我们来定义models.py数据库模型,定义基本的数据查询.

from django.db import models
from django.utils.html import format_html
import datetime
STATUS_CHOICES=(('d', '在用设备'), ('p', '下线设备'), ('w', '损坏设备'),)
# 定义主机基本信息表
class HostInfoDB(models.Model):
id=models.AutoField(primary_key=True)
# HostAddr=models.TextField(max_length=128,verbose_name="主机地址")
HostAddr=models.CharField(max_length=128, verbose_name="主机地址")
HostName=models.CharField(max_length=128, verbose_name="主机名称")
HostType=models.CharField(max_length=128, verbose_name="系统类型")
HostPosition=models.CharField(max_length=128, verbose_name="机房位置")
HostPlatform=models.CharField(max_length=128, verbose_name="所属平台")
HostGroup=models.CharField(max_length=128, verbose_name="分组")
HostDataTime=models.DateTimeField(verbose_name="检查日期")
HostUser=models.CharField(max_length=64, verbose_name="负责人")
hostStats=models.CharField(max_length=1, choices=STATUS_CHOICES, verbose_name="设备状态")
def __str__(self):
return self.HostName
# 用于给本表指定别名,这样前端就不是英文的了
class Meta():
verbose_name="设备清单"
verbose_name_plural="设备清单"
# 设备再用状态
def Status(self):
if self.hostStats=='d':
format_td=format_html('<span style="padding:2px;background-color:green;color:white">在用设备</span>')
elif self.hostStats=='p':
format_td=format_html('<span style="padding:2px;background-color:yellow;color:black">下线设备</span>')
elif self.hostStats=='w':
format_td=format_html('<span style="padding:2px;background-color:red;color:white">损坏设备</span>')
return format_td
Status.short_description="当前状态"
# 指定Ping检测结果表
class HostPingInfo(models.Model):
id=models.AutoField(primary_key=True)
HostAddr=models.CharField(max_length=128, verbose_name="主机地址")
flage=models.CharField(max_length=64)
class Meta():
verbose_name="存活检测"
verbose_name_plural="存活检测"
def Status(self):
if self.flage=="True":
ret="已连接"
color="green"
return format_html('<span style="color:{};">{}</span>',color,ret,)
elif self.flage=="False":
ret="未连接"
color="red"
return format_html('<span style="color:{};">{}</span>', color, ret,)
Status.short_description="状态"
# 定义CPU/内存利用率数据表结构
class HostCPUOrMemInfo(models.Model):
id=models.AutoField(primary_key=True)
HostAddr=models.CharField(max_length=128, verbose_name="主机地址")
Cpu_Count=models.IntegerField()
Mem_Count=models.IntegerField()
class Meta():
verbose_name="CPU内存性能"
verbose_name_plural="CPU内存性能"
def Cpu_Speed(self):
return format_html('<progress max="100" value="{}"></progress>',self.Cpu_Count)
def Mem_Speed(self):
return format_html('<progress max="100" value="{}"></progress>',self.Mem_Count)
def Check(self):
return format_html('<a href="/admin/MyWeb/hostdb/{}/change/" rel="external nofollow" >查看</a>',self.id)
Cpu_Speed.short_description="CPU利用率"
Mem_Speed.short_description="Mem利用率"

继续定制admin.py并与上方的数据库视图相交互.

from django.contrib import admin
from MyWeb.models import *
# 必须继承ModelAdmin基类,才可以调整参数,HostDB则是你的表的名称
@admin.register(HostInfoDB)
class MyAdmin(admin.ModelAdmin):
admin.site.site_title="后台管理"
admin.site.site_header="自动化监控平台"
# list_display=你需要展示的字段应该写在这里,此处是数据库中的字段
list_display=("HostAddr","HostName","HostType","HostPosition","HostDataTime","HostPlatform","HostGroup","HostUser","Status")
# search_fields=用于添加一个搜索框,此处作为查询条件
#search_fields=("HostAddr","HostType","Status",)
# list_filter=设置一个过滤器,此处是过滤条件
list_filter=("HostAddr","HostGroup",)
# ordering=设置一个排序条件,此处是以id作为排序依据
ordering=("id",)
#list_per_page=设置每页显示多少条记录,默认是100条
list_per_page=10
#list_editable=设置默认可编辑字段
#list_editable=("HostName",)
# date_hierarchy=显示详细时间分层筛选
date_hierarchy='HostDataTime'
# readonly_fields=可以设置只读字段,就是无法修改的字段
#readonly_fields=("hostCPU","hostMEM",)
# 定义Ping检测显示字段
@admin.register(HostPingInfo)
class MyAdmin(admin.ModelAdmin):
list_display=("HostAddr","flage","Status")
# 定义内存CPU利用率字段
@admin.register(HostCPUOrMemInfo)
class MyAdmin(admin.ModelAdmin):
list_display=("id","HostAddr","Cpu_Count","Cpu_Speed","Mem_Count","Mem_Speed","Check")

保存后直接执行命令,完成命令行建表操作.

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

保存后启动,Django并访问http://127.0.0.1:8000/admin登录后我们依次看一下定制效果.

主页中的展示效果如下.

当我们需要增加自定义动作时,可以这样写,我们以HostCPUOrMemInfo为例

# 定义内存CPU利用率字段
@admin.register(HostCPUOrMemInfo)
class MyAdmin(admin.ModelAdmin):
list_display=("id","HostAddr","Cpu_Count","Cpu_Speed","Mem_Count","Mem_Speed")
# 添加的自定义动作,此处可执行操作
def func(self, request, queryset):
# 此处可以写一些执行动作
print(self, request, queryset)
func.short_description="自定义active动作"
actions=[func, ]
# Action选项都是在页面上方显示
actions_on_top=True
# Action选项都是在页面下方显示
actions_on_bottom=False
# 是否显示选择个数
actions_selection_counter=True

以上就是基于Django的Admin后台实现定制简单监控页的详细内容

原文：https://www.jb51.net/article/231017.htm

天给大家推荐一款超不错的CMS内容管理系统DoraCMS-Admin。

dora-cms 基于vue.js+eggjs+express+mongodb构建的一套后台CMS管理系统，star高达2.8K+。结构简单、易于拓展，非常适合进行二次开发。

技术栈

• vue+vuex+vue-router 全家桶
• webpack
• nodejs+eggjs+express
• mongodb 4+

功能结构图

模板开发

• 公用模板header

{% header adaptor="default" %}

<!-- 模板静态资源 -->
{% assets 'base.css index.css media.css swiper.min.css list.css swiper.min.js' %}
{% endassets %}

<!-- 二次开发静态资源 -->
{% assets 'dora.front.js white.css' %}
{% endassets %}

{% endheader %}

• 获取推荐文档recommend

{% recommend pageSize=3 %}
{% for item in recommend %}
<li><a href="{{item.url}}" target="_blank">{{item.stitle}}</a></li>
{% endfor %}

• 获取热门标签hottags

{% hottags pageSize=15 %}
{% for tagItem in hottags %}
<li><a href="{{tagItem.url}}">{{tagItem.name}}</a></li>
{% endfor %}

更多的模板调用这里不详细介绍了，大家可以去查看下面的文档。

https://www.doracms.com/frontend/showdata/

目前市面上有很多内容管理系统（如织梦CMS、帝国等），都是以php开发为主，而DoraCMS 则是基于nodejs，只要有一些前端开发基础，很快就能上手。而且DoraCMS完全开源，你可以自由定制属于自己的网站内容管理平台。

end，附上项目地址链接。

# 文档地址
https://www.doracms.com/

# 仓库地址
https://github.com/doramart/DoraCMS/

好了，今天就分享到这里。如果感兴趣可以去看看，希望对大家有所帮助哈！