使用 Node.js 从 MySQL 中提取数据并显示在 HTML 页面上答案

【问题标题】：Extract data from MySQL using Node.js and display on HTML page使用 Node.js 从 MySQL 中提取数据并显示在 HTML 页面上
【发布时间】：2018-05-06 16:23:33
【问题描述】：

我正在尝试从 MySQL 中提取数据并将其显示在我的 HTML 页面上，但是当我在浏览器 http://localhost:3000 上运行以下代码时，数据不会显示在我的页面上。如果有人能帮我解决这个问题，我将不胜感激。

index.html

<!DOCTYPE>
<html>
    <head>
        <title>Data from MySQL</title>
    </head>
    <body>
        <div id="output_message"></div>
    </body>
</html>

app.js

var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/', express.static(__dirname + '/'));
app.set('view engine', 'html');

var connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "mywebsite"
});

connection.connect();

app.get('/',(req, res) => {
    connection.query("SELECT * FROM chat",(err, result) => {
        if(err) {
            console.log(err); 
            res.json({"error":true});
        }
        else { 
            console.log(result); 
            res.json(result); 
        }
    });
});

app.listen(3000, function () {
    console.log('Connected to port 3000');
});

【问题讨论】：

如果您在控制台中遇到任何错误，您能告诉我们吗？
控制台没有错误
嗯，原因是你通过GET方法发送一个空的html文件
如何将其发送到我的 html 文件？
在GET方法中包含POST方法逻辑，并去掉post

标签： mysql node.js

【解决方案1】：

您需要考虑多个因素：

1 - 当你想使用通过 HTML 文件发送的 POST 方法时，你必须有一个

<form action="Name of your processing file" method="POST">YOUR FORM HERE</form>

但是；如果您只是尝试调用数据库并获取数据，那么只需执行

您在 GET 方法中的逻辑如下：

app.get('/',(req, res) => {
    connection.connect(function(err) {
    if(err) throw err;
        else {
            connection.query("SELECT * FROM chat",(err, result) => {
                if(err) {
                    console.log(err); 
                    res.json({"error":true});
                }
                else { 
                    console.log(result); 
                    res.json(result); 
                }
            });
        }
    });
});

*** 你可能会问 index.html 怎么样。对此有两种回应：

1 - 当你想发送文件时使用res.sendFile(__dirname + "/YOURPAGE-Name.html");

结果

例子：

app.get("/",(req, res) => {
    res.sendFile(__dirname + "/Welcome.html");
});

Welcome.html

<!DOCTYPE>
<html>
    <head>
        <title>Data from MySQL</title>
    </head>
    <body>
        <p>Welcome to my page</p>
    </body>
</html>

2 - 当你想获得时使用res.sendFile(__dirname + "/index.html");

初始页面，以便您可以在应用程序中拥有要处理的表单

例子：

app.get("/",(req, res) => {
    res.sendFile(__dirname + "/index.html");
});

index.html

<!DOCTYPE>
<html>
    <head>
        <title>Data from MySQL</title>
    </head>
    <body>
        <form action="/" method="post">
          //YOUR FORM HERE 
        </form>
    </body>
</html>

【讨论】：

数据仍然没有显示在我的 html 页面上。我也没有任何错误。我已经编辑了我的代码，因此您可以看到我所做的更改。
删除第一个 GET 方法。你只需要第二个get方法就可以从db中获取数据并显示出来
我已将其删除，但仍无法获取数据。我只有第二个 get 方法。
修改这个，让我们看看你是否甚至可以连接到 db.... connection.connect(function(err){if(err) throw err; console.log("connected");
服务器响应中显示“已连接”