express-EJS模板引擎EJS模板引擎 EJS 官网中文网 EJS 使用下载 npm i ejs --save

EJS模板引擎

模板引擎是分离用户界面和业务数据的一种技术

EJS

EJS是一个高效的JavaScript的模板引擎

官网

中文网

EJS 使用

下载

npm i ejs --save
示例
常用语法

执行JS代码
```
<% code %>
```
输出转义的数据到模板上
```
<%= code %>    
```
输出非转义的数据到模板上
```
<%- code %>
```

实例:

初体验

 //1.导入EJS
 const ejs = require('ejs')
 const fs = require('fs')
 
 let name = "名字:"
 let value = '张三'
 
 //将name和value拼接
 
 //声明变量
 // let str = "名字: <%= value %>"
 let str = fs.readFileSync('./index1.html').toString()
 
 //使用ejs渲染
 let result = ejs.render(str, {value:value})
 
 console.log(result)

 <!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>
   名字: <%= value %>
 </body>
 </html>

ejs列表渲染

 const ejs = require('ejs')
 const fs = require('fs')
 
 const arr = ['张三','李四','王五','赵六']
 //<ul><li></li></ul>
 
 //原写法
 // let str = "<ul>"
 // arr.forEach(item=>{
 //   str += `<li>${item}</li>`
 // })
 
 // str += "</ul>"
 
 //EJS
 let html = fs.readFileSync('./index2.html').toString()
 let str = ejs.render(html,{arr:arr})
 
 console.log(str)

 <!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>
   <ul>
     <% arr.forEach(item => { %>
       <li> <%= item %> <li>
     <%})%>
   </ul>
 </body>
 </html>

条件渲染

    /**
     * 通过isLogin变量决定最终输出的内容
     * true 输出[<span>登录成功</span>]
     * false 输出[<button>登录</button>]
     */
    
    const ejs = require('ejs')
    //变量
    let isLogin = false
    
    //原写法
    // if(isLogin){
    //   console.log(`<span>登录成功</span>`)
    // }else{
    //   console.log(`<button>登录</button>`)
    // }
    
    //EJS
    let result = ejs.render(`
    <% if(isLogin) { %>
      <span>登录成功</span>
    <% }else{ %>
      <button>登录</button>
    <% } %>
    `,{isLogin:isLogin})
    console.log(result)

express中使用ejs

//1.引入express模块
const express = require('express')
const path = require('path')

//2.创建应用对象
const app = express()

//5.设置模板引擎
app.set('view engine', 'ejs')
//6.设置模板文件存放位置
app.set('views', path.resolve(__dirname, './views'))



//3.创建路由
app.get('/index',(req, res) => {
  // console.log('你好')
  let title = "你好"
  res.render('home', {title})
})

//4.启动服务
app.listen(3000, ()=>{
  console.log('启动服务')
})

views/home.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><%= title %></h1>
</body>
</html>