[关闭]
@1002522146 2017-07-03T06:57:19.000000Z 字数 1366 阅读 745

Node.js进阶のEJS模版

node.js


此处输入图片的描述

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

模板的脚本

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

存储模板变量的位置

示例

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

存放在views的EJS模版

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <table border="1" width="40%" align="center" >
  9. <tr>
  10. <td>姓名</td>
  11. <td>年龄</td>
  12. <td>地址</td>
  13. </tr>
  14. <%
  15. for(let i=0 ; i<stuArr.length ; i++){
  16. %>
  17. <tr>
  18. <td><%=stuArr[i].name%></td>
  19. <td><%=stuArr[i].age%></td>
  20. <td><%=stuArr[i].address%></td>
  21. </tr>
  22. <%
  23. }
  24. %>
  25. </table>
  26. </body>
  27. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注