Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）

发布时间：2023-09-06 02:30责任编辑：白小东关键词：js Node

技术架构：

在Koa中应用Nunjucks，需要先把Nunjucks集成为符合Koa规格的中间件（Middleware），从本质上来讲，集成后的中间件的作用是给上下文对象绑定一个render(view, model)方法，这样，后面的Controller就可以调用这个方法来渲染模板了。

NPM社区有很多开源爱好者提供的第三方中间件。开发者可以根据实际情况自由选择，也可以像iKcamp团队一样，自己实现集成Nunjucks。本示例中，选用了koa-nunjucks-2模块。

安装koa-nunjucks-2，命令如下：

npm install koa-nunjucks-2 --save

此处的示例代码将会在5.1.3节的基础上继续操作。修改app.js并引入koa-nunjucks-2中间件，同时指定存放视图文件的目录views。项目结构如下：

├── controller/│ ????├── home.js ├── service/│ ????├── home.js├── views/├── app.js├── router.js

修改app.js文件，部分代码已省略。代码如下：

01 ????const nunjucks = require(‘koa-nunjucks-2‘); ??????// 引入模板引擎02 ????app.use(nunjucks({03 ?????????????ext: ‘html‘, ????????????????????????????????// 指定视图文件默认后缀04 ?????????????path: path.join(__dirname, ‘views‘), ???????????// 指定视图目录05 ?????????????nunjucksConfig: {06 ???????????????????????trimBlocks: true ????????????????????????????????// 开启转义，防止Xss漏洞07 ?????????????}08 ????}));

在之前的项目中，视图内容被写在了controller/home.js里面，现在需要把视图部分的代码迁移到views中。新建view/home/login.html，代码如下：

01 ????<!DOCTYPE html>02 ????<html lang="en">03 ?????????????<head>04 ???????????????????????<title></title>05 ???????????????????????<meta charset="UTF-8">06 ???????????????????????<meta name="viewport" content="width=device-width, initial-scale=1">07 ?????????????</head>08 ????<body>09 ????<form action="/user/login" method="post">10 ?????????????<input name="name" type="text" placeholder="请输入用户名：ikcamp" />11 ?????????????<br/>12 ?????????????<input name="password" type="text" placeholder="请输入密码：123456" />13 ?????????????<br/>14 ?????????????<button>{{btnName}}</button>15 ????</form>16 ????</body>17 ????</html>

重写controller/home.js中的login方法。代码如下：

login: async(ctx, next) => { ????????await ctx.render(‘home/login‘,{ ??????????????????btnName: ‘GoGoGo‘ ????????});},

注意：函数中使用了await语句来异步读取文件，因为需要等待，所以在读取文件之后再进行请求的响应。

打开浏览器并访问地址http://localhost:3000/user，将会看到一个简易版的登录视图。

对Nunjucks模板引擎的引入给本项目增加了View层。实现更完善的视图功能还需要增加静态资源目录等，如果能直接使用静态服务器的话更好。后面章节中，将会介绍如何增加静态文件以及对项目的视图进行美化。

本节在线视频地址https://camp.qianduan.group/koa2/2/1/6，二维码

喜欢就和我一起学习这本书《Koa与Node.js开发实战》吧！

Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）

原文地址：https://www.cnblogs.com/liqiang001/p/10268816.html

Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）

知识推荐