Koa开发：入门、进阶与实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.4　模板引擎

在Web开发的场景中，页面数据往往是后端提供的，前端开发者得到接口数据后，通过一定的逻辑处理，将其呈现到页面上。在有很多相似页面且数量比较多的情况下，如果通过人工回填所有数据，会增加很多重复的工作，有没有一种机制能够解决这种问题呢？当然有，模板引擎就能解决这个问题。

在Koa中，模板引擎如何使用呢？模板引擎的功能实现需要用到中间件koa-views，其支持很多模板引擎，本节主要介绍ejs和pug的使用方法。

提示

koa-views支持的模板引擎详情见https://github.com/tj/consolidate.js#supported-template-engines。

2.4.1　ejs模板的使用

在使用ejs模板之前，我们需要先了解一下ejs是什么。ejs是一套简单的模板语言，帮助我们利用JavaScript代码生成HTML页面。读者可以到ejs官网（https://ejs.bootcss.com/）上查看相关文档。

假如现在要实现一个简单的页面，效果如图2-6所示。

0

图2-6　要实现的效果图

如果通过ejs模板引擎实现，代码如下。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
</body>
</html>

上述代码中，title是变量，传入的值将显示到页面上。ejs的详细使用方法可参考文档https://github.com/mde/ejs。

Koa中的模板功能实现需要用到中间件koa-views，代码如下。

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

// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
  extension: 'ejs' 
}))

app.use( async ( ctx ) => {
  let title = 'koa'
  await ctx.render('index', {
    title,
  })
})

app.listen(4000, () => {
  console.log('server is running, port is 4000')
})

运行该文件，打开浏览器访问http://127.0.0.1:4000/即可看到图2-6所示的效果。

提示

如果直接运行上述代码会抛出异常，读者需要自行安装ejs，无论使用哪个模板引擎，都需要安装ejs。

2.4.2　pug模板的使用

pug也是使用比较广泛的模板引擎，使用pug如何实现图2-6所示的效果呢？具体代码如下。

// view/index.pug
doctype html
html
  head
    title Koa Server Pug
  body
    h1 #{title}
    p Welcome to #{title}

具体的pug语法可参考官方文档https://github.com/pugjs/pug。Koa的实现就是把ejs改成pug，具体代码如下。

// index.js
const Koa = require('koa')
const views = require('koa-views')
const path = require('path')
const app = new Koa()

// 加载模板引擎
app.use(views(path.join(__dirname, './view'), {
  extension: 'pug' 
}))
app.use( async ( ctx ) => {
  let title = 'koa'
  await ctx.render('index', {
    title,
  })
})

app.listen(4000, () => {
  console.log('server is running, port is 4000')
})
上一章目录下一章