前端使用art-template遍历一个Number类型的数值

无论前端后端, 使用art-template模板,对程序员来说非常方便和节约时间成本,但art-template模板使用中也很多坑,只有亲自经历,才知道其中痛苦.下面聊一聊如何使用art-template模板,遍历一个number类型的数值:

    实际应用场景:  node 项目,  后端读取数据库的总数据,并在前端实现分页控制

            比如: 在前端实现分页时,需要后端传过去一个数值类型的总页数, 如何在前端遍历渲染,就是一个头痛的问题, art-template官方文档无论标准语法还是原始语法, 都没有专门的对应方法., 这对初学者十分不友好! 在自己实际使用时,官方文档中没找到能直接对数值进行遍历的方法;  上网查也没看到针对性的有关介绍文章, (好多只是简单把art-template官方文档抄一遍放上去,真没什么价值),  最后只能通过把这个数值类型的数,在后端转换成数组,才能在前端的  art-template 模板中遍历使用;

    解决方案:

    第一步: 在后端,把这个分页的总数如 :  totalPage, 先通过遍历,转换成一个数组--->  totalPages;（注意这两个变量是不一样的）

                先定义一个空数 组totalPages，然后遍历 totalPage ，把遍历后的每一个数, push() 到这个数组中;

    第二步:后端把这个totalPages, 传递到前端,前端再使用art-template模板的标准语法,才能进行遍历处理;

    第三步:    后端处理====>

代码示例:

<code>

// 定义当前页,这个当前页就是客户端点出时发送过来的页码数,把它转换成 number 类型的十进制数值

const page = Number.parseInt(req.query.page, 10);

// 定义每页的显示数
const pageSize = 5;

// 操作数据库集合中的数据

PoemsOne.find()
        .skip((page - 1) * pageSize)
        .limit(pageSize)
        .exec((err, poemsones) => {
            if (err) {
                return next(err);
            }
            PoemsOne.countDocuments((err, count) => {
                if (err) {
                    return next(err);
                }


                const totalPages = [];
                const totalPage = Math.ceil(count / pageSize);
                for (let i = 0; i < totalPage; i++) {
                    totalPages.push(i);
                }
            
            上面的就是在后端把Number 数值,转换成数组


                res.render("poem.html", {
                    poemsones,
                    totalPages,
                    page,
                });
            });
        });

</code>

 

第四步: 前端遍历处理: 这就简单了

代码示例:

<ul>    
 {{each totalPages}}
    <!-- 判断当显示页等于当前页时, 当前页码获取焦点 -->

    {{if ($value + 1) === page}}

    <li class="active"><a href="/poem?page={{$value + 1}}">{{$value + 1}}</a></li>

    {{else}}
    <!-- 当不处于当前页码时,失去焦点 -->

    <li><a href="/poem?page={{$value + 1}}">{{$value + 1}}</a></li>

    {{/if}} 
 {{/each }}  
</ul>      

通过以上步骤,最终解决的这个问题,

这个问题对于大神和资深程序员来说不值一提,但对于初学者,应该能提供点帮助.