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

时间:2018-05-06 16:23:33

标签: mysql node.js

我正在尝试从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');
});

1 个答案:

答案 0 :(得分:2)

您需要考虑多种因素:

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>