Flask 使用 Ajax 从 Mysql 动态呈现记分牌

Question

我想制作一个动态记分板，将 MySQL 查询中的数据导入 html 表。这是我的查询：

query = db().fa('SELECT name, score '
              'FROM `GIP-Schema`.scoreboard '
              'INNER JOIN `GIP-Schema`.user ON user_id = user.id '
              'ORDER BY score DESC')

顺便说一句，fa() 是一个 fetchall() 函数。如果有必要过滤掉 MySQL 表示法 ((item),(otheritem),)，我可以使用正则表达式。

该表将使用一些引导类，我想它看起来像这样：

<table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th>Name</th>
                <th>Score</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{name1}}</td>
                <td>{{score1}}</td>
              </tr>
              <tr>
                <td>{{name2}}</td>
                <td>{{score2}}</td>
              </tr>
              <tr>
                <td>{{name3}}</td>
                <td>{{score3}}</td>
              </tr>
            </tbody>
        </table>

我需要做什么，将查询检索到的 MySQL 数据插入到表中。此外，表的行数应根据查询中的条目数增加。

Answer 1

显然有很多方法可以做到这一点。最简单的方法是使用 javascript 和 append 创建 DOM 节点到页面。这可能是达到你所追求的最短路径。当您尝试以更复杂的方式更改 DOM 时，这种技术会很快变得复杂。例如，您可能还想删除大于某个年龄的分数。在 ajax 调用的成功处理程序中协调这一切可能会变得有点难以维护。

处理这种情况的一种更现代的方法是使用 javascript 库为您处理 DOM 操作。一些流行的例子是 Angular、React 和 Ember。它们可以帮助您以更易于维护的方式构建代码，并且随着复杂性的增加，更易于理解。

显然，您在此处进行了权衡。这些库可能会使您的问题的某些方面更容易，但现在您可以学习使用 javascript 库。您很可能会发现，对于您正在尝试做的事情，简单地手动添加 DOM 节点比潜入 javascript 库更简单。

编辑：

DOM 节点指的是由 HTML 标记创建的内容。例如，<p>Hello</p> 创建一个段落 dom 节点。通常，浏览器会在您加载页面时处理此问题，但您可以更改浏览器使用 javascript 创建的内容。要了解我的意思，请打开您的浏览器控制台（在 Firefox 中：右键单击 -> 检查元素，然后单击控制台）。然后输入以下内容。

var p = document.createElement("p");
p.innerHTML("HELLO");
document.body.appendChild(p);

向下滚动到页面底部，您应该会看到您已将HELLO 添加到页面底部。当您从 ajax 调用接收数据并将事物（DOM 节点）添加到页面或删除它们时，您可以执行类似的操作，就像我之前提到的那样。