正文 

当前位置： 首页 > java > java教程

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

追风逐月      2022-02-17     760

关键词：

  使用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 字符串。

 

编码约定：将后端与前端标签匹配

】编码约定：将后端与前端标签匹配【英文标题】：Codingconvention:Matchingbackendwithfrontendlabels【发布时间】：2020-04-0200:20:47【问题描述】：在我的后端，我有以驼峰命名的数据属性：customerStats:ownedProducts:100,usedProducts:50,,我的UI代码... 查看详情

04《springboot入门教程》使用模板引擎开发web项目

参考技术A模板引擎这个词，咋听起来，有点高大上的意味。实际上，模板引擎是非常平易近人的技术。譬如大家可能都比较熟悉的JSP，就是一种比较典型的模板引擎。当浏览器将请求抛给控制器，控制器处理好数据后，就跳转JS... 查看详情

无法将 createdAt 和 updatedAt 保存为日期时间值，也无法将后端保存为前端

】无法将createdAt和updatedAt保存为日期时间值，也无法将后端保存为前端【英文标题】：Can\'tsavecreatedAtandupdatedAtasdatetimevaluesnorbackendneitherfrontend【发布时间】：2020-05-0602:11:48【问题描述】：我正在尝试将日期时间值保存在TodoForm中... 查看详情

python-ssti模板注入(代码片段)

一、python_SSTI模板注入介绍ssti漏洞成因ssti服务端模板注入，ssti主要为python的一些框架jinja2makotornadodjango，PHP框架smartytwig，java框架jadevelocity等等使用了渲染函数时，由于代码不规范或信任了用户输入而导致了服务端模板注入，模... 查看详情

如何将后端（嵌套）文件中的 multer 图像放到我的前端（反应）上？

】如何将后端（嵌套）文件中的multer图像放到我的前端（反应）上？【英文标题】：Howtogetmulterimageinbackend(nest)filetoonmyfrontend(react)?【发布时间】：2021-10-1908:16:18【问题描述】：在我的项目的用户注册表单中制作头像图像（url）时... 查看详情

将后端文件托管到 IIS

】将后端文件托管到IIS【英文标题】：HostingbackendfilesontoIIS【发布时间】：2021-08-2505:21:26【问题描述】：我正在尝试将我的网站上传到网络上。我有两个文件夹用于保存我的前端React文件，另一个用于保存使用Nodejs、cors和express的... 查看详情

php的自定义模板引擎

前面的话在大多数的项目组中，开发一个Web程序都会出现这样的流程：计划文档提交之后，前端工程师制作了网站的外观模型，然后把它交给后端工程师，它们使用后端代码实现程序逻辑，同时使用外观模型做成基本架构，然后... 查看详情

前端模板

后端MVC说起模板渲染，楼主首先接触的其实并不是前端模板引擎，而是后端。后端MVC模式中，一般从Model层中读取数据，然后将数据传到View层渲染（渲染成HTML文件），而View层，一般都会用到模板引擎，比如楼主项目中用到的PHP... 查看详情

php模板引擎

PHP模板引擎的由来 ●为了解决当时混合开发WEB应用出现的一系列问题：代码难维护，代码不可重用，程序员要求知识广等问题●实现后端与前端不完全分离，开发与美工可以分工合作，提高效率PHP模板引擎带来的问题●由于... 查看详情

django前后端不分离&前后端分离&模板引擎(代码片段)

一、前后端不分离与前后端分离的比较前后端不分离特点：后端需控制数据的展示前后端不分家，耦合严重返回的是HTML页面，适应性、拓展性差只能用于浏览器，其它终端不匹配前后端分离的特点：当前主流后端只对数据进行... 查看详情

springboot系列——模板引擎thymeleaf

...，与后端联系太紧密，不利于前后端分离。　　2.而使用模板引擎，可以大大克服这一缺点，模板引擎可以使得前端很自然地开发（即更接近原生html）。　　3.模板引擎优点有：业务逻辑代码与界面代 查看详情

百度js模板引擎

1.应用场景前端使用的模板系统 或 后端Javascript环境发布页面2.功能描述提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。3.特性1）、语法简单，学习成... 查看详情

一个简单的php模板引擎(代码片段)

...了代码分层的思想，尽量拆分开前端代码和后端代码。PHP模板引擎能解决这种混乱吗？当然可 查看详情

后端让前端执行某个函数怎么操作

...：其次，在前端调用该函数，可以使用Ajax、fetch等技术，将后端定义的函数调用到前端，以便在前端执行。3.在前端执行函数：最后，在前端执行该函数，可以使用JavaScript、HTML、CSS等技术，将后端定义的函数调用到前端，以便... 查看详情

带有 React 前端的 Django 后端

...状态提要、搜索、事件等。每个页面都是一个单独的django模板，数据通过使用django模板引擎中的变量进行可视化。但此时，我想使用ReactJS将这些静态页面更改为更动态的页面 查看详情

前端怎么判断后台返回的0或1来渲染不同的页面

...端渲染：指的是后端返回json数据，前端利用预先写的html模板，循环读取json数据，拼接字符串，并插入页面。好处：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交... 查看详情

node前后端分离基本概括

首先从一个重要的概念“模板”说起。广义上来说，web中的模板就是填充数据后可以生成文件的页面。严格意义上来说，应该是模板引擎利用特定格式的文件和所提供的数据编译生成页面。模板大致分为前端模板（如ejs）和后端... 查看详情

将后端连接到 Google BigQuery

】将后端连接到GoogleBigQuery【英文标题】：ConnectingabackendtoGoogleBigQuery【发布时间】：2017-04-1714:43:03【问题描述】：我在googleBigQuery中有一个大型数据集，需要在我的后端访问。为此，我需要安装GoogleCloudSDK，但是，我正在使用的... 查看详情