模板引擎

模板引擎的目的就是在固定模板结构中渲染不同的数据,通常是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端口")
})

 

模板引擎

 

 注意:

模板引擎可以使用循环语句

<%%>表示的是设置模板引擎作用域,内部多用于循环和判断语句

<%=%>表示的是输出语句

 

上一篇:三、SwiftUI之@ViewBuilder


下一篇:Vue命名规范