一. 使用ejs模板引擎
1. 安装所需包
# 在项目中下载koa-views包npm i koa-views# 在项目中下载ejs包npm i ejs
2. 代码实现
入口文件index.js：
const Koa = require('koa');const Router = require('koa-router');const app = new Koa();const router = new Router();// 1. 引入koa-viewsconst views = require('koa-views');// 2. 配置模板引擎中间件：views()第一个参数是视图模板所在的路径，第二个参数是应用ejs模板引擎app.use(views('views', { extension: 'ejs' })); // 若这样配置，模板的后缀名是.ejs//app.use(views('views', { map: { html: 'ejs' } })); // 若这样配置，模板的后缀名是.html// 我们需要在每个路由的render中都渲染一个公共的数据// 写一个中间件配置公共信息app.use(async (ctx, next) => {// 公共的数据要放在ctx.state中ctx.state = {userinfo: '张三',age: '18',}await next()})router.get('/', async (ctx, next) => {let title = '你好ejs'// 3. 异步渲染模板await ctx.render('index.ejs', {// 绑定数据title: title})})router.get('/news', async (ctx, next) => {let arr = ['111111', '22222', '444444']let content = "<h2>这是一个h2</h2>"let num = 123await ctx.render('news.ejs', {list: arr,content: content,num: num})});app.use(router.routes());app.use(router.allowedMethods());app.listen(3000, () => {console.log('starting at port 3000');});
/views/index.ejs：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ejs模板引擎</title></head><body><%- include('./public/header.ejs') %>这是一个ejs模板引擎<h2><%=title%>-----<%=userinfo%></h2></body></html>
/views/news.ejs：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ejs数据绑定</title></head><body><h2>引入外部模块</h2><%- include('./public/header.ejs') %><h2>ejs循环渲染数据</h2><ul><%for(var i=0;i<list.length;i++){%><li><%=list[i]%></li><%}%></ul><h2>绑定html数据</h2><%-content%><h2>条件判断</h2><% if(num>24){ %>大于24<%} else{ %> 小于24<%} %><h2>公共数据</h2><%=userinfo%></body></html>
/views/public/header.ejs：
<h1 class="title">这是一个头部的模块</h1>
二. 使用art-template模板引擎
art-templatehttp://aui.github.io/art-template/zh-cn/
原始语法和ejs一模一样都用<% %>，标准语法用的是{{ }}，这里代码示例用的是标准语法。
1. 安装所需包
npm install --save art-templatenpm install --save koa-art-template
2. 代码实现
入口文件 index.js：
const Koa = require('koa');const Router = require('koa-router');const app = new Koa();const router = new Router();const path = require('path');// 1. 引入koa-art-templateconst render = require('koa-art-template');// 2. 配置art-template模板引擎render(app, {root: path.join(__dirname, 'views'), // 视图的位置extname: '.html', // 后缀名debug: process.env.NODE_ENV !== 'production' // 是否开启调试模式});// 我们需要在每个路由的render中都渲染一个公共的数据// 写一个中间件配置公共信息app.use(async (ctx, next) => {// 公共的数据要放在ctx.state中ctx.state = {userinfo: '张三',age: '18',}await next()})router.get('/', async (ctx, next) => {let title = '你好koa-art-template'// 3. 异步渲染模板await ctx.render('index', {// 绑定数据title: title})})router.get('/news', async (ctx, next) => {let arr = ['111111', '22222', '444444']let content = "<h2>这是一个h2</h2>"let num = 123await ctx.render('news', {list: arr,content: content,num: num})});app.use(router.routes());app.use(router.allowedMethods());app.listen(3000, () => {console.log('starting at port 3000');});
/views/news.html：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据绑定</title></head><body><h2>引入外部模块</h2>{{include './public/header.html'}}<h2>绑定数据</h2>{{list.name}}<h2>公共数据</h2>{{userinfo}}<h2>绑定html数据</h2>{{@list.h}}<h2>条件判断</h2>{{if num>20}}<span>大于20</span>{{else}}<span>小于20</span>{{/if}}<h2>循环渲染数据</h2><ul>{{each list.data}}<li>{{$index}}--{{$value}}</li>{{/each}}</ul></body></html>
/views/public/header.html：
<h1 class="title">这是一个头部的模块</h1>
