@1002522146 2017-07-03T06:57:19.000000Z 字数 1366 阅读 784

Node.js进阶のEJS模版

node.js

此处输入图片的描述

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。

官方文档

模板的脚本

        <%  %> 直接执行JS代码，没有输出 在页面中脚本可以写多个，甚至可以将一段代码分别写在多个脚本中
        <%= %> 执行js代码并将代码转义后输出
        <%- %> 执行js代码并直接输出

存储模板变量的位置：

全局的 app.locals
当前请求的 res.locals render的第二个参数

示例

//引入express模块
const express = require("express");
//获取应用的对象（代表服务器）
const app = express();
/*使用步骤：
        1.安装ejs
        2.配置Express的模板引擎
        3.配置模板的存放目录
 */
app.set("views engine" , "ejs");
app.set("views","views");
//向app的locals属性中添加一个属性 孙悟空
//app.locals中的属性可以在ejs模板直接使用，它可以在任意的模板中使用
//app.locals.username = "孙悟空";
//设置一个get路由
app.get("/hello",(req , res)=>{
    //res.send("HELLO");
    //渲染模板，并返回到客户端
    //在render传递一个对象作为第二个参数，那么对象中的信息将可以在模板对象中获取
    res.render("test.ejs",{username:"猪八戒",age:18,gender:"男"});
})
app.get("/exer",(req , res)=>{
    //当该路由收到请求时，需要创建一个数组，在数组中保存几个学生对象
    let arr = [
        {name:"孙悟空",age:18,address:"花果山"},
        {name:"猪八戒",age:28,address:"高老庄"},
        {name:"沙和尚",age:38,address:"流沙河"},
        {name:"唐僧",age:16,address:"女儿国"}
    ];
    /*
        Express实际上就做了一件事，
            将模板 和 数据 渲染成了一个html页面
     */
    //在渲染exer.ejs时将数组作为参数传递过去
    res.render("exer.ejs",{stuArr:arr});
});
//启动服务器
app.listen(3000,()=>{
    console.log("服务器已经启动~~~");
});

存放在views的EJS模版

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<table border="1" width="40%" align="center" >
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
 <%
    for(let i=0 ; i<stuArr.length ; i++){
        %>
    <tr>
        <td><%=stuArr[i].name%></td>
        <td><%=stuArr[i].age%></td>
        <td><%=stuArr[i].address%></td>
    </tr>
    <%
    }
 %>
</table>
</body>
</html>

Node.js进阶のEJS模版

模板的脚本

存储模板变量的位置：

示例

存放在views的EJS模版

内容目录