要返回服务器列表，通常涉及后端API开发、数据库设计以及前端展示，以下是一个完整的实现方案，包括技术选型、数据库设计、API开发和前端调用：
1、后端框架：Python Flask（轻量级，适合快速开发）
2、数据库：SQLite（简单）或 MySQL（生产环境推荐）
3、前端：HTML + JavaScript（使用Fetch API调用接口）
创建servers 表存储服务器信息：
CREATE TABLE servers (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
ip_address TEXT NOT NULL,
status TEXT CHECK(status IN ('online', 'offline', 'maintenance')) DEFAULT 'online',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);pip install flask flask-sqlalchemy
from flask import Flask, jsonify, request
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///servers.db'
db = SQLAlchemy(app)
定义数据模型
class Server(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(80), nullable=False)
ip_address = db.Column(db.String(15), nullable=False)
status = db.Column(db.String(20), default='online')
创建数据库表
@app.before_first_request
def create_tables():
db.create_all()
获取所有服务器列表
@app.route('/api/servers', methods=['GET'])
def get_servers():
servers = Server.query.all()
return jsonify([{
'id': s.id,
'name': s.name,
'ip_address': s.ip_address,
'status': s.status
} for s in servers])
添加新服务器（可选）
@app.route('/api/servers', methods=['POST'])
def add_server():
data = request.json
new_server = Server(
name=data['name'],
ip_address=data['ip_address'],
status=data.get('status', 'online')
)
db.session.add(new_server)
db.session.commit()
return jsonify({'message': 'Server added!'}), 201
if __name__ == '__main__':
app.run(debug=True)创建index.html 展示服务器列表：
<!DOCTYPE html>
<html>
<head>
<title>服务器列表</title>
<style>
table { border-collapse: collapse; width: 80%; margin: 20px auto; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.online { color: green; }
.offline { color: red; }
.maintenance { color: orange; }
</style>
</head>
<body>
<h1 style="text-align: center;">服务器列表</h1>
<table id="serverTable">
<thead>
<tr>
<th>ID</th>
<th>服务器名称</th>
<th>IP地址</th>
<th>状态</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 从API获取服务器数据
fetch('http://localhost:5000/api/servers')
.then(response => response.json())
.then(servers => {
const tbody = document.querySelector('#serverTable tbody');
servers.forEach(server => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${server.id}</td>
<td>${server.name}</td>
<td>${server.ip_address}</td>
<td class="${server.status}">${server.status}</td>
`;
tbody.appendChild(row);
});
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>1、启动后端：
python app.py
访问接口：http://localhost:5000/api/servers
2、访问前端页面：
直接打开index.html 文件（需与后端同源或解决跨域问题）
1、分页查询：在API中添加?page=1&per_page=10 参数
2、状态过滤：/api/servers?status=online
3、身份验证：使用JWT保护API
4、实时更新：WebSocket推送服务器状态变化
5、部署生产：使用Nginx + Gunicorn部署Flask应用
在Flask中添加CORS支持：
from flask_cors import CORS CORS(app) # 允许所有域名跨域
- 访问index.html 页面将展示表格形式的服务器列表
- 不同状态（online/offline/maintenance）显示不同颜色
- 后端API提供数据支持，可自由扩展功能
通过以上步骤，你已实现了一个完整的服务器列表系统！
文章摘自：https://idc.huochengrm.cn/fwq/13335.html
评论
郸伟才
回复如何建立返回服务器列表？需先确定服务器信息，再编写查询接口，最后实现接口调用以返回服务器列表。