Блог

Главная - Вопросы по программированию - Реагировать на извлечение данных SQL с сервера

Реагировать на извлечение данных SQL с сервера

#node.js #sql-server #reactjs

#node.js #sql-сервер #reactjs

Вопрос:

Я понял, как сделать запрос на 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. Это моя попытка на стороне реакции (не включая 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.

Комментарии:

1. Что именно не работает? Вы видите какие-либо ошибки? Предполагая, что данные, которые вы получаете с сервера, примерно такие [{ "Firstname": "John", "Lastname": "Doe" }, ... ] , вы должны увидеть список записей из базы данных.

2. Вы проверяли, был ли отправлен запрос на вкладке сеть вашего браузера dev tools? Это был успешный или неудачный запрос? Могут возникнуть проблемы с CORS.

3. JSON хорош, потому что, когда я помещаю его в локальную папку на своем компьютере, он читает его просто отлично. Это ошибка, которую я получаю в консоли: «Доступ к выборке на ‘ localhost: 5000 ‘ из источника ‘ localhost: 3000 ‘ заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует в запрошенном ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса на «no-cors», чтобы получить ресурс с отключенным CORS «. Похоже, это проблема CORS. Есть идеи, как это исправить? Спасибо!

Ответ №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..')});

Не уверен, что это даже хороший код, но он работает.

Метки: