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创建DOM节点，并将append创建到页面。这可能是达到你所追求目标的最短路径。当您尝试以更复杂的方式更改DOM时，这种技术会很快变得复杂。例如，您可能还希望删除大于特定年龄的分数。在ajax调用的成功处理程序中协调这一切可能会变得有点难以维护。

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

显然你在这里做出权衡。这些库可以使您的问题的某些方面更容易，但现在您已经学习使用javascript库。你很可能会发现，对于你想要做的事情，只需手动添加DOM节点比潜入javascript库更简单。

修改

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

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

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

Flask使用Ajax从Mysql动态渲染记分板

1 个答案: