EJS入门

最新推荐文章于 2024-02-28 12:09:40 发布
最新推荐文章于 2024-02-28 12:09:40 发布
阅读量4.2w 收藏 29
点赞数 8
分类专栏： ejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/show_me_the_world/article/details/51945035
版权

一、为什么用EJS

在web项目中渲染页面我们很多时候我们会用jstl或者直接采用拼接字符串的方式，前者不够灵活，在处理一些复杂问题的时候会显得难以下手，后者足够灵活，但是就像ejs官网说的，字符串拼接方式，会让整个代码很丑陋，还破坏原有的html结构，大量的html拼接会让代码难以阅读，解决问题的方式就是使用模板，ejs算是js模板中最简单的了，对于java程序员来说，学习ejs完全不需要时间，因为他实在是很简单，这也是个人比较喜欢的原因。下面对比拼接字符串方式和ejs模板方式

js拼接字符串的方式：

var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
    html += "<li><a href='supplies/"+data.supplies[i]+"'>"
    html += data.supplies[i]+"</a></li>"
}
html += "</ul>"
ejs模板方式 

<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>
        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>
    <% } %>
</ul>

二、怎么用EJS

1.将一个模板定义为为.ejs 结尾的文件，模板内容就像上面那样，使用<%= %> 赋值，在<%%>中间是js代码，就像你平时写js一样

2.通过function EJS(options)创建一个EJS实例，其中options有如下属性

url:模板路径，通过ajax加载模板

text：模板String串，直接使用这个串作为模板

element{string or element}：当为String时表示dom元素的id，当为element时即document.getElementById('id')本身

name{string}：用来缓存模板，默认是DOM ID或者URL

cache:是否缓存，默认缓存

url、text、element分别为获取模板的三种途径，即ajax请求外部模板，js的String串，DOM的innerHTML

3.render(data)

new EJS({url: '/template.ejs'}).render(data)

4.update(element,url_or_data)

url_or_data是null时，返回一个function(obj)函数，其中obj是用来render模板的数据，

url_or_data是url时，通过ajax获取数据

url_or_data是data时，渲染数据

f = new EJS({url: '/mytemplate.ejs'}).update('my_element')

new EJS({url: '/mytemplate.ejs'}).update('my_element', '/data.json')

new EJS({url: '/mytemplate.ejs'}).update('my_element', {supplies:['mop']})

三、demo

新建一个index.html，内容如下：其中test.js是测试js

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	
</head>
<body>
	<div  id="test">
		
	</div>

</body>
</html>
<script type="text/javascript" src="ejs.js"></script>
<script type="text/javascript" src="test.js"></script>

1.第一种调用模板的方法，通过url请求模板，适用于多个页面共用一个模板

在同级目录下新建一个template.ejs文件，内容如下

<table>
	<thead>
		<th>姓名</th>
		<th>年龄</th>
	</thead>	
	<tbody>
	<%for(var i=0;i<list.length;i++){var u=list[i];%>
		<tr>
		<td><%=u.name%></td>
		<td><%=u.age%></td>
		</tr>
	<%}%>
	</tbody>

</table>

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
	var options={
		url:'template.ejs'
	}
	var html=new EJS(options).render(data);
	document.getElementById("test").innerHTML=html;


2.第二种调用模板的方法，内部模板，通过element获取，如果这个模板只在此页使用

在index.html中添加以下模板，注意内部模板跟外部模板的区别

<script type="text/html" id="template">
<table>
	<thead>
		<th>姓名</th>
		<th>年龄</th>
	</thead>	
	<tbody>
	[%for(var i=0;i<list.length;i++){var u=list[i];%]
		<tr>
		<td>[%=u.name%]</td>
		<td>[%=u.age%]</td>
		</tr>
	[%}%]
	</tbody>
