koa中使用 ejs

安装 koa-views 和 ejs

  npm install --save koa-views

  npm install ejs --save

  https://www.npmjs.com/package/koa-views

引入 koa-views ,配置 ejs 模板引擎

配置方式1:

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const views = require('koa-views')
const ejs = require('ejs')

//配置模板引擎中间件 koa-views(第三方中间件)
//方式1
app.use(views( 'views', {
    map: {
        html: 'ejs' //应用ejs 模板引擎
    }
}))

router.get('/',async (ctx)=>{
    console.log("首页")
    let title = "首页"
    await ctx.render('index',{
        title:title
    })
})

app.use(router.routes()); 
app.use(router.allowedMethods());

app.listen(3000);

官方示例:

 方式1渲染的页面是 index.html 页面

 配置方式2:

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const views = require('koa-views')
const ejs = require('ejs')

//配置模板引擎中间件 koa-views(第三方中间件)
//方式2
app.use(views('views', { 
    extension: 'ejs' //应用 ejs 模板引擎 
}))

router.get('/',async (ctx)=>{
    console.log("首页")
    let title = "首页"
    await ctx.render('index',{
        title:title
    })
})

app.use(router.routes()); 
app.use(router.allowedMethods());

app.listen(3000);

方式2 渲染的是 index.ejs 页面

在 koa 中使用 ejs:

① 引入其他模板

  如 渲染首页时,首页加载 header 页面头部,只需要在 index.ejs 中引入 header.ejs

  

  渲染成功:

  

② 绑定数据

  传入一个 msg 到 index.ejs 中

  

  index.js 中 渲染 msg:<%=%> 语法

   

   一些数据,很多页面都需要用到的,可以 写一个 koa 中间件 将这个公共信息 传入到每个页面中:

  

   直接在需要用到这个数据的页面中渲染

  

   index.ejs 和 login.ejs 中都可以直接渲染出 userName:

   

   

③ 绑定 html 数据

  

    以 <%-%> 语法渲染:

  

④ 条件判断语法

  

   

   

⑤ 列表循环语法

   

   

   

app.js

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const views = require('koa-views')
const ejs = require('ejs')

//配置模板引擎中间件 koa-views(第三方中间件)
app.use(views('views', { 
    extension: 'ejs' //应用 ejs 模板引擎 
}))

//一个中间件配置公共的信息
app.use(async (ctx,next)=>{
    ctx.state.userName="jack"
    await next() //继续向下匹配路由
})

router.get('/',async (ctx)=>{
    console.log("首页")
    let msg = "hello world"
    let htmlMsg = '<h6>htmlMsg</h6>'
    let num = 10
    let list = ['aaa','bbb','ccc','ddd']
    await ctx.render('index',{
        msg:msg,
        htmlMsg:htmlMsg,
        num:num,
        list:list
    })
})

router.get('/login', async (ctx) => {
    console.log("登录页")
    await ctx.render('login')
})

app.use(router.routes()); 
app.use(router.allowedMethods());

app.listen(3000);

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>index.ejs页面</h3>
    <h5>加载公共模板</h5>
    <%- include('./layout/header.ejs'); %>
    <h5>绑定数据</h5>
    <%=msg%><br>
    公共信息:<%=userName%>
    <h5>绑定html数据</h5>
    <%-htmlMsg%>
    <h5>条件判断</h5>
    <%if(num=10){%>
        num = 10 
    <%}else{%>
        num!=10
    <%}%>
    <h5>列表循环</h5>
    <%for(let i=0;i<list.length;i++){%>
        <li><%=list[i]%></li>
    <%}%>
</body>
</html>

 

posted @ 2021-01-30 19:12  shanlu  阅读(420)  评论(0编辑  收藏  举报