Question

我弄清楚了如何向SQL Server发出请求并以JSON形式发布到服务器端。我想知道如何将这些数据放入反应端。

Server.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。这是我在React方面的尝试（不包括App.js文件-不需要帮助）：

getData.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表中显示人员的姓氏和名字。

Answer 1

@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..')});

不确定此代码是否很好，但是否有效。

反应从服务器提取SQL数据

1 个答案: