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中的Math 使用介绍
Apr 21 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
PHP 读取Postgresql中的数组
2013/04/14 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
js模糊查询实例分享
2016/12/26 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
小区文明倡议书
2014/05/16 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS