当前位置：首页 > 行业动态 > 正文

html显示服务器盘符

admin
行业动态
2025-04-30
2542

HTML无法直接显示服务器盘符，需通过服务端语言（如ASP.NET）获取盘符信息，传递至前端后用HTML元素（如

环境准备

使用HTML显示服务器盘符信息需结合后端技术（如Python、Node.js）获取系统数据，再通过前端页面渲染，以下以Python（Flask框架）为例说明实现流程。

html显示服务器盘符第1张

后端数据获取（Python示例）

# 安装依赖库
# pip install flask psutil
from flask import Flask, jsonify
import psutil
app = Flask(__name__)
@app.route('/disk')
def get_disk_info():
    disk_data = []
    for partition in psutil.disk_partitions():
        if partition.fstype:  # 过滤无文件系统的分区
            usage = psutil.disk_usage(partition.mountpoint)
            disk_data.append({
                "盘符": partition.device,
                "挂载点": partition.mountpoint,
                "总空间(GB)": round(usage.total / 10243, 2),
                "已用空间(GB)": round(usage.used / 10243, 2),
                "剩余空间(GB)": round(usage.free / 10243, 2),
                "使用率(%)": round(usage.percent, 2)
            })
    return jsonify(disk_data)
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

前端HTML展示

<!DOCTYPE html>
<html>
<head>服务器盘符状态</title>
    <style>
        table { width: 80%; margin: 20px auto; border-collapse: collapse; }
        th, td { padding: 10px; text-align: center; border: 1px solid #ddd; }
        th { background-color: #f4f4f4; }
        .danger { color: red; }
    </style>
</head>
<body>
    <h2 style="text-align:center;">服务器存储状态</h2>
    <table id="disk-table">
        <thead>
            <tr>
                <th>盘符</th>
                <th>挂载点</th>
                <th>总空间(GB)</th>
                <th>已用空间(GB)</th>
                <th>剩余空间(GB)</th>
                <th>使用率(%)</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        fetch('http://localhost:5000/disk')
            .then(response => response.json())
            .then(data => {
                const tbody = document.querySelector('#disk-table tbody');
                data.forEach(disk => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${disk.盘符}</td>
                        <td>${disk.挂载点}</td>
                        <td>${disk.总空间}</td>
                        <td>${disk.已用}</td>
                        <td>${disk.剩余}</td>
                        <td class="${disk.使用率 > 90 ? 'danger' : ''}">${disk.使用率}</td>
                    `;
                    tbody.appendChild(row);
                });
            });
    </script>
</body>
</html>

核心功能说明表

功能模块	技术实现
盘符识别	通过`psutil.disk_partitions()`获取系统分区信息
空间计算	使用`psutil.disk_usage()`统计分区容量及使用率
数据交互	后端通过Flask提供REST API，前端用Fetch API获取JSON数据
可视化渲染	HTML表格动态生成，CSS样式控制布局，JavaScript处理数据绑定
跨平台支持	代码兼容Windows/Linux/MacOS（盘符字段在Linux显示为挂载路径）