如何以 Node JS 作为后端将 Mysql 数据获取并显示到 ReactJS 前端？

Posted 2023-02-22

【中文标题】如何以 Node JS 作为后端将 Mysql 数据获取并显示到 ReactJS 前端？

【英文标题】：How can I Fetch and display Mysql data into ReactJS front end with Node JS as backend?

【发布时间】：2020-07-09 20:56:04

【问题描述】：

试图弄清楚如何从 mysql 获取数据并将其显示在 ReactJS 中。我在后端使用 NodeJS 和 express。我尝试了在 Internet 上找到的代码 sn-p，但它没有按预期工作。

这是我运行 react 应用程序时得到的结果。

TypeError: http.ServerResponse is undefined

我的 NodeJS 代码

//require mysql, http and express
//const connection = createConnection(with host, user, pass, db);
const app = express();
app.get('/posts', function(request, result)
    connection.connect();
    connection.query("SELECT * FROM 'some_table';", function(err, results, fields)
         if(err) throw err;
        result.send(results);
    )
    connection.end();
)
app.listen(3000);

我的反应代码

class Display extends React.Component
    constructor(props)
        super(props);
        this.state= posts : [] ;

        fetch('http://localhost:3000/posts/')
            .then(response =>
                response.json();
            )
            .then(posts => 
                this.setState(posts)
            )
            .then( (err) => 
                console.log(err);
            )
    
    render()
        return(
            <div>
                <ul>
                    this.state.posts.map( post => 
                    <p>
                        <li>Some Text_1: post.db_col_1</li>
                        <li>Some Text_2: post.db_col_2</li>
                        <li>Some Text_3: post.db_col_3</li>
                    </p>
                    )
                </ul>
            </div>
        )
    

export default Display;

【问题讨论】：

你考虑过尝试 axios、ajax、fetch 吗？

也许我没听明白，但我在代码的 react 部分使用了 fetch。

您是否按照以下说明进行操作：w3schools.com/nodejs/nodejs_mysql.asp？

【参考方案1】：

您的代码需要一些错误处理和 CORS 策略。所以我建议你这样做；

确保您的后端已启动并运行

您需要在后端检查您的端口。

确保数据库启动并运行

您需要检查您的数据库是否存在连接。每次发出请求时都无需连接到数据库。所以最好连接一次。

通过 Postman 或任何其他工具尝试您的 API 结果

您需要确保可以通过任何其他客户端应用访问您的后端。您也可以通过在浏览器中打开链接“http://localhost:3000/posts”来打开浏览器并测试您的 API

为您的后端激活 CORS 政策。

SPA 需要 CORS 策略才能向后端发出请求。您可以为此使用cors npm 库，也可以创建自己的规则。

使用提取库

您可以使用fetch，但并非所有浏览器都支持。对 Axios 或您的客户端代码上的任何其他请求工具会很好。

const cors = require('cors')
const app = express();

const mysql = require('mysql');

const connection = mysql.createConnection(
  host: "localhost",
  user: "yourusername",
  password: "yourpassword"
);

connection.connect(function(err) 
  if (err) throw err;
  console.log("Connected!");
);

app.use(cors());

app.get('/posts', (req, res) => 
  connection.query("SELECT * FROM 'some_table';", (err, results, fields) => 
    if(err) throw err;
    res.send(results);
  );
);

app.listen(3000, (error) => 
  if (err) throw err;
  console.log(`App listening on port $port!`)
);

【讨论】：

谢谢@hurricane，我现在知道我实际上在做什么，但是代码仍然不起作用，它在服务器上工作，但客户端没有得到响应。它只是说 cors 请求失败。

@IVANPAUL 你在用app.use(cors());

是的，我正在使用 app.use(cors());陈述。当我运行 Element Inspector 进行网络诊断时，它没有显示响应标头，并且响应选项卡也显示“无响应”。当我传递一个简单的文本时它工作正常，但没有获取 json 数据。

【参考方案2】：

根据React documentation，React 组件的构造函数在挂载之前被调用。它还声明了以下内容：

避免在构造函数中引入任何副作用或订阅。对于这些用例，请改用 componentDidMount()。

您应该在componentDidMount 中进行 API 调用。根据 React 文档：

如果您需要从远程端点加载数据，componentDidMount 是一个实例化网络请求的好地方。

您的代码应如下所示：

import React from "react";

class Display extends React.Component 
  constructor(props) 
    super(props);

    this.state =  posts: [] ;
  

  componentDidMount() 
    fetch("http://localhost:3000/posts/")
      .then(response => 
        response.json();
      )
      .then(posts => 
        this.setState( posts );
      )
      .then(err => 
        console.log(err);
      );
  

  render() 
    return (
      <div>
        <ul>
          this.state.posts.map(post => (
            <p>
              <li>Some Text_1: post.db_col_1</li>
              <li>Some Text_2: post.db_col_2</li>
              <li>Some Text_3: post.db_col_3</li>
            </p>
          ))
        </ul>
      </div>
    );
  


export default Display;

如果您的后端 Node.js 应用程序返回正确的数据，上述 sn-p 将起作用。

【讨论】：

您的后端返回的数据是什么？如果this.state.posts 未定义，则意味着您的后端没有在响应中返回任何posts 数组。

后端正在返回数据，只是this.state.posts无法从调用它的地方访问。

.then(posts => this.setState( posts ) ) 在这一行中，您的帖子设置为 React 状态。您可以检查该州是否正确填充？如果您共享 CodeSandbox 或 Codepen 链接，我可以为您提供更多帮助。

【参考方案3】：

选择提到password: "yourpassword" 的另一个答案，检查您是否为用于连接数据库的用户设置了密码。

我在使用 PostgreSQl 时遇到了问题，但这在其他地方可能是一样的：全新安装不会自动为超级用户设置密码，也不会为您从超级用户创建的任何其他用户自动设置密码用户登录。

显示的错误并不暗示问题，例如参见TypeError: Cannot read property 'rows' of undefined，这似乎解决了代码中“行”的错误，但实际上只是缺少密码的错误。

如果没有设置密码，你可以随意尝试，你将无法访问后端。在 PostgreSQL 中，我必须关注 FATAL: password authentication failed for user "postgres" (postgresql 11 with pgAdmin 4)。