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>