模板引擎的目的就是在固定模板结构中渲染不同的数据,通常是JSON数据
在NodeJS中使用的是ejs模板引擎
首先我们要安装ejs依赖
npm install --save ejs
模板文件index.ejs,后缀名为ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>我是<%=name%></h1> </body> </html>
app.js
var express = require("express"); var app = express(); // 设置默认的模板引擎为ejs app.set("view engine","ejs"); // 指的是设置对应的模板引擎文件夹,也就是模板引擎回去固定的文件夹中找ejs文件,默认是views文件夹 app.set("views") app.get("/",function(req,res){ res.render("index",{ "name":"小明" }) }) app.listen(3000,function(){ console.log("监听3000端口") })
注意:
views文件夹可以改变,使用下面的语句,在第二个参数设置对应的模板文件夹名称,第一个参数必须是views,
默认不写第二个参数表示模板引擎文件夹为views
app.set("views","templates");
模板的拓展名必须是.ejs结尾的文件,但是在render的时候不需要写拓展名
我们看下面的案例:
index.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1> 菜单 <% for(var i=0;i<caipin.length;i++){ %> <%=caipin[i]%> <% } %> </h1> </body> </html>
app.js
var express = require("express"); var app = express(); // 设置默认的模板引擎为ejs app.set("view engine","ejs"); // 指的是设置对应的模板引擎文件夹,也就是模板引擎回去固定的文件夹中找ejs文件,默认是views文件夹 app.set("views") app.get("/",function(req,res){ res.render("index",{ "caipin" : ["水煮鱼","火锅","墨鱼仔","劲仔小鱼","烤肉"] }) }) app.listen(3000,function(){ console.log("监听3000端口") })
注意:
模板引擎可以使用循环语句
<%%>表示的是设置模板引擎作用域,内部多用于循环和判断语句
<%=%>表示的是输出语句