javascript - 从 MySQL 获取数据并使用 Node.js 将其输出到 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 并从后端操作数据。了解有关单击 here. 的更多信息

运行以下命令安装并保存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>

这种使用数据的方式总是适合我。

希望对你有帮助。