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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
js 编写规范
Mar 03 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
JavaScript 异步调用
2017/10/25 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python 实现插入排序算法
2012/06/05 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
教师岗位职责范本
2013/12/29 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
委托培训协议书
2014/11/17 职场文书
化验室安全管理制度
2015/08/06 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python