art-template渲染大坑，从后台接受到的数据正确，但渲染出来的都是空白

最新推荐文章于 2022-07-06 20:53:04 发布

Anita-Sun

最新推荐文章于 2022-07-06 20:53:04 发布

阅读量1.2k

点赞数 3

分类专栏： Node.js 文章标签： nodejs

本文链接：https://blog.csdn.net/AnitaSun/article/details/113896501

版权

Node.js 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

问题描述

后台使用的是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) {
                    //就是上面那个tpl
                    var htmlStr = template('tpl', {
                        adverts: data.result  //在advert.js里就是adverts
                    })
                    $('#tbody').html(htmlStr);
                }
            }
        })
    }
</script>
{% endblock %}

哦耶，这样子就在前端有数据啦
在这里插入图片描述

Anita-Sun

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
art-template渲染大坑，从后台接受到的数据正确，但渲染出来的都是空白

问题描述后台使用的是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' }}
复制链接

扫一扫