express中使用ejs模板

• express使用ejs模板
  • express配置ejs模板引擎的文件夹
  • express修改ejs模板引擎的后缀名
  • express托管静态资源文件
• ejs渲染数据
  • ejs模板绑定数据
  • ejs模板渲染HTML
  • ejs模板的条件判断
  • ejs模板的for循环
  • ejs模板引入外部文件（公共组件）

express使用ejs模板

• 第一步 npm install ejs --save
• 第二步 app.set('view engine', 'ejs')
• 第三步 使用（默认加载模板引擎的文件夹是views）res.render(xxx)

express配置ejs模板引擎的文件夹

app.set("views", __dirname + "/views1")

express修改ejs模板引擎的后缀名

• 第一步 引入ejs：const ejs = require('ejs')
• 第二步 注册html模板引擎代码：app.engine('html', ejs.__express)
• 第三步 将模板引擎换成html代码：app.set('engine', 'html')

express托管静态资源文件

• 原理：匹配路由之前，先查看静态web目录里面有没有访问的文件，如果有就加载，没有路由就向下加载
• 可以多次调用app.use，配置多个静态web目录
• 可以配置虚拟目录，这样每次引入文件的时候都需要加上这个虚拟路径

// 配置多个静态web目录
app.use(express.static('static'))
app.use(express.static('./assets'))

// 配置虚拟静态webm目录
app.use('/public', express.static("static"))
<link rel="stylesheet" href="/public/css/style.css">

ejs渲染数据

ejs模板绑定数据

使用<%=变量名%>渲染数据

// 配置路由
app.get("/news", (req, res) => {
    var userInfo= {
        username: 'zhangsan',
        age: 20,
    }
    res.render("news.ejs", {userInfo}, (err, data) => {
        res.send(data)
    })
})

<!-- ejs页面渲染 -->
<p>
    <span><%=userInfo.username%><span>
    <span><%=userInfo.age%><span>
</p>

ejs模板渲染HTML

使用<%-变量名%>渲染HTML

// 配置路由
app.get("/news", (req, res) => {
    var titleHTML = '<h3>这是h3标签</h3>'
    res.render("news.ejs", {titleHTML}, (err, data) => {
        res.send(data)
    })
})

<!-- ejs页面渲染 -->
<p><%-titleHTML%></p>

ejs模板的条件判断

ejs使用if...else if ...else进行判断的时候，需要主要将所有的js代码放在<%%>中

<%if(flag == true){%>
    <p style="font-size:40px">flag = true<p>
<%} else {%>
    <p style="font-size:20px">flag = false<p>
<%}%>

ejs模板的for循环

ejs使用for循环的时候，需要主要将所有的js代码放在<%%>中

<ul>
    <%for(var i =0; i < newsList.length; i++){%>
        <li>
            <p><%=newsList[i].title%></p>
            <p><%=newsList[i].ctn%></p>
        </li>
    <%}%>
</ul>

ejs模板引入外部文件（公共组件）

使用<%- include('文件')%>

<p>
    <!-- 会把footer.ejs的内容渲染到p标签当中去 -->
    <%- include("footer.ejs") %>
</p>