使用 Node.js 在 html 表中显示 mysql

Posted 2023-03-07

技术标签:

【中文标题】使用 Node.js 在 html 表中显示 mysql【英文标题】：Display mysql in a html table with Node.js 【发布时间】：2020-03-18 09:34:37 【问题描述】：

我正在学习如何将 node.js 与 mysql 一起使用。我试图找到一些好的文档但徒劳无功。我现在可以让我的 mysql 数据显示在浏览器中，但我想在某个时候通过我的 index.html 和一个 css 文件来处理它。

这是我的 app.js：

// moduels
var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('bodyParser')

// 
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded(extended: false));

// connect to database
var con = mysql.createConnection(
    host: "localhost",
    user: "root",
    password: "1234",
    database: "BathBombs_DB"
);

// routes
app.get('/', function(request, response)
    console.log('GET request received at /') 
    con.query("SELECT * FROM customers", function (err, result) 
        if (err) throw err;
        else
            response.send(result)
        

    );
);

// listen for trafic and display on localhost:9000
app.listen(9000, function () 
    console.log('Connected to port 9000');
);

我的 index.html 网站如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <form action="/" method="POST">
            <table type="text" name="firstname" ></table>
    </form>

</body>
</html>

【问题讨论】：

【参考方案1】：

您必须进行 ajax 调用才能从服务器获取结果并使用 javascript 与 HTML 内容绑定，如下所示：

HTML 模板

 <table id="tableData" class="table table-fixed">
<thead>
  <tr>
  </tr>
</thead>
<tbody class="tbody" >
</tbody>

这是进行 ajax 调用的脚本

$(document).ready(() => 

$.ajax(
    url: "http://localhost:9000/list", 
    method: 'GET',
    success: function(response)
        if(response.rows.length > 0)
            for(let index = 0; index < response.rows.length; index++) 
                var newRow = $("<tr>");
                var cols = "";
                var firstname = '';
                var lastname = '';
                var gender = '';
                cols += '<td> '+ response.rows[index].firstname +'</td>';
                cols += '<td> '+ response.rows[index].lastname +'</td>';
                cols += '<td> '+ response.rows[index].gender+'</td>';                
                newRow.append(cols);
                $("#tableData .tbody").append(newRow);
              

        
    
)
)

【讨论】：

嘿，我似乎无法让它显示任何内容，而且我没有收到任何错误您是否将带有 priya 答案的脚本文件包含在您的 html 文件中？ () 此外，要显示您的数据，您不需要表单。表格中的表格可能会导致困难。【参考方案2】：

你可以在<table>标签内简单地显示这样：

<html>
    <body>
        <table>
          <tr>
            <th>firstname</th>
          </tr>
          <% if(result.length) 
            for(var i = 0;i < data.length;i++)  %>
          <tr>
            <td><%=result.firstname%></td>
          </tr>
           <% 
          else %>
          <tr>
            <td>No user</td>
          </tr>
        <%  %>
        </table>
    </body>
</html>

【讨论】：

【参考方案3】：

首先你需要“ship/send”你的“index.html”文件到浏览器。为此，您需要定义一个 API 端点，如下所示（它将 index.html 发送到浏览器）。

/* GET home page. */
app.get('/', getMainPage);

function getMainPage(req, res) 

  console.debug('Route for mainViewpage: ' + __dirname );
  console.log(process.env);
  var mainViewFile = __dirname + '/../public/views/index.html'; // Replace  this with path to your index.html file
  console.log('mainView log' , mainViewFile);
  fs.readFile(mainViewFile, function (err, html) 
    if (err) 
      throw err;
    
    res.writeHeader(200, "Content-Type": "text/html");
    res.write(html);
    res.end();
  );

完成此操作后，请按照@priya tarun 在上一个答案中给出的方法进行操作。

注意：您还需要在 html 文件中包含 Jquery。您的“index.html”看起来像这样。我还没有完全测试，你可以做那部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--Inlcudes JQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 

</head>
<body>

    <form action="/" method="POST">
            <table type="text" name="firstname" ></table>
    </form>

</body>

