客户端与服务器端代码实现指南
在现代网络架构中，客户端（Client）和服务器端（Server）通过网络协议（通常是 HTTP/HTTPS）进行通信，客户端负责用户界面和交互，而服务器端负责数据处理、业务逻辑和数据库管理。
以下是一个基于 Node.js (Express) 作为服务端和 原生 JavaScript (Fetch API) 作为客户端的经典实现示例。
服务器端代码 (Server-side)
服务器端运行在远程机器或本地后台,监听特定端口的请求并返回相应的响应。
技术栈： Node.js + Express 框架
// 导入依赖
const express = require('express');
const cors = require('cors'); // 用于解决跨域资源共享问题
const app = express();
const PORT = 3000;
// 中间件配置
app.use(cors()); // 允许客户端从不同端口访问
app.use(express.json()); // 解析 JSON 格式的请求体
// 定义一个简单的 GET 接口
app.get('/api/greet', (req, res) => {
res.json({
status: 'success',
message: '你好！这是来自服务器端的响应。',
timestamp: new Date().toISOString()
});
});
// 定义一个 POST 接口，接收客户端数据
app.post('/api/data', (req, res) => {
const userData = req.body;
console.log('收到客户端数据:', userData);
res.json({
status: 'success',
received: userData,
message: `服务器已成功接收到 ${userData.name} 的数据`
});
});
// 启动服务器
app.listen(PORT, () => {
console.log(`服务器运行在 http://localhost:${PORT}`);
});
服务端核心要点：
- 监听端口：通过
app.listen开启端口,等待客户端连接。 - 路由处理：定义不同的路径（如
/api/greet）来处理不同的业务请求。 - 状态码与响应：使用
res.json()返回结构化的数据，并隐含发送 HTTP 状态码（如 200 OK）。 - CORS 处理：由于浏览器安全策略，必须配置
cors才能允许前端页面访问不同端口的 API。
客户端代码 (Client-side)
客户端运行在用户的浏览器中,负责发起请求并将结果呈现给用户。
技术栈： HTML + JavaScript (ES6+)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">客户端请求示例</title>
<style>
body { font-family: sans-serif; padding: 20px; }
.result { margin-top: 20px; padding: 10px; background: #f0f0f0; border-radius: 5px; }
</style>
</head>
<body>
<h2>客户端与服务端交互</h2>
<button id="getBtn">获取服务器问候</button>
<button id="postBtn">发送用户信息</button>
<div id="output" class="result">等待操作...</div>
<script>
const outputDiv = document.getElementById('output');
const SERVER_URL = 'http://localhost:3000';
// 1. 发起 GET 请求
document.getElementById('getBtn').onclick = async () =
> {
try {
const response = await fetch(`${SERVER_URL}/api/greet`);
const data = await response.json();
outputDiv.innerHTML = `<strong>响应结果：</strong> ${data.message} <br> 时间：${data.timestamp}`;
} catch (error) {
outputDiv.innerHTML = '错误：无法连接到服务器';
}
};
// 2. 发起 POST 请求
document.getElementById('postBtn').onclick = async () => {
const payload = { name: '张三', age: 25 };
try {
const response = await fetch(`${SERVER_URL}/api/data`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
const data = await response.json();
outputDiv.innerHTML = `<strong>服务器回复：</strong> ${data.message}`;
} catch (error) {
outputDiv.innerHTML = '错误：数据发送失败';
}
};
</script>
</body>
</html>
客户端核心要点：
- Fetch API：现代浏览器内置的异步请求方法，用于替代传统的 AJAX。
- 异步处理：使用
async/await确保在等待服务器响应时不会阻塞浏览器主线程。 - 数据序列化：在发送 POST 请求时，必须使用
JSON.stringify()将 JS 对象转换为字符串。 - DOM 操作：将服务器返回的 JSON 数据动态更新到 HTML 页面中。
运行流程总结
- 步骤 1：安装 Node.js，在文件夹中执行
npm init -y和npm install express cors。 - 步骤 2：运行服务端代码
node server.js，此时服务器在 3000 端口待命。 - 步骤 3：用浏览器打开 HTML 文件。
- 步骤 4：点击按钮 $rightarrow$ 客户端发出 HTTP 请求 $rightarrow$ 服务器处理逻辑 $rightarrow$ 服务器返回 JSON 响应 $rightarrow$ 客户端更新 UI 界面。
关键对比
| 特性 | 客户端 (Client) | 服务器端 (Server) |
|---|---|---|
| 运行环境 | 浏览器 / 移动 App | 云服务器 / 物理机 / Docker |
| 核心关注点 | 用户体验 (UX)、界面渲染、输入验证 | 数据安全、并发处理、数据库交互 |
| 可见性 | 代码对用户可见 (前端源码) | 代码对用户不可见 (后端私有) |
| 通信角色 | 请求发起者 (Requester) | 请求响应者 (Responder) |
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/489821.html
