使用Node为后端、React为前端如何将数据库数据渲染到Material UI表格

第一步：Node后端接口开发 #

• 先安装所需依赖：npm install express cors mysql2（如果你用的是其他数据库，替换对应驱动即可）

const express = require('express');
const cors = require('cors');
const mysql = require('mysql2/promise');
const app = express();
const port = 3001;

// 允许前端跨域请求
app.use(cors());

// 替换为你自己的数据库连接配置
const dbConfig = {
  host: 'localhost',
  user: '数据库用户名',
  password: '数据库密码',
  database: '业务数据库名'
};

// 学院数据查询接口
app.get('/api/colleges', async (req, res) => {
  try {
    const connection = await mysql.createConnection(dbConfig);
    // SQL查询字段可以别名处理，直接匹配前端需要的字段名，减少前端格式化成本
    const [rows] = await connection.execute(`
      SELECT 
        college_name as collegeName, 
        registrar_name as registrarName, 
        phone_number as phoneNumber, 
        email_address as emailAddress 
      FROM 你的学院表名
    `);
    await connection.end();
    res.json(rows);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

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

第二步：React前端适配改造 #

• 安装请求依赖（也可以直接用浏览器原生fetch）：npm install axios
• 改造原有表格组件，替换静态rows为动态请求的状态变量：

import { useState, useEffect } from 'react';
import axios from 'axios';
// 原有Material UI相关组件导入保持不变

function createData(collegeName, registrarName, phoneNumber, emailAddress, action) {
  return {collegeName , registrarName, phoneNumber, emailAddress, action };
}

export default function EnhancedTable() {
  // 替换原有静态rows为状态变量
  const [rows, setRows] = useState([]);

  useEffect(() => {
    // 组件挂载时拉取后端数据
    const fetchCollegeData = async () => {
      try {
        const res = await axios.get('http://localhost:3001/api/colleges');
        // 格式化数据适配表格要求，action字段可自定义为操作按钮配置
        const formattedRows = res.data.map(item => createData(
          item.collegeName,
          item.registrarName,
          item.phoneNumber,
          item.emailAddress,
          '操作' // 可替换为自定义的按钮组件
        ));
        setRows(formattedRows);
      } catch (err) {
        console.error('数据拉取失败：', err);
      }
    };
    fetchCollegeData();
  }, []);

  // 原有Material UI表格的所有渲染逻辑保持不变，直接使用rows变量即可
  // ... 剩余原有表格代码
}

注意：如果后端返回字段和createData要求的参数完全匹配，可以跳过格式化步骤直接赋值给rows；生产环境建议把接口地址配置到环境变量中，不要硬编码在组件里。

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