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