前端 | 向后端传数据，判断问题所在的调试过程

编辑

1. 在 vue 文件中，在调用函数之前先打印传入的数据

2. 在 js 文件中，打印接收到的数据

3. 在浏览器 Network 面板查看请求数据

4. 在 server.js 中查看请求数据

5. 确保 JSON 格式正确

知识点：JSON.stringify(req.body, null, 2)

1. 代码结构

2. 作用

核心功能

关键特点

3. 典型使用场景

(1) 日志记录

(2) API 响应

(3) 存储数据

例子——控制台的显示

最终检查点

理清架构：

vue文件中（界面）——调用函数

js文件中（api交互）——定义函数，并向后端发送 post 请求

node后端中（处理）—— 接收 post 请求，并进行处理

1. 在 vue 文件中，在调用函数之前先打印传入的数据

在 ChatView.vue 里调用 saveToFile 之前，先打印要传入的 userMessage 的数据格式：

javascript">const sendMessage = async () => {console.log("调用 saveToFile 之前，用户输入：", userMessage); // 查看传入的数据格式await saveToFile(userMessage); // 调用保存函数
}

要求：调用的传入的数据是

2. 在 `js` 文件中，打印接收到的数据

修改 deepseek.js，在 saveToFile() 里，先打印 text 的内容以及类型用于判断接受到的数据：

javascript">export const saveToFile = async (text) => {console.log("deepseek.js 收到的 text:", text); // 确保数据传递正确console.log("text 的类型:", typeof text); // 确保是字符串try {const response = await fetch("http://localhost:3000/save", {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({ content: text }), // 发送 JSON 格式数据});console.log("请求返回 response:", response); // 查看请求结果if (!response.ok) {throw new Error("服务器返回错误：" + response.status);}console.log("保存成功");} catch (error) {console.error("存档失败:", error);}
};

🚀 作用：

确保 text 的数据格式正确。
console.log("text 的类型:", typeof text); 确保 text 是字符串。
console.log("请求返回 response:", response); 查看 fetch 请求是否成功。

若发现 text 的格式是 content: Proxy，则在console.log之前添加：
javascript">// 解析contentArray为文本格式 ——> 把响应式数据 ref([])即Proxy 转为普通数组const normalArray = JSON.parse(JSON.stringify(contentArray.value || contentArray));const text = JSON.stringify({ content: normalArray });
用途：把响应式数据 ref([])即Proxy，转为普通数组。这样才可以进行解析。

代码如图：

知识点：

JSON.stringify() —— 对象→json字符串

JSON.parse() —— json字符串→js对象

3. 在浏览器 `Network` 面板查看请求数据

打开 浏览器开发者工具（F12 或 Ctrl+Shift+I）
切换到 Network（网络） 面板
找到 save 请求，点击后查看：
- Headers（请求头） → 确保 Content-Type: application/json
- Request Payload（请求数据） → 确保 body 里是 { "content": "你的数据" }

4. 在 `server.js` 中查看请求数据

修改 server.js，在 POST /save 里打印收到的数据：

javascript">const express = require("express");
const cors = require("cors");
const fs = require("fs");const app = express();
app.use(cors());
app.use(express.json()); // 确保能解析 JSON 数据app.post("/save", (req, res) => {console.log("后端接收到的数据:", req.body); // 打印请求内容const content = req.body.content;console.log("格式化后的 content:", content); // 确保是字符串fs.appendFile("conversation.txt", content + "\n", (err) => {if (err) {console.error("写入文件失败:", err);return res.status(500).json({ error: "写入失败" });}res.json({ message: "写入成功" });});
});app.listen(3000, () => {console.log("服务器运行在 http://localhost:3000");
});

🚀 作用：

console.log("后端接收到的数据:", req.body); 确保前端传递的 JSON 格式正确。
console.log("格式化后的 content:", content); 确保 content 是字符串。
fs.appendFile 把 content 追加写入 conversation.txt，每条信息换行存储。

5. 确保 JSON 格式正确

如果 deepseek.js（api交互的js） 里 console.log("text 类型:", typeof text); 发现 text 不是字符串，你可以用：

javascript">const textString = JSON.stringify(text, null, 2);  // 格式化 JSON
console.log("格式化后的 text:", textString);

这样你可以更容易发现问题。

知识点：JSON.stringify(req.body, null, 2)

JSON.stringify(req.body）对象→json字符串

JSON.stringify(req.body, null, 2) 是一个常见的 JavaScript 代码片段，主要用于将对象 req.body 序列化为格式化的 JSON 字符串，便于人类阅读或调试。以下是详细解析：

1. 代码结构
JSON.stringify(value, replacer, space)
value: 需要序列化的对象（这里是 req.body，通常来自 HTTP 请求的请求体，如 POST/PUT 请求的 JSON 数据）。

replacer: 可选参数，用于过滤或转换属性。此处设为 null，表示不进行过滤或修改。

space: 可选参数，指定缩进的空格数或字符串。此处设为 2，表示用 2 个空格 缩进格式化输出。

2. 作用

核心功能
将 req.body（通常是 JavaScript 对象）转换为 格式化的 JSON 字符串。
例如，原始对象：
{ name: "Alice", age: 30, address: { city: "Shanghai" } }
会被转换为：
{"name": "Alice","age": 30,"address": {"city": "Shanghai"}
}
关键特点

美化输出（Pretty-Print）:

space: 2 会为 JSON 字符串添加换行和缩进（2 个空格），使数据结构更清晰。

适合日志记录、调试输出或直接展示给用户。

保留完整数据（不过滤）:

replacer: null 表示不修改或过滤任何属性，所有可序列化的属性都会被保留。

兼容性:

自动处理 Date、undefined、函数 等类型（遵循 JSON.stringify 的默认规则）。

3. 典型使用场景

(1) 日志记录

将请求体内容记录到日志文件或控制台，便于排查问题：
console.log(JSON.stringify(req.body, null, 2));
// 输出：
// {
//   "username": "alice",
//   "action": "login"
// }
(2) API 响应

向客户端返回格式化的 JSON 数据（如调试接口时）：
res.send(JSON.stringify(req.body, null, 2));
(3) 存储数据

将请求体保存到文件或数据库（格式化的 JSON 更易维护）：
fs.writeFileSync("request.json", JSON.stringify(req.body, null, 2));

例子——控制台的显示

最终检查点

ChatView.vue → console.log 确保 saveToFile 传入正确的内容。
deepseek.js → console.log 确保 text 是字符串，并打印 fetch 请求的 response。
Network 面板 → 检查请求 Headers 和 Request Payload，确保格式正确。
server.js → console.log 确保后端收到的 JSON 正确，fs.appendFile 成功写入文件。

✅ 这样，你就可以完整跟踪 Vue 组件、deepseek.js、fetch 请求、server.js 之间的数据流，并找到问题所在！ 🚀

主要是通过输出和检查network面板进行调试，查看控制台结果和node终端的结果，来修改代码，找到问题所在。