如何在 EJS 中将 select 查询存储为 div？

Question

我创建了一个 PostgreSQL 数据库，用于存储游戏得分。我现在已经成功地将它们显示在 EJS 文件中。问题是，它非常丑陋，几乎不可能协调。我需要数百行来硬编码可能性（不同长度的用户名、分数、布尔值等）。这是输出的样子：

我有以下用于服务器的 JS 代码：

app.post('/users/leaderboard', async (req, res) => {
let username = {user: req.user.username}.user;
let leaderboard = req.body.lb;

//Used for hardcoding later
let headers= [];

// Local leaderboard
if (leaderboard == 'local') {
    pool.query(
        `select * from highscores
        where username = 
        order by score desc`,
        [username],
        (err, results) => {
            if (err) {
                throw err;
            }

            // Header
            let header = "\xa0 \xa0 \xa0 \xa0 Score" +
                         "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 Date " +
                         "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 Straight flush?";
            headers.push({row: header});

            // Add query elements to list, to later display in page
            let localScores = [];
            for (let i = 0; i < results.rows.length; i++) {
                let tmpDate = JSON.stringify(results.rows[i].date).slice(1, 11);
                let tmpScore = results.rows[i].score;
                let tmpSF = results.rows[i].straightflush;

                let fin = "\xa0 \xa0" + tmpScore +
                            "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 " + tmpDate +
                            "\xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 \xa0 " + tmpSF;
                localScores.push({row: fin});
            }
            res.render('leaderboard', {headers, localScores});
        }
    )
}

我认为您可以以某种方式将每个用户名、分数、日期和布尔值放入 div 中，然后将它们居中。这很容易使这段代码更漂亮。

这是相关的 HTML/EJS 代码：

<div class="center">
    <ul>
        <% if (typeof headers != 'undefined') { %>
            <% headers.forEach (func => { %>
                <li style="font-weight: bold;"> <%= func.row %> </li>
            <% }) %>
        <% } %>
    </ul>
</div>

<div class="center">
    <ul>
        <% if (typeof localScores != 'undefined') { %>
            <% localScores.forEach (func => { %>
                <li> <%= func.row %> </li>
            <% }) %>
        <% } %>
    </ul>
</div>

编辑：这是我更改为表格时发生的情况： EJS:

<div class="center">
    <table>
        <tr>
            <% if (typeof headers != 'undefined') { %>
                <% headers.forEach (func => { %>
                    <td style="font-weight: bold;"> <%= func.row %> </td>
                <% }) %>
            <% } %>
        </tr>
    </table>
</div>

<div class="center">
    <table>
        <tr>
            <% if (typeof localScores != 'undefined') { %>
                <% localScores.forEach (func => { %>
                    <td> <%= func.row %> </td>
                <% }) %>
            <% } %>
        </tr>
    </table>
</div>

结果是这样的：

Edit2：这是生成的HTML

Answer 1

为什么要创建第二个 table 而不是将数据放入已创建的第一个中？

我猜你在 JSON 中以正确的方式构建了这些数据，所以它看起来类似于：

[{
   user,
   score,
   date,
   straight_flush
}]

因此您的代码应如下所示：

<div class="center">
<table>
    <tr>
        <% if (typeof headers != 'undefined') { %>
            <% headers.forEach (func => { %>
                <td style="font-weight: bold;"> <%= func.row %> </td>
            <% }) %>
        <% } %>
    </tr>
        <% headers.forEach (func => { %>
    <tr>
            <% if (typeof localScores != 'undefined') { %>
                <% localScores.forEach (func => { %>
                    <td> <%= func.row.user %></td> 
                    <td> <%= func.row.score %></td> 
                    <td> <%= func.row.date %></td> 
                    <td> <%= func.row.straight_flush%></td>
                <% }) %>
            <% } %>
     </tr>
        <% } %>
</table>
</div>

每次转到数组中的下一个 object 时都需要创建一个新行。在您的 table 示例中，您创建了两行。一个用于 header，一个用于数据。我无法检查我的代码，但我认为它看起来应该相似。请检查并告诉我这是否适合您。

如何在 EJS 中将 select 查询存储为 div？

How to store select queries as divs in EJS?

html

postgresql

ejs

node.js

server