Koa 中 ejs 模板的使用

時間 2020-07-06

標籤 koa ejs 模板使用简体版

原文原文鏈接

ejs的基本使用html

安裝 koa-views 和 ejsnpm

npm install --save koa-views/cnpm install --save koa-views

npm install ejs --save / cnpm install ejs --save

引入 koa-views 配置中間件app

const views=require('koa-views');
app.use(views('views',{map:{html:'ejs'}})); // 模板後綴名是ejs

Koa中使用ejskoa

router.get('/add',async(ctx)=>{ 
　　lettitle='hello koa2' 
　　await ctx.render(index',{ 
　　　　title 
　　}) 
})

Ejs 引入外部的ejs模板async

<%-includeheader.ejs%>

ejs的基本使用實例ui

app.jsspa

let Koa=require('koa')
let router = require('koa-router')()
let views = require('koa-views')

var app = new Koa()

//配置模板引擎中間件  --第三方中間件
//這樣配置也能夠  注意若是這樣配置的話 模板的後綴名是.html
//app.use(views('views', { map: {html: 'ejs' }}));
app.use(views('views',{
    extension:'ejs' // 應用ejs模板引擎
}))

//寫一箇中間件配置公共的信息
//注意：咱們須要在每個路由的render裏面都要渲染一個公共的數據。公共的數據放在這個裏面，這樣的話在模板的任何地方均可以使用
app.use(async (ctx, next)=>{
    ctx.state.userinfo='張三';
    await next(); // 繼續向下匹配路由
})

router.get('/',async (ctx)=>{
   let title="你好ejs";
   await ctx.render('index',{
     title: title
   });

})
router.get('/news',async (ctx)=>{
    let list=['11111','22222','33333'];
    let content="<h2>這是一個h2</h2>";

    let num=12;
    await ctx.render('news',{
        list: list,
        content: content,
        num: num
    })
})

app.use(router.routes());   /*啓動路由*/
app.use(router.allowedMethods());
app.listen(3000);

public/header.ejskoa2

<h1 class="title">這是一個頭部的模塊</h1>

index.ejscode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <% include public/header.ejs%>
    這是一個ejs的模板引擎
    <h2><%=title%>-----<%=userinfo%></h2>
</body>
</html>

news.ejsrouter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <% include public/header.ejs%>
    <h2>ejs循環數據---<%=userinfo%></h2>

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

    <h2>綁定html數據</h2>
    <br/>
    <%=content%>
    <br/>
    <%-content%>

    <h2>條件判斷</h2>
    <%if(num>24){%>
        大於24
    <%}else{%>
        小於24
    <%}%>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。