如何验证JavaScript代码是否从DataGrip数据库获取数据？

一、服务端验证步骤 #

1. 先确认数据库连接是否正常 #

在server.js的MySQL连接代码块中，添加明确的成功/失败日志：

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_user',
  password: 'your_pwd',
  database: 'your_db'
});

connection.connect(err => {
  if (err) {
    console.error('数据库连接失败:', err.stack); // 输出错误栈，便于定位问题
    return;
  }
  console.log('数据库连接成功，连接ID:', connection.threadId); // 明确输出连接成功标识
});

启动服务后查看VSCode终端：无日志则检查服务是否正常启动；有错误日志则根据提示修正连接参数。

2. 单独测试API接口 #

安装VSCode的REST Client插件，新建test.http文件写入测试请求：

### 测试GET接口
GET http://localhost:3000/api/club

### 测试POST接口
POST http://localhost:3000/api/club
Content-Type: application/json

{"name": "测试俱乐部", "desc": "测试描述"}

点击请求上方的Send Request按钮，直接在VSCode中查看响应结果，同时观察服务端终端的日志输出。

3. 在接口内部添加关键日志 #

在api/club.js的GET、POST方法中，添加数据库操作前后的日志：

// GET接口示例
router.get('/', (req, res) => {
  console.log('收到GET /api/club请求');
  const sql = 'SELECT * FROM club';
  connection.query(sql, (err, results) => {
    if (err) {
      console.error('数据库查询失败:', err);
      return res.status(500).json({error: '查询失败'});
    }
    console.log('查询到的数据:', results);
    res.json(results);
  });
});

通过日志判断是接口未触发，还是数据库查询环节出错。

二、客户端验证步骤 #

1. 查看浏览器开发者工具 #

client端的console.log不会输出到VSCode终端，需打开浏览器F12开发者工具：

• 切换到Console标签，查看请求相关的日志和错误信息；
• 切换到Network标签，筛选XHR/Fetch，找到/api/club请求，查看请求状态（200=成功，404=路由不存在，500=服务端错误）、请求头、响应内容。

2. 完善客户端请求的错误捕获 #

在clubpages.js的请求代码中添加完整的错误处理：

// 以fetch为例
fetch('/api/club')
  .then(res => {
    console.log('响应状态码:', res.status);
    if (!res.ok) throw new Error(`请求失败: ${res.status}`);
    return res.json();
  })
  .then(data => {
    console.log('获取到的俱乐部数据:', data);
    // 后续渲染逻辑
  })
  .catch(err => {
    console.error('请求出错:', err);
  });

这样能在浏览器控制台看到更详细的错误信息，定位是请求未发送、跨域问题还是数据解析错误。

三、VSCode可用的辅助功能 #

1. 断点调试 #

• 服务端调试：打开VSCode的Run and Debug面板，选择Node.js环境（自动生成launch.json），在server.js的连接代码、接口代码处点击行号左侧添加断点，启动调试后可逐步执行代码，查看变量值（比如数据库连接对象、查询结果）。
• 客户端调试：安装Debugger for Chrome插件，配置调试目标为浏览器，在clubpages.js的请求逻辑处加断点，调试时可查看请求的发起过程和数据返回情况。

2. 数据库直接查看 #

安装VSCode的MySQL插件，在左侧面板打开数据库视图，输入和server.js一致的连接参数，直接查看数据库的表结构、数据，确认数据库中是否有预期数据，验证接口返回是否和数据库一致。

3. 终端分屏 #

在VSCode中打开多个终端，分别启动服务端和客户端，同时查看两边的日志输出，方便实时排查问题。

内容的提问来源于stack exchange，提问作者ti3kto3k