Node.js 服务器IP设置指南
我将创建一个直观的界面，展示如何在Node.js中设置服务器IP地址，并提供可交互的示例。
设计思路
- 左侧展示代码示例和说明
- 右侧提供可运行的模拟演示
- 使用现代UI设计，清晰区分不同部分
- 添加实际操作的模拟效果
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js 服务器IP设置指南</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: #333;
line-height: 1.6;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
}
.subtitle {
color: #7f8c8d;
font-size: 1.2rem;
}
.content {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
flex: 1;
min-width: 300px;
background: rgba(255, 255, 255, 0.95);
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.card-title {
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #3498db;
}
.code-block {
background: #2d3436;
color: #f5f6fa;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
overflow-x: auto;
font-family: 'Fira Code', monospace;
}
.code-comment {
color: #7f8c8d;
}
.code-keyword {
color: #e74c3c;
}
.code-string {
color: #2ecc71;
}
.code-number {
color: #9b59b6;
}
.demo-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 5px;
}
label {
font-weight: 600;
color: #2c3e50;
}
input, select {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 12px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: background 0.3s;
}
button:hover {
background: #2980b9;
}
.output {
background: #2d3436;
color: #f5f6fa;
padding: 15px;
border-radius: 5px;
min-height: 100px;
font-family: 'Fira Code', monospace;
margin-top: 15px;
white-space: pre-line;
}
.info-box {
background: #d4edff;
padding: 15px;
border-left: 4px solid #3498db;
margin: 15px 0;
border-radius: 0 5px 5px 0;
}
.steps {
margin: 15px 0;
}
.step {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.step-number {
background: #3498db;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.note {
background: #fff3cd;
padding: 15px;
border-left: 4px solid #ffc107;
margin: 15px 0;
border-radius: 0 5px 5px 0;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Node.js 服务器IP设置指南</h1>
<p class="subtitle">学习如何设置Node.js服务器的IP地址和端口</p>
</header>
<div class="content">
<div class="card">
<h2 class="card-title">代码示例</h2>
<div class="info-box">
<p>在Node.js中，您可以通过指定IP地址来控制服务器监听的位置。</p>
</div>
<h3>使用HTTP模块</h3>
<div class="code-block">
<span class="code-keyword">const</span> http = <span class="code-keyword">require</span>(<span class="code-string">'http'</span>);<br>
<br>
<span class="code-comment">// 创建HTTP服务器</span><br>
<span class="code-keyword">const</span> server = http.createServer((req, res) => {<br>
res.end(<span class="code-string">'Hello World!'</span>);<br>
});<br>
<br>
<span class="code-comment">// 设置服务器IP和端口</span><br>
<span class="code-keyword">const</span> PORT = <span class="code-number">3000</span>;<br>
<span class="code-keyword">const</span> HOST = <span class="code-string">'0.0.0.0'</span>; <span class="code-comment">// 监听所有网络接口</span><br>
<span class="code-comment">// const HOST = '127.0.0.1'; // 只监听本地回环</span><br>
<span class="code-comment">// const HOST = '192.168.1.100'; // 监听特定IP</span><br>
<br>
<span class="code-comment">// 启动服务器</span><br>
server.listen(PORT, HOST, () => {<br>
console.log(<span class="code-string">服务器运行在 http://<span class="code-keyword">${</span>HOST<span class="code-keyword">}</span>:<span class="code-keyword">${</span>PORT<span class="code-keyword">}</span></span>);<br>
});
</div>
<h3>使用Express框架</h3>
<div class="code-block">
<span class="code-keyword">const</span> express = <span class="code-keyword">require</span>(<span class="code-string">'express'</span>);<br>
<span class="code-keyword">const</span> app = express();<br>
<br>
app.get(<span class="code-string">'/'</span>, (req, res) => {<br>
res.send(<span class="code-string">'Hello World!'</span>);<br>
});<br>
<br>
<span class="code-keyword">const</span> PORT = <span class="code-number">3000</span>;<br>
<span class="code-keyword">const</span> HOST = <span class="code-string">'0.0.0.0'</span>;<br>
<br>
app.listen(PORT, HOST, () => {<br>
console.log(<span class="code-string">Express服务器运行在 http://<span class="code-keyword">${</span>HOST<span class="code-keyword">}</span>:<span class="code-keyword">${</span>PORT<span class="code-keyword">}</span></span>);<br>
});
</div>
<div class="note">
<p><strong>注意：</strong>使用 '0.0.0.0' 将使服务器监听所有可用网络接口，包括局域网和公网IP。</p>
</div>
</div>
<div class="card">
<h2 class="card-title">IP地址设置演示</h2>
<div class="demo-container">
<div class="input-group">
<label for="ipAddress">选择IP地址：</label>
<select id="ipAddress">
<option value="127.0.0.1">127.0.0.1 (本地回环)</option>
<option value="0.0.0.0" selected>0.0.0.0 (所有网络接口)</option>
<option value="192.168.1.100">192.168.1.100 (示例局域网IP)</option>
</select>
</div>
<div class="input-group">
<label for="port">端口号：</label>
<input type="number" id="port" value="3000" min="1024" max="65535">
</div>
<button id="startServer">启动服务器</button>
<div class="output" id="serverOutput">
// 服务器输出将显示在这里
</div>
</div>
<h3>设置步骤</h3>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<strong>选择要监听的IP地址</strong>
<p>根据您的需求选择合适的IP地址：本地回环、所有接口或特定IP。</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<strong>选择端口号</strong>
<p>通常使用3000、8080等端口，确保端口未被其他程序占用。</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<strong>启动服务器</strong>
<p>调用server.listen()或app.listen()方法启动服务器。</p>
</div>
</div>
</div>
<div class="info-box">
<p><strong>提示：</strong>在生产环境中，建议使用环境变量来设置IP和端口，</p>
<div class="code-block">
<span class="code-keyword">const</span> PORT = process.env.PORT || <span class="code-number">3000</span>;<br>
<span class="code-keyword">const</span> HOST = process.env.HOST || <span class="code-string">'0.0.0.0'</span>;
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('startServer').addEventListener('click', function() {
const ipAddress = document.getElementById('ipAddress').value;
const port = document.getElementById('port').value;
if (!port) {
alert('请输入有效的端口号');
return;
}
const output = document.getElementById('serverOutput');
// 模拟服务器启动输出
output.textContent => node server.js\n;
// 模拟服务器启动过程
setTimeout(() => {
output.textContent +=正在启动服务器...\n;
}, 500);
setTimeout(() => {
output.textContent +=服务器运行在 http://${ipAddress}:${port}\n;
output.textContent +=按 Ctrl+C 停止服务器;
}, 1500);
});
</script>
</body>
</html>功能说明
这个页面提供了以下功能：
1、代码示例：展示了使用原生HTTP模块和Express框架设置服务器IP的代码
2、交互演示：用户可以选择不同的IP地址和端口，点击"启动服务器"按钮查看模拟效果
3、步骤说明：详细解释了设置服务器IP的步骤
4、注意事项：提供了关于IP地址设置的重要提示
页面采用了响应式设计，可以在各种设备上正常显示，并使用颜色高亮使代码更易读。
您可以直接将这段代码保存为HTML文件并在浏览器中打开，即可查看完整效果。
文章摘自：https://idc.huochengrm.cn/fwq/15323.html
评论