无论前端后端, 使用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>通过以上步骤,最终解决的这个问题,
这个问题对于大神和资深程序员来说不值一提,但对于初学者,应该能提供点帮助.
