如何获取和显示MySQL数据到ReactJS前端与节点JS作为后端？

Question

试图弄清楚如何从mysql获取数据并将其显示在ReactJS中。我在后端使用NodeJS和Express。我尝试了在互联网上找到的代码片段，但它不像预期的那样工作。

这是我运行反应应用程序时得到的。

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;

Answer 1

另一个答案提到了密码：“yourspassword”，请检查您是否为用于连接数据库的用户设置了密码。

我对PostgreSQl有问题，但在其他地方可能是同样的事情：新鲜安装不会自动为超级用户设置密码，也不会自动为您从超级用户登录创建的任何其他用户设置密码。

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

如果没有设置密码，您可以尝试任何您想要的，您将无法访问后端。在PostgreSQL中，我必须遵循FATAL：用户postgres的密码验证失败（postgresql 11与pgAdmin 4）。

Answer 2

根据React留档，React组件的构造函数在挂载之前被调用。它还声明如下：

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

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

如果需要从远程endpoint加载数据，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应用程序返回正确的数据，上述代码段将起作用。

Answer 3

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

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

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

确保数据库正常运行

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

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

您需要确保您的后端可以通过任何其他客户端应用访问。您还可以打开浏览器，并通过在浏览器的窗口中打开链接来测试APIhttp://localhost:3000/posts'

为后端激活CORS策略。

SPA需要CORS策略向后端发出请求。您可以使用corsnpm库，或者您可以创建自己的规则。

使用提取库

您可以使用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}!`)
});