Question

我有这个问题。你介意帮帮我吗？

问题：数据库返回了数百行因此，下面的代码应该在“图块”中有数百个条目有没有办法自动化这样的过程？
一种创建另一个条目的方法，其中要使用的行是下一行？

使用while，if else语句或for循环等循环的方法？

我在app.js中有这段代码：

app.get('/gallery', function (req, res,next) {

connection.query("select firstname,entryid,pictureid, surname, title, fileurl from entries LIMIT 100", function (err, rows, fields) {
    if (err)
    throw err;

    var count = rows.length;
    var i = 0;

res.render('gallery', {
                tile : 
                    [
                        {
                            firstname : [rows[i].firstname],
                            title : rows[i].title,
                            artist : rows[i].firstname + ' ' + rows[i].surname,
                            fileurl : rows[i].fileurl,
                            surname : rows[i].surname,
                            entryid :rows[i].entryid,
                            view_count : genRandNum(),
                            pictureid : rows[i].pictureid,
                        },
                        {
                            firstname : [rows[2].firstname],
                            title : rows[2].title,
                            artist : rows[2].firstname + ' ' + rows[i].surname,
                            fileurl : rows[2].fileurl,
                            surname : rows[2].surname,
                            entryid :rows[2].entryid,
                            view_count : genRandNum(),
                            pictureid : rows[2].pictureid,
                        },
                        {
                            firstname : [rows[3].firstname],
                            title : rows[3].title,
                            artist : rows[3].firstname + ' ' + rows[i].surname,
                            fileurl : rows[3].fileurl,
                            surname : rows[3].surname,
                            entryid :rows[3].entryid,
                            view_count : genRandNum(),
                            pictureid : rows[3].pictureid,
                        },
                        {
                          // .......the next row[i] should be used................
                        }
                    ]
                });
        });

我的HTML代码是：
（这没有什么帮助，但至少你可以掌握我想要发生的事情顺便说一下，这个页面是一个画廊页面。这就是为什么我有足够的"tile"）

{{#tile}}
        <div class="medium-4 large-4 columnGallery" >
            <div class="gallery shadow">
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="artist-avatar"><img src="{{fileurl}}"></a>
                <div class="artist-name">
                    <a href="/public/{{firstname}}-{{surname}}" class="username">{{artist}}</a>
                    <a href="/public" class="artist-username">{{username}}</a>
                </div>
                <span class="view-count">{{view_count}} views</span>
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="photo-tile-title">{{title}}</a>
                <div class="action">
                    <div data-date="2013-12-06T22:13:37.122Z" class="story-date moment fromNow">Entry: 2012</div>
                    <div class="story-tile-thumbnail"><a href="/entry-details-page/{{entryid}}/{{pictureid}}"><img src="{{fileurl}}"></a></div>
                </div>

            </div>  
        </div>
{{/tile}}

现在这是新的代码：

rows.forEach(function(rows) {
        tile.push({
            firstname  : rows.firstname,
            title      : rows.title,
            artist     : rows.firstname + ' ' + rows.surname,
            fileurl    : rows.fileurl,
            surname    : rows.surname,
            entryid    : rows.entryid,
            view_count : genRandNum(),
            pictureid  : rows.pictureid,
        });

        console.log(rows);
    });

    res.render('gallery', {
            tile : [rows]
        });

    console.log(tile);
     });

和console.log（tile）输出此格式中的正确代码：

[
                    {   
                        firstname : [rows[i].firstname],
                        title : rows[i].title,
                        artist : rows[i].firstname + ' ' + rows[i].surname,
                        fileurl : rows[i].fileurl,
                        surname : rows[i].surname,
                        entryid :rows[i].entryid,
                        view_count : genRandNum(),
                        pictureid : rows[i].pictureid,
                    },
                    {   
                        firstname : [rows[i].firstname],
                        title : rows[i].title,
                        artist : rows[i].firstname + ' ' + rows[i].surname,
                        fileurl : rows[i].fileurl,
                        surname : rows[i].surname,
                        entryid :rows[i].entryid,
                        view_count : genRandNum(),
                        pictureid : rows[i].pictureid,
                    },
                ]

但HTML网页仍然显示空白:(

{{#each tile}}
        <div class="medium-4 large-4 columnGallery" >
            <div class="gallery shadow">
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="artist-avatar"><img src="{{fileurl}}"></a>
                <div class="artist-name">
                    <a href="/public/{{firstname}}-{{surname}}" class="username">{{artist}}</a>
                    <a href="/public" class="artist-username">{{username}}</a>
                </div>
                <span class="view-count">{{view_count}} views</span>
                <a href="/entry-details-page/{{entryid}}/{{pictureid}}" class="photo-tile-title">{{title}}</a>
                <div class="action">
                    <div data-date="2013-12-06T22:13:37.122Z" class="story-date moment fromNow">Entry: 2012</div>
                    <div class="story-tile-thumbnail"><a href="/entry-details-page/{{entryid}}/{{pictureid}}"><img src="{{fileurl}}"></a></div>
                </div>

            </div>  
        </div>
        {{/each}}

Answer 1

在循环中创建tile对象数组，然后将其传递给render()

app.get('/gallery', function (req, res, next) {
    connection.query("select firstname,entryid,pictureid, surname, title, fileurl from entries LIMIT 100", function (err, rows, fields) {
        if (err) throw err;

        var tile = [];

        rows.forEach(function(row) {
            tile.push({
                firstname  : [row.firstname],
                title      : row.title,
                artist     : row.firstname + ' ' + row.surname,
                fileurl    : row.fileurl,
                surname    : row.surname,
                entryid    : row.entryid,
                view_count : genRandNum(),
                pictureid  : row.pictureid
            });
        });
        res.render('gallery', {tile});
    });
});

你可以在HTML中做同样的事情，我通常使用Jade或EJS，但我确信Handlebars也有办法迭代。

res.render中的Express-Node JS把手模板：如何迭代？

1 个答案: