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.创建网页

扫描二维码关注公众号,回复: 4585390 查看本文章
<!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>

猜你喜欢

转载自blog.csdn.net/chao2458/article/details/85122492