问题描述

后台使用的是art-template模板引擎和express

// 部分代码如下
router.get('/advert/add', (req, res, next) => {res.render('advert_add.html');
});

前端使用的art-template
重点看下面画着的部分

// 代码如下
{{ extend './layout.html' }}{{ block 'style' }}
{{ /block }}{{ block 'body' }}
<div class="container-fluid"><div class="body advert"><!-- 面包屑 --><ol class="breadcrumb"><li><a href="javascript:;">广告管理</a></li><li class="active">广告列表</li></ol><div class="page-title"><a href="/advert/add" class="btn btn-success btn-sm pull-right">添加广告</a></div><div class="panel panel-default"><div class="panel-body"><form action="" class="form-inline"><select name="" class="form-control input-sm"><option value="">按年龄</option></select><select name="" class="form-control input-sm"><option value="">按性别</option></select><select name="" class="form-control input-sm"><option value="">按地区</option></select><select name="" class="form-control input-sm"><option value="">按日期</option></select><button class="btn btn-success btn-sm">筛选</button></form></div><table class="table table-bordered"><thead><tr><td>序号</td><th>标题</th><th>图片</th><th>链接</th><th>开始时间</th><th>结束时间</th><th>点击次数</th><th>操作</th></tr></thead><tbody id="tbody"></tbody></table></div></div><!-- 分页 --><ul class="pagination pull-right" id="pagination"><!-- <li><a href="/advert">上一页</a></li><li><a href="/advert">1</a></li><li><a href="/advert">2</a></li><li><a href="/advert">3</a></li><li><a href="/advert">4</a></li><li><a href="/advert">下一页</a></li> --></ul>
</div>
</div><!-- ————————————————————————————————重点看这里开始—————————————————————————————————— -->
<script type="text/template" id="tpl">{{each adverts}}<tr><td>{{$index + 1}}</td><td>{{$value.title}}</td><td><img src="../public/images/{{$value.images}}" style="width:100px;" alt=""></td><td>{{$value.link}}</td><td>{{$value.start_time}}</td><td>{{$value.end_time}}</td><td>1</td><td><a href="javascript:;" class="btn btn-info btn-xs">编辑</a><a href="javascript:;" class="btn btn-danger btn-xs">删除</a></td></tr>{{/each}}
</script>
<!-- ————————————————————————————————重点看这里结束—————————————————————————————————— -->{{ /block }}{{ block 'script' }}
<script src="../node_modules/art-template/lib/template-web.js"></script>
<script src="../node_modules/twbs-pagination/jquery.twbsPagination.js"></script><script>var pageSize = 5;$.ajax({url: '/advert/count',type: 'get',success: function (data) {if (data.err_code === 0) {$('#pagination').twbsPagination({totalPages: Math.ceil(data.result / pageSize), //告诉这个插件一共有多少页visiblePages: 5, //试图可见页码first: '首页',prev: '上一页',next: '下一页',last: '最后一页',onPageClick: function (event, page) {//当点击某个页码的时候要执行的回调处理函数,所谓的异步无刷新分页//本质上就是当点击某一页的时候,发起一个ajax异步请求,获取当前页码对应的数据,然后在客户端做渲染loadData(page);}});}}});// ————————————————————————————————重点看这里开始——————————————————————————————————function loadData(page) {$.ajax({url: '/advert/list',type: 'get',data: {page: page,pageSize: pageSize},dataType: 'json',async: false,success: async function (data) {if (data.err_code === 0) {console.log(data);console.log(template);var htmlStr = await template("tpl",{adverts:data.result  });console.log(htmlStr);$('#tbody').html(htmlStr);}}})}
// ————————————————————————————————重点看这里结束——————————————————————————————————
</script>
{{ /block }}

如果按照这种前端和后端都使用一个模板引擎的方法，那么后端返回页面的时候会使用art-template渲染，遇到下面的代码，会用模板引擎解析一遍，因为没有提供adverts数据，所以解析为空，当前端发出异步请求得到数据之后用art-template渲染数据，发现下面代码啥都没有，自然就无法渲染，所以是结果是空的，既然咱们现在明白了这个道理，前端和后端不要使用一个模板引擎就可以了。

<script type="text/template" id="tpl">{{each adverts}}<tr><td>{{$index + 1}}</td><td>{{$value.title}}</td><td><img src="../public/images/{{$value.images}}" style="width:100px;" alt=""></td><td>{{$value.link}}</td><td>{{$value.start_time}}</td><td>{{$value.end_time}}</td><td>1</td><td><a href="javascript:;" class="btn btn-info btn-xs">编辑</a><a href="javascript:;" class="btn btn-danger btn-xs">删除</a></td></tr>{{/each}}
</script>

咱们下面前端使用atr-template-native后端使用nunjucks来看一下结果

{% extends "layout.ejs" %}{% block style %}
{% endblock %}{% block body %}
<div class="container-fluid"><div class="body advert"><!-- 面包屑 --><ol class="breadcrumb"><li><a href="javascript:;">广告管理</a></li><li class="active">广告列表</li></ol><div class="page-title"><a href="/advert/add" class="btn btn-success btn-sm pull-right">添加广告</a></div><div class="panel panel-default"><div class="panel-body"><form action="" class="form-inline"><select name="" class="form-control input-sm"><option value="">按年龄</option></select><select name="" class="form-control input-sm"><option value="">按性别</option></select><select name="" class="form-control input-sm"><option value="">按地区</option></select><select name="" class="form-control input-sm"><option value="">按日期</option></select><button class="btn btn-success btn-sm">筛选</button></form></div><table class="table table-bordered"><thead><tr><td>序号</td><th>标题</th><th>图片</th><th>链接</th><th>开始时间</th><th>结束时间</th><th>点击次数</th><th>操作</th></tr></thead><tbody id="tbody"></tbody></table></div></div><!-- 分页 --><ul class="pagination pull-right" id="pagination"><!-- <li><a href="/advert">上一页</a></li><li><a href="/advert">1</a></li><li><a href="/advert">2</a></li><li><a href="/advert">3</a></li><li><a href="/advert">4</a></li><li><a href="/advert">下一页</a></li> --></ul>
</div>
</div>
<script type="text/template" id="tpl">
<% adverts.forEach(function(items, index){ %><tr><td><%= index + 1 %></td><td><%= items.title %></td><td><img src="../public/images/<%=items.images%>" style="width:100px;" alt=""></td><td><%= items.link %></td><td><%= items.start_time %></td><td><%= items.endtime %></td><td>1</td><td><a href="javascript:;" class="btn btn-info btn-xs">编辑</a><a href="javascript:;" class="btn btn-danger btn-xs">删除</a></td></tr>
<% }) %>
</script>
{% endblock %}{% block script %}
<script src="../node_modules/art-template/dist/template-native.js"></script>
<script src="../node_modules/twbs-pagination/jquery.twbsPagination.js"></script>
<script>var pageSize = 5;$.ajax({url: '/advert/count',type: 'get',success: function (data) {if (data.err_code === 0) {$('#pagination').twbsPagination({totalPages: Math.ceil(data.result / pageSize), //告诉这个插件一共有多少页visiblePages: 5, //试图可见页码first: '首页',prev: '上一页',next: '下一页',last: '最后一页',onPageClick: function (event, page) {//当点击某个页码的时候要执行的回调处理函数,所谓的异步无刷新分页//本质上就是当点击某一页的时候,发起一个ajax异步请求,获取当前页码对应的数据,然后在客户端做渲染loadData(page);}});}}});function loadData(page) {$.ajax({url: '/advert/list',type: 'get',data: {page: page,pageSize: pageSize},dataType: 'json',success: function (data) {if (data.err_code === 0) {//就是上面那个tplvar htmlStr = template('tpl', {adverts: data.result  //在advert.js里就是adverts})$('#tbody').html(htmlStr);}}})}
</script>
{% endblock %}

哦耶，这样子就在前端有数据啦