</table>
</script>

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
	var options={
		element:"template"
	}
	var html=new EJS(options).render(data);document.getElementById("test").innerHTML=html;

 这里的element可以是值为模板id的string,也可以是element即为document.getElementById("template") 

 

3.第三种String串方式在js中声明的模板，不再说了
 

 

4.上面只说了render方法，update方法的使用如下
 

 

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
	var options={
		element:"template"
	}
	new EJS(options).update("test",data);
或 

 

 

var data={"list":[{"name":"张三","age":20},{"name":"李四","age":21}]};
	var options={
		element:"template"
	}
	var  template=new EJS(options).update("test");
	template(data)
 

 也可以直接通过url获取data 

 

 

var options={
		element:"template"
	}
	new EJS(options).update("test","data.json");
 

 最终的结果都是一样的，如下 

 


 
 

以上基本就是EJS的所有语法了，当然EJS还做了一些扩展
 


 
 
 

 
 
 

 


                

        

        

    




    

      

        

            

              
                
                  show_me_the_world
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    8
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    29
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  8
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
node.js中EJS 模板快速入门教程

				
			

			

				

					10-19
				

			

		

		

			
				
本篇文章主要介绍了EJS 模板快速入门学习，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

				
					
Node.js的Web模板引擎ejs的入门使用教程

				
			

			

				

					12-23
				

			

		

		

			
				
Node 开源模板的选择很多，但推荐像我这样的老人去用 EJS，有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然，也就是说，你能够在 <%…%> 块中安排 JavaScript 代码，利用最传统的方式 <%=输出变量%>（另外 <%-输出变量是不会对 & 等符号进行转义的）。安装 EJS 命令如下：


npm install ejs

JS 调用
JS 调用的方法主要有两个：


ejs.compile(str, options);
// => Function 
ejs.render(str, options);
// => str

实际上 EJS 可以游

			
		

	



                


  
              

                


	

		

			

				
					
中台前端框架AntDesignPro document.ejs文件详解

					
最新发布

				
			

			

				

					知行合一
				

				

					02-28
					
					1224
					
				

			

		

		

			
				
ejs文件是使用EJS（Embedded JavaScript templating）模板引擎创建的模板文件。EJS是一种简单而强大的模板语言，可以在HTML文件中嵌入JavaScript代码。EJS主要用于服务器端渲染（SSR）的场景，也可以在构建时（使用Node.js脚本）动态生成HTML文件。

			
		

	





	

		

			

				
					
bugtracker:EJS，Google表格和SendGrid

				
			

			

				

					04-23
				

			

		

		

			
				
关于
用户可以使用Bug Tracker报告应用程序的问题和错误。
 使用在线Google SpreadSheet控制数据
如果发生严重问题，将能够直接发送电子邮件
里面是什么？
 该项目使用了很多东西，例如：
Bugtracker Web应用程序
入门
npm start
# OR
yarn start
用浏览器打开以查看结果。
学到更多
要了解有关Next.js的更多信息，请查看以下资源：
 -了解如何使用Google表格。
 -了解如何配置“发送网格”。

			
		

	



		

			
		



	

		

			

				
					
EJS入门了解

				
			

			

				

					qq_42445025的博客
				

				

					07-08
					
					731
					
				

			

		

		

			
				
EJS入门了解

ejs是一个模板语言，通过数据和模板，可以生成HTML标记文本。相当于一个JavaScript库，可同时运行在客户端和服务器端，客户端直接引入文件，服务器端使用npm包安装即可。
特点：

快速编译和渲染
模板标签简单
自定义标记分隔符
支持文本包含、支持浏览器端和服务器端
模板静态缓存
支持express视图系统


函数

render(str,datd,[option])：直接渲染字符串并生成HTML

str：需要解析的字符串模板
data：数据
option：配置选项


com

			
		

	





	

		

			

				
					
浅谈EJS模板语法 | 前端框架中index.html中的变量语法

				
			

			

				

					青春木鱼的博客
				

				

					09-11
					
					1440
					
				

			

		

		

			
				
