请求指导：从SQL Server向React JS中获取并展示数据

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

React作为前端无法直接连接SQL Server，需通过后端接口中转，这里以Node.js为例实现：

1. 初始化项目并安装依赖

   npm init -y
   npm install express mssql cors
   

2. 配置SQL Server连接（新建db.js）

   const sql = require('mssql');
   
   const config = {
     user: '你的SQL Server用户名',
     password: '你的密码',
     server: 'localhost', // 或远程服务器地址
     database: '目标数据库名',
     options: {
       encrypt: true, // 若使用Azure SQL Server需开启，本地可按需调整
       trustServerCertificate: true // 本地测试可开启，规避证书验证问题
     }
   };
   
   async function connectDB() {
     try {
       await sql.connect(config);
       console.log('SQL Server连接成功');
     } catch (err) {
       console.error('连接失败:', err);
     }
   }
   
   module.exports = { sql, connectDB };
   

3. 编写数据接口（新建server.js）

   const express = require('express');
   const cors = require('cors');
   const { sql, connectDB } = require('./db');
   
   const app = express();
   app.use(cors());
   app.use(express.json());
   
   // 获取数据的接口
   app.get('/api/data', async (req, res) => {
     try {
       const result = await sql.query('SELECT * FROM 你的表名');
       res.json(result.recordset);
     } catch (err) {
       res.status(500).json({ error: err.message });
     }
   });
   
   const PORT = 5000;
   connectDB().then(() => {
     app.listen(PORT, () => console.log(`服务器运行在端口${PORT}`));
   });
   

4. 启动后端：node server.js

二、前端（React 示例） #

和你之前操作MySQL的前端逻辑基本一致，仅接口地址不同：

1. 安装请求库（可选，用原生fetch也可）

   npm install axios
   

2. 在React组件中获取并展示数据

   import { useState, useEffect } from 'react';
   import axios from 'axios';
   
   function DataDisplay() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       const fetchData = async () => {
         try {
           const response = await axios.get('http://localhost:5000/api/data');
           setData(response.data);
         } catch (err) {
           setError('获取数据失败');
         } finally {
           setLoading(false);
         }
       };
   
       fetchData();
     }, []);
   
     if (loading) return <div>加载中...</div>;
     if (error) return <div>{error}</div>;
   
     return (
       <div>
         <h2>SQL Server数据展示</h2>
         <table border="1">
           <thead>
             <tr>
               {/* 根据你的表结构定义表头 */}
               <th>ID</th>
               <th>名称</th>
               {/* 其他字段 */}
             </tr>
           </thead>
           <tbody>
             {data.map(item => (
               <tr key={item.id}>
                 <td>{item.id}</td>
                 <td>{item.name}</td>
                 {/* 其他字段 */}
               </tr>
             ))}
           </tbody>
         </table>
       </div>
     );
   }
   
   export default DataDisplay;
   

关键注意事项 #

• 若后端与数据库不在同一机器，需确保SQL Server已开启远程连接，并在SQL Server配置管理器中启用TCP/IP协议
• 本地测试时，若遇证书验证报错，可开启trustServerCertificate: true
• 生产环境请勿硬编码数据库账号密码，建议用环境变量管理

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