192 lines
6.1 KiB
HTML
192 lines
6.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>实验4 高性能Web服务器 - 测试页面</title>
|
|||
|
|
<style>
|
|||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|||
|
|
body {
|
|||
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 40px;
|
|||
|
|
max-width: 800px;
|
|||
|
|
width: 90%;
|
|||
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
font-size: 2em;
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
color: #555;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
.features {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
.feature-card {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
border: 2px solid #e9ecef;
|
|||
|
|
transition: transform 0.2s, border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
.feature-card:hover {
|
|||
|
|
transform: translateY(-3px);
|
|||
|
|
border-color: #667eea;
|
|||
|
|
}
|
|||
|
|
.feature-icon { font-size: 2em; margin-bottom: 10px; }
|
|||
|
|
.feature-title { font-weight: bold; color: #333; margin-bottom: 5px; }
|
|||
|
|
.feature-desc { font-size: 0.9em; color: #666; }
|
|||
|
|
.test-section {
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.test-section h3 {
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
border-bottom: 2px solid #667eea;
|
|||
|
|
padding-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
form {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
input[type="text"], input[type="email"], textarea {
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 2px solid #ddd;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-size: 1em;
|
|||
|
|
transition: border-color 0.2s;
|
|||
|
|
}
|
|||
|
|
input:focus, textarea:focus {
|
|||
|
|
border-color: #667eea;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
button, .btn {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: white;
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-size: 1em;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|||
|
|
text-decoration: none;
|
|||
|
|
display: inline-block;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
button:hover, .btn:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 5px 15px rgba(102,126,234,0.4);
|
|||
|
|
}
|
|||
|
|
.link-list { list-style: none; padding: 0; }
|
|||
|
|
.link-list li { margin: 8px 0; }
|
|||
|
|
.link-list a {
|
|||
|
|
color: #667eea;
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.link-list a:hover { text-decoration: underline; }
|
|||
|
|
.server-info {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 0.85em;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
pre { background: white; padding: 15px; border-radius: 8px; overflow-x: auto; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h1>🚀 实验4 高性能Web服务器</h1>
|
|||
|
|
<h2>epoll + 线程池 + LRU缓存 + GET/POST</h2>
|
|||
|
|
|
|||
|
|
<div class="features">
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">⚡</div>
|
|||
|
|
<div class="feature-title">epoll I/O复用</div>
|
|||
|
|
<div class="feature-desc">基于epoll的边缘触发模式，高效处理海量并发连接</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">🧵</div>
|
|||
|
|
<div class="feature-title">线程池</div>
|
|||
|
|
<div class="feature-desc">预创建工作线程，避免频繁创建销毁开销</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">💾</div>
|
|||
|
|
<div class="feature-title">LRU缓存</div>
|
|||
|
|
<div class="feature-desc">哈希表+双向链表，O(1)查找与淘汰</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-card">
|
|||
|
|
<div class="feature-icon">📡</div>
|
|||
|
|
<div class="feature-title">GET/POST</div>
|
|||
|
|
<div class="feature-desc">完整支持HTTP GET和POST方法</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>📋 功能测试</h3>
|
|||
|
|
<ul class="link-list">
|
|||
|
|
<li><a href="/test.html">📄 静态页面测试 (GET)</a></li>
|
|||
|
|
<li><a href="/example.jpg">🖼️ 图片访问测试 (JPEG)</a></li>
|
|||
|
|
<li><a href="/nonexistent.html">❌ 404错误页面测试</a></li>
|
|||
|
|
<li><a href="/cgi-bin/add?a=10&b=20">🔧 CGI动态内容测试</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>📝 POST 方法测试</h3>
|
|||
|
|
<form action="/submit" method="POST">
|
|||
|
|
<label for="name">姓名:</label>
|
|||
|
|
<input type="text" id="name" name="name" placeholder="输入您的姓名" required>
|
|||
|
|
<label for="email">邮箱:</label>
|
|||
|
|
<input type="email" id="email" name="email" placeholder="输入您的邮箱" required>
|
|||
|
|
<label for="message">留言:</label>
|
|||
|
|
<textarea id="message" name="message" rows="3" placeholder="输入您的留言..."></textarea>
|
|||
|
|
<button type="submit">✉️ 提交 POST 请求</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="test-section">
|
|||
|
|
<h3>📊 缓存测试</h3>
|
|||
|
|
<p style="color:#666;margin-bottom:10px;">
|
|||
|
|
多次访问同一资源观察 X-Cache 响应头: 首次 MISS，后续 HIT
|
|||
|
|
</p>
|
|||
|
|
<pre># 测试缓存命中
|
|||
|
|
curl -I http://localhost:8088/index.html
|
|||
|
|
# 第一次: X-Cache: MISS
|
|||
|
|
# 第二次: X-Cache: HIT (从缓存返回)
|
|||
|
|
|
|||
|
|
# 压力测试
|
|||
|
|
ab -n 10000 -c 100 http://localhost:8088/index.html
|
|||
|
|
wrk -t4 -c100 -d30s http://localhost:8088/index.html</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="server-info">
|
|||
|
|
<p>Powered by Experiment4-WebServer v40.0 | epoll + Thread Pool + LRU Cache</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|