node.js ejs模板引擎将后端数据赋值给前端js

Posted 追风逐月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了node.js ejs模板引擎将后端数据赋值给前端js相关的知识,希望对你有一定的参考价值。

  使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使用ejs,选它是因为跟Asp.Net的模板引擎有点相似吧。

  先来看一下这几个模板引擎:

jade模板

html
    head
        title #{title}
        meta(charset="UTF-8")
    body
        div.description #{description}
        ul
            - each data in datas
                li.item(id=‘item_‘+data.index)
                    span= data.time
                    a.art(href=data.url)= data.title

就看起来干净,引入缩进,丧失了html该有的灵活性

handlebars 模版

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{title}} - Page Test</title>
</head>
<body>
    <div class="description">{{description}}</div>
    <ul>
{{#datas}}
        <li class="item" id="item_{{index}}"><span>{{time}}</span><a href="{{url}}" class="art">{{title}}</a></li>
{{/datas}}
    </ul>

</body>
</html>

用起来也是有点不自在

ejs 模版

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%=title%> - Page Test</title>
</head>
<body>
    <div class="description"><%=description%></div>
    <ul>
<% function data(data) { %>
        <li class="item" id="item_<%=data.index%>"><span><%=data.time%></span><a href="<%=data.url%>" class="art"><%=data.title%></a></li>
<% } %>
<% datas.map(data) %>
    </ul>

</body>
</html>

  虽然看起来乱点,但是便于直接书写自己的逻辑,适合于个人项目,如果真的有代码洁癖,可以考虑把服务器端书句赋值给前端js,在浏览器端渲染数据

<script> 
  var name = ‘<%=name%>‘;  // name是字符串
  var str=‘<%- JSON.stringify(userinfo) %>‘;  //userinfo是对象
  var userino=JSON.parse(str);
 </script>

这种方式也可做一下变形,在服务器端传过来的时候就先把对象转化成字符串

<script> 
  var userinfo=<%- userinfo %>;  //后端传的时候JSON.stringify()一下,因为js是动态类型,所以这里可直接得到userinfo对象
 </script>

以上两种方式同样适合于handlebars模板引擎

  • <% code %>:  javascript 代码。 
  • <%= code %>:显示替换过 HTML 特殊字符的内容。 相当于handlebars中的 {{{ code }}},不希望被编码的Html
  • <%- code %>: 显示原始 HTML 内容。 相当于handlebars中的 {{ code }},经过编码的HTML

  <%= code %> 和  <%- code %> 的区别,当变量 code 为普通字符串时,两者没有区别。当 code 比如为  <h1>hello</h1> 这种字符串时, <%= code %> 会原样输出  <h1>hello</h1> ,而  <%- code %> 则会显示 H1 大的 hello 字符串。

 

以上是关于node.js ejs模板引擎将后端数据赋值给前端js的主要内容,如果未能解决你的问题,请参考以下文章

vue后端数据赋值给类

使用 EJS 模板引擎在 Node.js 中提交表单后,我不断收到验证器错误

从前端将数据发送回 node.js 服务器

Node.js_express_服务器渲染页面 ejs

Node.js ejs中文手册

Node JS后端项目开发与生产环境总结