javascript - 如何使用 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>

所以第一部分似乎可以正常工作(在初始加载时显示数据库中的所有数据)，但我很难完成第二部分，因为我之前没有网络开发经验。

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

任何帮助将不胜感激!

Answer 1

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

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

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

<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 只是为了向您展示输出已过滤。此时您需要制作自己的表格模板。