koa2使用ejs和nunjucks作为模板引擎的使用


Posted in Javascript onNovember 27, 2018

一、使用 ejs 作为模板引擎

koa2 如果使用 ejs、jade 这种作为模板引擎的话,直接使用 koa-views 进行模板加载即可。

比如使用 ejs :

安装:

yarn add koa-views ejs

使用:

在使用 render 的时候,需要进行异步文件模板读取,因此 ctx.render 需要使用 await

const app= require('koa')();
const koaViews= require('koa-views');
const path = require('path');

app.use(koaViews(path.join(__dirname, './view'), {
 extension: 'ejs'
}));

app.use( async ( ctx ) => {
 const title = "postbird";
 await ctx.render('index', {
 title
 });
});

app.listen(3000)

二、使用 nunjucks 作为模板引擎

我实在是讨厌 ejs 的模板引擎语法,觉得太弱也太麻烦,而且新版本中,去除了模板继承,很不方便。

我比较喜欢 nunjucks ,另外我发现了一个 aui-template 的模板引擎,语法使用起来很舒服,速度也很快,可以体验一下。

aui-template 文档地址:

http://aui.github.io/art-template/zh-cn/docs/

1、安装 koa-nunjucks-2

使用 nunjucks 作为模板引擎,不需要安装 koa-views。

并且可以借助别人封装好的中间件 koa-nunjucks-2 来实现,koa-nunjucks 这个名字已经被使用,但是作为很烂,也没维护。

有时间我会看看他的源码,怎么加载的 nunjucks

yarn add koa-nunjucks-2

2、使用 nunjucks

const koaNunjucks = require('koa-nunjucks-2');

app.use(koaNunjucks({
 ext: 'njk',
 path: path.join(__dirname, './views'),
 nunjucksConfig: {
 trimBlocks: true
 }
}));

3、渲染模板

同样,异步文件读取,需要使用 await 。

router.get('view', async (ctx) => {
 var food = {
 'ketchup': '5 tbsp',
 'mustard': '1 tbsp',
 'pickle': '0 tbsp'
 };
 await ctx.render('index',{title:'nunjucks',food});
});

4、模板语法

更多的语法可以看文档:

https://mozilla.github.io/nunjucks/cn/templating.html#for

<body>
 <h1>{{title}}</h1>
 <p>循环:</p>
 <ul>
 {% for key,value in food %}
  <li>{{key}} - {{value}}</li>
 {%endfor%}
 </ul>
</body>

三、效果

koa2使用ejs和nunjucks作为模板引擎的使用

四、问题

在使用 koa-nunjucks-2 的时候,发现一个问题:

app.use(nunjucks({})) 必须放在 app.use(router.routes()).use(router.allowedMethods()) 前面才能起作用,否则会报错 ctx.render() 不是一个 function。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
javascript读写json示例
Apr 11 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
node中的session的具体使用
Sep 14 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
js replace替换字符串同时替换多个方法
Nov 27 #Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 #Javascript
使用electron制作满屏心特效的示例代码
Nov 27 #Javascript
30分钟快速实现小程序语音识别功能
Nov 27 #Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 #Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 #Javascript
You might like
一个用php3编写的简单计数器
2006/10/09 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
js表头排序实现方法
2015/01/16 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
理解javascript正则表达式
2016/03/08 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python基于Selenium的web自动化框架
2019/07/14 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
介绍一下linux的文件权限
2012/02/15 面试题
大学生最新职业生涯规划书范文
2014/01/12 职场文书
节约电力资源的建议书
2014/03/12 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
忠诚教育心得体会
2014/09/03 职场文书
七一建党日演讲稿
2014/09/05 职场文书
党员三严三实心得体会
2014/10/13 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB