React web应用如何获取Azure SQL数据库查询到的数据

第一步：Node.js 后端新增API接口 #

你已经实现了Azure SQL的查询逻辑，只需要在后端新增HTTP接口把数据以JSON格式暴露即可，通用方案基于Express框架实现，如果你用其他Node服务框架逻辑完全一致：

• 先安装必要依赖express和cors，解决跨域问题

const express = require('express');
const cors = require('cors');
const app = express();
// 生产环境建议替换为你React前端的实际部署域名，避免安全风险
app.use(cors({ origin: '你的React前端访问地址' }));

// 你已有的Azure SQL查询函数，不需要修改原有逻辑
async function queryAzureSQL(sqlStr) {
  // 原有查询逻辑，返回查询结果数组
}

// 新增数据查询接口
app.get('/api/get-sql-data', async (req, res) => {
  try {
    const sqlData = await queryAzureSQL('你需要执行的查询语句');
    // 把查询结果以JSON格式返回
    res.status(200).json({ success: true, data: sqlData });
  } catch (err) {
    res.status(500).json({ success: false, error: err.message });
  }
});

// 监听端口，Azure部署时会自动读取环境变量中的PORT参数
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`后端服务运行在端口${PORT}`));

修改完成后重新部署Node后端到Azure，可直接在浏览器访问https://你的Azure后端域名/api/get-sql-data测试接口是否能正常返回JSON数据。

第二步：React 前端调用接口并渲染数据 #

前端用原生fetch或者axios调用后端接口，拿到数据后渲染即可，示例用原生fetch无需额外安装依赖：

import { useState, useEffect } from 'react';

function SqlDataDisplay() {
  const [dataList, setDataList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchSqlData = async () => {
      try {
        // 替换为你Azure后端的实际接口地址，前后端部署在同一Azure Web App时可直接用相对路径/api/get-sql-data
        const res = await fetch('https://你的Azure后端域名/api/get-sql-data');
        const result = await res.json();
        if (result.success) {
          setDataList(result.data);
        } else {
          throw new Error(result.error);
        }
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchSqlData();
  }, []);

  if (loading) return <div>数据加载中...</div>;
  if (error) return <div>数据加载失败：{error}</div>;

  // 按你实际的表字段调整渲染逻辑即可
  return (
    <div>
      <h3>SQL查询结果</h3>
      <table border={1} cellPadding={8}>
        <thead>
          <tr>
            <th>字段名1</th>
            <th>字段名2</th>
            {/* 补充其他需要展示的字段 */}
          </tr>
        </thead>
        <tbody>
          {dataList.map((item, index) => (
            <tr key={index}>
              <td>{item.字段1}</td>
              <td>{item.字段2}</td>
              {/* 补充其他字段的渲染逻辑 */}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default SqlDataDisplay;

第三步：Azure 部署配置注意事项 #

• 如果在代码中已经配置了CORS，不需要额外修改Azure后台的CORS设置，代码配置优先级更高
• 禁止直接把前端传入的字符串作为SQL语句执行，避免SQL注入风险，所有查询逻辑都放在后端实现，前端仅可传可校验的参数
• 接口返回前可以做一次数据脱敏，避免把敏感字段返回给前端

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