xiaji/webstatus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加api的访问说明

Browse Source
This commit is contained in:
xiaji
2025-09-07 20:37:23 +08:00
parent 16e3b14984
commit 8052a83ee2
2 changed files with 162 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -7,10 +7,6 @@ __pycache__/
*.pyc
*$py.class
# Database
db.sqlite3
*.sqlite3
*.sqlite
# Logs
*.log

243
status/templates/status/api_docs.html
View File

@@ -1,29 +1,101 @@
{% extends 'status/base.html' %}
{% block title %}API说明{% endblock %}
{% block content %}
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<h1 class="text-2xl font-bold text-gray-800 mb-4">API接口说明</h1>
<p class="text-gray-600 mb-6">本系统提供以下RESTful API接口，用于服务状态的上报和查询。</p>
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-800 mb-4">认证方式</h2>
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
<p class="text-blue-700">目前所有API接口均无需认证，可直接访问。后续版本可能会添加认证机制。</p>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API说明 - 服务状态监控</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
operational: '#36D399',
degraded: '#FBBD23',
outage: '#F87272',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.gradient-bg {
background: linear-gradient(135deg, #165DFF 0%, #0A2463 100%);
}
}
</style>
</head>
<body class="bg-gray-50 font-inter min-h-screen">
<!-- 顶部导航 -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-server text-3xl mr-3"></i>
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">服务状态监控</h1>
</div>
<div class="flex items-center space-x-2">
<a href="/admin/" class="text-white hover:text-gray-200 transition-colors">
<i class="fas fa-cog mr-1"></i> 管理后台
</a>
<a href="/api-docs/" class="text-white hover:text-gray-200 transition-colors">
<i class="fas fa-book mr-1"></i> API说明
</a>
</div>
<div class="mt-4 md:mt-0">
<a href="/" class="bg-white text-primary px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition-colors">
<i class="fas fa-home mr-2"></i> 返回首页
</a>
</div>
</div>
<p class="mt-2 text-gray-200">实时监控系统服务运行状态与可靠性</p>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-800 mb-4">API端点列表</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">POST /api/checkin/ - 客户端上报接口</h3>
<p class="text-gray-600 mb-3">用于客户端上报服务状态信息。如果服务不存在，系统会自动创建。</p>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<h1 class="text-2xl font-bold text-gray-800 mb-4">API接口说明</h1>
<p class="text-gray-600 mb-6">本系统提供以下RESTful API接口，用于服务状态的上报和查询。</p>
<div class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">请求体示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-800 mb-4">认证方式</h2>
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
<p class="text-blue-700">目前所有API接口均无需认证，可直接访问。后续版本可能会添加认证机制。</p>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-800 mb-4">API端点列表</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">POST /api/checkin/ - 客户端上报接口</h3>
<p class="text-gray-600 mb-3">用于客户端上报服务状态信息。如果服务不存在，系统会自动创建。</p>
<div class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">请求体示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
"service_name": "Web服务",
"host": "192.168.1.100",
"port": 80,
@@ -32,25 +104,25 @@
"response_time": 120.5,
"message": "连接成功"
}</code></pre>
</div>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
</div>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
"code": 200,
"message": "服务状态已更新",
"service_id": 1
}</code></pre>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">GET /api/services/ - 服务列表查询接口</h3>
<p class="text-gray-600 mb-3">获取所有服务的列表及其最新状态。</p>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>[
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">GET /api/services/ - 服务列表查询接口</h3>
<p class="text-gray-600 mb-3">获取所有服务的列表及其最新状态。</p>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>[
{
"id": 1,
"name": "Web服务",
@@ -64,16 +136,16 @@
"latest_response_time": 120.5
}
]</code></pre>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">GET /api/services/{id}/history/ - 服务历史记录查询接口</h3>
<p class="text-gray-600 mb-3">获取指定服务的历史检测记录。</p>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">GET /api/services/{id}/history/ - 服务历史记录查询接口</h3>
<p class="text-gray-600 mb-3">获取指定服务的历史检测记录。</p>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
"count": 1,
"total_pages": 1,
"current_page": 1,
@@ -89,42 +161,51 @@
}
]
}</code></pre>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">GET /api/status-summary/ - 状态摘要查询接口</h3>
<p class="text-gray-600 mb-3">获取所有服务的状态摘要统计信息。</p>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 mb-2">GET /api/status-summary/ - 状态摘要查询接口</h3>
<p class="text-gray-600 mb-3">获取所有服务的状态摘要统计信息。</p>
<div>
<h4 class="font-medium text-gray-700 mb-2">响应示例：</h4>
<pre class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>{
"total_services": 10,
"up_count": 8,
"down_count": 1,
"unknown_count": 1
}</code></pre>
</div>
</div>
</div>
<div class="mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">状态码说明</h2>
<ul class="list-disc pl-5 text-gray-600 space-y-1">
<li><strong>UP</strong>: 服务正常运行</li>
<li><strong>DOWN</strong>: 服务不可用</li>
<li><strong>UNKNOWN</strong>: 服务状态未知</li>
</ul>
</div>
<div class="mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">检测类型说明</h2>
<ul class="list-disc pl-5 text-gray-600 space-y-1">
<li><strong>http</strong>: HTTP检测</li>
<li><strong>https</strong>: HTTPS检测</li>
<li><strong>tcp</strong>: TCP端口检测</li>
<li><strong>ping</strong>: PING检测</li>
</ul>
</div>
</div>
</div>
<div class="mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">状态码说明</h2>
<ul class="list-disc pl-5 text-gray-600 space-y-1">
<li><strong>UP</strong>: 服务正常运行</li>
<li><strong>DOWN</strong>: 服务不可用</li>
<li><strong>UNKNOWN</strong>: 服务状态未知</li>
</ul>
</div>
<div class="mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">检测类型说明</h2>
<ul class="list-disc pl-5 text-gray-600 space-y-1">
<li><strong>http</strong>: HTTP检测</li>
<li><strong>https</strong>: HTTPS检测</li>
<li><strong>tcp</strong>: TCP端口检测</li>
<li><strong>ping</strong>: PING检测</li>
</ul>
</div>
</div>
{% endblock %}
</main>
<!-- 页脚 -->
<footer class="bg-dark text-white py-6 mt-12">
<div class="container mx-auto px-4 text-center">
<p>© 2025 服务状态监控系统 | 数据每30秒自动更新</p>
</div>
</footer>
</body>
</html>