React前端搭配Node+Express后端：实现SQL数据查询及ID搜索展示功能

一、后端（Node.js + Express + SQL） #

1. 依赖安装 #

先安装核心依赖包：

npm install express mysql2 cors

2. 数据库连接与路由实现 #

创建server.js，完成数据库配置与接口编写（以MySQL为例，其他SQL数据库可替换对应驱动）：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const app = express();
const port = 5000;

// 数据库连接配置（替换为你的实际信息）
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_db_username',
  password: 'your_db_password',
  database: 'your_db_name'
});

// 建立数据库连接
db.connect((err) => {
  if (err) throw err;
  console.log('已连接到SQL数据库');
});

// 启用跨域与JSON解析
app.use(cors());
app.use(express.json());

// 接口1：获取全量数据
app.get('/api/data', (req, res) => {
  const query = 'SELECT * FROM your_table_name';
  db.query(query, (err, results) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    res.json(results);
  });
});

// 接口2：根据ID查询单条记录
app.get('/api/data/:id', (req, res) => {
  const { id } = req.params;
  const query = 'SELECT * FROM your_table_name WHERE id = ?';
  db.query(query, [id], (err, results) => {
    if (err) {
      res.status(500).json({ error: err.message });
      return;
    }
    if (results.length === 0) {
      res.status(404).json({ message: '该ID不存在' });
      return;
    }
    res.json(results[0]);
  });
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});

二、前端（React） #

1. 依赖安装 #

安装表格组件（以react-data-grid为例，也可替换为你习惯的Grid库）：

npm install react-data-grid

2. 核心组件实现 #

创建DataGridView.js，实现数据加载与ID搜索功能：

import React, { useState } from 'react';
import DataGrid from 'react-data-grid';

const DataGridView = () => {
  const [tableData, setTableData] = useState([]);
  const [searchId, setSearchId] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  // 表格列配置（替换为你的数据库表字段）
  const columns = [
    { key: 'id', name: 'ID' },
    { key: 'name', name: '名称' },
    { key: 'email', name: '邮箱' },
    // 按需添加其他字段
  ];

  // 加载全量数据
  const loadAllData = async () => {
    setIsLoading(true);
    setErrorMsg('');
    try {
      const res = await fetch('http://localhost:5000/api/data');
      if (!res.ok) throw new Error('数据加载失败');
      const data = await res.json();
      setTableData(data);
    } catch (err) {
      setErrorMsg(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  // 根据ID搜索数据
  const searchById = async () => {
    if (!searchId.trim()) {
      setErrorMsg('请输入有效ID');
      return;
    }
    setIsLoading(true);
    setErrorMsg('');
    try {
      const res = await fetch(`http://localhost:5000/api/data/${searchId}`);
      if (res.status === 404) {
        setErrorMsg('该ID不存在于数据库中');
        setTableData([]);
        return;
      }
      if (!res.ok) throw new Error('搜索请求失败');
      const data = await res.json();
      setTableData([data]); // 用数组包裹适配表格组件
    } catch (err) {
      setErrorMsg(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <div style={{ marginBottom: '1.5rem' }}>
        <button onClick={loadAllData} disabled={isLoading}>
          {isLoading ? '加载中...' : '获取全部数据'}
        </button>
        <div style={{ marginLeft: '1rem', display: 'inline-block' }}>
          <input
            type="text"
            placeholder="输入ID搜索"
            value={searchId}
            onChange={(e) => setSearchId(e.target.value)}
            disabled={isLoading}
            style={{ marginRight: '0.5rem' }}
          />
          <button onClick={searchById} disabled={isLoading}>
            {isLoading ? '搜索中...' : '搜索'}
          </button>
        </div>
      </div>
      {errorMsg && <p style={{ color: '#dc2626', marginBottom: '1rem' }}>{errorMsg}</p>}
      <DataGrid columns={columns} rows={tableData} />
    </div>
  );
};

export default DataGridView;

3. 在主应用中引入组件 #

修改App.js：

import DataGridView from './DataGridView';

function App() {
  return (
    <div className="App">
      <h1 style={{ textAlign: 'center', margin: '2rem 0' }}>数据管理面板</h1>
      <DataGridView />
    </div>
  );
}

export default App;

关键注意事项 #

• 替换代码中所有占位信息（数据库配置、表名、字段等）为你的实际业务数据
• 生产环境建议使用dotenv管理敏感配置（如数据库密码），避免硬编码
• 可根据需求扩展输入验证、加载状态样式、空数据提示等UI优化

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