在 vue 或者 react 前端项目中，我们经常会在入口模板文件 index.html 中看到用 %PUBLIC_URL%、、 之类的变量插入。但这似乎我们平时的 html 或者 javscript 压根没见过这类的写法，一时感觉超出了自己的知识盲区。

			
		

	





	

		

			

				
					
浅析嵌入式 JS 模板引擎之EJS

				
			

			

				

					01-08
				

			

		

		

			
				
EJS是一套既简单又高效的嵌入式 JS模板语言，可以帮我们利用普通的 JS 代码生成 HTML 页面。其历史悠久，曾一度得到些许大佬的青睐，现在虽然没有vue、react这些项目流行，但其还是有一定的使用场合和学习价值的。
EJS后缀名为”ejs”
EJS 支持我们把JS代码直接写在标签内
EJS 能够缓存 JS函数的中间代码，使执行速度得到极大的提升
EJS 调错极其简单：因为它所有错误都是普通的 JS 异常，而且也会给我们输出异常发生的具体位置
EJS能够快速编译与绘制输出，并且其标签很简洁，如：
EJS能够自定义分割符，如：用  替换
EJS同时支持服务器端和浏览器 JS 环境
EJS兼

			
		

	





	

		

			

				
					
EJS模板引擎

				
			

			

				

					lhrdlp的学习笔记
				

				

					04-30
					
					1487
					
				

			

		

		

			
				
1.认识模板引擎

1.1 什么是模板引擎

模板引擎（Tempalte Engine）是一个将页面模板和要显示的数据结合起来生成HTML页面的工具。

模板引擎的功能是将页面模板和要显示的数据结合起来生成HTML页面，它既可以运行在服务器端，又可以运行在客户端。大多时候，它都是在服务器端直接被解析为HTML的，解析完成后，再传输到客户端，因此客户端甚至无法判断页面是不是由模板引擎生成的。当然，模...

			
		

	





	

		

			

				
					
EJS模板引擎简介及使用

				
			

			

				

					归兮的博客
				

				

					09-23
					
					4075
					
				

			

		

		

			
				
EJS模板引擎的简介及使用、引入模块、错误处理中间件、动态路由请求的设置及获取参数

			
		

	





	

		

			

				
					
ejs--嵌入式js模板引擎

				
			

			

				

					XIAO_YuBaby的博客
				

				

					12-06
					
					868
					
				

			

		

		

			
				
1.理解ejs
① 什么是模板引擎，为什么要用模板引擎

循环遍历数据显示
实现数据与试图分离（即html结构与数据分离）

②ejs

