使用Node.js从MySQL获取数据并将其输出为HTML

Question

我是Node.js的新手。 我可以使用Node.js将HTML中的数据插入MySQL，但是我无法从MySQL中获取数据并将其输出到HTML页面。 我已经在下面发布了我完成的代码。 我正在努力将数据放入HTML页面。

index.html

<form action="/" method="post">
    <input id="name" type="text" name="name" placeholder="Type your name...">
    <input id="message" type="text" name="message" placeholder="Type message...">
    <input class="submit_message" type="submit" value="Send">
</form>

server.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 + '/'));

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

connection.connect();

app.get('/', function (req, res) {
    connection.connect();  
    connection.query('SELECT * FROM users', function(err, rows, fields) {  
        connection.end();
        if (err) throw err;
        console.log("Data displayed");
    });
});

app.post('/', function(req, res) {
    var username = req.body.name;
    var usermessage = req.body.message;
    connection.query("INSERT INTO `users` (Name, Message) VALUES (?,?)", [username.toString(), usermessage.toString()], function(err, result) {
        if(err) throw err;
        //Output results
        console.log(result.affectedRows + ' rows updated. ID is ' + result.insertId);
    });
    res.sendFile(__dirname + '/index.html');
});

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

Answer 1

您可以安装EJS软件包，以便在html中使用Javascript并处理来自后端的数据。 了解更多有关单击此处的信息。

运行以下命令以安装并保存ejs软件包：

npm install ejs -s

将您的Index.html重命名为Index.ejs

设置引擎：

app.set("view engine", "ejs");

我认为您的app.get应该类似于：

app.get('/', function (req, res) {
    connection.query('SELECT * FROM users', function(err, result, fields) {  
        connection.end();
        if (err) throw err;
        console.log("Data displayed");
        res.render("Index", { result: result });
    });
});

res.render("Index", {result: result}); 会调用您的Index.ejs，并将您的数据传递给Json。

您的Indes.ejs将如下所示：

<table id="tblData" class="table table-bordered table-hover">
    <thead class="thead-inverse">
        <tr>
          <th data-column-id="Name">
             Name
          </th>
          <th data-column-id="Message">
             Message
          </th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

最后，您可以添加<script></script>和Jquery DataTables

//Declare the var with the data
        var Result = <%- JSON.stringify(result) %>;

        var TableData = null;
        $(function () {
            function ajusTables() {

                $('.table').css('width', '100%');
                $('.dataTables_scrollHeadInner').css('width', '100%');
            }

            TableData = $('#tblData').DataTable({
                "serverSide": false,
                "drawCallback": function (settings) {
                    ajusTables();
                },
                "scrollX": true,
                "processing": true,
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
                "deferRender": true,
                "columns": [
                    { "data": "Name" },
                    { "data": "Message" },
                ],
                "order": [0, "asc"]
            });
            console.log(Result);
            TableData.rows.add(Result)
            TableData.draw();
        });
    </script>

这种始终使用数据的方式对我有用。

希望对您有帮助。