koa2實戰個人筆記（二）——模板渲染引擎ejs

配置

在app.js中註冊(前提是安裝)

const views = require('koa-views')
// 註冊模板檔案，指定相應資料夾
app.use(views(__dirname + '/views', {
  extension: 'ejs'
}))

引用

直接在路由中使用ctx.render函式，需要注意讀取檔案是非同步操作，要用await。

router.get('/', async (ctx, next) => {
  <!--第一個是模板的檔名，第二個引數物件是傳到模板裡的引數-->
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})

語法

1. 變數

<h1><%= title %></h1>

用<%= 變數 %>語法取得變數
2. if…else語句

  <p><% if(isShow){ %></p>
  <a href="#">哈哈</a>
  <p><% }else{ %></p>
  <a href="#">嘿嘿</a>
  <p><% } %></p>

其中isShow是傳過來的引數
3. for迴圈

<!--資料 routes/index.js-->
router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    list:[
      {
        id:1,
        name:"第1個",
      },
      {
        id:2,
        name:"第2個",
      },
      {
        id:3,
        name:"第3個",
      },
      {
        id:4,
        name:"第4個",
      },
      {
        id:5,
        name:"第5個",
      }
    ]
  })
})
<!-- index.ejs -->
   <div>
     <% list.forEach(item=>{ %>
     <h1><%= item.name %></h1>
     <% }) %>
  </div>

模板元件引入

<%- include('widgets/usere',{
    isShow
}) %>

第一個引數是元件路徑，第二個引數是帶給元件的值