$(document).ready(() => 

$.ajax(
    url: "http://localhost:9000/getCustomerData", 
    method: 'GET',
    success: function(response)
        if(response.rows.length > 0)
            for(let index = 0; index < response.rows.length; index++) 
                var newRow = $("<tr>");
                var cols = "";
                var firstname = '';
                var lastname = '';
                var gender = '';
                cols += '<td> '+ response.rows[index].firstname +'</td>';
                cols += '<td> '+ response.rows[index].lastname +'</td>';
                cols += '<td> '+ response.rows[index].gender+'</td>';                
                newRow.append(cols);
                $("#tableData .tbody").append(newRow);
              

        
    
)
)
</html>

注意：将您的 API 端点重命名为“/getCustomerData”而不是“/”来获取客户数据。使用 API 端点“/”将“index.html”提供给客户端/浏览器。

添加 cmets 以防您对此有任何困惑

【讨论】：

请注意，我稍微修改了@priya tarun 的答案。【参考方案4】：

一个简单的方法是使用像 Knex JS 这样的查询构建器。它提供了更好的体验并且更易于使用。我相信下面的代码对你有意义：

const knex = require('knex');
const http = require('http');

const knex = require('knex')(
  client: 'mysql',
  connection: 
    host : '127.0.0.1',
    user : 'your_database_user',
    password : 'your_database_password',
    database : 'myapp_test'
  
);

const record = await knex.select('title', 'author', 'year').from('books');
const displayBody = record.map(single => 
   return `<tr>
             <td>$single.title</td>
             <td>$single.author</td>
             <td>$single.year</td>
           </tr>`;
)

let handleRequest = (request, response) => 
    response.writeHead(200, 
        'Content-Type': 'text/html'
    );
    response.write('<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Homepage</title>
    </head>
    <body>
     <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>Year</th>
            </tr>
        </thead>
      <tbody>');
    response.write(displayBody);
    response.write('</tbody>
        </table>
      </body>
    </html>');
    response.end();
;

http.createServer(handleRequest).listen(8000);

在上面的代码中，我们从books 表中获取数据以显示或返回。

【讨论】：

【参考方案5】：

这你可以使用纯 javascript 处理，请在下面找到代码 sn-p，我使用了硬编码数据，但你可以使用 API 响应处理，因为成功后你可以触发 GenerateTable() 以呈现 HTML：

function GenerateTable() 
        //Build an array containing Customer records.
        var customers = new Array();
        customers.push(["Customer Id", "Name", "Country"]);
        customers.push([1, "John Hammond", "United      States"]);
        customers.push([2, "Mudassar Khan", "India"]);
        customers.push([3, "Suzanne Mathews", "France"]);
        customers.push([4, "Robert Schidner", "Russia"]);

        //Create a HTML Table element.
        var table = document.createElement("TABLE");
        table.border = "1";
 
        //Get the count of columns.
        var columnCount = customers[0].length;
 
        //Add the header row.
        var row = table.insertRow(-1);
        for (var i = 0; i < columnCount; i++) 
            var headerCell = document.createElement("TH");
            headerCell.innerHTML = customers[0][i];
            row.appendChild(headerCell);
        
 
        //Add the data rows.
        for (var i = 1; i < customers.length; i++) 
            row = table.insertRow(-1);
            for (var j = 0; j < columnCount; j++) 
                var cell = row.insertCell(-1);
                cell.innerHTML = customers[i][j];
            
        
 
        var dvTable = document.getElementById("dvTable");
        dvTable.innerHTML = "";
        dvTable.appendChild(table);
    

function handleApiResponse() 
//$.ajax(
//                type: "GET",               
//                url: URL,               
//                dataType: "jsonp",
//                error: function (response)            
//                        alert('Error: There was a problem //processing your request, please refresh the browser and //try again');
//                ,
//                success: function (response) 
//                GenerateTable(response)
//               
//        );
GenerateTable()

<input type="button" value="Generate Table" onclick="handleApiResponse()" />
<hr />
<div id="dvTable"></div>

【讨论】：

以上是关于使用 Node.js 在 html 表中显示 mysql的主要内容，如果未能解决你的问题，请参考以下文章

使用 Node.js 和 Express 将 JSON 数据集显示为表格

如何使用node.js获取当前目录名并显示在html页面上

NODE.JS 如何使用 node.js 显示位于名为 CSS 的文件夹内的我的 css 文件，其中我的 server.js 和 index.html 在文件夹外

Node.js Express POST 仅更改了路由器的输入

如何在node.js“html页面”中显示json字符串化数组数据？

Node.js app.js 不显示 HTML 页面，而是显示 HTML 代码