当前位置：首页 > news >正文

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

news 来源：原创 2025/8/23 15:12:07

编辑

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

打开 浏览器开发者工具（F12 或 Ctrl+Shift+I）
切换到 Network（网络） 面板
找到 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"}
}
关键特点

美化输出（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终端的结果，来修改代码，找到问题所在。

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

目录编辑 1. 在 vue 文件中，在调用函数之前先打印传入的数据 2. 在 js 文件中，打印接收到的数据 3. 在浏览器 Network 面板查看请求数据 4. 在 server.js 中查看请求数据 5. 确保 JSON 格式正确知识点：JSON.stringify(req.body, …...

编程日记 2025/8/23 15:12:07

Python爬虫入门实战：爬取博客文章数据并保存

Python爬虫入门实战：爬取博客文章数据并保存概述本文将介绍如何使用Python的requests和BeautifulSoup库实现一个简单的网页爬虫，通过实际案例演示如何爬取博客文章数据并存储到本地文件。本文适合Python爬虫初学者，通过案例快速掌握基本爬…...

编程日记 2025/8/20 14:57:13

用python 的 sentiment intensity analyzer的情感分析器，将用户评论进行分类

SentimentIntensityAnalyzer 是 nltk（Natural Language Toolkit）库中的一个工具，用于进行情感分析。它会为文本返回四个得分：负向情感得分（neg）、中性情感得分（neu）、正向情感得分&a…...

编程日记 2025/8/16 10:06:05

Android Framework 常见面试题

以下是常见的 Android Framework 面试题，涵盖基础到高级知识点，帮助准备面试： 一、基础问题 Android 系统架构分层描述 Android 系统的四层架构（Linux Kernel、Native、Framework、Application）及各层职责。 Zygote …...

编程日记 2025/8/16 11:52:44

如何面向DeepSeek编程,打造游戏开发工具集，提升工作效率

最近我在思考： 如何基于DeepSeek，来提升工作效率，构建高效游戏开发工作流。方向有两个: A: 基于DeepSeek私有代码框架，让它完成项目代码的续写; B: 基于DeepSeek来创作一些工具，使用工具来提升效率，如…...

编程日记 2025/8/20 8:10:43

IDE集成开发环境MyEclipse中安装SVN

打开Myeclipse的help菜单----install from site 点击add弹出对话框在输入框中输入对应内容 http://subclipse.tigris.org/update_1.10.x 点击OK之后，会刷新出两个选项，需要选中的点击next，出现许可的时候选中同意，一直结束等…...

编程日记 2025/8/19 11:53:57

1、使用QT Creator 新建项目 2、添加Python解释器在.pro 文件中添加python头文件与链接库 INCLUDEPATH -I /usr/include/python3.8/ LIBS -L /usr/lib/python3.8/config-3.8-x86_64-linux-gnu -lpython3.8本文实验为ubuntu自带python3.8，虚拟环境中的python解释…...

编程日记 2025/8/22 23:46:42

C语言学习day25：WinAPI编程进阶07-游戏辅助时钟周期事件、定时器消息

接下来我们说一下时间周期（定时器）事件我们接下来继续用上一章中的代码来举例这次课程我们需要用的函数SetTimer（）函数和KillTimer（）函数 SetTimer() 语法： UINT_PTR SetTimer([in, opti…...

编程日记 2025/8/23 15:12:06

NVIDIA Jetson Nano的国产替代，基于算能BM1684X+FPGA+AI算力盒子，支持deepseek边缘部署

NVIDIA Jetson Nano的国产替代，基于算能BM1684X的AI算力盒子，支持deepseek边缘部署另外，还提供BM1684XFPGAAI的解决方案。核心板基于Sophon SG2300X SoC（也叫BM1684X）打造带有8核ARM Cortex-A53 2.3GHz&#xff0c…...

编程日记 2025/8/23 15:11:55

解锁STM32外设：开启嵌入式开发新世界

✨✨✨这里是小韩学长yyds的BLOG(喜欢作者的点个关注吧) ✨✨✨想要了解更多内容可以访问我的主页小韩学长yyds-CSDN博客目录探索 STM32 强大的外设家族初窥门径：STM32 外设开发基础开发方式与工具外设配置基础步骤深入剖析：常见外设应用实例…...

编程日记 2025/8/22 14:11:01

C++的内存管理

1. C/C内存分布我们先来看下面的一段代码和相关问题 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int…...

编程日记 2025/8/16 10:07:41

P8685 [蓝桥杯 2019 省 A] 外卖店优先级--优先队列“数组”！！！！！

P8685 [蓝桥杯 2019 省 A] 外卖店优先级题目解析优先队列如何判断是否使用优先队列？省略规则优先队列常用操作大顶堆 vs 小顶堆定义队列h队列数组代码题目解析每个外卖店会在不同的时间点收到订单，我们可以看见测试用例的时间顺序是不同的&#x…...

编程日记 2025/8/19 21:43:31

nuxt2 打包优化使用“compression-webpack-plugin”插件

在使用 Nuxt.js 构建项目时，为了提高性能，通常会考虑对静态资源进行压缩。compression-webpack-plugin 是一个常用的 Webpack 插件，用于在生产环境中对文件进行 Gzip 压缩。这对于减少网络传输时间和提高页面加载速度非常有帮助。下面是如何在…...

编程日记 2025/8/16 10:03:26

RabbitMQ知识点

1.为什么需要消息队列？ RabbitMQ体系结构操作001：RabbitMQ安装二、安装 # 拉取镜像 docker pull rabbitmq:3.13-management # -d 参数：后台运行 Docker 容器 # --name 参数：设置容器名称 # -p 参数：映射端口号&…...

编程日记 2025/8/23 13:48:46

Windsuf 连接失败问题：[unavailable] unavailable: dial tcp...

问题描述 3月6日，在使用Windsuf 时，遇到以下网络连接错误： [unavailable] unavailable: dial tcp 35.223.238.178:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of…...

编程日记 2025/8/19 18:44:42

Spark 3.0核心新特性解析与行业应用展望

Spark 3.0核心新特性解析与行业应用展望一、自适应查询执行（Adaptive Query Execution, AQE）作为Spark 3.0最具突破性的优化，AQE通过运行时动态调整执行计划，解决了传统静态优化的局限性。其核心技术突破体现在三方面： 1. 动态分区合并（Dynamically Coalescing Shuf…...

编程日记 2025/8/21 7:02:04

基于 harbor 构建docker私有仓库

仓库（Repository）是集中存放镜像的地方，又分公共仓库和私有仓库。有时候容易把仓库与注册服务器（Registry）混淆。实际上注册服务器是存放仓库的具体服务器， 一个注册服务器上可以有多个仓库，…...

编程日记 2025/8/22 23:58:50

MySQL基本建表操作

目录 1，创建数据库db_ck 1.1创建表 1.2 查看创建好的表 2,创建表t_hero 2.1 先进入数据库Db_Ck 2.1.1 这里可以看是否进入数据库: 2.2 创建表t_Hero 2.2.1 我们可以先在文本文档里面写好然后粘贴进去，因为直接写的话，错了要重新开始 …...

编程日记 2025/8/23 2:14:27

低空经济快速发展，无人机人才培养及校企实验室共建技术详解

随着低空经济的快速发展，无人机作为该领域的关键技术载体，其应用范围和市场需求正在迅速扩大。为了满足这一趋势，无人机人才的培养以及校企实验室的共建成为了推动技术进步和产业升级的重要途径。以下是对无人机人才培养及校企实验室共建技术…...

编程日记 2025/8/19 19:24:47

电脑网络出现问题！简单的几种方法解除电脑飞行模式

在某些情况下，您可能需要关闭电脑上的飞行模式以便重新连接到 Wi-Fi、蓝牙或其他无线网络。本教程中简鹿办公将指导您如何在 Windows 和 macO S操作系统上解除飞行模式。一、Windows 系统下解除飞行模式通过快捷操作中心步骤一：点击屏幕右下角的通知…...

编程日记 2025/8/23 15:12:01

Docker入门篇1：搜索镜像、拉取镜像、查看本地镜像列表、删除本地镜像

大家好我是木木，在当今快速发展的云计算与云原生时代，容器化技术蓬勃兴起，Docker 作为实现容器化的主流工具之一，为开发者和运维人员带来了极大的便捷。下面我们一起开始入门第一篇：搜索镜像、拉取镜像、查看本地镜像…...

编程日记 2025/8/20 7:55:09

网络初级复习作业

作业要求： 1,学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到白度网络中的HTTP服务器 2，学校网络内部网段基于192.168.1.0/24划分：PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3,学校内部路由使用静态路由&#xf…...

编程日记 2025/8/23 4:04:18

Spring Boot 调用DeepSeek API的详细教程

目录前置准备步骤1：创建Spring Boot项目步骤2：配置API参数步骤3：创建请求/响应DTO步骤4：实现API客户端步骤5：创建控制器步骤6：异常处理步骤7：测试验证单元测试示例Postman测试请求常见问题排查…...

编程日记 2025/8/22 14:00:26

rpc和proto

rpc全称远程过程控制，说白了是一种对信息发送和接收的规则编写方法，来自google，这些规则会以protobuf代码存到proto文件里。我以autoGen中agent_worker.proto为例，大概长这样 syntax "proto3";package agents;option …...

编程日记 2025/8/20 15:24:11

我的两个医学数据分析技术思路

我的两个医学数据分析技术思路从临床上获得的或者公共数据库数据这种属于观察性研究，是对临床诊疗过程中自然产生的数据进行分析而获得疾病发生发展的规律等研究成果。再细分，可以分为独立危险因素鉴定和预测模型构建两种。独立危险因素鉴定是一直以…...

编程日记 2025/8/22 13:33:18

GitHub上传项目

总结（有基础的话直接执行这几步，就不需要再往下看了）： git init 修改git的config文件：添加:[user]:name你的github用户名 email你注册github的用户名 git branch -m master main git remote add origin 你的URL gi…...

编程日记 2025/8/19 21:43:44

汇编点亮LED

目录一、ARM常用汇编指令二、汇编点亮LED 2.1 GPIO简述 2.2 GPIO相关寄存器 2.3 LED原理图 2.4 汇编点亮LED 一、ARM常用汇编指令常用汇编格式： label : instruction @ comment label：标号 instruction：具体汇编指令 comment：注释内容常…...

编程日记 2025/8/21 12:46:30

VS Code C++ 开发环境配置

VS Code 是当前非常流行的开发工具. 本文讲述如何配置 VS Code 作为 C开发环境. 本文将按照如下步骤来介绍如何配置 VS Code 作为 C开发环境. 安装编译器安装插件配置工作区第一个步骤的具体操作会因为系统不同或者方案不同而有不同的选择. 环境要求首先需要立即 VS Code…...

编程日记 2025/8/16 10:03:16

Python深度学习算法介绍

一、引言深度学习是机器学习的一个重要分支，它通过构建多层神经网络结构，自动从数据中学习特征表示，从而实现对复杂模式的识别和预测。Python作为一门强大的编程语言，凭借其简洁易读的语法和丰富的库支持，成为深度学…...

编程日记 2025/8/18 23:01:11

hadoop集群HDFS读写性能测试

一、写测试命令 hadoop jar $HADOOP_HOME/share/hadoop/mapreduce/hadoop-mapreduce-client-jobclient-3.1.4-tests.jar TestDFSIO -write -nrFiles 10 -size 10MB二、读测试命令 hadoop jar $HADOOP_HOME/share/hadoop/mapreduce/hadoop-mapreduce-client-jobclient-3.1.4-t…...

编程日记 2025/8/16 10:05:56

HTTPS加密原理详解

目录 HTTPS是什么加密是什么 HTTPS的工作流程 1.使用对称加密 2.引入非对称加密 3.引入证书机制客户端验证证书真伪的过程签名的加密流程整体工作流程总结 HTTPS是什么 HTTPS协议也是一个应用程协议，是在HTTP的基础上加入了一个加密层，由…...

编程日记 2025/8/19 11:53:42

react基本功

useLayoutEffect useLayoutEffect 用于在浏览器重新绘制屏幕之前同步执行代码。它与 useEffect 相同，但执行时机不同。主要特点执行时机：useLayoutEffect 在 DOM 更新完成后同步执行，但在浏览器绘制之前。这使得它可以在浏览器渲染之前读取和修改 DOM，避免视觉上的闪烁…...

编程日记 2025/8/16 10:11:38

计算机视觉｜3D 点云处理黑科技：PointNet++ 原理剖析与实战指南

一、引言在当今数字化与智能化快速发展的时代，3D 点云处理技术在多个前沿领域中发挥着重要作用。特别是在自动驾驶和机器人视觉等领域，这项技术已成为实现智能化的关键支撑。以自动驾驶为例，车辆需要实时感知周围复杂的环境信息&#xff…...

编程日记 2025/8/22 2:38:18

【VUE2】第三期——样式冲突、组件通信、异步更新、自定义指令、插槽

目录 1 scoped解决样式冲突 2 data写法 3 组件通信 3.1 父子关系 3.1.1 父向子传值 props 3.1.2 子向父传值 $emit 3.2 非父子关系 3.2.1 event bus 事件总线 3.2.2 跨层级共享数据 provide&inject 4 props 4.1 介绍 4.2 props校验完整写法 5 v-model原理 …...

编程日记 2025/8/23 7:11:58

WebAssembly技术及应用了解

WebAssembly（Wasm）是一种为Web设计的高效、低级的二进制指令格式，旨在提升Web应用的性能并支持多种编程语言。以下是对其核心概念、优势、应用场景及开发流程的系统介绍： 1. 核心概念二进制格式：Wasm采用紧凑的二进制…...

编程日记 2025/8/21 17:52:40

工程化与框架系列（26）--前端可视化开发

前端可视化开发 📊 引言前端可视化是现代Web应用中不可或缺的一部分，它能够以直观的方式展示复杂的数据和信息。本文将深入探讨前端可视化开发的关键技术和最佳实践，包括图表绘制、数据处理、动画效果等方面。可视化技术概述前端可视化…...

编程日记 2025/8/23 1:40:21

ESP32的IDF开发学习-WiFi的开启、配置与连接

前言本章节将实现如何使用ESP32的WiFi功能，尽可能的详细地介绍简介 ESP32中的wifi支持双工作模式 Station（STA）模式：连接到路由器或其他AP设备，可通过esp_wifi_set_mode(WIFI_MODE_STA)设置。SoftAP模式&#xf…...

编程日记 2025/8/21 13:13:53

2025-3-9 一周总结

目前来看本学期上半程汇编语言,编译原理,数字电路和离散数学是相对重点的课程. 在汇编语言和编译原理这块,个人感觉黑书内知识点更多,细节更到位,体系更完整,可以在老师讲解之前进行预习应当及时复习每天的内容.第一是看书,然后听课,在一天结束后保证自己的知识梳理完整,没有…...

编程日记 2025/8/21 21:01:45

【网络编程】事件选择模型

十、基于I/O模型的网络开发 10.9 事件选择模型 10.0.1 基本概念事件选择(WSAEventSelect) 模型是另一个有用的异步 I/O 模型。和 WSAAsyncSelect 模型类似的是，它也允许应用程序在一个或多个套接字上接收以事件为基础的网络事件通知，最主要的差别在…...

编程日记 2025/8/19 19:58:58

Java核心语法：从变量到控制流

一、变量与数据类型（对比Python/C特性） 1. 变量声明三要素 // Java（强类型语言，需显式声明类型） int age 25; String name "CSDN"; // Python（动态类型） age 25 name …...

编程日记 2025/8/21 21:32:53

信息安全与网络安全的区别_信息安全与网络安全之差异探析

在当今数字化时代，信息安全与网络安全成为了人们关注的热点话题。尽管这两个概念经常被提及，但它们之间存在着明显的区别。本文旨在探讨信息安全与网络安全的定义、范畴及应对策略，以帮助读者更好地理解和应对相关挑战。一、定义与范畴的差…...

编程日记 2025/8/22 23:19:46

http协议的三次握手机制

HTTP协议是基于TCP协议的，因此HTTP的三次握手机制实际上就是TCP的三次握手机制。TCP（传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。为了确保通信的可靠性，TCP在建立连接时需要进行三次握手。下面我们详细…...

编程日记 2025/8/18 11:42:01

探秘沃尔什-哈达玛变换（WHT）原理

沃尔什-哈达玛变换（WHT）起源起源与命名（20世纪早期） 数学基础：该变换的理论基础由法国数学家雅克哈达玛（Jacques Hadamard）在1893年提出，其核心是哈达玛矩阵的构造。扩展与命名&…...

编程日记 2025/8/19 14:22:56

C++ Windows下屏幕截图

屏幕截图核心代码（如果要求高帧率，请使用DxGI）： // RGB到YUV的转换公式 #define RGB_TO_Y(r, g, b) ((int)((0.299 * (r)) (0.587 * (g)) (0.114 * (b)))) #define RGB_TO_U(r, g, b) ((int)((-0.169 * (r)) - (0.331 * (g)) …...

编程日记 2025/8/22 2:00:20

【python爬虫】酷狗音乐爬取练习

注意：本次爬取的音乐仅有1分钟试听，仅作学习爬虫的原理，完整音乐需要自行下载客户端。一、初步分析登陆酷狗音乐后随机选取一首歌，在请求里发现一段mp3文件，复制网址，确实是我们需要的url。复制音频的…...

编程日记 2025/8/19 11:53:45

电路的一些设计经验

这个C37在这里位于AMS1117-3.3稳压器的输入端。这个是作为输入滤波电容，有助于平滑输入电压，减少输入电压的纹波和噪声，从而提高稳压器LDO的稳定性。电容器储存电荷，当输入电压出现小的拨动或者纹波时，电容器可以释放…...

编程日记 2025/8/23 1:11:29

Windows编译环境搭建(MSYS2\MinGW\cmake)

我的音视频/流媒体开源项目(github) 一、基础环境搭建 1.1 MSYS2\MinGW 参考：1. 基于MSYS2的Mingw-w64 GCC搭建Windows下C开发环境_msys2使用mingw64编译在Widndows系统上，使用gcc工具链（g）进行C程序开发？可以的&a…...

编程日记 2025/8/22 7:01:04

Vue 框架深度解析：源码分析与实现原理详解

文章目录一、Vue 核心架构设计1.1 整体架构流程图1.2 模块职责划分二、响应式系统源码解析2.1 核心类关系图2.2 核心源码分析2.2.1 数据劫持实现2.2.2 依赖收集过程三、虚拟DOM与Diff算法实现3.1 Diff算法流程图3.2 核心Diff源码四、模板编译全流程剖析4.1 编译流程图4.2 编…...

编程日记 2025/8/23 0:43:56

前端 | CORS 跨域问题解决

问题：Access to fetch at http://localhost:3000/save from origin http://localhost:5174 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the request…...

编程日记 2025/8/16 12:03:29

《白帽子讲 Web 安全》之文件操作安全

目录引言 （一）文件上传与下载漏洞概述 1.文件上传的常见安全隐患 1.1前端校验的脆弱性与服务端脚本执行危机在文件上传流程中，部分开发者可能会在前端使用 JavaScript 代码对文件后缀名进行简单校验，试图以此阻止非法文件上传…...

编程日记 2025/8/21 14:50:18

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

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

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

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

5. 确保 JSON 格式正确

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

1. 代码结构

2. 作用

核心功能

关键特点

3. 典型使用场景

(1) 日志记录

(2) API 响应

(3) 存储数据

例子——控制台的显示

最终检查点

相关文章：

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

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

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

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

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