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>
|