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

时间 2019-12-07

标签 node.js node 模板引擎学习 ejs 栏目 Node.js 繁體版

原文原文链接

环境：windows+node.js+express html

1、安装ejs node

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

2、使用 express

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

一、新建js文件为index.js windows

写入以下代码：浏览器

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);

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

<!DOCTYPEhtml>

<html>

<headlang="en">

<metacharset="UTF-8">

<title></title>

</head>

<body>

<h2>Hello</h2>

<!--<%%>:ejs的语法-->

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

</body>

</html>

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

结果以下 htm

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

修改home.js

<!DOCTYPEhtml>

<html>

<headlang="en">

<metacharset="UTF-8">

<title></title>

</head>

<body>

<h2>Hello</h2>

<!--<%%>:ejs的语法-->

<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同样对网页进行操做。