1️⃣ 基本构造

image.png

1️⃣ index.js

  1. const express = require('express')
  3. const app = express()
  5. //让你的服务器知道你在用哪一个模板引擎-----配置模板引擎
  6. app.set('view engine','ejs')
  8. //让你的服务器知道你的模板在哪个目录下，配置模板目录
  9. app.set('views','./haha')
  11. //如果在express中基于Node搭建的服务器，使用ejs无需引入。
  12. app.get('/show',function (request,response) {
  13.   let personArr = [
  14.     {name:'peiqi',age:4},
  15.     {name:'suxi',age:5},
  16.     {name:'peideluo',age:6}
  17.   ]
  18.   response.render('person',{persons:personArr,a:1})
  19. })
  21. app.listen(3000,function (err) {
  22.   if (!err) console.log('服务器启动成功了')
  23.   else console.log(err)
  24. })

1️⃣ person.ejs

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>show</title>
  6. </head>
  7. <body>
  8.   <!--
  9.     ejs语法：
  10.      1.< % % >   里面能写任意js代码，但是不会向浏览器输出任何东西。
  11.      2.< %- % >  能够将后端传递过来对象指定key所对应value渲染的页面
  12.      3.< %= % >  能够将后端传递过来对象指定key所对应value渲染的页面
  13.   -->
  14.   <%
  15.     for (var i=0; i<persons.length; i++ ){
  16.       let item = persons[i] %>
  17.   <ul>
  18.     <li class="name">姓名：<%=item.name%></li>
  19.     <li>年龄：<%=item.age%></li>
  20.   </ul>
  21.   <%}%>
  22. </body>
  23. </html>