EJS是一个javascript模板库，用来从json数据中生成HTML字符串
EJS 是一套简单的模板语言，将JavaScript 代码生成 HTML 页面。
EJS 只是普通的 JavaScript代码。(可将js代码嵌入到html中且这些js代码可被解析成...

			
		

	





	

		

			

				
					
EJS学习总结

				
			

			

				

					weixin_33688840的博客
				

				

					09-10
					
					786
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
ejs模板引擎_节点和EJS模板引擎系列| EJS简介

				
			

			

				

					cumtb2009的博客
				

				

					06-27
					
					321
					
				

			

		

		

			
				
ejs模板引擎Hi! Welcome to NODE AND EJS TEMPLATE ENGINE SERIES where we'll explore node and EJS. EJS stands for Embedded JavaScript.
 嗨！ 欢迎使用NODE和EJS模板引擎系列，我们将在其中探索node和EJS 。 EJS代表嵌入式JavaScript 。 
In MEAN ...

			
		

	





	

		

			

				
					
webpack4中使用tpl模板

				
			

			

				

					c347087870的博客
				

				

					12-18
					
					1161
					
				

			

		

		

			
				
ejs-loader
在webpack开发中，经常会在js中写html代码，不用模板引擎的话会非常不方便开发和维护，这时候使用ejs-loader的话会非常方便，开发效率提升

什么是 EJS？

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而...

			
		

	





	

		

			

				
					
EJS的基础使用

				
			

			

				

					weixin_48864616的博客
				

				

					12-16
					
					3848
					
				

			

		

		

			
				
使用之前先看看之前的用法
生成相应的包结构
npm i express

const express = require('express')
const app = express()
const port = 3001


app.get("/list",(req,res)=>{
    //分页效果
    let {page} = req.query;
    let arr = ["华为Mate40Pro","华为Mate40RS","华为P40","华为P40 pro","华为 nova9

			
		

	





	

		

			

				
					
node.js 模板引ejs

				
			

			

				

					guugle2010的专栏
				

				

					08-25
					
					892
					
				

			

		

		

			
				
ejs速度不是最快的，推荐最多大概是因为其简单的语法结构。主要通过来嵌套代码。比如符合阅读逻辑，同时也省去不少学习语法的成本。
另有一些自定义的方法：如link_to(name, url)，img_tag(url)等。
还可以支持json。
===========
ejs的特性：
    1、缓存功能，能够缓存已经解析好的html模版；
    2、用于执行其中javascript代码

			
		

	





	

		

			

				
					
12-EJS模块运用

				
			

			

				

					qq_44886882的博客
				

				

					07-30
					
					408
					
				

			

		

		

			
				
本笔记简单介绍EJS模块的运用

根据EJS官方文档的介绍，以及使用，EJS可以理解就是在Html页面主体body中可以直接使用javaScript代码，即就像官网说的
EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。
首先记得安装模块，引入模块

cnpm i ejs --sava //如果没有安装cnpm的需要先安装
let ejs = require('ejs'); //引入EJS模块


这里主要介绍EJS使用常用的方法，EJS使用类似于Vue的使用，都

			
		

	





	

		

			

				
					
 EJS学习指南

				
			

			

				

					weixin_34345753的博客
				

				

					11-07
					
					416
					
				

			

		

		

			
				
基本概念
ejs的基本概念十分简单,一个html = 模板 + 数据,和传统的php字符串模板拼接非常相似.
例如我们有一个列表该列表展示一组新闻,理想中的状态如下:
<article>
    <h2>新闻1</h2>
    <h2>新闻2</h2>
    <h2&g...

			
		

	





	

		

			

				
					
ejs include

				
			

			

				

					05-21
				

			

		

		

			
				
EJS（Embedded JavaScript）是一种基于JavaScript的模板引擎，可以用来生成HTML、XML等文档。EJS提供了一种简单的方式来将数据嵌入到HTML页面中。其中，include指令用于在EJS模板中引入其他模板文件。

使用include指令，需要在模板中使用以下语法：

```
<% include path/to/other/template.ejs %>
```

其中，path/to/other/template.ejs是要引入的模板文件的路径。注意，在使用include指令时，被引入的模板文件中不应该包含任何与当前模板文件相同的变量或函数，否则可能会导致冲突。

需要注意的是，EJS并没有内置的include功能，而是通过在模板中定义一个自定义的include函数来实现的。因此，在使用include指令之前，需要在程序中定义这个函数。下面是一个例子：

```
const ejs = require('ejs');
const fs = require('fs');

ejs.filters.include = function (path) {
    const file = fs.readFileSync(path, 'utf8');
    return ejs.render(file, this);
};

const template = `
    <html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <% include path/to/other/template.ejs %>
    </body>
    </html>`;

const data = { name: 'John' };
const output = ejs.render(template, data);

console.log(output);
```

在上面的例子中，我们首先定义了一个自定义的include函数，然后在模板中使用include指令来引入其他模板文件。当渲染模板时，EJS会自动调用include函数来处理这些指令，并将被引入的模板文件和当前模板文件的数据合并起来生成最终的HTML输出。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 8

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值