1. 程式人生 > >koa test3 ejs模板引擎 views渲染

koa test3 ejs模板引擎 views渲染

安裝

npm install koa-views --save

npm install ejs --save

匯入

const views = require('koa-views');

配置

 

配置模板引擎中介軟體 --- 第三方中介軟體

一、全域性變數

app.use(async (ctx,next){

     await  ctx.sate.g:'這是一個全域性變數' 

    netx()

})

兩種配置方式  不同的方式需要的檔案的字尾名不同

1.字尾名為ejs 的中介軟體

app.use(views,('views',{

   extension:'ejs'

}))

2.字尾名為html

app.use(views,(mpa{html:'ejs'))

 

渲染

ruoter.get('/', async ctx=>{

    await ctx.render ('index',{

         title:'hollew word',

         list:[123,123,123,123,123,],

         htmlH:'<h3>這是一個H3</>',

          num:12

  })

})

建立dom模板

1.建立元件(建立一個公共的元件模板)

<h1>這是首頁</h1>

2.建立網頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--引入模板-->
<% include ../public/hader.ejs %>

<!-- 渲染資料-->
<p>

    這是title:  <%=title%>

</p>

<!--渲染帶有html資料-->

<%-htmlH%>

<!--迴圈資料-->
<ul>
    <%for(var i=0;i<list.length;i++){%>

        <li><%=list[i]%></li>

    <%}%>

</ul>

<!--判斷語句-->
<%if(num>10){ %>
   大於<%=num%>
<%}else{%>
    小於<%=num%>
<%}%>

<!--引入全域性資料-->
<%=g%>
</body>
</html>