深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据

2025/2/6 2:31:46 来源：https://blog.csdn.net/2503_90221393/article/details/145399063 浏览: 次关键词：深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据

深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据

一、服务器如何响应前端请求

前端与后端的交互主要通过 HTTP 协议实现。以下是详细步骤：

1. 前端发起 HTTP 请求

GET 请求：用于从服务器获取数据。
POST 请求：用于向服务器提交数据。

例如，使用 JavaScript 的 fetch API 发送 POST 请求：

fetch('https://example.com/api/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

2. 服务器接收请求

服务器监听特定端口，等待客户端请求。以 Node.js 和 Express 为例：

const express = require('express');
const app = express();
app.use(express.json());app.post('/api/data', (req, res) => {const receivedData = req.body;// 处理接收到的数据res.json({ message: 'Data received', data: receivedData });
});app.listen(3000, () => console.log('Server running on port 3000'));

3. 服务器处理请求并生成响应

服务器根据请求路径和方法，处理请求数据，执行相应的业务逻辑，然后生成响应。例如，处理前端提交的表单数据并返回处理结果。

4. 服务器发送 HTTP 响应

服务器将处理结果封装成 HTTP 响应，通常包含状态码、响应头和响应体。状态码表示请求的处理结果，如：

200：成功
404：资源未找到
500：服务器内部错误
5. 前端接收并处理响应
前端接收到服务器的响应后，解析响应数据，并根据需要更新 UI 或进行其他操作。

二、后端如何查看前端提交的数据

为了在后端查看前端提交的数据，通常需要将数据存储在数据库中，并提供管理界面进行查看。以下是实现步骤：

1. 数据存储

将前端提交的数据保存到数据库中。以 Node.js 和 MongoDB 为例：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });const DataSchema = new mongoose.Schema({key: String,value: String,createdAt: { type: Date, default: Date.now }
});const DataModel = mongoose.model('Data', DataSchema);app.post('/api/data', async (req, res) => {const newData = new DataModel(req.body);await newData.save();res.json({ message: 'Data saved' });
});

2. 创建管理界面

提供一个后端页面，展示存储的数据。可以使用模板引擎如 EJS：

app.set('view engine', 'ejs');app.get('/admin/data', async (req, res) => {const dataList = await DataModel.find();res.render('dataList', { data: dataList });
});

在 views/dataList.ejs 中：

<!DOCTYPE html>
<html>
<head><title>Data List</title>
</head>
<body><h1>Submitted Data</h1><ul><% data.forEach(item => { %><li><%= item.key %>: <%= item.value %> (Submitted at: <%= item.createdAt.toLocaleString() %>)</li><% }) %></ul>
</body>
</html>