1、app.js

//npm install koa-views --save
//npm install ejs --save
//var views = require('koa-views')
//app.use(views(__dirname, {extension:'ejs'))
//await ctx.render('index')


var Koa = require('koa'),
    router = require('koa-router')()
    views = require('koa-views')

var app = new Koa()

//配置模板引擎中间件,  --第三方中间件
/*
这样配置也可以,但必须是index.html文件
app.use(views('05_koa_ejs/views', {
   map:{html:'ejs'}
}))
*/
app.use(views('05_koa_ejs/views', {
    extension: 'ejs'   //应用ejs模板引擎  文件路径为05_koa_ejs/views,文件名为index.ejs
}))

//注意:我们需要在每一个路由的render里面都要渲染一个公共的数据
//可以将公共的数据放在ctx.state里,这样的话在模板的任何地方都可以使用
/*
 ctx.state = {
     session: this.session,
     title: 'app'
 }
*/
app.use(async (ctx, next)=>{     //写一个中间件配置公共的信息
    ctx.state.userinfo = 'lee'
    await next()      //继续向下匹配路由
})

router.get('/', async (ctx)=>{
    let title = "你好,ejs"
    await ctx.render('index', {
        title: title
    })
})
//循环渲染数据
router.get('/news', async (ctx)=>{
    let list = ['111','222', '333']
    let content = "<h2>这是一个h2</h2>"
    let num = 123
    await ctx.render('news', {
        list: list,
        content: content,
        num: num
    })
})


app.use(router.routes())  //启动路由
app.use(router.allowedMethods()) 

app.listen(3000)

2、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>
    这是一个ejs的模板引擎
    <!-- ejs引入模块 -->
    <%-include("public/header.ejs")%>
    <!-- ejs绑定数据 -->
    <h2><%=title%>------<%=userinfo%></h2>
</body>
</html>

 

posted on 2021-06-23 22:10  李起桉  阅读(109)  评论(0编辑  收藏  举报