如何使用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只是向您显示输出已过滤。 此时，您需要做自己的表模板。