介

layuimini最簡(jiǎn)潔、清爽、易用的layui后臺(tái)框架模板。它基于jquery3.4.1 和 layui2.5.4 實(shí)現(xiàn)。整套后臺(tái)大約有20個(gè)頁面，滿足常用的后臺(tái)管理，如果有基于jquery 的開箱即用的后臺(tái)項(xiàng)目，可以選型它，有能力的開發(fā)者可以利用現(xiàn)有的css和js，把底層庫和js邏輯重新實(shí)現(xiàn)，把它改成基于vue或者react的后臺(tái)模板。

github 地址：

https://github.com/zhongshaofa/layuimini

github star: 663+

最新版本：見github，MIT 協(xié)議

項(xiàng)目截圖

主要特性

快速上手

# 克隆項(xiàng)目到本地
git clone https://github.com/zhongshaofa/layuimini

# 進(jìn)入項(xiàng)目目錄
cd layuimini

# 直接訪問html

也可以把項(xiàng)目放到本地服務(wù)器然后訪問

瀏覽器兼容性

• 開源項(xiàng)目未提供說明。

jango自帶的后臺(tái)管理是Django明顯特色之一，可以讓我們快速便捷管理數(shù)據(jù)。后臺(tái)管理可以在各個(gè)app的admin.py文件中進(jìn)行控制。本文將主要介紹如何利用Admin后臺(tái)實(shí)現(xiàn)監(jiān)控頁的定制，快來和小編一起學(xué)習(xí)一下吧

我們使用Django的Admin二次定制一個(gè)圖形化界面,首先我們把語言設(shè)置為中文簡(jiǎn)體.

修改: settings.py
LANGUAGE_CODE='zh-hans'
TIME_ZONE='Asia/Shanghai'
修改: apps.py
from django.apps import AppConfig
class MywebConfig(AppConfig):
name='MyWeb'
verbose_name="服務(wù)器參數(shù)收集"

接著我們來定義models.py數(shù)據(jù)庫模型,定義基本的數(shù)據(jù)查詢.

from django.db import models
from django.utils.html import format_html
import datetime
STATUS_CHOICES=(('d', '在用設(shè)備'), ('p', '下線設(shè)備'), ('w', '損壞設(shè)備'),)
# 定義主機(jī)基本信息表
class HostInfoDB(models.Model):
id=models.AutoField(primary_key=True)
# HostAddr=models.TextField(max_length=128,verbose_name="主機(jī)地址")
HostAddr=models.CharField(max_length=128, verbose_name="主機(jī)地址")
HostName=models.CharField(max_length=128, verbose_name="主機(jī)名稱")
HostType=models.CharField(max_length=128, verbose_name="系統(tǒng)類型")
HostPosition=models.CharField(max_length=128, verbose_name="機(jī)房位置")
HostPlatform=models.CharField(max_length=128, verbose_name="所屬平臺(tái)")
HostGroup=models.CharField(max_length=128, verbose_name="分組")
HostDataTime=models.DateTimeField(verbose_name="檢查日期")
HostUser=models.CharField(max_length=64, verbose_name="負(fù)責(zé)人")
hostStats=models.CharField(max_length=1, choices=STATUS_CHOICES, verbose_name="設(shè)備狀態(tài)")
def __str__(self):
return self.HostName
# 用于給本表指定別名,這樣前端就不是英文的了
class Meta():
verbose_name="設(shè)備清單"
verbose_name_plural="設(shè)備清單"
# 設(shè)備再用狀態(tài)
def Status(self):
if self.hostStats=='d':
format_td=format_html('<span style="padding:2px;background-color:green;color:white">在用設(shè)備</span>')
elif self.hostStats=='p':
format_td=format_html('<span style="padding:2px;background-color:yellow;color:black">下線設(shè)備</span>')
elif self.hostStats=='w':
format_td=format_html('<span style="padding:2px;background-color:red;color:white">損壞設(shè)備</span>')
return format_td
Status.short_description="當(dāng)前狀態(tài)"
# 指定Ping檢測(cè)結(jié)果表
class HostPingInfo(models.Model):
id=models.AutoField(primary_key=True)
HostAddr=models.CharField(max_length=128, verbose_name="主機(jī)地址")
flage=models.CharField(max_length=64)
class Meta():
verbose_name="存活檢測(cè)"
verbose_name_plural="存活檢測(cè)"
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="狀態(tài)"
# 定義CPU/內(nèi)存利用率數(shù)據(jù)表結(jié)構(gòu)
class HostCPUOrMemInfo(models.Model):
id=models.AutoField(primary_key=True)
HostAddr=models.CharField(max_length=128, verbose_name="主機(jī)地址")
Cpu_Count=models.IntegerField()
Mem_Count=models.IntegerField()
class Meta():
verbose_name="CPU內(nèi)存性能"
verbose_name_plural="CPU內(nèi)存性能"
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利用率"

