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

目录

​编辑

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

[2. 在 js 文件中，打印接收到的数据](#2. 在 js 文件中，打印接收到的数据)

[3. 在浏览器 Network 面板查看请求数据](#3. 在浏览器 Network 面板查看请求数据)

[4. 在 server.js 中查看请求数据](#4. 在 server.js 中查看请求数据)

[5. 确保 JSON 格式正确](#5. 确保 JSON 格式正确)

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

[1. 代码结构](#1. 代码结构)

[2. 作用](#2. 作用)

核心功能

关键特点

[3. 典型使用场景](#3. 典型使用场景)

[(1) 日志记录](#(1) 日志记录)

[(2) API 响应](#(2) API 响应)

[(3) 存储数据](#(3) 存储数据)

例子------控制台的显示

最终检查点

---

理清架构：

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

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

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

---

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

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

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

  await saveToFile(userMessage); // 调用保存函数
}

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

---

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

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

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之前添加：

// 解析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 面板查看请求数据

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

---

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

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

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 不是字符串，你可以用：

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

关键特点

1. 美化输出（Pretty-Print）:

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

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

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

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

3. 兼容性:

   • 自动处理 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终端的结果，来修改代码，找到问题所在。