如何使用 node.js 以 HTML 格式显示来自数据库的查询结果

Question

我目前正在使用 node.js 创建一个网页，该网页对 MySQL 数据库进行查询并将结果显示在表格中。

我希望页面在初始加载时显示数据库中的所有数据，但我还想实现一个过滤器，用户可以在其中填写一些字段，当按下提交按钮时，将使用页面上显示的输入和结果。

这是我到目前为止的代码：

在“app.js”中，我与数据库建立连接并将其呈现到页面：

var connection = mysql.createConnection({
    // make connection
    host: ...,
    user: ...,
    password: ...,
    database: ...
});

connection.connect();

//routes
app.get("/", function(req, res){

    var cmd = `SELECT * FROM myTable`;
    connection.query(cmd, function(err, result, fields) {
        if (err) throw err;
        res.render('home', {result: result});
    });
});

在 home.ejs 中，我遍历结果中的每个条目以在表中创建一行：

<table>
    <tr>
        <th> ... </th>
        .
        .
        .
    </tr>
    <% result.forEach(function(entry) { %>
    <tr>
        <td><%= entry.column1 %></td>
        .
        .
        .
    </tr>
    <% }) %>
</table>

所以第一部分似乎正在工作（在初始加载时显示数据库中的所有数据），但我正在努力完成第二部分，因为我之前没有 Web 开发经验。

我目前在页面中有一个接受用户输入和一个关联的表单。但是，我不确定如何使用 myFunction() 中的用户输入对数据库执行另一个查询，以及如何用新查询的结果替换表的当前内容。

任何帮助将不胜感激！

Answer 1

好的，您要做的是对视图中已有的数据进行客户端过滤。

问题是表格是在服务器端渲染的，那么在初始加载后如何在客户端改变数据？

解决方案：在渲染时将数据设置为窗口/全局字符串

<table id="results-table">
    <tr>
        <th> ... </th>
        .
        .
        .
    </tr>
    <% result.forEach(function(entry) { %>
    <tr>
        <td><%= entry.column1 %></td>
        .
        .
        .
    </tr>
    <% }) %>
</table>
<script>
  window.results = results;
</script>

之后，让我们在模板中创建一个搜索框并提交按钮：

<input type="search" id="filter-searchbar"/>
<button id="filter-submit-btn"> submit</button>

让我们添加一个事件来监听搜索和一个处理程序来过滤掉数据：

const filterSearchBar = document.querySelector('#filter-searchbar');
const filterSubmitBtn = document.querySelector('#filter-submit-btn');

filterSubmitBtn.addEventListener('click', () => {
  // Next step.
})

让我们从用户的搜索输入中过滤window.results：

const filterSearchBar = document.querySelector('#filter-searchbar');
const filterSubmitBtn = document.querySelector('#filter-submit-btn');

filterSubmitBtn.addEventListener('click', () => {
  const filteredResults = window.results.filter(result => {
    // Not sure what you wanna filter by but imagine that it's by a property name.
    return result.name === filterSearchBar.value;
  });
  // Final step
});

最后一步是在表格模板的位置重新呈现该数据客户端：

const filterSearchBar = document.querySelector('#filter-searchbar');
const filterSubmitBtn = document.querySelector('#filter-submit-btn');

filterSubmitBtn.addEventListener('click', () => {
  const filteredResults = window.results.filter(result => {
    // Not sure what you wanna filter by but imagine that it's by a property name.
    return result.name === filterSearchBar.value;
  });
  const resultsTable = document.querySelector('#results-table');
  results.innerHTML = `<pre>${JSON.stringify(resultsTable)}</pre>`

});

希望您了解我使用JSON.stringify 只是为了向您展示输出已过滤。此时您需要制作自己的表格模板。