欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > 前端 | 向后端传数据,判断问题所在的调试过程

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

2025/3/16 7:37:56 来源:https://blog.csdn.net/weixin_42479421/article/details/146130668  浏览:    关键词:前端 | 向后端传数据,判断问题所在的调试过程

目录

​编辑

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 的数据格式:

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.appendFilecontent 追加写入 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. 兼容性:

    • 自动处理 Dateundefined函数 等类型(遵循 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.vueconsole.log 确保 saveToFile 传入正确的内容。
  • deepseek.js console.log 确保 text 是字符串,并打印 fetch 请求的 response
  • Network 面板 → 检查请求 HeadersRequest Payload,确保格式正确。
  • server.jsconsole.log 确保后端收到的 JSON 正确fs.appendFile 成功写入文件。

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词