2. Ejs

Ejs是express生态里面的一个模板引擎,主要用于便捷地挂载静态html页面

  1. 安装依赖
  1. // 终端中
  2. npm i ejs
  1. 使用模板

加载模板引擎的默认文件夹是src/views

  1. // app.js中
  2. app.set('view engine', 'ejs') 
  3. app.get('/', (req, res) => {
  4.   const richtext = '<p>这是一个需要渲染的p标签</p>'
  5.   res.render('index.ejs', // ejs的路径，不需要写views。后缀可省略
  6.             {title: '这是首页', richtext} // 向ejs中传递的参数 
  7.             )
  8. })

模板内容

  1. // views/index.ejs
  2. <html>
  3.   ...
  4.     <p>
  5.       参数: <%=title%>
  6.     html: <%-richtext%>
  7.   </p>
  8.     ...
  9. </html>
  10. // 就html内容即可

supervisor可以启动一个热更新服务

  1. 模板中的逻辑处理
  1. // index.ejs中
  2. <%if(flag==true){%>
  3.   <strong> flag=true </strong>
  4.  <%}%>
  6. <%if(score>60){%>
  7.   <p> 及格了 </p>
  8. <%}else{%>
  9. <p>不及格</p>
  10.  <%}%>
  1. // app.js 中
  2. app.get('/', (req, res) => {
  4.   res.render('index.ejs', {
  5.     flag: true,
  6.     score: 62
  7.   })
  8. })
  1. 模板中的循环遍历
  1. // index.ejs中
  2. <ul>
  3.   <%for (let i = 0; i<list.length>; i++){%>
  4.   <li><%=list[i]%></li>
  5.   <%}%>
  6. </ul>
  1. // app.js中
  2. app.get('/', (req, res) => {
  3.   const list = [1,2,3,4]
  4.   res.render('index.ejs', {
  5.     list
  6.   })
  7. })
  1. 模板中使用模板
  1. <%- include('footer.ejs') %>

  1. 使用html模板

    1. 在app.js中引入ejs
    2. 在app.js中注册html模板引擎
    3. 将模板引擎换成html代码
    4. 修改模板文件的后缀为html
    5. html模板的语法同ejs ```javascript //app.js const ejs = require(‘ejs’) const express = require(‘express’)

const app = express() app.engine(‘html’, ejs.__express) app.set(‘view engine’, ‘html’)

  2. 7. 
  3. 在模板中引入css等静态资源
  5.    1. express托管静态资源
  6. ```javascript
  7. // css文件放在static/css文件夹中
  8. const express = require('express')
  10. const app = express()
  12. app.use(express.static('static'))
  1. 在模板中通过link标签引入
    1. <head>
    2. <link rel='stylesheet' href='/css/base.css'>
    3. </head>

8 express配置虚拟静态目录

  1. // app.js中
  2. app.use('/public', express.static('static'))
  3. // 前者是虚拟的访问路径，后者是实际的文件所在路径