繼續(xù)定制admin.py并與上方的數(shù)據(jù)庫視圖相交互.

from django.contrib import admin
from MyWeb.models import *
# 必須繼承ModelAdmin基類,才可以調(diào)整參數(shù),HostDB則是你的表的名稱
@admin.register(HostInfoDB)
class MyAdmin(admin.ModelAdmin):
admin.site.site_title="后臺(tái)管理"
admin.site.site_header="自動(dòng)化監(jiān)控平臺(tái)"
# list_display=你需要展示的字段應(yīng)該寫在這里,此處是數(shù)據(jù)庫中的字段
list_display=("HostAddr","HostName","HostType","HostPosition","HostDataTime","HostPlatform","HostGroup","HostUser","Status")
# search_fields=用于添加一個(gè)搜索框,此處作為查詢條件
#search_fields=("HostAddr","HostType","Status",)
# list_filter=設(shè)置一個(gè)過濾器,此處是過濾條件
list_filter=("HostAddr","HostGroup",)
# ordering=設(shè)置一個(gè)排序條件,此處是以id作為排序依據(jù)
ordering=("id",)
#list_per_page=設(shè)置每頁顯示多少條記錄,默認(rèn)是100條
list_per_page=10
#list_editable=設(shè)置默認(rèn)可編輯字段
#list_editable=("HostName",)
# date_hierarchy=顯示詳細(xì)時(shí)間分層篩選
date_hierarchy='HostDataTime'
# readonly_fields=可以設(shè)置只讀字段,就是無法修改的字段
#readonly_fields=("hostCPU","hostMEM",)
# 定義Ping檢測(cè)顯示字段
@admin.register(HostPingInfo)
class MyAdmin(admin.ModelAdmin):
list_display=("HostAddr","flage","Status")
# 定義內(nèi)存CPU利用率字段
@admin.register(HostCPUOrMemInfo)
class MyAdmin(admin.ModelAdmin):
list_display=("id","HostAddr","Cpu_Count","Cpu_Speed","Mem_Count","Mem_Speed","Check")

保存后直接執(zhí)行命令,完成命令行建表操作.

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

保存后啟動(dòng),Django并訪問http://127.0.0.1:8000/admin登錄后我們依次看一下定制效果.

主頁中的展示效果如下.

當(dāng)我們需要增加自定義動(dòng)作時(shí),可以這樣寫,我們以HostCPUOrMemInfo為例

# 定義內(nèi)存CPU利用率字段
@admin.register(HostCPUOrMemInfo)
class MyAdmin(admin.ModelAdmin):
list_display=("id","HostAddr","Cpu_Count","Cpu_Speed","Mem_Count","Mem_Speed")
# 添加的自定義動(dòng)作,此處可執(zhí)行操作
def func(self, request, queryset):
# 此處可以寫一些執(zhí)行動(dòng)作
print(self, request, queryset)
func.short_description="自定義active動(dòng)作"
actions=[func, ]
# Action選項(xiàng)都是在頁面上方顯示
actions_on_top=True
# Action選項(xiàng)都是在頁面下方顯示
actions_on_bottom=False
# 是否顯示選擇個(gè)數(shù)
actions_selection_counter=True

以上就是基于Django的Admin后臺(tái)實(shí)現(xiàn)定制簡(jiǎn)單監(jiān)控頁的詳細(xì)內(nèi)容

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

天給大家推薦一款超不錯(cuò)的CMS內(nèi)容管理系統(tǒng)DoraCMS-Admin。

dora-cms 基于vue.js+eggjs+express+mongodb構(gòu)建的一套后臺(tái)CMS管理系統(tǒng)，star高達(dá)2.8K+。結(jié)構(gòu)簡(jiǎn)單、易于拓展，非常適合進(jìn)行二次開發(fā)。

技術(shù)棧

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

功能結(jié)構(gòu)圖

模板開發(fā)

• 公用模板header

{% header adaptor="default" %}

<!-- 模板靜態(tài)資源 -->
{% assets 'base.css index.css media.css swiper.min.css list.css swiper.min.js' %}
{% endassets %}

<!-- 二次開發(fā)靜態(tài)資源 -->
{% 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 %}

• 獲取熱門標(biāo)簽hottags

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

更多的模板調(diào)用這里不詳細(xì)介紹了，大家可以去查看下面的文檔。

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

目前市面上有很多內(nèi)容管理系統(tǒng)（如織夢(mèng)CMS、帝國等），都是以php開發(fā)為主，而DoraCMS 則是基于nodejs，只要有一些前端開發(fā)基礎(chǔ)，很快就能上手。而且DoraCMS完全開源，你可以自由定制屬于自己的網(wǎng)站內(nèi)容管理平臺(tái)。

end，附上項(xiàng)目地址鏈接。

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

# 倉庫地址
https://github.com/doramart/DoraCMS/

好了，今天就分享到這里。如果感興趣可以去看看，希望對(duì)大家有所幫助哈！