前后端模板冲突问题（留言本）

最新推荐文章于 2025-07-19 15:39:11 发布

原创最新推荐文章于 2025-07-19 15:39:11 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

nodejs 专栏收录该内容

19 篇文章

订阅专栏

本文探讨了在前端引用underscore-min.js导致与后台模板引擎冲突的问题。当后台模板引擎错误地解析前端模板时，可以通过修改underscore-min.js源码，比如替换冲突的<%为{{，来解决这个问题。同时，文章提供了前端模板解析和后台使用ejs模板引擎获取数据的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端中引用underscore-min.js模块解析前端的模板，与后台发生发生冲突（后台使用的模板引擎在遇到前端的模板引擎，误认为是后台的模板，但是后台却没有相关的数据），解决方法：修改underscore-min.js源码：
这里写图片描述
快速查找<%或者templateSettings缩小范围

将冲突的<%修改为{{或者其他你想要修改的符号

前端代码设计模板代码：

<script type="text/template" id="moban">
  <div class="liuyankuai">
    <p>【姓名：】{{=name}}</p>
    <p>【留言：】{{=liuyan}}</p>
    <p>【时间：】{{=time}}</p>
    <p><a href="/shanchu?id={{=_id}}" class="delete">刪除</a></p>
   </div>
</script>

解析模板：

   var compiled = _.template($("#moban").html());
     $("#quanbuliuyan").html("");
       for (var i = 0; i < result.result.length; i++) {
         var html = compiled({
           _id:result.result[i]._id,
           liuyan: result.result[i].messge,
           name: result.result[i].name,
           time: result.result[i].time
        });
      $("#quanbuliuyan").append($(html));

后台模板引擎的前端代码：

 <div class="nav">
   <nav aria-label="Page navigation">
     <ul class="pagination">
       <li>
         <a href="#" aria-label="Previous" id="previousBtn">
           <span aria-hidden="true">&laquo;</span>
         </a>
        </li>

        <%for(var i = 1; i<=pageamount; i++){%>
          <li class="pagebutton " data-page="<%=i%>">
             <a href="#"><%=i%></a></li>
         <%}%>
         <li id="next">
           <a href="#" aria-label="Next" id="nextBtn">
             <span aria-hidden="true">&raquo;</span>
           </a>
          </li>
        </ul>
      </nav>
    </div>

使用ejs模板引擎从后台湖区数据，后台数据如下：

app.get("/",function (req,res,next) {
  db.getAllcount("liuyan",function (count) {
    res.render("index",{
      "pageamount":Math.ceil(count/4)
    });
  });
});