时间戳

首页 > 解决方案 > React 从服务器拉取 SQL 数据

node.js - React 从服务器拉取 SQL 数据

问题描述

我想出了如何向 SQL 服务器发出请求并在服务器端作为 JSON 发布。我想知道如何将这些数据提取到反应端。

服务器.js：

let pullTable = require('./actions/pullTable.js');
var express = require('express');
var app = express();

app.get('/', async (req, res, next) => {
  try {
    const result = await pullTable.pullTable();
    return res.status(200).json(result);
  } catch (error) {
    next(error);
  }
});

app.listen(5000, () => {console.log('Server is running..')});

SQL 请求 - pullTable.js：

var sql = require("mssql");
var express = require('express');
var app = express();
// config for your database
var config = {
    user: 'user',
    password: 'pass',
    server: 'localhost', 
    database: 'Master' 
};

const pullTable = async () => {
    try {
        const pool = await sql.connect(config);
        const sqlQuery = 'SELECT * FROM Persons';
        const result = await pool.request().query(sqlQuery);
        return result.recordset;
    } catch (err) {
        throw err;
    }
};

exports.pullTable = pullTable;

代码到这里都可以正常工作。我查看端口 5000，可以看到从我的服务器显示的 JSON 数据。只是不确定如何将它放入 React。这是我在反应方面的尝试（不包括 App.js 文件 - 不需要帮助）：

获取数据.js：

import React, { Component } from 'react';

class getData extends Component {
    constructor(){
        super();
        this.state={
            data:[],
        }
    }

    componentDidMount(){
        fetch('http://localhost:5000')
        .then((Response)=>Response.json())
        .then((findresponse)=>
        {
            this.setState({
                data:findresponse,
            });
        });
    }

    render() {
        return (
           <div>
                {
                    this.state.data.map((dynamicData)=>
                    <div>
                        <span>{dynamicData.LastName} </span>
                        <span>{dynamicData.FirstName}</span>
                    </div>
                    )
                }
            </div>
        );
    }
}

export default getData;

只是想在那个 SQL 表中显示人的名字和姓氏。

标签： node.jssql-serverreactjs

解决方案

@Shawn Yap 为我指出了正确的方向。基本上必须在服务器脚本中包含 Access-Control-Allow-Origin 标头：

let pullTable = require('./actions/pullTable.js');
var express = require('express');
var app = express();

app.get('/', async (req, res, next) => {
    try {
    res.set('Access-Control-Allow-Origin', '*');
    const result = await pullTable.pullTable();
    return res.status(200).json(result);
    } catch (error) {
    next(error);
    }
});

app.listen(5000, () => {console.log('Server is running..')});

不确定这是否是好的代码，但它正在工作。

推荐阅读