Node.js模板引擎学习----ejs

最新推荐文章于 2024-05-05 21:10:49 发布

弹琴弹琴

最新推荐文章于 2024-05-05 21:10:49 发布

阅读量1k

点赞数

分类专栏： NodeJs点滴知识文章标签： ejs node

NodeJs点滴知识专栏收录该内容

15 篇文章 0 订阅

订阅专栏

环境：windows+node.js+express

一、安装ejs

打开cmd窗口，输入npm install ejs -g,等待下载安装完成。

二、使用

调用过程中使用路由机制和模板，路由请求地址为根目录，模板文件为home.ejs【注：模板引擎文件为.ejs文件】

1、新建js文件为index.js

写入如下代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

varexpress=require("express");

varapp=express();

//设置渲染引擎

app.set("viewengine",'ejs');

//设置模板目录为当前index.js目录同级views目录下的模板

app.set("views",__dirname+"/views");

//设置使用当前目录

app.use(express.static(__dirname));

app.get("/",function(req,res){

//渲染页面并传值

res.render('home.ejs',{name:"kid"});

});

//监听3000端口

app.listen(3000);

2、新建home.js,目录为/views/home.ejs，输入如下内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPEhtml>

<html>

<headlang="en">

<metacharset="UTF-8">

<title></title>

</head>

<body>

<h2>Hello</h2>

<p>Hi<%=name%></p>

</body>

</html>

3、在浏览器中输入localhost:3000回车

结果如下

4、在网页里面引入ejs,渲染

修改home.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!DOCTYPEhtml>

<html>

<headlang="en">

<metacharset="UTF-8">

<title></title>

</head>

<body>

<h2>Hello</h2>

<p>Hi<%=name%></p>

<divid="new-temp"></div>

</body>

<scriptsrc="../ejs.min.js"></script>

<script>

vartmp="<p>Newtemplate</p>";

varnewTemplate=document.getElementById("new-temp");

newTemplate.innerHTML=ejs.render(tmp);

</script>

</html>

总结：由此可以扩展到动态创建或者获取res.render()方法的locals参数，然后渲染相同的页面，第4步，就像引入jquery一样对网页进行操作。

转载：https://www.cnblogs.com/shangguanjinwen/p/4677570.html

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Node.js模板引擎学习----ejs

环境：windows+node.js+express一、安装ejs打开cmd窗口，输入npm install ejs -g,等待下载安装完成。二、使用调用过程中使用路由机制和模板，路由请求地址为根目录，模板文件为home.ejs【注：模板引擎文件为.ejs文件】1、新建js文件为index.js写入如下代码： 1 2 3 4 5...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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