PearAdmin二次开发之防火墙封禁工具——资产管理篇

原创

已于 2025-08-12 16:21:14 修改 · 置顶 · 1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #运维 #运维开发 #网络 #自动化 #linux #python

于 2025-07-11 16:54:56 首次发布

一、菜单及按钮设计

登陆PearAdmin，登陆界面默认填写了账户admin密码123456，只需要输入验证码即可登录。

登陆PearAdmin后再【系统管理】-【权限管理】页面增加想要的菜单和按钮。建立资产管理目录如下：

在次产管理目录下增加【添加】、【编辑】、【删除】按钮，并设置相应的权限标识，状态选择按钮。

刷新页面后可以看到左侧目录树里【资产管理】目录。

二、资产表设计

2.1 资产数据表创建

在【PearAdmin】-【applications】-【modules】目录下创建admin_resourcees.py文件

数据模型代码

import datetime
from applications.extensions import db

class Resources(db.Model):
    __tablename__ = 'admin_resources'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True, comment='设备ID')
    hostname = db.Column(db.String(20), nullable=False, comment='设备名称')
    mgtip = db.Column(db.String(20), nullable=False, comment='管理IP地址')
    location = db.Column(db.String(20), nullable=False, comment='部署区域')
    loginmeth = db.Column(db.String(20), nullable=False, comment='登录方式')
    loginname = db.Column(db.String(20), nullable=False, comment='登录账户')
    loginpass = db.Column(db.String(20), nullable=False, comment='登录密码')
    apikey = db.Column(db.String(20), nullable=False, comment='api密码')
    vsys = db.Column(db.String(20),  comment='虚拟系统')
    vendor = db.Column(db.String(20), nullable=False, comment='厂家')
    enable = db.Column(db.Integer, default=0, comment='启用')
    remark = db.Column(db.String(255), comment='备注')
    create_at = db.Column(db.DateTime, default=datetime.datetime.now, comment='创建时间')

加载资产表数据模型

2.2 数据序列化/反序列化的规则定义

‌

##admin_resouces.py

from flask_marshmallow.sqla import SQLAlchemyAutoSchema
from applications.models import Resources


class ResourcesOutSchema(SQLAlchemyAutoSchema):
    class Meta:
        model = Resources  # table = models.Album.__table__
        # include_relationships = True  # 输出模型对象时同时对外键，是否也一并进行处理
        include_fk = True  # 序列化阶段是否也一并返回主键
        # fields= ["id","name"] # 启动的字段列表
        # exclude = ["id","name"] # 排除字段列表

2.3 生成数据表

flask db migrate：依据模型定义和当前数据库架构之间的差异，生成迁移脚本。此脚本存于 migrations/versions 目录。
flask db upgrade：执行迁移脚本，把这些变更应用到数据库中。

三、前端页面设计

Pycharm打开项目，在【PearAdmin】项目的【templates】的【system】下建立【Resource】目录，并新建三个html文档。具体如下图：

3.1 主页面代码

<!DOCTYPE html>
<html>
<head>
    <title>资产管理</title>
    {% include 'system/common/header.html' %}
</head>
<body class="pear-container">
{# 资产查询 #}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="resources-query-form">
            <div class="layui-form-item">
                <label class="layui-form-label">主机名</label>
                <div class="layui-input-inline">
                    <input type="text" name="hostname" placeholder="" class="layui-input">
                </div>

                <button class="layui-btn layui-btn-md" lay-submit lay-filter="resources-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
{# 资产表格 #}
<div class="resources-main resources-collasped">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="resources-table" lay-filter="resources-table"></table>
        </div>
    </div>
</div>
</body>

{% include 'system/common/footer.html' %}

{# 表格操作 #}
<script type="text/html" id="resources-toolbar">
    {% if authorize("system:resources:add") %}
        <button class="layui-btn layui-btn-md" lay-event="add">
            <i class="pear-icon pear-icon-add"></i>
            新增
        </button>
    {% endif %}

</script>

{# 设备修改操作 #}
<script type="text/html" id="resources-bar">
    {% if authorize("system:resources:edit") %}
         <button class="layui-btn layui-btn-xs" lay-event="edit"><i class="pear-icon pear-icon-edit"> 编辑</i>
        </button>
    {% endif %}
    {% if authorize("system:resources:remove") %}
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove"><i
                class="pear-icon pear-icon-ashbin"> 删除</i>
        </button>
    {% endif %}
</script>


{% raw %}
<script type="text/html" id="resources-enable">
    <input type="checkbox" name="enable" value="{
  
  { d.id }}" lay-skin="switch" lay-text="启用|禁用"
           lay-filter="resources-enable"
            {
  
  {# if(d.enable==1){ }} checked {
  
  {# } }} />
</script>
<script type="text/html" id="resources-createTime">
    {
  
  {layui.util.toDateString(d.create_at,  "yyyy-MM-dd HH:mm:ss")}}
</script>

<script type="text/html" id="resources-updateTime">
    {
  
  {layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}}
</script>
{% endraw %}



<script>
    layui.use(['table',  'form', 'jquery', 'popup'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.jquery
        let popup = layui.popup
        let MODULE_PATH = "{
  
  { url_for('system.resources.main') }}"
        // 表格数据